@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/chunk-ENVHCXM5.js

@@ -0,0 +1,287 @@
+'use strict';
+
+var chunk3L36R3UN_js = require('./chunk-3L36R3UN.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var DONUT_PALETTE = [
+  "#5470c6",
+  "#91cc75",
+  "#fac858",
+  "#ee6666",
+  "#73c0de",
+  "#3ba272",
+  "#fc8452",
+  "#9a60b4",
+  "#ea7ccc"
+];
+var DonutChart = vue.defineComponent({
+  name: "TigerDonutChart",
+  props: {
+    width: {
+      type: Number,
+      default: 320
+    },
+    height: {
+      type: Number,
+      default: 240
+    },
+    padding: {
+      type: [Number, Object],
+      default: 24
+    },
+    data: {
+      type: Array,
+      required: true
+    },
+    innerRadius: {
+      type: Number
+    },
+    innerRadiusRatio: {
+      type: Number,
+      default: 0.62
+    },
+    outerRadius: {
+      type: Number
+    },
+    startAngle: {
+      type: Number,
+      default: 0
+    },
+    endAngle: {
+      type: Number,
+      default: Math.PI * 2
+    },
+    padAngle: {
+      type: Number,
+      default: 0.04
+    },
+    colors: {
+      type: Array
+    },
+    showLabels: {
+      type: Boolean,
+      default: false
+    },
+    labelFormatter: {
+      type: Function
+    },
+    // Interaction props
+    hoverable: {
+      type: Boolean,
+      default: false
+    },
+    hoveredIndex: {
+      type: Number,
+      default: void 0
+    },
+    activeOpacity: {
+      type: Number,
+      default: 1
+    },
+    inactiveOpacity: {
+      type: Number,
+      default: 0.3
+    },
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    selectedIndex: {
+      type: Number,
+      default: void 0
+    },
+    // Legend props
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendPosition: {
+      type: String,
+      default: "bottom"
+    },
+    legendMarkerSize: {
+      type: Number,
+      default: 10
+    },
+    legendGap: {
+      type: Number,
+      default: 8
+    },
+    // Tooltip props
+    showTooltip: {
+      type: Boolean,
+      default: true
+    },
+    tooltipFormatter: {
+      type: Function
+    },
+    // Accessibility
+    title: {
+      type: String
+    },
+    desc: {
+      type: String
+    },
+    className: {
+      type: String
+    },
+    // Visual enhancements
+    borderWidth: {
+      type: Number,
+      default: 0
+    },
+    borderColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    hoverOffset: {
+      type: Number,
+      default: 10
+    },
+    labelPosition: {
+      type: String,
+      default: "inside"
+    },
+    shadow: {
+      type: Boolean,
+      default: true
+    },
+    // DonutChart-specific
+    centerValue: {
+      type: [String, Number]
+    },
+    centerLabel: {
+      type: String
+    },
+    animated: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
+  setup(props, { emit }) {
+    const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
+    const pad = vue.computed(() => tigercatCore.normalizeChartPadding(props.padding));
+    const resolvedOuterRadius = vue.computed(() => {
+      if (typeof props.outerRadius === "number") return Math.max(0, props.outerRadius);
+      return Math.max(0, Math.min(innerRect.value.width, innerRect.value.height) / 2);
+    });
+    const resolvedInnerRadius = vue.computed(() => {
+      if (typeof props.innerRadius === "number") {
+        return Math.min(Math.max(0, props.innerRadius), resolvedOuterRadius.value);
+      }
+      const ratio = Math.min(Math.max(props.innerRadiusRatio ?? 0.62, 0), 1);
+      return resolvedOuterRadius.value * ratio;
+    });
+    const centerPos = vue.computed(() => ({
+      x: pad.value.left + innerRect.value.width / 2,
+      y: pad.value.top + innerRect.value.height / 2
+    }));
+    const hasCenterContent = vue.computed(
+      () => props.centerValue !== void 0 || props.centerLabel !== void 0
+    );
+    const resolvedColors = vue.computed(
+      () => props.colors && props.colors.length > 0 ? props.colors : DONUT_PALETTE
+    );
+    const donutTooltipFormatter = vue.computed(() => {
+      if (props.tooltipFormatter) return props.tooltipFormatter;
+      const total = props.data.reduce((s, d) => s + d.value, 0);
+      return (datum, index) => {
+        const pct = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
+        const label = datum.label ?? `#${index + 1}`;
+        return `${label}: ${datum.value} (${pct}%)`;
+      };
+    });
+    const handleHoveredIndexUpdate = (index) => {
+      emit("update:hoveredIndex", index);
+    };
+    const handleSelectedIndexUpdate = (index) => {
+      emit("update:selectedIndex", index);
+    };
+    const handleSliceClick = (datum, index) => {
+      emit("slice-click", datum, index);
+    };
+    const handleSliceHover = (datum, index) => {
+      emit("slice-hover", datum, index);
+    };
+    return () => {
+      const pie = vue.h(chunk3L36R3UN_js.PieChart, {
+        width: props.width,
+        height: props.height,
+        padding: props.padding,
+        data: props.data,
+        innerRadius: resolvedInnerRadius.value,
+        outerRadius: props.outerRadius,
+        startAngle: props.startAngle,
+        endAngle: props.endAngle,
+        padAngle: props.padAngle,
+        colors: resolvedColors.value,
+        showLabels: props.showLabels,
+        labelFormatter: props.labelFormatter,
+        labelPosition: props.labelPosition,
+        borderWidth: props.borderWidth,
+        borderColor: props.borderColor,
+        hoverOffset: props.hoverOffset,
+        shadow: props.shadow,
+        hoverable: props.hoverable,
+        hoveredIndex: props.hoveredIndex,
+        activeOpacity: props.activeOpacity,
+        inactiveOpacity: props.inactiveOpacity,
+        selectable: props.selectable,
+        selectedIndex: props.selectedIndex,
+        showLegend: props.showLegend,
+        legendPosition: props.legendPosition,
+        legendMarkerSize: props.legendMarkerSize,
+        legendGap: props.legendGap,
+        showTooltip: props.showTooltip,
+        tooltipFormatter: donutTooltipFormatter.value,
+        title: props.title,
+        desc: props.desc,
+        className: tigercatCore.classNames(props.className),
+        "onUpdate:hoveredIndex": handleHoveredIndexUpdate,
+        "onUpdate:selectedIndex": handleSelectedIndexUpdate,
+        onSliceClick: handleSliceClick,
+        onSliceHover: handleSliceHover
+      });
+      const center = hasCenterContent.value ? vue.h(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: `${centerPos.value.x}px`,
+            top: `${centerPos.value.y}px`,
+            transform: "translate(-50%, -50%)",
+            textAlign: "center",
+            pointerEvents: "none",
+            lineHeight: "1.3"
+          },
+          "data-donut-center": "true"
+        },
+        [
+          props.centerValue !== void 0 ? vue.h(
+            "div",
+            {
+              class: "text-xl font-semibold text-[color:var(--tiger-text,#1f2937)]",
+              style: { lineHeight: "1.2" }
+            },
+            `${props.centerValue}`
+          ) : null,
+          props.centerLabel !== void 0 ? vue.h(
+            "div",
+            {
+              class: "text-xs text-[color:var(--tiger-text-secondary,#6b7280)]",
+              style: { marginTop: "2px" }
+            },
+            props.centerLabel
+          ) : null
+        ]
+      ) : null;
+      return vue.h("div", { class: "inline-block relative", "data-donut-chart": "true" }, [pie, center]);
+    };
+  }
+});
+var DonutChart_default = DonutChart;
+
+exports.DonutChart = DonutChart;
+exports.DonutChart_default = DonutChart_default;

