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

fix: change text-left to text-start to support rtl written text

Browse Source
This commit is contained in:
Raed Bahri 2024-03-05 09:18:09 +01:00
parent 71d97fac57
commit 7dfd0d4457
24 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -71,7 +71,7 @@ const isOpen = ref(false)
</Button> </Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerContent> <DrawerContent>
<DrawerHeader class="text-left"> <DrawerHeader class="text-start">
<DrawerTitle>Edit profile</DrawerTitle> <DrawerTitle>Edit profile</DrawerTitle>
<DrawerDescription> <DrawerDescription>
Make changes to your profile here. Click save when you're done. Make changes to your profile here. Click save when you're done.

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

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

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

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

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

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

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

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

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

@ -9,7 +9,7 @@ const props = defineProps<{
<template> <template>
<div <div
:class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)" :class="cn('flex flex-col gap-y-1.5 text-center sm:text-start', props.class)"
> >
<slot /> <slot />
</div> </div>

2
apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue
View File

@ -8,7 +8,7 @@ const props = defineProps<{
</script> </script>
<template> <template>
<div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)"> <div :class="cn('grid gap-1.5 p-4 text-center sm:text-start', props.class)">
<slot /> <slot />
</div> </div>
</template> </template>

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

@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
<template> <template>
<div <div
:class=" :class="
cn('flex flex-col gap-y-2 text-center sm:text-left', props.class) cn('flex flex-col gap-y-2 text-center sm:text-start', props.class)
" "
> >
<slot /> <slot />

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

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

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

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

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

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

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

@ -71,7 +71,7 @@ const isOpen = ref(false)
</Button> </Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerContent> <DrawerContent>
<DrawerHeader class="text-left"> <DrawerHeader class="text-start">
<DrawerTitle>Edit profile</DrawerTitle> <DrawerTitle>Edit profile</DrawerTitle>
<DrawerDescription> <DrawerDescription>
Make changes to your profile here. Click save when you're done. Make changes to your profile here. Click save when you're done.

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

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

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

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

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

@ -9,7 +9,7 @@ const props = defineProps<{
<template> <template>
<div <div
:class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)" :class="cn('flex flex-col gap-y-1.5 text-center sm:text-start', props.class)"
> >
<slot /> <slot />
</div> </div>

2
apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue
View File

@ -8,7 +8,7 @@ const props = defineProps<{
</script> </script>
<template> <template>
<div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)"> <div :class="cn('grid gap-1.5 p-4 text-center sm:text-start', props.class)">
<slot /> <slot />
</div> </div>
</template> </template>

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

@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
<template> <template>
<div <div
:class=" :class="
cn('flex flex-col gap-y-2 text-center sm:text-left', props.class) cn('flex flex-col gap-y-2 text-center sm:text-start', props.class)
" "
> >
<slot /> <slot />

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

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