@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-LQYBXAL4.mjs → chunk-LDN2MZEU.mjs}

@@ -1,4 +1,4 @@
-import { useChartInteraction } from './chunk-264DR3I2.mjs';
+import { useChartInteraction } from './chunk-DU2NXX75.mjs';
 import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
 import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
 import { ChartLegend } from './chunk-F5HOHSFH.mjs';
@@ -6,7 +6,7 @@ import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
 import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
 import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
-import { getChartInnerRect, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, DEFAULT_CHART_COLORS, createLinePath, createAreaPath, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { getAreaGradientPrefix, getChartInnerRect, resolveSeriesData, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames } from '@expcat/tigercat-core';
 
 var AreaChart = defineComponent({
   name: "TigerAreaChart",
@@ -170,6 +170,18 @@ var AreaChart = defineComponent({
       type: Boolean,
       default: true
     },
+    gradient: {
+      type: Boolean,
+      default: false
+    },
+    animated: {
+      type: Boolean,
+      default: false
+    },
+    pointHollow: {
+      type: Boolean,
+      default: false
+    },
     tooltipFormatter: {
       type: Function
     },
@@ -198,12 +210,11 @@ var AreaChart = defineComponent({
   setup(props, { emit }) {
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
+    const gradientPrefix = getAreaGradientPrefix();
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
-    const resolvedSeries = computed(() => {
-      if (props.series && props.series.length > 0) return props.series;
-      if (props.data && props.data.length > 0) return [{ data: props.data }];
-      return [];
-    });
+    const resolvedSeries = computed(
+      () => resolveSeriesData(props.series, props.data)
+    );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
       resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -217,9 +228,9 @@ var AreaChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
-      hoveredIndexProp: props.hoveredIndex,
+      hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
-      selectedIndexProp: props.selectedIndex,
+      selectedIndexProp: () => props.selectedIndex,
       activeOpacity: computed(() => props.activeOpacity),
       inactiveOpacity: computed(() => props.inactiveOpacity),
       legendPosition: computed(() => props.legendPosition),
@@ -247,7 +258,7 @@ var AreaChart = defineComponent({
         return createLinearScale(extent, [0, innerRect.value.width]);
       } else {
         const categories = [...new Set(xValues.value.map(String))];
-        return createPointScale(categories, [0, innerRect.value.width], { padding: 0.1 });
+        return createPointScale(categories, [0, innerRect.value.width], { padding: 0 });
       }
     });
     const resolvedYScale = computed(() => {
@@ -256,11 +267,9 @@ var AreaChart = defineComponent({
       return createLinearScale(extent, [innerRect.value.height, 0]);
     });
     const baseline = computed(() => resolvedYScale.value.map(0));
-    const showXAxis = computed(() => props.showAxis && props.showXAxis);
-    const showYAxis = computed(() => props.showAxis && props.showYAxis);
-    const palette = computed(
-      () => props.colors && props.colors.length > 0 ? props.colors : [...DEFAULT_CHART_COLORS]
-    );
+    const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
+    const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
+    const palette = computed(() => resolveChartPalette(props.colors));
     const seriesData = computed(() => {
       const stackedData = props.stacked ? stackSeriesData(resolvedSeries.value.map((s) => s.data)) : null;
       return resolvedSeries.value.map((series, seriesIndex) => {
@@ -315,32 +324,28 @@ var AreaChart = defineComponent({
           strokeDasharray: series.strokeDasharray,
           showPoints: series.showPoints ?? props.showPoints,
           pointSize: series.pointSize ?? props.pointSize,
-          pointColor: series.pointColor ?? color
+          pointColor: series.pointColor ?? color,
+          pointHollow: series.pointHollow ?? props.pointHollow
         };
       });
     });
     const legendItems = computed(
-      () => resolvedSeries.value.map((series, index) => ({
-        index,
-        label: props.legendFormatter ? props.legendFormatter(series, index) : series.name ?? `Series ${index + 1}`,
-        color: series.color ?? palette.value[index % palette.value.length],
-        active: activeIndex.value === null || activeIndex.value === index
-      }))
-    );
-    const formatTooltip = computed(
-      () => props.tooltipFormatter ?? ((datum, seriesIndex, _pointIndex, series) => {
-        const seriesName = series?.name ?? `Series ${seriesIndex + 1}`;
-        const label = datum.label ?? String(datum.x);
-        return `${seriesName} \xB7 ${label}: ${datum.y}`;
+      () => buildChartLegendItems({
+        data: resolvedSeries.value,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (s, i) => props.legendFormatter ? props.legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+        getColor: (s, i) => s.color ?? palette.value[i % palette.value.length]
       })
     );
-    const tooltipContent = computed(() => {
-      if (!hoveredPointInfo.value) return "";
-      const { seriesIndex, pointIndex } = hoveredPointInfo.value;
-      const series = resolvedSeries.value[seriesIndex];
-      const datum = series?.data[pointIndex];
-      return datum ? formatTooltip.value(datum, seriesIndex, pointIndex, series) : "";
-    });
+    const tooltipContent = computed(
+      () => resolveMultiSeriesTooltipContent(
+        hoveredPointInfo.value,
+        resolvedSeries.value,
+        props.tooltipFormatter,
+        defaultSeriesXYTooltipFormatter
+      )
+    );
     const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
       hoveredPointInfo.value = { seriesIndex, pointIndex };
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
@@ -374,6 +379,7 @@ var AreaChart = defineComponent({
       handleSeriesSelect(seriesIndex);
     };
     return () => {
+      const reversedSeriesData = [...seriesData.value].reverse();
       const chart = h(
         ChartCanvas,
         {
@@ -386,6 +392,49 @@ var AreaChart = defineComponent({
         },
         {
           default: () => [
+            // Gradient defs and animation styles
+            props.gradient || props.animated ? h("defs", null, [
+              // Animation keyframes
+              props.animated ? h(
+                "style",
+                null,
+                `
+                          .tiger-area-animated {
+                            animation: tiger-area-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+                          }
+                          @keyframes tiger-area-draw {
+                            from { stroke-dashoffset: 1; }
+                            to { stroke-dashoffset: 0; }
+                          }
+                        `
+              ) : null,
+              // Area fill gradients
+              ...props.gradient ? reversedSeriesData.map(
+                (sd) => h(
+                  "linearGradient",
+                  {
+                    key: `area-grad-${sd.seriesIndex}`,
+                    id: `${gradientPrefix}-${sd.seriesIndex}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": sd.fillColor,
+                      "stop-opacity": sd.fillOpacity
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": sd.fillColor,
+                      "stop-opacity": 0.02
+                    })
+                  ]
+                )
+              ) : []
+            ]) : null,
             props.showGrid ? h(ChartGrid, {
               xScale: resolvedXScale.value,
               yScale: resolvedYScale.value,
@@ -397,7 +446,7 @@ var AreaChart = defineComponent({
               lineStyle: props.gridLineStyle,
               strokeWidth: props.gridStrokeWidth
             }) : null,
-            showXAxis.value ? h(ChartAxis, {
+            shouldShowXAxis.value ? h(ChartAxis, {
               scale: resolvedXScale.value,
               orientation: "bottom",
               y: innerRect.value.height,
@@ -406,7 +455,7 @@ var AreaChart = defineComponent({
               tickFormat: props.xTickFormat,
               label: props.xAxisLabel
             }) : null,
-            showYAxis.value ? h(ChartAxis, {
+            shouldShowYAxis.value ? h(ChartAxis, {
               scale: resolvedYScale.value,
               orientation: "left",
               ticks: props.yTicks,
@@ -414,8 +463,8 @@ var AreaChart = defineComponent({
               tickFormat: props.yTickFormat,
               label: props.yAxisLabel
             }) : null,
-            // Render each series (reverse order for proper stacking visual)
-            ...[...seriesData.value].reverse().map(
+            // Layer 1: area fills + line strokes (reverse order for proper stacking visual)
+            ...reversedSeriesData.map(
               (sd) => h(
                 ChartSeries,
                 {
@@ -426,7 +475,8 @@ var AreaChart = defineComponent({
                   opacity: sd.opacity,
                   class: classNames(
                     sd.series.className,
-                    (props.hoverable || props.selectable) && "cursor-pointer"
+                    (props.hoverable || props.selectable) && "cursor-pointer",
+                    "outline-none"
                   ),
                   onMouseenter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
                   onMouseleave: handleSeriesHoverLeave,
@@ -439,10 +489,10 @@ var AreaChart = defineComponent({
                     // Area fill
                     h("path", {
                       d: sd.areaPath,
-                      fill: sd.fillColor,
-                      "fill-opacity": sd.fillOpacity,
+                      fill: props.gradient ? `url(#${gradientPrefix}-${sd.seriesIndex})` : sd.fillColor,
+                      "fill-opacity": props.gradient ? 1 : sd.fillOpacity,
                       stroke: "none",
-                      class: "transition-opacity duration-150",
+                      class: "transition-opacity duration-300",
                       "data-area-series": sd.seriesIndex
                     }),
                     // Line stroke
@@ -451,33 +501,49 @@ var AreaChart = defineComponent({
                       fill: "none",
                       stroke: sd.color,
                       "stroke-width": sd.strokeWidth,
-                      "stroke-dasharray": sd.strokeDasharray,
+                      "stroke-dasharray": props.animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
+                      "stroke-dashoffset": props.animated ? "1" : void 0,
                       "stroke-linecap": "round",
                       "stroke-linejoin": "round",
-                      class: "transition-opacity duration-150"
-                    }),
-                    // Data points
-                    sd.showPoints ? sd.points.map(
-                      (point) => h("circle", {
-                        key: `point-${sd.seriesIndex}-${point.pointIndex}`,
-                        cx: point.x,
-                        cy: point.y,
-                        r: sd.pointSize,
-                        fill: sd.pointColor,
-                        class: "transition-all duration-150",
-                        "data-point-index": point.pointIndex,
-                        onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                        onMousemove: handlePointMouseMove,
-                        onMouseleave: handlePointMouseLeave,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handlePointClick(sd.seriesIndex, point.pointIndex);
-                        }
-                      })
-                    ) : null
+                      pathLength: props.animated ? 1 : void 0,
+                      class: classNames(
+                        "transition-opacity duration-200",
+                        props.animated && "tiger-area-animated"
+                      )
+                    })
                   ]
                 }
               )
+            ),
+            // Layer 2: data points on top of all areas (prevents coverage)
+            ...seriesData.value.filter((sd) => sd.showPoints).map(
+              (sd) => h(
+                "g",
+                { key: `points-${sd.seriesIndex}`, opacity: sd.opacity },
+                sd.points.map((point) => {
+                  const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
+                  const hoverSize = sd.pointSize + 2;
+                  return h("circle", {
+                    key: `point-${sd.seriesIndex}-${point.pointIndex}`,
+                    cx: point.x,
+                    cy: point.y,
+                    r: isHovered ? hoverSize : sd.pointSize,
+                    fill: sd.pointHollow ? "white" : sd.pointColor,
+                    stroke: sd.pointHollow ? sd.pointColor : "none",
+                    "stroke-width": sd.pointHollow ? 2 : 0,
+                    class: "transition-all duration-200 ease-out",
+                    style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
+                    "data-point-index": point.pointIndex,
+                    onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
+                    onMousemove: handlePointMouseMove,
+                    onMouseleave: handlePointMouseLeave,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handlePointClick(sd.seriesIndex, point.pointIndex);
+                    }
+                  });
+                })
+              )
             )
           ].filter(Boolean)
         }
@@ -491,7 +557,7 @@ var AreaChart = defineComponent({
       if (!props.showLegend) {
         return h("div", { class: "inline-block relative" }, [chart, tooltip]);
       }
-      return h("div", { class: wrapperClasses }, [
+      return h("div", { class: wrapperClasses.value }, [
         chart,
         h(ChartLegend, {
           items: legendItems.value,

package/dist/{chunk-OTTMBYP2.mjs → chunk-LLK2OK3K.mjs}

@@ -1,8 +1,8 @@
-import { Textarea } from './chunk-E6LSCXQM.mjs';
-import { Button } from './chunk-YMIO4A2U.mjs';
-import { Tag } from './chunk-LNQYYW3E.mjs';
-import { Text } from './chunk-BWKN2DGI.mjs';
-import { Avatar } from './chunk-U5ZMB6RE.mjs';
+import { Textarea } from './chunk-MKBIVETW.mjs';
+import { Button } from './chunk-D6MR5YRE.mjs';
+import { Tag } from './chunk-3G4VPV4D.mjs';
+import { Text } from './chunk-6V7XCCXN.mjs';
+import { Avatar } from './chunk-COCECPMG.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
 import { buildCommentTree, clipCommentTreeDepth, classNames, coerceClassValue, mergeStyleValues, formatCommentTime } from '@expcat/tigercat-core';
 

package/dist/chunk-LNWRZKX2.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var chunk7AFJ7TKW_js = require('./chunk-7AFJ7TKW.js');
+var vue = require('vue');
+
+// src/components/ImageGroup.ts
+chunk7AFJ7TKW_js.init_ImagePreview();
+var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
+var ImageGroup = vue.defineComponent({
+  name: "TigerImageGroup",
+  props: {
+    preview: { type: Boolean, default: true }
+  },
+  emits: ["preview-visible-change"],
+  setup(props, { slots, emit }) {
+    const images = vue.ref([]);
+    const previewVisible = vue.ref(false);
+    const previewIndex = vue.ref(0);
+    const context = {
+      register(src) {
+        const idx = images.value.length;
+        images.value.push(src);
+        return idx;
+      },
+      unregister(src) {
+        const idx = images.value.indexOf(src);
+        if (idx > -1) {
+          images.value.splice(idx, 1);
+        }
+      },
+      openPreview(index) {
+        if (!props.preview) return;
+        previewIndex.value = index;
+        previewVisible.value = true;
+        emit("preview-visible-change", true);
+      }
+    };
+    vue.provide(IMAGE_GROUP_INJECTION_KEY, context);
+    vue.onBeforeUnmount(() => {
+      images.value = [];
+    });
+    return () => {
+      const children = slots.default?.();
+      const preview = props.preview ? vue.h(chunk7AFJ7TKW_js.ImagePreview, {
+        visible: previewVisible.value,
+        images: images.value,
+        currentIndex: previewIndex.value,
+        "onUpdate:visible": (val) => {
+          previewVisible.value = val;
+          if (!val) emit("preview-visible-change", false);
+        },
+        "onUpdate:currentIndex": (val) => {
+          previewIndex.value = val;
+        }
+      }) : null;
+      return vue.h("div", { class: "tiger-image-group", role: "group" }, [children, preview]);
+    };
+  }
+});
+var ImageGroup_default = ImageGroup;
+
+exports.IMAGE_GROUP_INJECTION_KEY = IMAGE_GROUP_INJECTION_KEY;
+exports.ImageGroup = ImageGroup;
+exports.ImageGroup_default = ImageGroup_default;

package/dist/{chunk-74PW5YAR.mjs → chunk-LRHJZP2C.mjs}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, nextTick, onBeforeUnmount, computed, reactive, provide, h } from 'vue';
+import { defineComponent, ref, computed, watch, onMounted, nextTick, onBeforeUnmount, reactive, provide, h } from 'vue';
 import { classNames, getAnchorWrapperClasses, coerceClassValue, getAnchorInkContainerClasses, getAnchorInkActiveClasses, getAnchorLinkListClasses, mergeStyleValues, findActiveAnchor, scrollToAnchor } from '@expcat/tigercat-core';
 
 // src/components/Anchor.ts
@@ -86,7 +86,9 @@ var Anchor = defineComponent({
     const inkRef = ref(null);
     const isScrolling = ref(false);
     let animationFrameId = null;
+    let scrollTimeoutId = null;
     const getContainer = () => props.getContainer();
+    const scrollOffset = computed(() => props.targetOffset ?? props.offsetTop);
     const registerLink = (href) => {
       if (href && !links.value.includes(href)) {
         links.value = [...links.value, href];
@@ -102,8 +104,12 @@ var Anchor = defineComponent({
       }
       animationFrameId = requestAnimationFrame(() => {
         const container = getContainer();
-        const scrollOffset = props.targetOffset ?? props.offsetTop;
-        const newActiveLink = findActiveAnchor(links.value, container, props.bounds, scrollOffset);
+        const newActiveLink = findActiveAnchor(
+          links.value,
+          container,
+          props.bounds,
+          scrollOffset.value
+        );
         const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
         if (finalActiveLink !== activeLink.value) {
           activeLink.value = finalActiveLink;
@@ -112,17 +118,17 @@ var Anchor = defineComponent({
       });
     };
     const scrollTo = (href) => {
-      const container = getContainer();
-      const scrollOffset = props.targetOffset ?? props.offsetTop;
-      scrollToAnchor(href, container, scrollOffset);
+      scrollToAnchor(href, getContainer(), scrollOffset.value);
     };
     const handleLinkClick = (href, event) => {
       emit("click", event, href);
       isScrolling.value = true;
       activeLink.value = href;
       scrollTo(href);
-      setTimeout(() => {
+      if (scrollTimeoutId !== null) clearTimeout(scrollTimeoutId);
+      scrollTimeoutId = setTimeout(() => {
         isScrolling.value = false;
+        scrollTimeoutId = null;
       }, 500);
     };
     const updateInkPosition = () => {
@@ -165,6 +171,9 @@ var Anchor = defineComponent({
       if (animationFrameId !== null) {
         cancelAnimationFrame(animationFrameId);
       }
+      if (scrollTimeoutId !== null) {
+        clearTimeout(scrollTimeoutId);
+      }
     });
     const wrapperClasses = computed(() => {
       return classNames(
@@ -181,10 +190,7 @@ var Anchor = defineComponent({
     const linkListClasses = computed(() => {
       return getAnchorLinkListClasses(props.direction);
     });
-    const showInk = computed(() => {
-      if (!props.affix) return true;
-      return props.showInkInFixed;
-    });
+    const showInk = computed(() => !props.affix || props.showInkInFixed);
     const wrapperStyle = computed(() => {
       const baseStyle = {};
       if (props.affix && props.offsetTop > 0) {
@@ -200,15 +206,10 @@ var Anchor = defineComponent({
       handleLinkClick,
       scrollTo
     });
-    watch(activeLink, (newVal) => {
-      contextValue.activeLink = newVal;
+    watch([activeLink, () => props.direction], ([newActive, newDir]) => {
+      contextValue.activeLink = newActive;
+      contextValue.direction = newDir;
     });
-    watch(
-      () => props.direction,
-      (newVal) => {
-        contextValue.direction = newVal;
-      }
-    );
     provide(AnchorContextKey, contextValue);
     return () => {
       const inkIndicator = showInk.value ? [

package/dist/chunk-M7EBWJZ5.mjs

@@ -0,0 +1,41 @@
+import { defineComponent, computed, h } from 'vue';
+import { getSpaceClasses, getSpaceStyle } from '@expcat/tigercat-core';
+
+// src/components/Space.ts
+var Space = defineComponent({
+  name: "TigerSpace",
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    size: {
+      type: [String, Number],
+      default: "md"
+    },
+    align: {
+      type: String,
+      default: "start"
+    },
+    wrap: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const classes = computed(() => getSpaceClasses(props));
+    const style = computed(() => getSpaceStyle(props.size));
+    return () => h(
+      "div",
+      {
+        ...attrs,
+        class: [classes.value, attrs.class],
+        style: [style.value, attrs.style]
+      },
+      slots.default?.()
+    );
+  }
+});
+var Space_default = Space;
+
+export { Space, Space_default };