@byyuurin/ui 0.0.10 → 0.0.11

package/dist/runtime/components/Carousel.vue

@@ -1,254 +1,142 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
-import type { AutoHeightOptionsType } from 'embla-carousel-auto-height'
-import type { AutoScrollOptionsType } from 'embla-carousel-auto-scroll'
-import type { AutoplayOptionsType } from 'embla-carousel-autoplay'
-import type { ClassNamesOptionsType } from 'embla-carousel-class-names'
-import type { FadeOptionsType } from 'embla-carousel-fade'
-import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
-import type { AcceptableValue, PrimitiveProps } from 'reka-ui'
-import type { carousel } from '../theme'
-import type { ButtonProps, ComponentAttrs } from '../types'
+<script>
 
-export type CarouselItem = AcceptableValue
-
-export interface CarouselSlots<T extends CarouselItem = CarouselItem> {
-  default?: (props: { item: T, index: number }) => any
-}
-
-type CarouselVariants = VariantProps<typeof carousel>
-
-export interface CarouselProps<T extends CarouselItem = CarouselItem> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  /**
-   * Configure the prev button when arrows are enabled.
-   * @default { size: 'md', variant: 'link' }
-   */
-  prev?: ButtonProps
-  /**
-   * The icon displayed in the prev button.
-   * @default app.icons.chevronLeft
-   */
-  prevIcon?: string
-  /**
-   * Configure the next button when arrows are enabled.
-   * @default { size: 'md', variant: 'link' }
-   */
-  next?: ButtonProps
-  /**
-   * The icon displayed in the next button.
-   * @default app.icons.chevronRight
-   */
-  nextIcon?: string
-  /**
-   * Display prev and next buttons to scroll the carousel.
-   * @default false
-   */
-  arrows?: boolean
-  /**
-   * Display dots to scroll to a specific slide.
-   * @default false
-   */
-  dots?: boolean
-  orientation?: CarouselVariants['orientation']
-  items?: T[]
-  /**
-   * Enable Autoplay plugin
-   * @link https://www.embla-carousel.com/plugins/autoplay/
-   */
-  autoplay?: boolean | AutoplayOptionsType
-  /**
-   * Enable Auto Scroll plugin
-   * @link https://www.embla-carousel.com/plugins/auto-scroll/
-   */
-  autoScroll?: boolean | AutoScrollOptionsType
-  /**
-   * Enable Auto Height plugin
-   * @link https://www.embla-carousel.com/plugins/auto-height/
-   */
-  autoHeight?: boolean | AutoHeightOptionsType
-  /**
-   * Enable Class Names plugin
-   * @link https://www.embla-carousel.com/plugins/class-names/
-   */
-  classNames?: boolean | ClassNamesOptionsType
-  /**
-   * Enable Fade plugin
-   * @link https://www.embla-carousel.com/plugins/fade/
-   */
-  fade?: boolean | FadeOptionsType
-  /**
-   * Enable Wheel Gestures plugin
-   * @link https://www.embla-carousel.com/plugins/wheel-gestures/
-   */
-  wheelGestures?: boolean | WheelGesturesPluginOptions
-}
 </script>
 
