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

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

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

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

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

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

@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)" )"
> >
<slot /> <slot />
<ChevronRight class="ms-auto h-4 w-4" /> <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
</MenubarSubTrigger> </MenubarSubTrigger>
</template> </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"> <PaginationNext v-bind="delegatedProps">
<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline"> <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
<slot> <slot>
<ChevronRight class="h-4 w-4" /> <ChevronRight class="h-4 w-4 rtl:rotate-180" />
</slot> </slot>
</Button> </Button>
</PaginationNext> </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"> <PaginationPrev v-bind="delegatedProps">
<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline"> <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
<slot> <slot>
<ChevronLeft class="h-4 w-4" /> <ChevronLeft class="h-4 w-4 rtl:rotate-180" />
</slot> </slot>
</Button> </Button>
</PaginationPrev> </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> <template>
<Button variant="outline" size="icon"> <Button variant="outline" size="icon">
<ChevronRightIcon class="w-4 h-4" /> <ChevronRightIcon class="w-4 h-4 rtl:rotate-180" />
</Button> </Button>
</template> </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 class="relative">
<div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]"> <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')"> <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>
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')"> <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> </button>
</div> </div>
@ -103,11 +103,11 @@ const vCalendarSlots = computed(() => {
</template> </template>
<template #nav-prev-button> <template #nav-prev-button>
<ChevronLeft /> <ChevronLeftIcon class="rtl:rotate-180" />
</template> </template>
<template #nav-next-button> <template #nav-next-button>
<ChevronRight /> <ChevronRightIcon class="rtl:rotate-180" />
</template> </template>
</DatePicker> </DatePicker>
</div> </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" @click="scrollNext"
> >
<slot> <slot>
<ArrowRightIcon class="h-4 w-4 text-current" /> <ArrowRightIcon class="h-4 w-4 text-current rtl:rotate-180" />
</slot> </slot>
</Button> </Button>
</template> </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" @click="scrollPrev"
> >
<slot> <slot>
<ArrowLeftIcon class="h-4 w-4 text-current" /> <ArrowLeftIcon class="h-4 w-4 text-current rtl:rotate-180" />
</slot> </slot>
</Button> </Button>
</template> </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 /> <slot />
<ChevronRightIcon class="ms-auto h-4 w-4" /> <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
</ContextMenuSubTrigger> </ContextMenuSubTrigger>
</template> </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 /> <slot />
<ChevronRightIcon class="ms-auto h-4 w-4" /> <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
</template> </template>

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

@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps)
)" )"
> >
<slot /> <slot />
<ChevronRightIcon class="ms-auto h-4 w-4" /> <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
</MenubarSubTrigger> </MenubarSubTrigger>
</template> </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"> <PaginationFirst v-bind="delegatedProps">
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline"> <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
<slot> <slot>
<DoubleArrowLeftIcon /> <DoubleArrowLeftIcon class="rtl:rotate-180" />
</slot> </slot>
</Button> </Button>
</PaginationFirst> </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"> <PaginationLast v-bind="delegatedProps">
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline"> <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
<slot> <slot>
<DoubleArrowRightIcon /> <DoubleArrowRightIcon class="rtl:rotate-180" />
</slot> </slot>
</Button> </Button>
</PaginationLast> </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"> <PaginationNext v-bind="delegatedProps">
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline"> <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
<slot> <slot>
<ChevronRightIcon /> <ChevronRightIcon class="rtl:rotate-180" />
</slot> </slot>
</Button> </Button>
</PaginationNext> </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"> <PaginationPrev v-bind="delegatedProps">
<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline"> <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
<slot> <slot>
<ChevronLeftIcon /> <ChevronLeftIcon class="rtl:rotate-180" />
</slot> </slot>
</Button> </Button>
</PaginationPrev> </PaginationPrev>