Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change text direction from staticly left to be justifing parent element, which will be right if the direction is rtl and left if the direction is ltr

Browse Source
This commit is contained in:
f.shuaib 2023-10-22 19:49:12 +02:00
parent 537416f88f
commit 33452aef4b
41 changed files with 69 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -171,7 +171,7 @@ watch(() => $route.path, (n) => {
<footer class="py-6 md:px-8 md:py-0">
<div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
<div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
<div class="text-center text-sm leading-loose text-muted-foreground md:text-justify">
<span class="inline-block">
Built and designed by
<a

2
apps/www/src/content/docs/components/date-picker.md
View File

@ -38,7 +38,7 @@ const date = ref<Date>()
<Button
:variant="'outline'"
:class="cn(
'w-[280px] justify-start text-left font-normal',
'w-[280px] justify-start text-justify font-normal',
!date && 'text-muted-foreground',
)"
>

2
apps/www/src/examples/dashboard/components/DateRangePicker.vue
View File

@ -26,7 +26,7 @@ const date = ref({
id="date"
:variant="'outline'"
:class="cn(
'w-[260px] justify-start text-left font-normal',
'w-[260px] justify-start text-justify font-normal',
!date && 'text-muted-foreground',
)"
>

2
apps/www/src/examples/forms/components/AccountForm.vue
View File

@ -99,7 +99,7 @@ async function onSubmit(values: any) {
<FormControl>
<Button
variant="outline" :class="cn(
'w-[280px] pl-3 text-left font-normal',
'w-[280px] pl-3 text-justify font-normal',
!value && 'text-muted-foreground',
)"
>

2
apps/www/src/examples/forms/components/SidebarNav.vue
View File

@ -43,7 +43,7 @@ const sidebarNavItems: Item[] = [
:href="item.href"
variant="ghost"
:class="cn(
'w-full text-left justify-start',
'w-full text-justify justify-start',
$route.path === `${item.href}.html` && 'bg-muted hover:bg-muted',
)"
>

2
apps/www/src/examples/playground/components/PresetShare.vue
View File

@ -19,7 +19,7 @@ import {
</Button>
</PopoverTrigger>
<PopoverContent align="end" class="w-[520px]">
<div class="flex flex-col space-y-2 text-center sm:text-left">
<div class="flex flex-col space-y-2 text-center sm:text-justify">
<h3 class="text-lg font-semibold">
Share preset
</h3>

2
apps/www/src/lib/registry/default/example/DatePickerDemo.vue
View File

@ -21,7 +21,7 @@ const date = ref<Date>()
<Button
:variant="'outline'"
:class="cn(
'w-[280px] justify-start text-left font-normal',
'w-[280px] justify-start text-justify font-normal',
!date && 'text-muted-foreground',
)"
>

2
apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
View File

@ -28,7 +28,7 @@ const date = ref<Date>()
<Button
variant="outline"
:class="cn(
'w-[280px] justify-start text-left font-normal',
'w-[280px] justify-start text-justify font-normal',
!date && 'text-muted-foreground',
)"
>

2
apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
View File

@ -26,7 +26,7 @@ const date = ref({
id="date"
:variant="'outline'"
:class="cn(
'w-[300px] justify-start text-left font-normal',
'w-[300px] justify-start text-justify font-normal',
!date && 'text-muted-foreground',
)"
>

16
apps/www/src/lib/registry/default/example/TypographyDemo.vue
View File

@ -71,12 +71,12 @@
<thead>
<tr class="m-0 border-t p-0 even:bg-muted">
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
King's Treasury
</th>
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
People's happiness
</th>
@ -85,36 +85,36 @@
<tbody>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Empty
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Overflowing
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Modest
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Satisfied
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Full
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Ecstatic
</td>

16
apps/www/src/lib/registry/default/example/TypographyTable.vue
View File

@ -4,12 +4,12 @@
<thead>
<tr class="m-0 border-t p-0 even:bg-muted">
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
King's Treasury
</th>
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
People's happiness
</th>
@ -18,36 +18,36 @@
<tbody>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Empty
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Overflowing
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Modest
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Satisfied
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Full
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Ecstatic
</td>

2
apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
View File

@ -11,7 +11,7 @@ const props = defineProps({
<template>
<div
:class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
:class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
>
<slot />
</div>

2
apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
View File

@ -10,7 +10,7 @@ const props = defineProps<DialogHeaderProps>()
<template>
<div
:class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
:class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
>
<slot />
</div>

2
apps/www/src/lib/registry/default/ui/form/FormLabel.vue
View File

@ -16,7 +16,7 @@ const { class: className, ...rest } = useAttrs()
<template>
<Label
:class="cn(
'block text-sm tracking-tight font-medium text-foreground text-left',
'block text-sm tracking-tight font-medium text-foreground text-justify',
error && 'text-destructive',
className ?? '',
)"

2
apps/www/src/lib/registry/default/ui/label/Label.vue
View File

@ -10,7 +10,7 @@ const props = defineProps<LabelProps & { class?: string }>()
v-bind="props"
:class="
cn(
'block text-sm tracking-tight font-medium text-foreground text-left',
'block text-sm tracking-tight font-medium text-foreground text-justify',
props.class,
)
"

2
apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
View File

@ -7,7 +7,7 @@ const props = defineProps<{ class?: string }>()
<template>
<div
:class="
cn('flex flex-col space-y-2 text-center sm:text-left', props.class)
cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)
"
>
<slot />

2
apps/www/src/lib/registry/default/ui/table/TableHead.vue
View File

@ -5,7 +5,7 @@ const props = defineProps<{ class?: string }>()
</script>
<template>
<th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
<th :class="cn('h-12 px-4 text-justify align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
<slot />
</th>
</template>

2
apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
View File

@ -21,7 +21,7 @@ const date = ref<Date>()
<Button
:variant="'outline'"
:class="cn(
'w-[280px] justify-start text-left font-normal',
'w-[280px] justify-start text-justify font-normal',
!date && 'text-muted-foreground',
)"
>

2
apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
View File

@ -28,7 +28,7 @@ const date = ref<Date>()
<Button
variant="outline"
:class="cn(
'w-[280px] justify-start text-left font-normal',
'w-[280px] justify-start text-justify font-normal',
!date && 'text-muted-foreground',
)"
>