-<script setup lang="ts" generic="T extends CarouselItem">
-import { computedAsync, reactivePick } from '@vueuse/core'
-import useEmblaCarousel from 'embla-carousel-vue'
-import { Primitive, useForwardProps } from 'reka-ui'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useLocale } from '../composables/useLocale'
-import { useTheme } from '../composables/useTheme'
-import Button from './Button.vue'
-
-const props = withDefaults(defineProps<CarouselProps<T>>(), {
-  orientation: 'horizontal',
-  arrows: false,
-  dots: false,
-
-  // Embla Options
-  active: true,
-  align: 'center',
-  breakpoints: () => ({}),
-  containScroll: 'trimSnaps',
-  dragFree: false,
-  dragThreshold: 10,
-  duration: 25,
-  inViewThreshold: 0,
-  loop: false,
-  skipSnaps: false,
-  slidesToScroll: 1,
-  startIndex: 0,
-  watchDrag: true,
-  watchResize: true,
-  watchSlides: true,
-  watchFocus: true,
-
-  // Embla Plugins
-  autoplay: false,
-  autoScroll: false,
-  autoHeight: false,
-  classNames: false,
-  fade: false,
-  wheelGestures: false,
-})
-defineSlots<CarouselSlots<T>>()
-
-const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
-
-const { t, dir } = useLocale()
-const { theme, generateStyle } = useTheme()
-const style = computed(() => generateStyle('carousel', props))
-
-const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
-const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
-
-const options = computed<EmblaOptionsType>(() => ({
-  ...(props.fade ? { align: 'center', containScroll: false } : {}),
+<script setup>
+import { computedAsync, reactivePick } from "@vueuse/core";
+import useEmblaCarousel from "embla-carousel-vue";
+import { Primitive, useForwardProps } from "reka-ui";
+import { computed, onMounted, ref, watch } from "vue";
+import { useLocale } from "../composables/useLocale";
+import { useTheme } from "../composables/useTheme";
+import Button from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  prev: { type: Object, required: false },
+  prevIcon: { type: String, required: false },
+  next: { type: Object, required: false },
+  nextIcon: { type: String, required: false },
+  arrows: { type: Boolean, required: false, default: false },
+  dots: { type: Boolean, required: false, default: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  items: { type: Array, required: false },
+  autoplay: { type: [Boolean, Object], required: false, default: false },
+  autoScroll: { type: [Boolean, Object], required: false, default: false },
+  autoHeight: { type: [Boolean, Object], required: false, default: false },
+  classNames: { type: [Boolean, Object], required: false, default: false },
+  fade: { type: [Boolean, Object], required: false, default: false },
+  wheelGestures: { type: Boolean, required: false, skipCheck: true, default: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  align: { type: [String, Function], required: false, default: "center" },
+  containScroll: { type: [Boolean, String], required: false, default: "trimSnaps" },
+  slidesToScroll: { type: [String, Number], required: false, default: 1 },
+  dragFree: { type: Boolean, required: false, default: false },
+  dragThreshold: { type: Number, required: false, default: 10 },
+  inViewThreshold: { type: null, required: false, default: 0 },
+  loop: { type: Boolean, required: false, default: false },
+  skipSnaps: { type: Boolean, required: false, default: false },
+  duration: { type: Number, required: false, default: 25 },
+  startIndex: { type: Number, required: false, default: 0 },
+  watchDrag: { type: [Boolean, Function], required: false, default: true },
+  watchResize: { type: [Boolean, Function], required: false, default: true },
+  watchSlides: { type: [Boolean, Function], required: false, default: true },
+  watchFocus: { type: [Boolean, Function], required: false, default: true },
+  active: { type: Boolean, required: false, default: true },
+  breakpoints: { type: Object, required: false, default: () => ({}) }
+});
+defineSlots();
+const rootProps = useForwardProps(reactivePick(props, "active", "align", "breakpoints", "containScroll", "dragFree", "dragThreshold", "duration", "inViewThreshold", "loop", "skipSnaps", "slidesToScroll", "startIndex", "watchDrag", "watchResize", "watchSlides", "watchFocus"));
+const { t, dir } = useLocale();
+const { theme, generateStyle } = useTheme();
+const style = computed(() => generateStyle("carousel", props));
+const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft));
+const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight));
+const options = computed(() => ({
+  ...props.fade ? { align: "center", containScroll: false } : {},
   ...rootProps.value,
-  axis: props.orientation === 'horizontal' ? 'x' : 'y',
-  direction: dir.value === 'rtl' ? 'rtl' : 'ltr',
-}))
-
-const plugins = computedAsync<EmblaPluginType[]>(async () => {
-  const plugins: EmblaPluginType[] = []
-
+  axis: props.orientation === "horizontal" ? "x" : "y",
+  direction: dir.value === "rtl" ? "rtl" : "ltr"
+}));
+const plugins = computedAsync(async () => {
+  const plugins2 = [];
   if (props.autoplay) {
-    const AutoplayPlugin = await import('embla-carousel-autoplay').then((r) => r.default)
-    plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
+    const AutoplayPlugin = await import("embla-carousel-autoplay").then((r) => r.default);
+    plugins2.push(AutoplayPlugin(typeof props.autoplay === "boolean" ? {} : props.autoplay));
   }
-
   if (props.autoScroll) {
-    const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then((r) => r.default)
-    plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
+    const AutoScrollPlugin = await import("embla-carousel-auto-scroll").then((r) => r.default);
+    plugins2.push(AutoScrollPlugin(typeof props.autoScroll === "boolean" ? {} : props.autoScroll));
   }
-
   if (props.autoHeight) {
-    const AutoHeightPlugin = await import('embla-carousel-auto-height').then((r) => r.default)
-    plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
+    const AutoHeightPlugin = await import("embla-carousel-auto-height").then((r) => r.default);
+    plugins2.push(AutoHeightPlugin(typeof props.autoHeight === "boolean" ? {} : props.autoHeight));
   }
-
   if (props.classNames) {
-    const ClassNamesPlugin = await import('embla-carousel-class-names').then((r) => r.default)
-    plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
+    const ClassNamesPlugin = await import("embla-carousel-class-names").then((r) => r.default);
+    plugins2.push(ClassNamesPlugin(typeof props.classNames === "boolean" ? {} : props.classNames));
   }
-
   if (props.fade) {
-    const FadePlugin = await import('embla-carousel-fade').then((r) => r.default)
-    plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
+    const FadePlugin = await import("embla-carousel-fade").then((r) => r.default);
+    plugins2.push(FadePlugin(typeof props.fade === "boolean" ? {} : props.fade));
   }
-
   if (props.wheelGestures) {
-    const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
-    plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
+    const { WheelGesturesPlugin } = await import("embla-carousel-wheel-gestures");
+    plugins2.push(WheelGesturesPlugin(typeof props.wheelGestures === "boolean" ? {} : props.wheelGestures));
   }
-
-  return plugins
-})
-
-const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)
-
+  return plugins2;
+});
+const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value);
 watch([options, plugins], () => {
-  emblaApi.value?.reInit(options.value, plugins.value)
-})
-
+  emblaApi.value?.reInit(options.value, plugins.value);
+});
 function scrollPrev() {
-  emblaApi.value?.scrollPrev()
+  emblaApi.value?.scrollPrev();
 }
