fix: remove bg-white in separator in dark mode (#634)
This commit is contained in:
parent
f597d258b0
commit
cdfbd51190
|
|
@ -27,7 +27,7 @@ const delegatedProps = computed(() => {
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-if="props.label"
|
v-if="props.label"
|
||||||
:class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',
|
:class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
|
||||||
props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
|
props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
|
||||||
)"
|
)"
|
||||||
>{{ props.label }}</span>
|
>{{ props.label }}</span>
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ const delegatedProps = computed(() => {
|
||||||
v-if="props.label"
|
v-if="props.label"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',
|
'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
|
||||||
props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
|
props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Separator.vue",
|
"name": "Separator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'shrink-0 bg-border relative',\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n props.class,\n )\n \"\n >\n <span\n v-if=\"props.label\"\n :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',\n props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n )\"\n >{{ props.label }}</span>\n </Separator>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'shrink-0 bg-border relative',\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n props.class,\n )\n \"\n >\n <span\n v-if=\"props.label\"\n :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n )\"\n >{{ props.label }}</span>\n </Separator>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "Separator.vue",
|
"name": "Separator.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'shrink-0 bg-border relative',\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n props.class,\n )\n \"\n >\n <span\n v-if=\"props.label\"\n :class=\"\n cn(\n 'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',\n props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n )\n \"\n >{{ props.label }}</span>\n </Separator>\n</template>\n"
|
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'shrink-0 bg-border relative',\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n props.class,\n )\n \"\n >\n <span\n v-if=\"props.label\"\n :class=\"\n cn(\n 'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n )\n \"\n >{{ props.label }}</span>\n </Separator>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"name": "index.ts",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user