@expcat/tigercat-vue 1.5.0 → 2.0.0-preview.1

package/dist/chunk-XH4ZZ6KJ.js

@@ -1,427 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Carousel.ts
-
-
-
-
-
-
-
-
-
-
-var _vue = require('vue');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var Carousel = _vue.defineComponent.call(void 0, {
-  name: "TigerCarousel",
-  props: {
-    /**
-     * Whether to enable automatic slide switching
-     * @default false
-     */
-    autoplay: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Time interval for auto-play in milliseconds
-     * @default 3000
-     */
-    autoplaySpeed: {
-      type: Number,
-      default: 3e3
-    },
-    /**
-     * Whether to show navigation dots
-     * @default true
-     */
-    dots: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Position of navigation dots
-     * @default 'bottom'
-     */
-    dotPosition: {
-      type: String,
-      default: "bottom"
-    },
-    /**
-     * Transition effect type
-     * @default 'scroll'
-     */
-    effect: {
-      type: String,
-      default: "scroll"
-    },
-    /**
-     * Whether to show prev/next arrows
-     * @default false
-     */
-    arrows: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether to enable infinite loop
-     * @default true
-     */
-    infinite: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Transition animation duration in milliseconds
-     * @default 500
-     */
-    speed: {
-      type: Number,
-      default: 500
-    },
-    /**
-     * Initial slide index (0-based)
-     * @default 0
-     */
-    initialSlide: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * Whether to pause autoplay on hover
-     * @default true
-     */
-    pauseOnHover: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Whether to pause autoplay on focus
-     * @default true
-     */
-    pauseOnFocus: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Additional CSS classes
-     */
-    className: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Custom styles
-     */
-    style: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["change", "before-change"],
-  setup(props, { slots, emit, attrs, expose }) {
-    const currentIndex = _vue.ref.call(void 0, props.initialSlide);
-    const isPaused = _vue.ref.call(void 0, false);
-    const slideCount = _vue.ref.call(void 0, 0);
-    const containerRef = _vue.ref.call(void 0, null);
-    let autoplayController = null;
-    let touchStartPoint = null;
-    let touchCurrentPoint = null;
-    const containerClasses = _vue.computed.call(void 0, () => {
-      return _tigercatcore.classNames.call(void 0, _tigercatcore.getCarouselContainerClasses.call(void 0, props.className), _tigercatcore.coerceClassValue.call(void 0, attrs.class));
-    });
-    const trackClasses = _vue.computed.call(void 0, () => {
-      if (props.effect === "fade") {
-        return _tigercatcore.carouselTrackFadeClasses;
-      }
-      return _tigercatcore.carouselTrackScrollClasses;
-    });
-    const trackStyle = _vue.computed.call(void 0, () => {
-      if (props.effect === "scroll") {
-        return {
-          transform: _tigercatcore.getScrollTransform.call(void 0, currentIndex.value),
-          transitionDuration: `${props.speed}ms`
-        };
-      }
-      return {};
-    });
-    const getSlideClasses = (index) => {
-      const isActive = index === currentIndex.value;
-      if (props.effect === "fade") {
-        const positionClass = index === 0 ? "relative" : "absolute inset-0";
-        return _tigercatcore.classNames.call(void 0, 
-          positionClass,
-          "w-full transition-opacity ease-in-out",
-          isActive ? "opacity-100 z-10" : "opacity-0 z-0"
-        );
-      }
-      return _tigercatcore.carouselSlideBaseClasses;
-    };
-    const slideStyle = _vue.computed.call(void 0, () => ({
-      transitionDuration: `${props.speed}ms`
-    }));
-    const dotsClasses = _vue.computed.call(void 0, () => {
-      return _tigercatcore.getCarouselDotsClasses.call(void 0, props.dotPosition);
-    });
-    const next = () => {
-      const nextIdx = _tigercatcore.getNextSlideIndex.call(void 0, currentIndex.value, slideCount.value, props.infinite);
-      if (nextIdx !== currentIndex.value) {
-        goTo(nextIdx);
-      }
-    };
-    const prev = () => {
-      const prevIdx = _tigercatcore.getPrevSlideIndex.call(void 0, currentIndex.value, slideCount.value, props.infinite);
-      if (prevIdx !== currentIndex.value) {
-        goTo(prevIdx);
-      }
-    };
-    const goTo = (index) => {
-      const clampedIndex = _tigercatcore.clampSlideIndex.call(void 0, index, slideCount.value);
-      if (clampedIndex === currentIndex.value) {
-        return;
-      }
-      emit("before-change", currentIndex.value, clampedIndex);
-      const prevIndex = currentIndex.value;
-      currentIndex.value = clampedIndex;
-      emit("change", clampedIndex, prevIndex);
-    };
-    const startAutoplay = () => {
-      if (!props.autoplay || isPaused.value || autoplayController) return;
-      autoplayController = _tigercatcore.createCarouselAutoplayController.call(void 0, {
-        interval: props.autoplaySpeed,
-        onAdvance: next
-      });
-      autoplayController.start();
-    };
-    const stopAutoplay = () => {
-      _optionalChain([autoplayController, 'optionalAccess', _2 => _2.stop, 'call', _3 => _3()]);
-      autoplayController = null;
-    };
-    const syncAutoplay = () => {
-      stopAutoplay();
-      startAutoplay();
-    };
-    const resetTouchGesture = () => {
-      touchStartPoint = null;
-      touchCurrentPoint = null;
-    };
-    const handleTouchStart = (event) => {
-      const point = _tigercatcore.getCarouselTouchPoint.call(void 0, event.touches);
-      touchStartPoint = point;
-      touchCurrentPoint = point;
-    };
-    const handleTouchMove = (event) => {
-      if (!touchStartPoint) return;
-      const point = _tigercatcore.getCarouselTouchPoint.call(void 0, event.touches);
-      if (point) {
-        touchCurrentPoint = point;
-      }
-    };
-    const handleTouchEnd = (event) => {
-      const direction = _tigercatcore.resolveCarouselSwipeDirection.call(void 0, 
-        touchStartPoint,
-        _nullishCoalesce(_tigercatcore.getCarouselTouchPoint.call(void 0, event.changedTouches), () => ( touchCurrentPoint))
-      );
-      resetTouchGesture();
-      if (direction === "next") {
-        next();
-      } else if (direction === "prev") {
-        prev();
-      }
-    };
-    const handleTouchCancel = () => {
-      resetTouchGesture();
-    };
-    const handleMouseEnter = () => {
-      if (props.pauseOnHover && props.autoplay) {
-        isPaused.value = true;
-      }
-    };
-    const handleMouseLeave = () => {
-      if (props.pauseOnHover && props.autoplay) {
-        isPaused.value = false;
-      }
-    };
-    const handleFocus = () => {
-      if (props.pauseOnFocus && props.autoplay) {
-        isPaused.value = true;
-      }
-    };
-    const handleBlur = () => {
-      if (props.pauseOnFocus && props.autoplay) {
-        isPaused.value = false;
-      }
-    };
-    const isPrevArrowDisabled = _vue.computed.call(void 0, 
-      () => _tigercatcore.isPrevDisabled.call(void 0, currentIndex.value, slideCount.value, props.infinite)
-    );
-    const isNextArrowDisabled = _vue.computed.call(void 0, 
-      () => _tigercatcore.isNextDisabled.call(void 0, currentIndex.value, slideCount.value, props.infinite)
-    );
-    _vue.watch.call(void 0, [() => props.autoplay, () => props.autoplaySpeed, isPaused], syncAutoplay);
-    _vue.onMounted.call(void 0, () => {
-      if (props.autoplay) {
-        startAutoplay();
-      }
-      _optionalChain([containerRef, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.addEventListener, 'call', _6 => _6("touchstart", handleTouchStart, { passive: true })]);
-      _optionalChain([containerRef, 'access', _7 => _7.value, 'optionalAccess', _8 => _8.addEventListener, 'call', _9 => _9("touchmove", handleTouchMove, { passive: true })]);
-      _optionalChain([containerRef, 'access', _10 => _10.value, 'optionalAccess', _11 => _11.addEventListener, 'call', _12 => _12("touchend", handleTouchEnd, { passive: true })]);
-      _optionalChain([containerRef, 'access', _13 => _13.value, 'optionalAccess', _14 => _14.addEventListener, 'call', _15 => _15("touchcancel", handleTouchCancel, { passive: true })]);
-    });
-    _vue.onUnmounted.call(void 0, () => {
-      stopAutoplay();
-      resetTouchGesture();
-      _optionalChain([containerRef, 'access', _16 => _16.value, 'optionalAccess', _17 => _17.removeEventListener, 'call', _18 => _18("touchstart", handleTouchStart)]);
-      _optionalChain([containerRef, 'access', _19 => _19.value, 'optionalAccess', _20 => _20.removeEventListener, 'call', _21 => _21("touchmove", handleTouchMove)]);
-      _optionalChain([containerRef, 'access', _22 => _22.value, 'optionalAccess', _23 => _23.removeEventListener, 'call', _24 => _24("touchend", handleTouchEnd)]);
-      _optionalChain([containerRef, 'access', _25 => _25.value, 'optionalAccess', _26 => _26.removeEventListener, 'call', _27 => _27("touchcancel", handleTouchCancel)]);
-    });
-    expose({
-      next,
-      prev,
-      goTo
-    });
-    return () => {
-      const defaultSlot = _optionalChain([slots, 'access', _28 => _28.default, 'optionalCall', _29 => _29()]) || [];
-      const flattenSlots = (nodes) => {
-        return nodes.flatMap((node) => {
-          if (node.type === _vue.Fragment && Array.isArray(node.children)) {
-            return flattenSlots(node.children);
-          }
-          return node;
-        });
-      };
-      const slides = flattenSlots(defaultSlot).filter((child) => child.type !== _vue.Comment);
-      slideCount.value = slides.length;
-      const renderArrowButton = (type, disabled, onClick, path) => _vue.h.call(void 0, 
-        "button",
-        {
-          type: "button",
-          class: _tigercatcore.getCarouselArrowClasses.call(void 0, type, disabled),
-          onClick,
-          disabled,
-          "aria-label": type === "prev" ? "Previous slide" : "Next slide"
-        },
-        _vue.h.call(void 0, 
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            "stroke-width": "2",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            class: "w-6 h-6"
-          },
-          _vue.h.call(void 0, "path", { d: path })
-        )
-      );
-      const renderArrows = () => {
-        if (!props.arrows) return null;
-        return [
-          renderArrowButton("prev", isPrevArrowDisabled.value, prev, _tigercatcore.carouselPrevArrowPath),
-          renderArrowButton("next", isNextArrowDisabled.value, next, _tigercatcore.carouselNextArrowPath)
-        ];
-      };
-      const renderDots = () => {
-        if (!props.dots || slides.length <= 1) return null;
-        const dots = slides.map(
-          (_, index) => _vue.h.call(void 0, "button", {
-            type: "button",
-            key: index,
-            class: _tigercatcore.getCarouselDotClasses.call(void 0, index === currentIndex.value),
-            onClick: () => goTo(index),
-            "aria-label": `Go to slide ${index + 1}`,
-            "aria-current": index === currentIndex.value ? "true" : "false"
-          })
-        );
-        return _vue.h.call(void 0, 
-          "div",
-          {
-            class: dotsClasses.value,
-            role: "tablist",
-            "aria-label": "Carousel navigation"
-          },
-          dots
-        );
-      };
-      const renderSlides = () => {
-        const slideElements = slides.map(
-          (slide, index) => _vue.h.call(void 0, 
-            "div",
-            {
-              key: index,
-              class: getSlideClasses(index),
-              style: props.effect === "fade" ? slideStyle.value : void 0,
-              role: "group",
-              "aria-roledescription": "slide",
-              "aria-label": `Slide ${index + 1} of ${slides.length}`,
-              "aria-hidden": index !== currentIndex.value
-            },
-            slide
-          )
-        );
-        if (props.effect === "fade") {
-          return _vue.h.call(void 0, 
-            "div",
-            {
-              class: _tigercatcore.classNames.call(void 0, trackClasses.value, "h-full")
-            },
-            slideElements
-          );
-        }
-        return _vue.h.call(void 0, 
-          "div",
-          {
-            class: trackClasses.value,
-            style: trackStyle.value
-          },
-          slideElements
-        );
-      };
-      return _vue.h.call(void 0, 
-        "div",
-        {
-          ref: containerRef,
-          class: containerClasses.value,
-          style: props.style,
-          role: "region",
-          "aria-roledescription": "carousel",
-          "aria-label": "Image carousel",
-          onMouseenter: handleMouseEnter,
-          onMouseleave: handleMouseLeave,
-          onFocusin: handleFocus,
-          onFocusout: handleBlur
-        },
-        [renderSlides(), renderArrows(), renderDots()]
-      );
-    };
-  }
-});
-var Carousel_default = Carousel;
-
-
-
-
-exports.Carousel = Carousel; exports.Carousel_default = Carousel_default;