-
 function scrollNext() {
-  emblaApi.value?.scrollNext()
+  emblaApi.value?.scrollNext();
 }
-
-function scrollTo(index: number) {
-  emblaApi.value?.scrollTo(index)
+function scrollTo(index) {
+  emblaApi.value?.scrollTo(index);
 }
-
-function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
-  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
-
+function onKeyDown(event) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
   if (event.key === prevKey) {
-    event.preventDefault()
-    scrollPrev()
-
-    return
+    event.preventDefault();
+    scrollPrev();
+    return;
   }
-
   if (event.key === nextKey) {
-    event.preventDefault()
-    scrollNext()
+    event.preventDefault();
+    scrollNext();
   }
 }
-
-const canScrollNext = ref(false)
-const canScrollPrev = ref(false)
-const selectedIndex = ref<number>(0)
-const scrollSnaps = ref<number[]>([])
-
-function onInit(api: EmblaCarouselType) {
-  scrollSnaps.value = api?.scrollSnapList() || []
+const canScrollNext = ref(false);
+const canScrollPrev = ref(false);
+const selectedIndex = ref(0);
+const scrollSnaps = ref([]);
+function onInit(api) {
+  scrollSnaps.value = api?.scrollSnapList() || [];
 }
-
-function onSelect(api: EmblaCarouselType) {
-  canScrollNext.value = api?.canScrollNext() || false
-  canScrollPrev.value = api?.canScrollPrev() || false
-  selectedIndex.value = api?.selectedScrollSnap() || 0
+function onSelect(api) {
+  canScrollNext.value = api?.canScrollNext() || false;
+  canScrollPrev.value = api?.canScrollPrev() || false;
+  selectedIndex.value = api?.selectedScrollSnap() || 0;
 }
-
 onMounted(() => {
   if (!emblaApi.value)
-    return
-
-  emblaApi.value?.on('init', onInit)
-  emblaApi.value?.on('init', onSelect)
-  emblaApi.value?.on('reInit', onInit)
-  emblaApi.value?.on('reInit', onSelect)
-  emblaApi.value?.on('select', onSelect)
-})
-
+    return;
+  emblaApi.value?.on("init", onInit);
+  emblaApi.value?.on("init", onSelect);
+  emblaApi.value?.on("reInit", onInit);
+  emblaApi.value?.on("reInit", onSelect);
+  emblaApi.value?.on("select", onSelect);
+});
 defineExpose({
   emblaRef,
-  emblaApi,
-})
+  emblaApi
+});
 </script>
 
 <template>
