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

fix: add rotation on rtl for chevrons and arrows

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

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

@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button'
<template>
<Button variant="outline" size="icon">
<ChevronRight class="w-4 h-4" />
<ChevronRight class="w-4 h-4 rtl:rotate-180" />
</Button>
</template>

8
apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
View File

@ -80,10 +80,10 @@ const vCalendarSlots = computed(() => {
<div class="relative">
<div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
<ChevronLeft class="w-4 h-4" />
<ChevronLeft class="w-4 h-4 rtl:rotate-180" />
</button>
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
<ChevronRight class="w-4 h-4" />
<ChevronRight class="w-4 h-4 rtl:rotate-180" />
</button>
</div>
@ -102,11 +102,11 @@ const vCalendarSlots = computed(() => {
</template>
<template #nav-prev-button>
<ChevronLeft />
<ChevronLeft class="rtl:rotate-180" />
</template>
<template #nav-next-button>
<ChevronRight />
<ChevronRight class="rtl:rotate-180" />
</template>
</DatePicker>
</div>

2
apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
View File

@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
@click="scrollNext"
>
<slot>
<ArrowRight class="h-4 w-4 text-current" />
<ArrowRight class="h-4 w-4 text-current rtl:rotate-180" />
</slot>
</Button>
</template>

2
apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
View File

@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
@click="scrollPrev"
>
<slot>
<ArrowLeft class="h-4 w-4 text-current" />
<ArrowLeft class="h-4 w-4 text-current rtl:rotate-180" />
</slot>
</Button>
</template>

2
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
View File

@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)"
>
<slot />
<ChevronRight class="ms-auto h-4 w-4" />
<ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
</ContextMenuSubTrigger>
</template>

2
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View File

@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)"
>
<slot />
<ChevronRight class="ms-auto h-4 w-4" />
<ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
</DropdownMenuSubTrigger>
</template>

2
apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
View File

@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)"
>
<slot />
<ChevronRight class="ms-auto h-4 w-4" />
<ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
</MenubarSubTrigger>
</template>

2
apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
View File

@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
<PaginationNext v-bind="delegatedProps">
<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
<slot>
<ChevronRight class="h-4 w-4" />
<ChevronRight class="h-4 w-4 rtl:rotate-180" />
</slot>
</Button>
</PaginationNext>

2
apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
View File

@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
<PaginationPrev v-bind="delegatedProps">
<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
<slot>
<ChevronLeft class="h-4 w-4" />
<ChevronLeft class="h-4 w-4 rtl:rotate-180" />
</slot>
</Button>
</PaginationPrev>

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

@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/new-york/ui/button'
<template>
<Button variant="outline" size="icon">
<ChevronRightIcon class="w-4 h-4" />
<ChevronRightIcon class="w-4 h-4 rtl:rotate-180" />
</Button>
</template>

8
apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
View File

@ -81,10 +81,10 @@ const vCalendarSlots = computed(() => {
<div class="relative">
<div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
<ChevronLeftIcon class="w-4 h-4" />
<ChevronLeftIcon class="w-4 h-4 rtl:rotate-180" />
</button>
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
<ChevronRightIcon class="w-4 h-4" />
<ChevronRightIcon class="w-4 h-4 rtl:rotate-180" />
</button>
</div>
@ -103,11 +103,11 @@ const vCalendarSlots = computed(() => {
</template>
<template #nav-prev-button>
<ChevronLeft />
<ChevronLeftIcon class="rtl:rotate-180" />
</template>
<template #nav-next-button>
<ChevronRight />
<ChevronRightIcon class="rtl:rotate-180" />
</template>
</DatePicker>
</div>

2
apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
View File

@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
@click="scrollNext"
>
<slot>
<ArrowRightIcon class="h-4 w-4 text-current" />
<ArrowRightIcon class="h-4 w-4 text-current rtl:rotate-180" />
</slot>
</Button>
</template>

2
apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
View File

@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
@click="scrollPrev"
>
<slot>
<ArrowLeftIcon class="h-4 w-4 text-current" />
<ArrowLeftIcon class="h-4 w-4 text-current rtl:rotate-180" />
</slot>
</Button>
</template>

2
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
View File

@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)"
>
<slot />
<ChevronRightIcon class="ms-auto h-4 w-4" />
<ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
</ContextMenuSubTrigger>
</template>

2
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View File

@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)"
>
<slot />
<ChevronRightIcon class="ms-auto h-4 w-4" />
<ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
</DropdownMenuSubTrigger>
</template>

2
apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
View File

@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)"
>
<slot />
<ChevronRightIcon class="ms-auto h-4 w-4" />
<ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
</MenubarSubTrigger>
</template>

2
apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
View File

@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
<PaginationFirst v-bind="delegatedProps">
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
<slot>
<DoubleArrowLeftIcon />
<DoubleArrowLeftIcon class="rtl:rotate-180" />
</slot>
</Button>
</PaginationFirst>

2
apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
View File

@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
<PaginationLast v-bind="delegatedProps">
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
<slot>
<DoubleArrowRightIcon />
<DoubleArrowRightIcon class="rtl:rotate-180" />
</slot>
</Button>
</PaginationLast>

2
apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
View File

@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
<PaginationNext v-bind="delegatedProps">
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
<slot>
<ChevronRightIcon />
<ChevronRightIcon class="rtl:rotate-180" />
</slot>
</Button>
</PaginationNext>

2
apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
View File

@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
<PaginationPrev v-bind="delegatedProps">
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
<slot>
<ChevronLeftIcon />
<ChevronLeftIcon class="rtl:rotate-180" />
</slot>
</Button>
</PaginationPrev>