2
apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
View File

@ -26,7 +26,7 @@ const date = ref({
id="date"
:variant="'outline'"
:class="cn(
'w-[300px] justify-start text-left font-normal',
'w-[300px] justify-start text-justify font-normal',
!date && 'text-muted-foreground',
)"
>

16
apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
View File

@ -71,12 +71,12 @@
<thead>
<tr class="m-0 border-t p-0 even:bg-muted">
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
King's Treasury
</th>
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
People's happiness
</th>
@ -85,36 +85,36 @@
<tbody>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Empty
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Overflowing
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Modest
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Satisfied
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Full
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Ecstatic
</td>

16
apps/www/src/lib/registry/new-york/example/TypographyTable.vue
View File

@ -4,12 +4,12 @@
<thead>
<tr class="m-0 border-t p-0 even:bg-muted">
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
King's Treasury
</th>
<th
class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
>
People's happiness
</th>
@ -18,36 +18,36 @@
<tbody>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Empty
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Overflowing
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Modest
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Satisfied
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Full
</td>
<td
class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
>
Ecstatic
</td>

2
apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
View File

@ -11,7 +11,7 @@ const props = defineProps({
<template>
<div
:class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
:class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
>
<slot />
</div>

2
apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
View File

@ -10,7 +10,7 @@ const props = defineProps<DialogHeaderProps>()
<template>
<div
:class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
:class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
>
<slot />
</div>

2
apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
View File

@ -11,7 +11,7 @@ const { error, formItemId } = useFormField()
<template>
<Label
:class="cn(
'block text-sm tracking-tight font-medium text-foreground text-left',
'block text-sm tracking-tight font-medium text-foreground text-justify',
error && 'text-destructive',
$attrs.class ?? '',
)"

2
apps/www/src/lib/registry/new-york/ui/label/Label.vue
View File

@ -10,7 +10,7 @@ const props = defineProps<LabelProps & { class?: string }>()
v-bind="props"
:class="
cn(
'block text-sm tracking-tight font-medium text-foreground text-left',
'block text-sm tracking-tight font-medium text-foreground text-justify',
props.class,
)
"

2
apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
View File

@ -7,7 +7,7 @@ const props = defineProps<{ class?: string }>()
<template>
<div
:class="
cn('flex flex-col space-y-2 text-center sm:text-left', props.class)
cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)
"
>
<slot />

2
apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
View File

@ -5,7 +5,7 @@ const props = defineProps<{ class?: string }>()
</script>
<template>
<th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
<th :class="cn('h-10 px-2 text-justify align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
<slot />
</th>
</template>

2
apps/www/src/public/registry/styles/default/alert-dialog.json
View File

@ -34,7 +34,7 @@
},
{
"name": "AlertDialogHeader.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
},
{
"name": "AlertDialogTitle.vue",

2
apps/www/src/public/registry/styles/default/dialog.json
View File

@ -25,7 +25,7 @@
},
{
"name": "DialogHeader.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
},
{
"name": "DialogTitle.vue",

2
apps/www/src/public/registry/styles/default/form.json
View File

@ -24,7 +24,7 @@
},
{
"name": "FormLabel.vue",
"content": "<script lang=\"ts\" setup>\nimport { useAttrs } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n error && 'text-destructive',\n className ?? '',\n )\"\n :for=\"formItemId\"\n v-bind=\"rest\"\n >\n <slot />\n </Label>\n</template>\n"
"content": "<script lang=\"ts\" setup>\nimport { useAttrs } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n 'block text-sm tracking-tight font-medium text-foreground text-justify',\n error && 'text-destructive',\n className ?? '',\n )\"\n :for=\"formItemId\"\n v-bind=\"rest\"\n >\n <slot />\n </Label>\n</template>\n"
},
{
"name": "FormMessage.vue",

2
apps/www/src/public/registry/styles/default/label.json
View File

@ -9,7 +9,7 @@
"files": [
{
"name": "Label.vue",
"content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n <Label\n v-bind=\"props\"\n :class=\"\n cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n <Label\n v-bind=\"props\"\n :class=\"\n cn(\n 'block text-sm tracking-tight font-medium text-foreground text-justify',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
},
{
"name": "index.ts",

2
apps/www/src/public/registry/styles/default/sheet.json
View File

@ -29,7 +29,7 @@
},
{
"name": "SheetHeader.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
},
{
"name": "SheetTitle.vue",

2
apps/www/src/public/registry/styles/default/table.json
View File

@ -31,7 +31,7 @@
},
{
"name": "TableHead.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n <slot />\n </th>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <th :class=\"cn('h-12 px-4 text-justify align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n <slot />\n </th>\n</template>\n"
},
{
"name": "TableHeader.vue",

2
apps/www/src/public/registry/styles/new-york/alert-dialog.json
View File

@ -34,7 +34,7 @@
},
{
"name": "AlertDialogHeader.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n class: {\n type: String,\n default: '',\n },\n})\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
},
{
"name": "AlertDialogTitle.vue",

2
apps/www/src/public/registry/styles/new-york/dialog.json
View File

@ -25,7 +25,7 @@
},
{
"name": "DialogHeader.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n <div\n :class=\"cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\"\n >\n <slot />\n </div>\n</template>\n"
},
{
"name": "DialogTitle.vue",

2
apps/www/src/public/registry/styles/new-york/form.json
View File

@ -24,7 +24,7 @@
},
{
"name": "FormLabel.vue",
"content": "<script lang=\"ts\" setup>\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n error && 'text-destructive',\n $attrs.class ?? '',\n )\"\n :for=\"formItemId\"\n >\n <slot />\n </Label>\n</template>\n"
"content": "<script lang=\"ts\" setup>\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n 'block text-sm tracking-tight font-medium text-foreground text-justify',\n error && 'text-destructive',\n $attrs.class ?? '',\n )\"\n :for=\"formItemId\"\n >\n <slot />\n </Label>\n</template>\n"
},
{
"name": "FormMessage.vue",

2
apps/www/src/public/registry/styles/new-york/label.json
View File

@ -9,7 +9,7 @@
"files": [
{
"name": "Label.vue",
"content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n <Label\n v-bind=\"props\"\n :class=\"\n cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n <Label\n v-bind=\"props\"\n :class=\"\n cn(\n 'block text-sm tracking-tight font-medium text-foreground text-justify',\n props.class,\n )\n \"\n >\n <slot />\n </Label>\n</template>\n"
},
{
"name": "index.ts",

2
apps/www/src/public/registry/styles/new-york/sheet.json
View File

@ -29,7 +29,7 @@
},
{
"name": "SheetHeader.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <div\n :class=\"\n cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\n \"\n >\n <slot />\n </div>\n</template>\n"
},
{
"name": "SheetTitle.vue",

2
apps/www/src/public/registry/styles/new-york/table.json
View File

@ -31,7 +31,7 @@
},
{
"name": "TableHead.vue",
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)\">\n <slot />\n </th>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n <th :class=\"cn('h-10 px-2 text-justify align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)\">\n <slot />\n </th>\n</template>\n"
},
{
"name": "TableHeader.vue",

2
packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue vendored
View File

@ -11,7 +11,7 @@ const props = defineProps({
<template>
<div
:class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
:class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
>
<slot />
</div>