@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/chunk-3WM7WK7E.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var chunkBFNHRBWN_js = require('./chunk-BFNHRBWN.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var createPopoverId = tigercatCore.createFloatingIdFactory("popover");
+var Popover = vue.defineComponent({
+  name: "TigerPopover",
+  inheritAttrs: false,
+  props: {
+    /** Whether the popover is visible (controlled mode) */
+    visible: { type: Boolean, default: void 0 },
+    /** Default visibility (uncontrolled mode) */
+    defaultVisible: { type: Boolean, default: false },
+    /** Popover title text */
+    title: { type: String, default: void 0 },
+    /** Popover content text */
+    content: { type: String, default: void 0 },
+    /** Trigger type @default 'click' */
+    trigger: { type: String, default: "click" },
+    /** Placement @default 'top' */
+    placement: { type: String, default: "top" },
+    /** Disabled state */
+    disabled: { type: Boolean, default: false },
+    /** Width (pixel number or Tailwind class) */
+    width: { type: [String, Number], default: void 0 },
+    /** Offset distance in pixels @default 8 */
+    offset: { type: Number, default: 8 },
+    /** Additional CSS classes */
+    className: { type: String, default: void 0 },
+    style: { type: [String, Object, Array], default: void 0 }
+  },
+  emits: ["update:visible", "visible-change"],
+  setup(props, { slots, emit, attrs }) {
+    const attrsRecord = attrs;
+    const {
+      currentVisible,
+      containerRef,
+      triggerRef,
+      floatingRef,
+      floatingStyles,
+      triggerHandlers
+    } = chunkBFNHRBWN_js.useFloatingPopup({ props, emit });
+    const popoverId = createPopoverId();
+    const titleId = `${popoverId}-title`;
+    const contentId = `${popoverId}-content`;
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(tigercatCore.getPopoverContainerClasses(), props.className, tigercatCore.coerceClassValue(attrsRecord.class))
+    );
+    const triggerClasses = vue.computed(() => tigercatCore.getPopoverTriggerClasses(props.disabled));
+    const contentClasses = vue.computed(() => tigercatCore.getPopoverContentClasses(props.width));
+    return () => {
+      const defaultSlot = slots.default?.();
+      if (!defaultSlot || defaultSlot.length === 0) return null;
+      const {
+        class: _class,
+        style: _style,
+        ...restAttrs
+      } = attrsRecord;
+      const hasTitle = Boolean(props.title || slots.title);
+      const hasContent = Boolean(props.content || slots.content);
+      return vue.h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          class: containerClasses.value,
+          style: props.style
+        },
+        [
+          // Trigger
+          vue.h(
+            "div",
+            {
+              ref: triggerRef,
+              class: triggerClasses.value,
+              "aria-haspopup": "dialog",
+              "aria-disabled": props.disabled ? "true" : void 0,
+              ...triggerHandlers.value
+            },
+            defaultSlot
+          ),
+          // Floating content
+          currentVisible.value ? vue.h(
+            "div",
+            { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false },
+            [
+              vue.h(
+                "div",
+                {
+                  id: popoverId,
+                  role: "dialog",
+                  "aria-modal": "false",
+                  "aria-labelledby": hasTitle ? titleId : void 0,
+                  "aria-describedby": hasContent ? contentId : void 0,
+                  class: contentClasses.value
+                },
+                [
+                  hasTitle && vue.h(
+                    "div",
+                    { id: titleId, class: tigercatCore.POPOVER_TITLE_CLASSES },
+                    slots.title ? slots.title() : props.title
+                  ),
+                  hasContent && vue.h(
+                    "div",
+                    { id: contentId, class: tigercatCore.POPOVER_TEXT_CLASSES },
+                    slots.content ? slots.content() : props.content
+                  )
+                ].filter(Boolean)
+              )
+            ]
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Popover_default = Popover;
+
+exports.Popover = Popover;
+exports.Popover_default = Popover_default;

package/dist/chunk-3ZHQJ4W6.mjs

@@ -0,0 +1,119 @@
+import { useFloatingPopup } from './chunk-WIPPSHI6.mjs';
+import { defineComponent, computed, h } from 'vue';
+import { createFloatingIdFactory, classNames, getPopoverContainerClasses, coerceClassValue, getPopoverTriggerClasses, getPopoverContentClasses, POPOVER_TITLE_CLASSES, POPOVER_TEXT_CLASSES } from '@expcat/tigercat-core';
+
+var createPopoverId = createFloatingIdFactory("popover");
+var Popover = defineComponent({
+  name: "TigerPopover",
+  inheritAttrs: false,
+  props: {
+    /** Whether the popover is visible (controlled mode) */
+    visible: { type: Boolean, default: void 0 },
+    /** Default visibility (uncontrolled mode) */
+    defaultVisible: { type: Boolean, default: false },
+    /** Popover title text */
+    title: { type: String, default: void 0 },
+    /** Popover content text */
+    content: { type: String, default: void 0 },
+    /** Trigger type @default 'click' */
+    trigger: { type: String, default: "click" },
+    /** Placement @default 'top' */
+    placement: { type: String, default: "top" },
+    /** Disabled state */
+    disabled: { type: Boolean, default: false },
+    /** Width (pixel number or Tailwind class) */
+    width: { type: [String, Number], default: void 0 },
+    /** Offset distance in pixels @default 8 */
+    offset: { type: Number, default: 8 },
+    /** Additional CSS classes */
+    className: { type: String, default: void 0 },
+    style: { type: [String, Object, Array], default: void 0 }
+  },
+  emits: ["update:visible", "visible-change"],
+  setup(props, { slots, emit, attrs }) {
+    const attrsRecord = attrs;
+    const {
+      currentVisible,
+      containerRef,
+      triggerRef,
+      floatingRef,
+      floatingStyles,
+      triggerHandlers
+    } = useFloatingPopup({ props, emit });
+    const popoverId = createPopoverId();
+    const titleId = `${popoverId}-title`;
+    const contentId = `${popoverId}-content`;
+    const containerClasses = computed(
+      () => classNames(getPopoverContainerClasses(), props.className, coerceClassValue(attrsRecord.class))
+    );
+    const triggerClasses = computed(() => getPopoverTriggerClasses(props.disabled));
+    const contentClasses = computed(() => getPopoverContentClasses(props.width));
+    return () => {
+      const defaultSlot = slots.default?.();
+      if (!defaultSlot || defaultSlot.length === 0) return null;
+      const {
+        class: _class,
+        style: _style,
+        ...restAttrs
+      } = attrsRecord;
+      const hasTitle = Boolean(props.title || slots.title);
+      const hasContent = Boolean(props.content || slots.content);
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          class: containerClasses.value,
+          style: props.style
+        },
+        [
+          // Trigger
+          h(
+            "div",
+            {
+              ref: triggerRef,
+              class: triggerClasses.value,
+              "aria-haspopup": "dialog",
+              "aria-disabled": props.disabled ? "true" : void 0,
+              ...triggerHandlers.value
+            },
+            defaultSlot
+          ),
+          // Floating content
+          currentVisible.value ? h(
+            "div",
+            { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false },
+            [
+              h(
+                "div",
+                {
+                  id: popoverId,
+                  role: "dialog",
+                  "aria-modal": "false",
+                  "aria-labelledby": hasTitle ? titleId : void 0,
+                  "aria-describedby": hasContent ? contentId : void 0,
+                  class: contentClasses.value
+                },
+                [
+                  hasTitle && h(
+                    "div",
+                    { id: titleId, class: POPOVER_TITLE_CLASSES },
+                    slots.title ? slots.title() : props.title
+                  ),
+                  hasContent && h(
+                    "div",
+                    { id: contentId, class: POPOVER_TEXT_CLASSES },
+                    slots.content ? slots.content() : props.content
+                  )
+                ].filter(Boolean)
+              )
+            ]
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Popover_default = Popover;
+
+export { Popover, Popover_default };

package/dist/{chunk-X5BEVY5O.mjs → chunk-46DEQQMB.mjs}

@@ -30,23 +30,22 @@ var Footer = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const footerClasses = computed(
-      () => classNames(layoutFooterClasses, props.className, coerceClassValue(attrsRecord.class))
+      () => classNames(
+        layoutFooterClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => h(
+      "footer",
+      {
+        ...attrs,
+        class: footerClasses.value,
+        style: mergeStyleValues(props.style, { height: props.height })
+      },
+      slots.default?.()
     );
-    return () => {
-      return h(
-        "footer",
-        {
-          ...attrs,
-          class: footerClasses.value,
-          style: mergeStyleValues(attrsRecord.style, props.style, {
-            height: props.height
-          })
-        },
-        slots.default?.()
-      );
-    };
   }
 });
 var Footer_default = Footer;

package/dist/{chunk-QVMU7OT7.mjs → chunk-4L5UYIV6.mjs}

@@ -1,4 +1,4 @@
-import { CollapseContextKey } from './chunk-OVFGETP7.mjs';
+import { CollapseContextKey } from './chunk-DVFDA2P2.mjs';
 import { defineComponent, inject, computed, h } from 'vue';
 import { isPanelActive, classNames, getCollapsePanelClasses, coerceClassValue, getCollapsePanelHeaderClasses, getCollapseIconClasses, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
 

package/dist/{chunk-CDZHYIXG.js → chunk-4NSRGKRB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJFZDIY7D_js = require('./chunk-JFZDIY7D.js');
+var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
 var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
 var chunk57MJTNDL_js = require('./chunk-57MJTNDL.js');
 var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
@@ -172,6 +172,18 @@ var AreaChart = vue.defineComponent({
       type: Boolean,
       default: true
     },
+    gradient: {
+      type: Boolean,
+      default: false
+    },
+    animated: {
+      type: Boolean,
+      default: false
+    },
+    pointHollow: {
+      type: Boolean,
+      default: false
+    },
     tooltipFormatter: {
       type: Function
     },
@@ -200,12 +212,11 @@ var AreaChart = vue.defineComponent({
   setup(props, { emit }) {
     const hoveredPointInfo = vue.ref(null);
     const tooltipPosition = vue.ref({ x: 0, y: 0 });
+    const gradientPrefix = tigercatCore.getAreaGradientPrefix();
     const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
-    const resolvedSeries = vue.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 = vue.computed(
+      () => tigercatCore.resolveSeriesData(props.series, props.data)
+    );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
       resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -217,11 +228,11 @@ var AreaChart = vue.defineComponent({
       handleLegendHover: _handleLegendHover,
       handleLegendLeave: _handleLegendLeave,
       wrapperClasses
-    } = chunkJFZDIY7D_js.useChartInteraction({
+    } = chunkFLAJKB2O_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
-      hoveredIndexProp: props.hoveredIndex,
+      hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
-      selectedIndexProp: props.selectedIndex,
+      selectedIndexProp: () => props.selectedIndex,
       activeOpacity: vue.computed(() => props.activeOpacity),
       inactiveOpacity: vue.computed(() => props.inactiveOpacity),
       legendPosition: vue.computed(() => props.legendPosition),
@@ -249,7 +260,7 @@ var AreaChart = vue.defineComponent({
         return tigercatCore.createLinearScale(extent, [0, innerRect.value.width]);
       } else {
         const categories = [...new Set(xValues.value.map(String))];
-        return tigercatCore.createPointScale(categories, [0, innerRect.value.width], { padding: 0.1 });
+        return tigercatCore.createPointScale(categories, [0, innerRect.value.width], { padding: 0 });
       }
     });
     const resolvedYScale = vue.computed(() => {
@@ -258,11 +269,9 @@ var AreaChart = vue.defineComponent({
       return tigercatCore.createLinearScale(extent, [innerRect.value.height, 0]);
     });
     const baseline = vue.computed(() => resolvedYScale.value.map(0));
-    const showXAxis = vue.computed(() => props.showAxis && props.showXAxis);
-    const showYAxis = vue.computed(() => props.showAxis && props.showYAxis);
-    const palette = vue.computed(
-      () => props.colors && props.colors.length > 0 ? props.colors : [...tigercatCore.DEFAULT_CHART_COLORS]
-    );
+    const shouldShowXAxis = vue.computed(() => props.showAxis && props.showXAxis);
+    const shouldShowYAxis = vue.computed(() => props.showAxis && props.showYAxis);
+    const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
     const seriesData = vue.computed(() => {
       const stackedData = props.stacked ? tigercatCore.stackSeriesData(resolvedSeries.value.map((s) => s.data)) : null;
       return resolvedSeries.value.map((series, seriesIndex) => {
@@ -317,32 +326,28 @@ var AreaChart = vue.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 = vue.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 = vue.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}`;
+      () => tigercatCore.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 = vue.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 = vue.computed(
+      () => tigercatCore.resolveMultiSeriesTooltipContent(
+        hoveredPointInfo.value,
+        resolvedSeries.value,
+        props.tooltipFormatter,
+        tigercatCore.defaultSeriesXYTooltipFormatter
+      )
+    );
     const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
       hoveredPointInfo.value = { seriesIndex, pointIndex };
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
@@ -376,6 +381,7 @@ var AreaChart = vue.defineComponent({
       handleSeriesSelect(seriesIndex);
     };
     return () => {
+      const reversedSeriesData = [...seriesData.value].reverse();
       const chart = vue.h(
         chunkFCV4ML6I_js.ChartCanvas,
         {
@@ -388,6 +394,49 @@ var AreaChart = vue.defineComponent({
         },
         {
           default: () => [
+            // Gradient defs and animation styles
+            props.gradient || props.animated ? vue.h("defs", null, [
+              // Animation keyframes
+              props.animated ? vue.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) => vue.h(
+                  "linearGradient",
+                  {
+                    key: `area-grad-${sd.seriesIndex}`,
+                    id: `${gradientPrefix}-${sd.seriesIndex}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": sd.fillColor,
+                      "stop-opacity": sd.fillOpacity
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": sd.fillColor,
+                      "stop-opacity": 0.02
+                    })
+                  ]
+                )
+              ) : []
+            ]) : null,
             props.showGrid ? vue.h(chunk57MJTNDL_js.ChartGrid, {
               xScale: resolvedXScale.value,
               yScale: resolvedYScale.value,
@@ -399,7 +448,7 @@ var AreaChart = vue.defineComponent({
               lineStyle: props.gridLineStyle,
               strokeWidth: props.gridStrokeWidth
             }) : null,
-            showXAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
+            shouldShowXAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
               scale: resolvedXScale.value,
               orientation: "bottom",
               y: innerRect.value.height,
@@ -408,7 +457,7 @@ var AreaChart = vue.defineComponent({
               tickFormat: props.xTickFormat,
               label: props.xAxisLabel
             }) : null,
-            showYAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
+            shouldShowYAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
               scale: resolvedYScale.value,
               orientation: "left",
               ticks: props.yTicks,
@@ -416,8 +465,8 @@ var AreaChart = vue.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) => vue.h(
                 chunkHBFFINAI_js.ChartSeries,
                 {
@@ -428,7 +477,8 @@ var AreaChart = vue.defineComponent({
                   opacity: sd.opacity,
                   class: tigercatCore.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,
@@ -441,10 +491,10 @@ var AreaChart = vue.defineComponent({
                     // Area fill
                     vue.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
@@ -453,33 +503,49 @@ var AreaChart = vue.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) => vue.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: tigercatCore.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) => vue.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 vue.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)
         }
@@ -493,7 +559,7 @@ var AreaChart = vue.defineComponent({
       if (!props.showLegend) {
         return vue.h("div", { class: "inline-block relative" }, [chart, tooltip]);
       }
-      return vue.h("div", { class: wrapperClasses }, [
+      return vue.h("div", { class: wrapperClasses.value }, [
         chart,
         vue.h(chunkBKTQ6RWR_js.ChartLegend, {
           items: legendItems.value,