fix: hr label (#393)

This commit is contained in:
Libin YANG 2024-09-08 20:15:35 +08:00 committed by GitHub
parent ddf69f7d96
commit c2e553baab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 35 additions and 38 deletions

View File

@ -5,13 +5,13 @@ import { type ButtonVariants, buttonVariants } from '.'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
interface Props extends PrimitiveProps { interface Props extends PrimitiveProps {
variant?: ButtonVariants['variant'] variant?: ButtonVariants[`variant`]
size?: ButtonVariants['size'] size?: ButtonVariants[`size`]
class?: HTMLAttributes['class'] class?: HTMLAttributes[`class`]
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
as: 'button', as: `button`,
}) })
</script> </script>

View File

@ -3,31 +3,31 @@ import { type VariantProps, cva } from 'class-variance-authority'
export { default as Button } from './Button.vue' export { default as Button } from './Button.vue'
export const buttonVariants = cva( export const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', `inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,
{ {
variants: { variants: {
variant: { variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90', default: `bg-primary text-primary-foreground hover:bg-primary/90`,
destructive: destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90', `bg-destructive text-destructive-foreground hover:bg-destructive/90`,
outline: outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground', `border border-input bg-background hover:bg-accent hover:text-accent-foreground`,
secondary: secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80', `bg-secondary text-secondary-foreground hover:bg-secondary/80`,
ghost: 'hover:bg-accent hover:text-accent-foreground', ghost: `hover:bg-accent hover:text-accent-foreground`,
link: 'text-primary underline-offset-4 hover:underline', link: `text-primary underline-offset-4 hover:underline`,
}, },
size: { size: {
default: 'h-10 px-4 py-2', default: `h-10 px-4 py-2`,
xs: 'h-7 rounded px-2', xs: `h-7 rounded px-2`,
sm: 'h-9 rounded-md px-3', sm: `h-9 rounded-md px-3`,
lg: 'h-11 rounded-md px-8', lg: `h-11 rounded-md px-8`,
icon: 'h-10 w-10', icon: `h-10 w-10`,
}, },
}, },
defaultVariants: { defaultVariants: {
variant: 'default', variant: `default`,
size: 'default', size: `default`,
}, },
}, },
) )

View File

@ -14,9 +14,9 @@ defineOptions({
}) })
const props = withDefaults( const props = withDefaults(
defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), defineProps<PopoverContentProps & { class?: HTMLAttributes[`class`] }>(),
{ {
align: 'center', align: `center`,
sideOffset: 4, sideOffset: 4,
}, },
) )

View File

@ -16,9 +16,9 @@ defineOptions({
}) })
const props = withDefaults( const props = withDefaults(
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), defineProps<SelectContentProps & { class?: HTMLAttributes[`class`] }>(),
{ {
position: 'popper', position: `popper`,
}, },
) )
const emits = defineEmits<SelectContentEmits>() const emits = defineEmits<SelectContentEmits>()

View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { SelectGroup, type SelectGroupProps } from 'radix-vue' import { SelectGroup, type SelectGroupProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectGroupProps & { class?: HTMLAttributes[`class`] }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props

View File

@ -10,7 +10,7 @@ import {
import { Check } from 'lucide-vue-next' import { Check } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectItemProps & { class?: HTMLAttributes[`class`] }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -31,7 +31,7 @@ const forwardedProps = useForwardProps(delegatedProps)
) )
" "
> >
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
<SelectItemIndicator> <SelectItemIndicator>
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />
</SelectItemIndicator> </SelectItemIndicator>

View File

@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
import { SelectLabel, type SelectLabelProps } from 'radix-vue' import { SelectLabel, type SelectLabelProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectLabelProps & { class?: HTMLAttributes[`class`] }>()
</script> </script>
<template> <template>

View File

@ -4,7 +4,7 @@ import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardPro
import { ChevronDown } from 'lucide-vue-next' import { ChevronDown } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes[`class`] }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props

View File

@ -4,7 +4,7 @@ import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps }
import { ChevronUp } from 'lucide-vue-next' import { ChevronUp } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes[`class`] }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props

View File

@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue' import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes[`class`] }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props

View File

@ -4,7 +4,7 @@ import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } f
import { ChevronDown } from 'lucide-vue-next' import { ChevronDown } from 'lucide-vue-next'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes[`class`] }>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps)
> >
<slot /> <slot />
<SelectIcon as-child> <SelectIcon as-child>
<ChevronDown class="w-4 h-4 opacity-50 shrink-0" /> <ChevronDown class="h-4 w-4 shrink-0 opacity-50" />
</SelectIcon> </SelectIcon>
</SelectTrigger> </SelectTrigger>
</template> </template>

View File

@ -16,7 +16,6 @@ function createRenderer(display) {
if (display) { if (display) {
return `<section style="text-align: center; overflow: auto;">${svg.outerHTML}</section>` return `<section style="text-align: center; overflow: auto;">${svg.outerHTML}</section>`
} }
return `<span style="vertical-align: middle; line-height: 1;">${svg.outerHTML}</span>` return `<span style="vertical-align: middle; line-height: 1;">${svg.outerHTML}</span>`
} }
} }

View File

@ -100,9 +100,6 @@ export function initRenderer(opts: IOpts) {
} }
function styledContent(styleLabel: string, content: string, tagName?: string): string { function styledContent(styleLabel: string, content: string, tagName?: string): string {
if (!content) {
return ``
}
const tag = tagName ?? styleLabel const tag = tagName ?? styleLabel
return `<${tag} ${styles(styleLabel)}>${content}</${tag}>` return `<${tag} ${styles(styleLabel)}>${content}</${tag}>`
} }
@ -172,8 +169,9 @@ export function initRenderer(opts: IOpts) {
.replace(/\r\n/g, `<br/>`) .replace(/\r\n/g, `<br/>`)
.replace(/\n/g, `<br/>`) .replace(/\n/g, `<br/>`)
.replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, `&nbsp;`)) .replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, `&nbsp;`))
const span = `<span class="mac-sign" style="padding: 10px 14px 0;" hidden>${macCodeSvg}</span>`
return `<pre class="hljs code__pre" ${styles(`code_pre`)}><span class="mac-sign" style="padding: 10px 14px 0;" hidden>${macCodeSvg}</span><code class="language-${lang}" ${styles(`code`)}>${highlighted}</code></pre>` const code = `<code class="language-${lang}" ${styles(`code`)}>${highlighted}</code>`
return `<pre class="hljs code__pre" ${styles(`code_pre`)}>${span}${code}</pre>`
}, },
codespan({ text }: Tokens.Codespan): string { codespan({ text }: Tokens.Codespan): string {
@ -254,7 +252,7 @@ export function initRenderer(opts: IOpts) {
return styledContent(`td`, text) return styledContent(`td`, text)
}, },
hr(): string { hr(_: Tokens.Hr): string {
return styledContent(`hr`, ``) return styledContent(`hr`, ``)
}, },
} }