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

chore: prevent duplicate classes by using class as prop

Browse Source
This commit is contained in:
wasimTQ 2024-01-08 09:48:32 +05:30
parent cbbc3c15bf
commit 734079a1bc
12 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import { useProvideCarousel } from './useCarousel'
import type { CarouselEmits, CarouselProps } from './interface'
import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
const props = withDefaults(defineProps<CarouselProps>(), {
const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
orientation: 'horizontal',
})
@ -33,7 +33,7 @@ function onKeyDown(event: KeyboardEvent) {
<template>
<div
:class="cn('relative', $attrs.class ?? '')"
:class="cn('relative', props.class)"
role="region"
aria-roledescription="carousel"
tabindex="0"

5
apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
View File

@ -1,7 +1,10 @@
<script setup lang="ts">
import type { WithClassAsProps } from './interface'
import { useCarousel } from './useCarousel'
import { cn } from '@/lib/utils'
const props = defineProps<WithClassAsProps>()
const { carouselRef, orientation } = useCarousel()
</script>
@ -12,7 +15,7 @@ const { carouselRef, orientation } = useCarousel()
cn(
'flex',
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
$attrs.class ?? '',
props.class,
)"
>
<slot />

5
apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
View File

@ -1,7 +1,10 @@
<script setup lang="ts">
import type { WithClassAsProps } from './interface'
import { useCarousel } from './useCarousel'
import { cn } from '@/lib/utils'
const props = defineProps<WithClassAsProps>()
const { orientation } = useCarousel()
</script>
@ -12,7 +15,7 @@ const { orientation } = useCarousel()
:class="cn(
'min-w-0 shrink-0 grow-0 basis-full',
orientation === 'horizontal' ? 'pl-4' : 'pt-4',
$attrs.class ?? '',
props.class,
)"
>
<slot />

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

@ -1,9 +1,12 @@
<script setup lang="ts">
import { ChevronRight } from 'lucide-vue-next'
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/default/ui/button'
const props = defineProps<WithClassAsProps>()
const { orientation, canScrollNext, scrollNext } = useCarousel()
</script>
@ -15,7 +18,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
orientation === 'horizontal'
? '-right-12 top-1/2 -translate-y-1/2'
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
$attrs.class ?? '',
props.class,
)"
variant="outline"
@click="scrollNext"

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

@ -1,9 +1,12 @@
<script setup lang="ts">
import { ChevronLeft } from 'lucide-vue-next'
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/default/ui/button'
const props = defineProps<WithClassAsProps>()
const { orientation, canScrollPrev, scrollPrev } = useCarousel()
</script>
@ -15,7 +18,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
orientation === 'horizontal'
? '-left-12 top-1/2 -translate-y-1/2'
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
$attrs.class ?? '',
props.class,
)"
variant="outline"
@click="scrollPrev"

5
apps/www/src/lib/registry/default/ui/carousel/interface.ts
View File

@ -3,6 +3,7 @@ import type {
EmblaOptionsType as CarouselOptions,
EmblaPluginType as CarouselPlugin,
} from 'embla-carousel'
import type { HTMLAttributes } from 'vue'
export interface CarouselProps {
opts?: CarouselOptions
@ -13,3 +14,7 @@ export interface CarouselProps {
export interface CarouselEmits {
(e: 'init-api', payload: CarouselApi): void
}
export interface WithClassAsProps {
class?: HTMLAttributes['class']
}

6
apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import { useProvideCarousel } from './useCarousel'
import type { CarouselEmits, CarouselProps } from './interface'
import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
const props = withDefaults(defineProps<CarouselProps>(), {
const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
orientation: 'horizontal',
})
@ -33,7 +33,7 @@ function onKeyDown(event: KeyboardEvent) {
<template>
<div
:class="cn('relative', $attrs.class ?? '')"
:class="cn('relative', props.class)"
role="region"
aria-roledescription="carousel"
tabindex="0"

5
apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
View File

@ -1,7 +1,10 @@
<script setup lang="ts">
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
const props = defineProps<WithClassAsProps>()
const { carouselRef, orientation } = useCarousel()
</script>
@ -12,7 +15,7 @@ const { carouselRef, orientation } = useCarousel()
cn(
'flex',
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
$attrs.class ?? '',
props.class,
)"
>
<slot />

5
apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
View File

@ -1,7 +1,10 @@
<script setup lang="ts">
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
const props = defineProps<WithClassAsProps>()
const { orientation } = useCarousel()
</script>
@ -12,7 +15,7 @@ const { orientation } = useCarousel()
:class="cn(
'min-w-0 shrink-0 grow-0 basis-full',
orientation === 'horizontal' ? 'pl-4' : 'pt-4',
$attrs.class ?? '',
props.class,
)"
>
<slot />

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

@ -1,9 +1,12 @@
<script setup lang="ts">
import { ChevronRightIcon } from '@radix-icons/vue'
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/new-york/ui/button'
const props = defineProps<WithClassAsProps>()
const { orientation, canScrollNext, scrollNext } = useCarousel()
</script>
@ -15,7 +18,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
orientation === 'horizontal'
? '-right-12 top-1/2 -translate-y-1/2'
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
$attrs.class ?? '',
props.class,
)"
variant="outline"
@click="scrollNext"

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

@ -1,9 +1,12 @@
<script setup lang="ts">
import { ChevronLeftIcon } from '@radix-icons/vue'
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
import { Button } from '@/lib/registry/new-york/ui/button'
const props = defineProps<WithClassAsProps>()
const { orientation, canScrollPrev, scrollPrev } = useCarousel()
</script>
@ -15,7 +18,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
orientation === 'horizontal'
? '-left-12 top-1/2 -translate-y-1/2'
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
$attrs.class ?? '',
props.class,
)"
variant="outline"
@click="scrollPrev"

5
apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
View File

@ -3,6 +3,7 @@ import type {
EmblaOptionsType as CarouselOptions,
EmblaPluginType as CarouselPlugin,
} from 'embla-carousel'
import type { HTMLAttributes } from 'vue'
export interface CarouselProps {
opts?: CarouselOptions
@ -13,3 +14,7 @@ export interface CarouselProps {
export interface CarouselEmits {
(e: 'init-api', payload: CarouselApi): void
}
export interface WithClassAsProps {
class?: HTMLAttributes['class']
}