package/dist/{chunk-V2F7IOSD.mjs → chunk-EVOLGCGW.mjs}

@@ -197,33 +197,33 @@ var List = defineComponent({
         slots.footer()
       );
     }
-    function renderListItem(item, index) {
+    function getItemAttrs(item, index, itemClasses) {
       const key = getItemKey(item, index);
+      const clickable = hasItemClickListener.value;
+      return {
+        key,
+        class: classNames(itemClasses, clickable && "cursor-pointer"),
+        role: "listitem",
+        tabindex: clickable ? 0 : void 0,
+        onClick: () => handleItemClick(item, index),
+        onKeydown: clickable ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleItemClick(item, index);
+          }
+        } : void 0
+      };
+    }
+    function renderListItem(item, index) {
       const itemClasses = getListItemClasses(
         props.size,
         props.itemLayout,
         props.split && props.bordered === "divided" && !props.grid,
         props.hoverable
       );
-      const clickable = hasItemClickListener.value;
+      const attrs2 = getItemAttrs(item, index, itemClasses);
       if (slots.renderItem) {
-        return h(
-          "div",
-          {
-            key,
-            class: classNames(itemClasses, clickable && "cursor-pointer"),
-            role: "listitem",
-            tabindex: clickable ? 0 : void 0,
-            onClick: () => handleItemClick(item, index),
-            onKeydown: clickable ? (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleItemClick(item, index);
-              }
-            } : void 0
-          },
-          slots.renderItem({ item, index })
-        );
+        return h("div", attrs2, slots.renderItem({ item, index }));
       }
       const itemContent = [];
       const metaContent = [];
