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
:variant="'outline'"
:class="cn(
'w-[280px] justify-start text-left font-normal',
'w-[280px] justify-start text-start 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-start 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-start font-normal',
!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
:variant="'outline'"
:class="cn(
'w-[280px] justify-start text-left font-normal',
'w-[280px] justify-start text-start font-normal',
!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>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader class="text-left">
<DrawerHeader class="text-start">
<DrawerTitle>Edit profile</DrawerTitle>
<DrawerDescription>
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"
:variant="'outline'"
:class="cn(
'w-[300px] justify-start text-left font-normal',
'w-[300px] justify-start text-start 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-start 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-start 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-start [&[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-start [&[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-start [&[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-start [&[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-start [&[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-start [&[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-start 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-start 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-start [&[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-start [&[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-start [&[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-start [&[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-start [&[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-start [&[align=center]]:text-center [&[align=right]]:text-right"
>
Ecstatic
</td>

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

@ -9,7 +9,7 @@ const props = defineProps<{
<template>
<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 />
</div>

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

@ -9,7 +9,7 @@ const props = defineProps<{
<template>
<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 />
</div>

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

@ -8,7 +8,7 @@ const props = defineProps<{
</script>
<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 />
</div>
</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>
<div
: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 />

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

@ -8,7 +8,7 @@ const props = defineProps<{
</script>
<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 />
</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-start 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-start 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-start font-normal',
!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
:variant="'outline'"
:class="cn(
'w-[280px] justify-start text-left font-normal',
'w-[280px] justify-start text-start font-normal',
!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>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader class="text-left">
<DrawerHeader class="text-start">
<DrawerTitle>Edit profile</DrawerTitle>
<DrawerDescription>
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"
:variant="'outline'"
:class="cn(
'w-[300px] justify-start text-left font-normal',
'w-[300px] justify-start text-start font-normal',
!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>
<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 />
</div>

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

@ -9,7 +9,7 @@ const props = defineProps<{
<template>
<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 />
</div>

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

@ -8,7 +8,7 @@ const props = defineProps<{
</script>
<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 />
</div>
</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>
<div
: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 />

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

@ -8,7 +8,7 @@ const props = defineProps<{
</script>
<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 />
</th>
</template>