@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-RANRYFUI.mjs

@@ -1,461 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/Carousel.ts
-import {
-  defineComponent,
-  computed,
-  ref,
-  watch,
-  onMounted,
-  onUnmounted,
-  h,
-  Comment,
-  Fragment
-} from "vue";
-import {
-  classNames,
-  coerceClassValue,
-  getCarouselContainerClasses,
-  carouselTrackScrollClasses,
-  carouselTrackFadeClasses,
-  carouselSlideBaseClasses,
-  getCarouselDotsClasses,
-  getCarouselDotClasses,
-  getCarouselArrowClasses,
-  getNextSlideIndex,
-  getPrevSlideIndex,
-  isNextDisabled,
-  isPrevDisabled,
-  clampSlideIndex,
-  getScrollTransform,
-  getCarouselTouchPoint,
-  resolveCarouselSwipeDirection,
-  createCarouselAutoplayController,
-  carouselPrevArrowPath,
-  carouselNextArrowPath,
-  mergeTigerLocale,
-  getCarouselLabels
-} from "@expcat/tigercat-core";
-var Carousel = defineComponent({
-  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
-    },
-    /**
-     * Controlled current slide index (0-based)
-     */
-    currentIndex: {
-      type: Number,
-      default: void 0
-    },
-    /**
-     * Initial current slide index for uncontrolled usage
-     * @default 0
-     */
-    defaultCurrentIndex: {
-      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
-    },
-    locale: {
-      type: Object,
-      default: void 0
-    },
-    labels: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["change", "before-change", "update:currentIndex"],
-  setup(props, { slots, emit, attrs, expose }) {
-    const config = useTigerConfig();
-    const internalCurrentIndex = ref(props.defaultCurrentIndex);
-    const isPaused = ref(false);
-    const slideCount = ref(0);
-    const containerRef = ref(null);
-    let autoplayController = null;
-    let touchStartPoint = null;
-    let touchCurrentPoint = null;
-    const isControlled = computed(() => props.currentIndex !== void 0);
-    const currentIndex = computed(
-      () => clampSlideIndex(
-        isControlled.value ? props.currentIndex : internalCurrentIndex.value,
-        slideCount.value
-      )
-    );
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const labels = computed(() => getCarouselLabels(mergedLocale.value, props.labels));
-    const containerClasses = computed(() => {
-      return classNames(getCarouselContainerClasses(props.className), coerceClassValue(attrs.class));
-    });
-    const trackClasses = computed(() => {
-      if (props.effect === "fade") {
-        return carouselTrackFadeClasses;
-      }
-      return carouselTrackScrollClasses;
-    });
-    const trackStyle = computed(() => {
-      if (props.effect === "scroll") {
-        return {
-          transform: getScrollTransform(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 classNames(
-          positionClass,
-          "w-full transition-opacity ease-in-out",
-          isActive ? "opacity-100 z-10" : "opacity-0 z-0"
-        );
-      }
-      return carouselSlideBaseClasses;
-    };
-    const slideStyle = computed(() => ({
-      transitionDuration: `${props.speed}ms`
-    }));
-    const dotsClasses = computed(() => {
-      return getCarouselDotsClasses(props.dotPosition);
-    });
-    const next = () => {
-      const nextIdx = getNextSlideIndex(currentIndex.value, slideCount.value, props.infinite);
-      if (nextIdx !== currentIndex.value) {
-        goTo(nextIdx);
-      }
-    };
-    const prev = () => {
-      const prevIdx = getPrevSlideIndex(currentIndex.value, slideCount.value, props.infinite);
-      if (prevIdx !== currentIndex.value) {
-        goTo(prevIdx);
-      }
-    };
-    const goTo = (index) => {
-      const clampedIndex = clampSlideIndex(index, slideCount.value);
-      if (clampedIndex === currentIndex.value) {
-        return;
-      }
-      emit("before-change", currentIndex.value, clampedIndex);
-      const prevIndex = currentIndex.value;
-      if (!isControlled.value) {
-        internalCurrentIndex.value = clampedIndex;
-      }
-      emit("update:currentIndex", clampedIndex);
-      emit("change", clampedIndex, prevIndex);
-    };
-    const startAutoplay = () => {
-      if (!props.autoplay || isPaused.value || autoplayController) return;
-      autoplayController = createCarouselAutoplayController({
-        interval: props.autoplaySpeed,
-        onAdvance: next
-      });
-      autoplayController.start();
-    };
-    const stopAutoplay = () => {
-      autoplayController?.stop();
-      autoplayController = null;
-    };
-    const syncAutoplay = () => {
-      stopAutoplay();
-      startAutoplay();
-    };
-    const resetTouchGesture = () => {
-      touchStartPoint = null;
-      touchCurrentPoint = null;
-    };
-    const handleTouchStart = (event) => {
-      const point = getCarouselTouchPoint(event.touches);
-      touchStartPoint = point;
-      touchCurrentPoint = point;
-    };
-    const handleTouchMove = (event) => {
-      if (!touchStartPoint) return;
-      const point = getCarouselTouchPoint(event.touches);
-      if (point) {
-        touchCurrentPoint = point;
-      }
-    };
-    const handleTouchEnd = (event) => {
-      const direction = resolveCarouselSwipeDirection(
-        touchStartPoint,
-        getCarouselTouchPoint(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 = computed(
-      () => isPrevDisabled(currentIndex.value, slideCount.value, props.infinite)
-    );
-    const isNextArrowDisabled = computed(
-      () => isNextDisabled(currentIndex.value, slideCount.value, props.infinite)
-    );
-    watch([() => props.autoplay, () => props.autoplaySpeed, isPaused], syncAutoplay);
-    onMounted(() => {
-      if (props.autoplay) {
-        startAutoplay();
-      }
-      containerRef.value?.addEventListener("touchstart", handleTouchStart, { passive: true });
-      containerRef.value?.addEventListener("touchmove", handleTouchMove, { passive: true });
-      containerRef.value?.addEventListener("touchend", handleTouchEnd, { passive: true });
-      containerRef.value?.addEventListener("touchcancel", handleTouchCancel, { passive: true });
-    });
-    onUnmounted(() => {
-      stopAutoplay();
-      resetTouchGesture();
-      containerRef.value?.removeEventListener("touchstart", handleTouchStart);
-      containerRef.value?.removeEventListener("touchmove", handleTouchMove);
-      containerRef.value?.removeEventListener("touchend", handleTouchEnd);
-      containerRef.value?.removeEventListener("touchcancel", handleTouchCancel);
-    });
-    expose({
-      next,
-      prev,
-      goTo
-    });
-    return () => {
-      const defaultSlot = slots.default?.() || [];
-      const flattenSlots = (nodes) => {
-        return nodes.flatMap((node) => {
-          if (node.type === Fragment && Array.isArray(node.children)) {
-            return flattenSlots(node.children);
-          }
-          return node;
-        });
-      };
-      const slides = flattenSlots(defaultSlot).filter((child) => child.type !== Comment);
-      slideCount.value = slides.length;
-      const renderArrowButton = (type, disabled, onClick, path) => h(
-        "button",
-        {
-          type: "button",
-          class: getCarouselArrowClasses(type, disabled),
-          onClick,
-          disabled,
-          "aria-label": type === "prev" ? labels.value.previousSlideAriaLabel : labels.value.nextSlideAriaLabel
-        },
-        h(
-          "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"
-          },
-          h("path", { d: path })
-        )
-      );
-      const renderArrows = () => {
-        if (!props.arrows) return null;
-        return [
-          renderArrowButton("prev", isPrevArrowDisabled.value, prev, carouselPrevArrowPath),
-          renderArrowButton("next", isNextArrowDisabled.value, next, carouselNextArrowPath)
-        ];
-      };
-      const renderDots = () => {
-        if (!props.dots || slides.length <= 1) return null;
-        const dots = slides.map(
-          (_, index) => h("button", {
-            type: "button",
-            key: index,
-            class: getCarouselDotClasses(index === currentIndex.value),
-            onClick: () => goTo(index),
-            "aria-label": labels.value.goToSlideAriaLabel.replace("{index}", String(index + 1)),
-            "aria-current": index === currentIndex.value ? "true" : "false"
-          })
-        );
-        return h(
-          "div",
-          {
-            class: dotsClasses.value,
-            role: "tablist",
-            "aria-label": labels.value.navigationAriaLabel
-          },
-          dots
-        );
-      };
-      const renderSlides = () => {
-        const slideElements = slides.map(
-          (slide, index) => h(
-            "div",
-            {
-              key: index,
-              class: getSlideClasses(index),
-              style: props.effect === "fade" ? slideStyle.value : void 0,
-              role: "group",
-              "aria-roledescription": "slide",
-              "aria-label": labels.value.slideAriaLabel.replace("{index}", String(index + 1)).replace("{total}", String(slides.length)),
-              "aria-hidden": index !== currentIndex.value
-            },
-            slide
-          )
-        );
-        if (props.effect === "fade") {
-          return h(
-            "div",
-            {
-              class: classNames(trackClasses.value, "h-full")
-            },
-            slideElements
-          );
-        }
-        return h(
-          "div",
-          {
-            class: trackClasses.value,
-            style: trackStyle.value
-          },
-          slideElements
-        );
-      };
-      return h(
-        "div",
-        {
-          ref: containerRef,
-          class: containerClasses.value,
-          style: props.style,
-          role: "region",
-          "aria-roledescription": "carousel",
-          "aria-label": labels.value.ariaLabel,
-          onMouseenter: handleMouseEnter,
-          onMouseleave: handleMouseLeave,
-          onFocusin: handleFocus,
-          onFocusout: handleBlur
-        },
-        [renderSlides(), renderArrows(), renderDots()]
-      );
-    };
-  }
-});
-var Carousel_default = Carousel;
-
-export {
-  Carousel,
-  Carousel_default
-};

package/dist/chunk-RHQWQJ4I.mjs

@@ -1,244 +0,0 @@
-import {
-  useChartInteraction
-} from "./chunk-FHUGOSEY.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
-import {
-  ChartTooltip
-} from "./chunk-SPFL55TF.mjs";
-import {
-  ChartCanvas
-} from "./chunk-SNNT64HK.mjs";
-import {
-  ChartLegend
-} from "./chunk-V443QIJM.mjs";
-
-// src/components/FunnelChart.ts
-import { defineComponent, computed, h, useId } from "vue";
-import {
-  classNames,
-  computeFunnelSegments,
-  getChartElementOpacity,
-  getChartInnerRect,
-  getStableChartGradientPrefix,
-  resolveChartPalette,
-  buildChartLegendItems,
-  resolveChartTooltipContent,
-  chartAxisTickTextClasses
-} from "@expcat/tigercat-core";
-var FunnelChart = defineComponent({
-  name: "TigerFunnelChart",
-  props: {
-    width: { type: Number, default: 320 },
-    height: { type: Number, default: 300 },
-    padding: { type: [Number, Object], default: 24 },
-    data: { type: Array, required: true },
-    direction: { type: String, default: "vertical" },
-    gap: { type: Number, default: 2 },
-    pinch: { type: Boolean, default: false },
-    colors: { type: Array },
-    gradient: { type: Boolean, default: false },
-    // Interaction
-    hoverable: { type: Boolean, default: false },
-    hoveredIndex: { type: Number, default: void 0 },
-    activeOpacity: { type: Number, default: 1 },
-    inactiveOpacity: { type: Number, default: 0.25 },
-    selectable: { type: Boolean, default: false },
-    selectedIndex: { type: Number, default: void 0 },
-    // Legend
-    showLegend: { type: Boolean, default: false },
-    legendPosition: { type: String, default: "bottom" },
-    legendMarkerSize: { type: Number, default: 10 },
-    legendGap: { type: Number, default: 8 },
-    // Tooltip
-    showTooltip: { type: Boolean, default: true },
-    tooltipFormatter: {
-      type: Function
-    },
-    // a11y
-    title: { type: String },
-    desc: { type: String },
-    className: { type: String }
-  },
-  emits: ["update:hoveredIndex", "update:selectedIndex", "segment-click", "segment-hover"],
-  setup(props, { emit }) {
-    const {
-      tooltipPosition,
-      resolvedHoveredIndex,
-      activeIndex,
-      handleMouseEnter,
-      handleMouseMove,
-      handleMouseLeave,
-      handleClick,
-      handleKeyDown,
-      handleLegendClick,
-      handleLegendHover,
-      handleLegendLeave,
-      wrapperClasses
-    } = useChartInteraction({
-      hoverable: computed(() => props.hoverable),
-      showTooltip: computed(() => props.showTooltip),
-      hoveredIndexProp: () => props.hoveredIndex,
-      selectable: computed(() => props.selectable),
-      selectedIndexProp: () => props.selectedIndex,
-      activeOpacity: computed(() => props.activeOpacity),
-      inactiveOpacity: computed(() => props.inactiveOpacity),
-      legendPosition: computed(() => props.legendPosition),
-      emit,
-      getData: (index) => props.data[index],
-      eventNames: { hover: "segment-hover", click: "segment-click" }
-    });
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
-    const palette = computed(() => resolveChartPalette(props.colors));
-    const segments = computed(
-      () => computeFunnelSegments(props.data, {
-        width: innerRect.value.width,
-        height: innerRect.value.height,
-        gap: props.gap,
-        pinch: props.pinch,
-        colors: palette.value
-      })
-    );
-    const total = computed(() => props.data.reduce((s, d) => s + d.value, 0));
-    const gradientPrefix = getStableChartGradientPrefix("funnel", useId());
-    const legendItems = computed(
-      () => buildChartLegendItems({
-        data: props.data,
-        palette: palette.value,
-        activeIndex: activeIndex.value,
-        getLabel: (d, i) => d.label ?? `Stage ${i + 1}`,
-        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
-      })
-    );
-    const tooltipContent = computed(
-      () => resolveChartTooltipContent(
-        resolvedHoveredIndex.value,
-        props.data,
-        props.tooltipFormatter,
-        (datum, index) => {
-          const pct = total.value > 0 ? (datum.value / total.value * 100).toFixed(1) : "0";
-          const label = datum.label ?? `Stage ${index + 1}`;
-          return `${label}: ${datum.value} (${pct}%)`;
-        }
-      )
-    );
-    return () => {
-      const interactive = props.hoverable || props.selectable;
-      const chart = h(
-        ChartCanvas,
-        {
-          width: props.width,
-          height: props.height,
-          padding: props.padding,
-          title: props.title,
-          desc: props.desc,
-          className: classNames(props.className)
-        },
-        {
-          default: () => {
-            const defs = props.gradient ? h(
-              "defs",
-              {},
-              segments.value.map(
-                (seg) => h(
-                  "linearGradient",
-                  {
-                    key: `grad-${seg.index}`,
-                    id: `${gradientPrefix}-${seg.index}`,
-                    x1: 0,
-                    y1: 0,
-                    x2: 0,
-                    y2: 1
-                  },
-                  [
-                    h("stop", { offset: "0%", "stop-color": seg.color, "stop-opacity": 1 }),
-                    h("stop", {
-                      offset: "100%",
-                      "stop-color": seg.color,
-                      "stop-opacity": 0.55
-                    })
-                  ]
-                )
-              )
-            ) : null;
-            const paths = h(
-              ChartSeries,
-              { data: props.data, type: "funnel" },
-              {
-                default: () => segments.value.map((seg) => {
-                  const opacity = getChartElementOpacity(seg.index, activeIndex.value, {
-                    activeOpacity: props.activeOpacity,
-                    inactiveOpacity: props.inactiveOpacity
-                  });
-                  return h("path", {
-                    key: `seg-${seg.index}`,
-                    d: seg.path,
-                    fill: props.gradient ? `url(#${gradientPrefix}-${seg.index})` : seg.color,
-                    opacity,
-                    class: classNames(interactive && "cursor-pointer"),
-                    style: {
-                      transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)"
-                    },
-                    tabindex: props.selectable ? 0 : void 0,
-                    role: props.selectable ? "button" : "img",
-                    "aria-label": seg.label,
-                    onMouseenter: (e) => handleMouseEnter(seg.index, e),
-                    onMousemove: handleMouseMove,
-                    onMouseleave: handleMouseLeave,
-                    onClick: () => handleClick(seg.index),
-                    onKeydown: (e) => handleKeyDown(e, seg.index)
-                  });
-                })
-              }
-            );
-            const labels = segments.value.map(
-              (seg) => h(
-                "text",
-                {
-                  key: `label-${seg.index}`,
-                  x: seg.cx,
-                  y: seg.cy,
-                  class: chartAxisTickTextClasses,
-                  "text-anchor": "middle",
-                  "dominant-baseline": "middle"
-                },
-                seg.label
-              )
-            );
-            return [defs, paths, ...labels].filter(Boolean);
-          }
-        }
-      );
-      const tooltip = props.showTooltip ? h(ChartTooltip, {
-        content: tooltipContent.value,
-        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
-        x: tooltipPosition.value.x,
-        y: tooltipPosition.value.y
-      }) : null;
-      if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
-      }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          interactive,
-          onItemClick: handleLegendClick,
-          onItemHover: handleLegendHover,
-          onItemLeave: handleLegendLeave
-        }),
-        tooltip
-      ]);
-    };
-  }
-});
-var FunnelChart_default = FunnelChart;
-
-export {
-  FunnelChart,
-  FunnelChart_default
-};