@@ -258,32 +146,35 @@ defineExpose({
     aria-roledescription="carousel"
     tabindex="0"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    data-part="root"
     @keydown="onKeyDown"
   >
-    <div ref="emblaRef" :class="style.viewport({ class: props.ui?.viewport })">
-      <div :class="style.container({ class: props.ui?.container })">
+    <div ref="emblaRef" :class="style.viewport({ class: props.ui?.viewport })" data-part="viewport">
+      <div :class="style.container({ class: props.ui?.container })" data-part="container">
         <div
           v-for="(item, index) in props.items"
           :key="index"
           role="group"
           aria-roledescription="slide"
           :class="style.item({ class: props.ui?.item })"
+          data-part="item"
         >
           <slot :item="item" :index="index"></slot>
         </div>
       </div>
     </div>
 
-    <div v-if="props.arrows || props.dots" :class="style.controls({ class: props.ui?.controls })">
-      <div v-if="props.arrows" :class="style.arrows({ class: props.ui?.arrows })">
+    <div v-if="props.arrows || props.dots" :class="style.controls({ class: props.ui?.controls })" data-part="controls">
+      <div v-if="props.arrows" :class="style.arrows({ class: props.ui?.arrows })" data-part="arrows">
         <Button
           :disabled="!canScrollPrev"
           :icon="prevIcon"
           size="md"
           variant="outline"
           :aria-label="t('carousel.prev')"
-          v-bind="typeof props.prev === 'object' ? props.prev : undefined"
+          v-bind="typeof props.prev === 'object' ? props.prev : void 0"
           :class="style.prev({ class: props.ui?.prev })"
+          data-part="prev"
           @click="scrollPrev"
         />
         <Button
@@ -292,17 +183,19 @@ defineExpose({
           size="md"
           variant="outline"
           :aria-label="t('carousel.next')"
-          v-bind="typeof props.next === 'object' ? props.next : undefined"
+          v-bind="typeof props.next === 'object' ? props.next : void 0"
           :class="style.next({ class: props.ui?.next })"
+          data-part="next"
           @click="scrollNext"
         />
       </div>
 
-      <div v-if="props.dots" :class="style.dots({ class: props.ui?.dots })">
+      <div v-if="props.dots" :class="style.dots({ class: props.ui?.dots })" data-part="dots">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
             :aria-label="t('carousel.goto', { page: index + 1 })"
             :class="style.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            data-part="dot"
             @click="scrollTo(index)"
           ></button>
         </template>

package/dist/runtime/components/Carousel.vue.d.ts

@@ -0,0 +1,104 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+import type { AutoHeightOptionsType } from 'embla-carousel-auto-height';
+import type { AutoScrollOptionsType } from 'embla-carousel-auto-scroll';
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay';
+import type { ClassNamesOptionsType } from 'embla-carousel-class-names';
+import type { FadeOptionsType } from 'embla-carousel-fade';
+import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
+import type { AcceptableValue, PrimitiveProps } from 'reka-ui';
+import type { carousel } from '../theme/index.js';
+import type { ButtonProps, ComponentAttrs } from '../types/index.js';
+export type CarouselItem = AcceptableValue;
+export interface CarouselSlots<T extends CarouselItem = CarouselItem> {
+    default?: (props: {
+        item: T;
+        index: number;
+    }) => any;
+}
+type CarouselVariants = VariantProps<typeof carousel>;
+export interface CarouselProps<T extends CarouselItem = CarouselItem> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    /**
+     * Configure the prev button when arrows are enabled.
+     * @default { size: 'md', variant: 'link' }
+     */
+    prev?: ButtonProps;
+    /**
+     * The icon displayed in the prev button.
+     * @default app.icons.chevronLeft
+     */
+    prevIcon?: string;
+    /**
+     * Configure the next button when arrows are enabled.
+     * @default { size: 'md', variant: 'link' }
+     */
+    next?: ButtonProps;
+    /**
+     * The icon displayed in the next button.
+     * @default app.icons.chevronRight
+     */
+    nextIcon?: string;
+    /**
+     * Display prev and next buttons to scroll the carousel.
+     * @default false
+     */
+    arrows?: boolean;
+    /**
+     * Display dots to scroll to a specific slide.
+     * @default false
+     */
+    dots?: boolean;
+    orientation?: CarouselVariants['orientation'];
+    items?: T[];
+    /**
+     * Enable Autoplay plugin
+     * @link https://www.embla-carousel.com/plugins/autoplay/
+     */
+    autoplay?: boolean | AutoplayOptionsType;
+    /**
+     * Enable Auto Scroll plugin
+     * @link https://www.embla-carousel.com/plugins/auto-scroll/
+     */
+    autoScroll?: boolean | AutoScrollOptionsType;
+    /**
+     * Enable Auto Height plugin
+     * @link https://www.embla-carousel.com/plugins/auto-height/
+     */
+    autoHeight?: boolean | AutoHeightOptionsType;
+    /**
+     * Enable Class Names plugin
+     * @link https://www.embla-carousel.com/plugins/class-names/
+     */
+    classNames?: boolean | ClassNamesOptionsType;
+    /**
+     * Enable Fade plugin
+     * @link https://www.embla-carousel.com/plugins/fade/
+     */
+    fade?: boolean | FadeOptionsType;
+    /**
+     * Enable Wheel Gestures plugin
+     * @link https://www.embla-carousel.com/plugins/wheel-gestures/
+     */
+    wheelGestures?: boolean | WheelGesturesPluginOptions;
+}
+declare const _default: <T extends CarouselItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & CarouselProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        emblaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        emblaApi: import("vue").Ref<EmblaCarouselType | undefined, EmblaCarouselType | undefined>;
+    }>): void;
+    attrs: any;
+    slots: CarouselSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};