mirror of
https://github.com/doocs/md.git
synced 2024-11-28 13:36:32 +08:00
fix: hr label (#393)
This commit is contained in:
parent
ddf69f7d96
commit
c2e553baab
@ -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>
|
||||||
|
|
||||||
|
@ -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`,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
@ -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>()
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
||||||
|
@ -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>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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, ` `))
|
.replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, ` `))
|
||||||
|
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`, ``)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user