@@ -256,23 +256,7 @@ var List = defineComponent({
           h("div", { class: listItemExtraClasses }, item.extra)
         );
       }
-      return h(
-        "div",
-        {
-          key,
-          class: classNames(itemClasses, clickable && "cursor-pointer"),
-          role: "listitem",
-          tabindex: clickable ? 0 : void 0,
-          onClick: () => handleItemClick(item, index),
-          onKeydown: clickable ? (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleItemClick(item, index);
-            }
-          } : void 0
-        },
-        itemContent
-      );
+      return h("div", attrs2, itemContent);
     }
     function renderListItems() {
       if (props.loading) {

package/dist/chunk-EZZG57TK.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Divider.ts
+var Divider = vue.defineComponent({
+  name: "TigerDivider",
+  props: {
+    orientation: {
+      type: String,
+      default: "horizontal"
+    },
+    lineStyle: {
+      type: String,
+      default: "solid"
+    },
+    spacing: {
+      type: String,
+      default: "md"
+    },
+    color: String,
+    thickness: String
+  },
+  setup(props, { attrs }) {
+    const classes = vue.computed(
+      () => tigercatCore.getDividerClasses(props.orientation, props.lineStyle, props.spacing)
+    );
+    const style = vue.computed(
+      () => tigercatCore.getDividerStyle(props.orientation, props.color, props.thickness)
+    );
+    return () => vue.h("div", {
+      ...attrs,
+      class: [classes.value, attrs.class],
+      style: [style.value, attrs.style],
+      role: "separator",
+      "aria-orientation": props.orientation
+    });
+  }
+});
+var Divider_default = Divider;
+
+exports.Divider = Divider;
+exports.Divider_default = Divider_default;

package/dist/{chunk-FA2BQGLO.js → chunk-F5AI7CPC.js}

@@ -199,33 +199,33 @@ var List = vue.defineComponent({
         slots.footer()
       );
     }
-    function renderListItem(item, index) {
+    function getItemAttrs(item, index, itemClasses) {
       const key = getItemKey(item, index);
+      const clickable = hasItemClickListener.value;
+      return {
+        key,
+        class: tigercatCore.classNames(itemClasses, clickable && "cursor-pointer"),
+        role: "listitem",
+        tabindex: clickable ? 0 : void 0,
+        onClick: () => handleItemClick(item, index),
+        onKeydown: clickable ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleItemClick(item, index);
+          }
+        } : void 0
+      };
+    }
+    function renderListItem(item, index) {
       const itemClasses = tigercatCore.getListItemClasses(
         props.size,
         props.itemLayout,
         props.split && props.bordered === "divided" && !props.grid,
         props.hoverable
       );
-      const clickable = hasItemClickListener.value;
+      const attrs2 = getItemAttrs(item, index, itemClasses);
       if (slots.renderItem) {
-        return vue.h(
-          "div",
-          {
-            key,
-            class: tigercatCore.classNames(itemClasses, clickable && "cursor-pointer"),
-            role: "listitem",
-            tabindex: clickable ? 0 : void 0,
-            onClick: () => handleItemClick(item, index),
-            onKeydown: clickable ? (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleItemClick(item, index);
-              }
-            } : void 0
-          },
-          slots.renderItem({ item, index })
-        );
+        return vue.h("div", attrs2, slots.renderItem({ item, index }));
       }
       const itemContent = [];
       const metaContent = [];
@@ -258,23 +258,7 @@ var List = vue.defineComponent({
           vue.h("div", { class: tigercatCore.listItemExtraClasses }, item.extra)
         );
       }
-      return vue.h(
-        "div",
-        {
-          key,
-          class: tigercatCore.classNames(itemClasses, clickable && "cursor-pointer"),
-          role: "listitem",
-          tabindex: clickable ? 0 : void 0,
-          onClick: () => handleItemClick(item, index),
-          onKeydown: clickable ? (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleItemClick(item, index);
-            }
-          } : void 0
-        },
-        itemContent
-      );
+      return vue.h("div", attrs2, itemContent);
     }
     function renderListItems() {
       if (props.loading) {

package/dist/{chunk-U5VOJ4G2.js → chunk-FC7RXQTM.js}

@@ -73,17 +73,7 @@ var RadioGroup = vue.defineComponent({
       const rawProps = instance?.vnode.props;
       return !!rawProps && Object.prototype.hasOwnProperty.call(rawProps, "value");
     });
-    const currentValue = vue.computed(() => {
-      return isControlled.value ? props.value : internalValue.value;
-    });
-    vue.watch(
-      () => props.defaultValue,
-      (newVal) => {
-        if (!isControlled.value) {
-          internalValue.value = newVal;
-        }
-      }
-    );
+    const currentValue = vue.computed(() => isControlled.value ? props.value : internalValue.value);
     const handleChange = (value) => {
       if (props.disabled) return;
       if (!isControlled.value) {
@@ -130,10 +120,7 @@ var RadioGroup = vue.defineComponent({
     return () => {
       const rootStyle = [attrs.style, props.style];
       const mergedClass = tigercatCore.classNames(props.className, tigercatCore.coerceClassValue(attrs.class));
-      const rootClass = tigercatCore.getRadioGroupClasses({
-        className: mergedClass,
-        hasCustomClass: !!mergedClass
-      });
+      const rootClass = tigercatCore.getRadioGroupClasses({ className: mergedClass });
       const { class: _class, style: _style, ...restAttrs } = attrs;
       return vue.h(
         "div",

package/dist/{chunk-4QIOLPLB.mjs → chunk-FDYZ7NTQ.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch, onMounted, onUnmounted, Comment, h, Fragment } from 'vue';
-import { classNames, getCarouselContainerClasses, coerceClassValue, carouselTrackFadeClasses, carouselTrackScrollClasses, getScrollTransform, getCarouselDotsClasses, isPrevDisabled, isNextDisabled, clampSlideIndex, getPrevSlideIndex, getNextSlideIndex, getCarouselArrowClasses, carouselPrevArrowPath, carouselNextArrowPath, getCarouselDotClasses, carouselSlideBaseClasses } from '@expcat/tigercat-core';
+import { classNames, getCarouselContainerClasses, coerceClassValue, carouselTrackFadeClasses, carouselTrackScrollClasses, getScrollTransform, getCarouselDotsClasses, isPrevDisabled, isNextDisabled, clampSlideIndex, getPrevSlideIndex, getNextSlideIndex, getCarouselDotClasses, carouselSlideBaseClasses, getCarouselArrowClasses, carouselPrevArrowPath, carouselNextArrowPath } from '@expcat/tigercat-core';
 
 // src/components/Carousel.ts
 var Carousel = defineComponent({
@@ -144,11 +144,9 @@ var Carousel = defineComponent({
       }
       return carouselSlideBaseClasses;
     };
-    const getSlideStyle = () => {
-      return {
-        transitionDuration: `${props.speed}ms`
-      };
-    };
+    const slideStyle = computed(() => ({
+      transitionDuration: `${props.speed}ms`
+    }));
     const dotsClasses = computed(() => {
       return getCarouselDotsClasses(props.dotPosition);
     });
@@ -249,57 +247,36 @@ var Carousel = defineComponent({
       };
       const slides = flattenSlots(defaultSlot).filter((child) => child.type !== Comment);
       slideCount.value = slides.length;
-      const renderArrows = () => {
-        if (!props.arrows) return null;
-        const prevArrow = h(
-          "button",
-          {
-            type: "button",
-            class: getCarouselArrowClasses("prev", isPrevArrowDisabled.value),
-            onClick: prev,
-            disabled: isPrevArrowDisabled.value,
-            "aria-label": "Previous slide"
-          },
-          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: carouselPrevArrowPath })
-          )
-        );
-        const nextArrow = h(
-          "button",
+      const renderArrowButton = (type, disabled, onClick, path) => h(
+        "button",
+        {
+          type: "button",
+          class: getCarouselArrowClasses(type, disabled),
+          onClick,
+          disabled,
+          "aria-label": type === "prev" ? "Previous slide" : "Next slide"
+        },
+        h(
+          "svg",
           {
-            type: "button",
-            class: getCarouselArrowClasses("next", isNextArrowDisabled.value),
-            onClick: next,
-            disabled: isNextArrowDisabled.value,
-            "aria-label": "Next slide"
+            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(
-            "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: carouselNextArrowPath })
-          )
-        );
-        return [prevArrow, nextArrow];
+          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;
@@ -330,7 +307,7 @@ var Carousel = defineComponent({
             {
               key: index,
               class: getSlideClasses(index),
-              style: props.effect === "fade" ? getSlideStyle() : void 0,
+              style: props.effect === "fade" ? slideStyle.value : void 0,
               role: "group",
               "aria-roledescription": "slide",
               "aria-label": `Slide ${index + 1} of ${slides.length}`,

package/dist/{chunk-JFZDIY7D.js → chunk-FLAJKB2O.js}

@@ -12,12 +12,14 @@ function useChartInteraction(options) {
   const localHoveredIndex = vue.ref(null);
   const localSelectedIndex = vue.ref(null);
   const tooltipPosition = vue.ref({ x: 0, y: 0 });
-  const resolvedHoveredIndex = vue.computed(
-    () => options.hoveredIndexProp !== void 0 ? options.hoveredIndexProp : localHoveredIndex.value
-  );
-  const resolvedSelectedIndex = vue.computed(
-    () => options.selectedIndexProp !== void 0 ? options.selectedIndexProp : localSelectedIndex.value
-  );
+  const resolvedHoveredIndex = vue.computed(() => {
+    const prop = options.hoveredIndexProp?.();
+    return prop !== void 0 ? prop : localHoveredIndex.value;
+  });
+  const resolvedSelectedIndex = vue.computed(() => {
+    const prop = options.selectedIndexProp?.();
+    return prop !== void 0 ? prop : localSelectedIndex.value;
+  });
   const activeIndex = vue.computed(() => {
     if (resolvedSelectedIndex.value !== null) return resolvedSelectedIndex.value;
     if (unref(options.hoverable) && resolvedHoveredIndex.value !== null) {
@@ -33,7 +35,7 @@ function useChartInteraction(options) {
   };
   const handleMouseEnter = (index, event) => {
     if (!unref(options.hoverable)) return;
-    if (options.hoveredIndexProp === void 0) {
+    if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = index;
     }
     tooltipPosition.value = { x: event.clientX, y: event.clientY };
@@ -47,7 +49,7 @@ function useChartInteraction(options) {
   };
   const handleMouseLeave = () => {
     if (!unref(options.hoverable)) return;
-    if (options.hoveredIndexProp === void 0) {
+    if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = null;
     }
     emit("update:hoveredIndex", null);
@@ -58,7 +60,7 @@ function useChartInteraction(options) {
   const handleClick = (index) => {
     if (!unref(options.selectable)) return;
     const nextIndex = resolvedSelectedIndex.value === index ? null : index;
-    if (options.selectedIndexProp === void 0) {
+    if (options.selectedIndexProp?.() === void 0) {
       localSelectedIndex.value = nextIndex;
     }
     emit("update:selectedIndex", nextIndex);
@@ -77,7 +79,7 @@ function useChartInteraction(options) {
   };
   const handleLegendHover = (index) => {
     if (!unref(options.hoverable)) return;
-    if (options.hoveredIndexProp === void 0) {
+    if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = index;
     }
     emit("update:hoveredIndex", index);