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

fix(carousel): reading properties of undefined api

Browse Source
This commit is contained in:
Artemiy111 2024-06-14 20:17:42 +03:00
parent 88a93ce22e
commit 7c8e03d81e
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
View File

@ -24,12 +24,12 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
emblaApi.value?.scrollNext() emblaApi.value?.scrollNext()
} }
const canScrollNext = ref(true) const canScrollNext = ref(false)
const canScrollPrev = ref(true) const canScrollPrev = ref(false)
function onSelect(api: CarouselApi) { function onSelect(api?: CarouselApi) {
canScrollNext.value = api.canScrollNext() canScrollNext.value = api?.canScrollNext() || false
canScrollPrev.value = api.canScrollPrev() canScrollPrev.value = api?.canScrollPrev() || false
} }
onMounted(() => { onMounted(() => {

10
apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
View File

@ -24,12 +24,12 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
emblaApi.value?.scrollNext() emblaApi.value?.scrollNext()
} }
const canScrollNext = ref(true) const canScrollNext = ref(false)
const canScrollPrev = ref(true) const canScrollPrev = ref(false)
function onSelect(api: CarouselApi) { function onSelect(api?: CarouselApi) {
canScrollNext.value = api.canScrollNext() canScrollNext.value = api?.canScrollNext() || false
canScrollPrev.value = api.canScrollPrev() canScrollPrev.value = api?.canScrollPrev() || false
} }
onMounted(() => { onMounted(() => {

2
apps/www/src/public/registry/styles/default/carousel.json
View File

@ -40,7 +40,7 @@
}, },
{ {
"name": "useCarousel.ts", "name": "useCarousel.ts",
"content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts,\n orientation,\n plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(true)\n const canScrollPrev = ref(true)\n\n function onSelect(api: CarouselApi) {\n canScrollNext.value = api.canScrollNext()\n canScrollPrev.value = api.canScrollPrev()\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n" "content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts,\n orientation,\n plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(false)\n const canScrollPrev = ref(false)\n\n function onSelect(api?: CarouselApi) {\n canScrollNext.value = api?.canScrollNext() || false\n canScrollPrev.value = api?.canScrollPrev() || false\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
} }
], ],
"type": "components:ui" "type": "components:ui"

2
apps/www/src/public/registry/styles/new-york/carousel.json
View File

@ -40,7 +40,7 @@
}, },
{ {
"name": "useCarousel.ts", "name": "useCarousel.ts",
"content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts,\n orientation,\n plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(true)\n const canScrollPrev = ref(true)\n\n function onSelect(api: CarouselApi) {\n canScrollNext.value = api.canScrollNext()\n canScrollPrev.value = api.canScrollPrev()\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n" "content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts,\n orientation,\n plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(false)\n const canScrollPrev = ref(false)\n\n function onSelect(api?: CarouselApi) {\n canScrollNext.value = api?.canScrollNext() || false\n canScrollPrev.value = api?.canScrollPrev() || false\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
} }
], ],
"type": "components:ui" "type": "components:ui"