@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-WEFTEDUS.js → chunk-O2SABM5H.js}

@@ -126,44 +126,31 @@ var Menu = vue.defineComponent({
       const { class: _class, style: _style, ...rest } = attrs;
       return rest;
     });
+    const modeRef = vue.computed(() => props.mode);
+    const themeRef = vue.computed(() => props.theme);
+    const collapsedRef = vue.computed(() => props.collapsed);
+    const inlineIndentRef = vue.computed(() => props.inlineIndent);
     vue.provide(MenuContextKey, {
-      mode: props.mode,
-      theme: props.theme,
-      collapsed: props.collapsed,
-      inlineIndent: props.inlineIndent,
+      mode: modeRef,
+      theme: themeRef,
+      collapsed: collapsedRef,
+      inlineIndent: inlineIndentRef,
       selectedKeys: currentSelectedKeys,
       openKeys: currentOpenKeys,
       handleSelect,
       handleOpenChange
     });
-    const initRovingTabIndex = async () => {
+    const runRovingTabIndex = async () => {
       await vue.nextTick();
-      const root = menuEl.value;
-      if (!root) return;
-      const items = Array.from(
-        root.querySelectorAll('button[data-tiger-menuitem="true"]')
-      ).filter((el) => !el.disabled);
-      if (items.length === 0) return;
-      const hasActive = items.some((el) => el.tabIndex === 0);
-      if (hasActive) return;
-      const selected = items.find((el) => el.dataset.tigerSelected === "true");
-      const active = selected ?? items[0];
-      items.forEach((el) => {
-        el.tabIndex = el === active ? 0 : -1;
-      });
+      if (menuEl.value) tigercatCore.initRovingTabIndex(menuEl.value);
     };
     vue.onMounted(() => {
-      void initRovingTabIndex();
+      void runRovingTabIndex();
     });
     vue.watch(
-      [
-        () => props.mode,
-        () => props.collapsed,
-        () => currentSelectedKeys.value,
-        () => currentOpenKeys.value
-      ],
+      [modeRef, collapsedRef, currentSelectedKeys, currentOpenKeys],
       () => {
-        void initRovingTabIndex();
+        void runRovingTabIndex();
       },
       { deep: true }
     );

package/dist/{chunk-42ILM3BR.js → chunk-OO5UMN5M.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');
@@ -13,14 +13,8 @@ var tigercatCore = require('@expcat/tigercat-core');
 var ScatterChart = vue.defineComponent({
   name: "TigerScatterChart",
   props: {
-    width: {
-      type: Number,
-      default: 320
-    },
-    height: {
-      type: Number,
-      default: 200
-    },
+    width: { type: Number, default: 320 },
+    height: { type: Number, default: 200 },
     padding: {
       type: [Number, Object],
       default: 24
@@ -29,63 +23,33 @@ var ScatterChart = vue.defineComponent({
       type: Array,
       required: true
     },
-    xScale: {
-      type: Object
-    },
-    yScale: {
-      type: Object
-    },
-    pointSize: {
-      type: Number,
-      default: 4
-    },
+    xScale: { type: Object },
+    yScale: { type: Object },
+    pointSize: { type: Number, default: 6 },
     pointColor: {
       type: String,
       default: "var(--tiger-primary,#2563eb)"
     },
-    pointOpacity: {
-      type: Number
-    },
-    showGrid: {
-      type: Boolean,
-      default: true
-    },
-    showAxis: {
-      type: Boolean,
-      default: true
-    },
-    showXAxis: {
-      type: Boolean,
-      default: true
-    },
-    showYAxis: {
-      type: Boolean,
-      default: true
-    },
-    includeZero: {
-      type: Boolean,
-      default: false
-    },
-    xAxisLabel: {
-      type: String
-    },
-    yAxisLabel: {
-      type: String
-    },
-    xTicks: {
-      type: Number,
-      default: 5
-    },
-    yTicks: {
-      type: Number,
-      default: 5
-    },
-    xTickValues: {
-      type: Array
-    },
-    yTickValues: {
-      type: Array
-    },
+    pointOpacity: { type: Number },
+    pointStyle: {
+      type: String,
+      default: "circle"
+    },
+    gradient: { type: Boolean, default: false },
+    animated: { type: Boolean, default: false },
+    pointBorderWidth: { type: Number, default: 0 },
+    pointBorderColor: { type: String, default: "white" },
+    showGrid: { type: Boolean, default: true },
+    showAxis: { type: Boolean, default: true },
+    showXAxis: { type: Boolean, default: true },
+    showYAxis: { type: Boolean, default: true },
+    includeZero: { type: Boolean, default: false },
+    xAxisLabel: { type: String },
+    yAxisLabel: { type: String },
+    xTicks: { type: Number, default: 5 },
+    yTicks: { type: Number, default: 5 },
+    xTickValues: { type: Array },
+    yTickValues: { type: Array },
     xTickFormat: {
       type: Function
     },
@@ -96,79 +60,49 @@ var ScatterChart = vue.defineComponent({
       type: String,
       default: "solid"
     },
-    gridStrokeWidth: {
-      type: Number,
-      default: 1
-    },
-    // Interaction props
-    hoverable: {
-      type: Boolean,
-      default: false
-    },
+    gridStrokeWidth: { type: Number, default: 1 },
+    // 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
-    },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    selectable: { type: Boolean, default: false },
     selectedIndex: {
       type: Number,
       default: void 0
     },
-    // Legend props
-    showLegend: {
-      type: Boolean,
-      default: false
-    },
+    // Legend
+    showLegend: { type: Boolean, default: false },
     legendPosition: {
       type: String,
       default: "bottom"
     },
-    legendMarkerSize: {
-      type: Number,
-      default: 10
-    },
-    legendGap: {
-      type: Number,
-      default: 8
-    },
+    legendMarkerSize: { type: Number, default: 10 },
+    legendGap: { type: Number, default: 8 },
     legendFormatter: {
       type: Function
     },
-    // Tooltip props
-    showTooltip: {
-      type: Boolean,
-      default: true
-    },
+    // Tooltip
+    showTooltip: { type: Boolean, default: true },
     tooltipFormatter: {
       type: Function
     },
     // Other
-    colors: {
-      type: Array
-    },
-    title: {
-      type: String
-    },
-    desc: {
-      type: String
-    },
-    className: {
-      type: String
-    }
+    colors: { type: Array },
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "point-click", "point-hover"],
   setup(props, { emit }) {
+    const gradientPrefix = tigercatCore.getScatterGradientPrefix();
+    const mounted = vue.ref(false);
+    vue.onMounted(() => {
+      if (props.animated) mounted.value = true;
+    });
     const {
       tooltipPosition,
       resolvedHoveredIndex,
@@ -182,11 +116,11 @@ var ScatterChart = vue.defineComponent({
       handleLegendHover,
       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),
@@ -207,11 +141,9 @@ var ScatterChart = vue.defineComponent({
       const extent = tigercatCore.getNumberExtent(yValues.value, { includeZero: props.includeZero });
       return tigercatCore.createLinearScale(extent, [innerRect.value.height, 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 : props.pointColor ? [props.pointColor] : [...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, props.pointColor));
     const points = vue.computed(
       () => props.data.map((item, index) => {
         const color = item.color ?? palette.value[index % palette.value.length];
@@ -219,36 +151,58 @@ var ScatterChart = vue.defineComponent({
           activeOpacity: props.activeOpacity,
           inactiveOpacity: props.inactiveOpacity
         });
+        const isHovered = resolvedHoveredIndex.value === index;
+        const baseSize = item.size ?? props.pointSize;
+        const r = isHovered ? tigercatCore.getScatterHoverSize(baseSize) : baseSize;
         return {
           cx: resolvedXScale.value.map(item.x),
           cy: resolvedYScale.value.map(item.y),
-          r: item.size ?? props.pointSize,
+          r,
+          baseSize,
           color,
           opacity: props.pointOpacity ?? opacity,
+          isHovered,
           datum: item
         };
       })
     );
     const legendItems = vue.computed(
-      () => props.data.map((item, index) => ({
-        index,
-        label: props.legendFormatter ? props.legendFormatter(item, index) : item.label ?? `(${item.x}, ${item.y})`,
-        color: item.color ?? palette.value[index % palette.value.length],
-        active: activeIndex.value === null || activeIndex.value === index
-      }))
-    );
-    const formatTooltip = vue.computed(
-      () => props.tooltipFormatter ?? ((datum, index) => {
-        const label = datum.label ?? `Point ${index + 1}`;
-        return `${label}: (${datum.x}, ${datum.y})`;
+      () => tigercatCore.buildChartLegendItems({
+        data: props.data,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (d, i) => props.legendFormatter ? props.legendFormatter(d, i) : d.label ?? `(${d.x}, ${d.y})`,
+        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
       })
     );
-    const tooltipContent = vue.computed(() => {
-      if (resolvedHoveredIndex.value === null) return "";
-      const datum = props.data[resolvedHoveredIndex.value];
-      return datum ? formatTooltip.value(datum, resolvedHoveredIndex.value) : "";
-    });
+    const tooltipContent = vue.computed(
+      () => tigercatCore.resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        props.data,
+        props.tooltipFormatter,
+        (datum, index) => {
+          const label = datum.label ?? `Point ${index + 1}`;
+          return `${label}: (${datum.x}, ${datum.y})`;
+        }
+      )
+    );
     return () => {
+      const defs = props.gradient ? vue.h(
+        "defs",
+        null,
+        palette.value.map(
+          (color, i) => vue.h(
+            "radialGradient",
+            { id: `${gradientPrefix}-${i}`, cx: "35%", cy: "35%", r: "65%" },
+            [
+              vue.h("stop", { offset: "0%", "stop-color": "#fff", "stop-opacity": "0.5" }),
+              vue.h("stop", { offset: "50%", "stop-color": color, "stop-opacity": "0.95" }),
+              vue.h("stop", { offset: "100%", "stop-color": color, "stop-opacity": "1" })
+            ]
+          )
+        )
+      ) : null;
+      const animStyle = props.animated && mounted.value ? vue.h("style", null, tigercatCore.SCATTER_ENTRANCE_KEYFRAMES) : null;
       const chart = vue.h(
         chunkFCV4ML6I_js.ChartCanvas,
         {
@@ -261,6 +215,8 @@ var ScatterChart = vue.defineComponent({
         },
         {
           default: () => [
+            defs,
+            animStyle,
             props.showGrid ? vue.h(chunk57MJTNDL_js.ChartGrid, {
               xScale: resolvedXScale.value,
               yScale: resolvedYScale.value,
@@ -272,7 +228,7 @@ var ScatterChart = 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,
@@ -281,7 +237,7 @@ var ScatterChart = 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,
@@ -291,23 +247,28 @@ var ScatterChart = vue.defineComponent({
             }) : null,
             vue.h(
               chunkHBFFINAI_js.ChartSeries,
+              { data: props.data, type: "scatter" },
               {
-                data: props.data,
-                type: "scatter"
-              },
-              {
-                default: () => points.value.map(
-                  (point, index) => vue.h("circle", {
-                    key: `point-${index}`,
-                    cx: point.cx,
-                    cy: point.cy,
-                    r: point.r,
-                    fill: point.color,
+                default: () => points.value.map((point, index) => {
+                  const paletteIdx = index % palette.value.length;
+                  const fill = props.gradient ? `url(#${gradientPrefix}-${paletteIdx})` : point.color;
+                  const interactive = props.hoverable || props.selectable;
+                  const filterStyle = point.isHovered ? tigercatCore.getScatterHoverShadow(point.color) : void 0;
+                  const animDelay = props.animated && mounted.value ? `${index * 60}ms` : void 0;
+                  const styleStr = [
+                    filterStyle ? `filter:${filterStyle}` : "",
+                    animDelay ? `animation:${tigercatCore.SCATTER_ENTRANCE_CLASS} 500ms cubic-bezier(.34,1.56,.64,1) ${animDelay} both` : ""
+                  ].filter(Boolean).join(";");
+                  const shared = {
+                    fill,
                     opacity: point.opacity,
+                    stroke: props.pointBorderColor,
+                    "stroke-width": props.pointBorderWidth,
                     class: tigercatCore.classNames(
-                      "transition-opacity duration-150",
-                      (props.hoverable || props.selectable) && "cursor-pointer"
+                      tigercatCore.scatterPointTransitionClasses,
+                      interactive && "cursor-pointer"
                     ),
+                    style: styleStr || void 0,
                     tabindex: props.selectable ? 0 : void 0,
                     role: props.selectable ? "button" : "img",
                     "aria-label": point.datum.label ?? `Point ${index + 1}: (${point.datum.x}, ${point.datum.y})`,
@@ -317,8 +278,23 @@ var ScatterChart = vue.defineComponent({
                     onMouseleave: handleMouseLeave,
                     onClick: () => handleClick(index),
                     onKeydown: (e) => handleKeyDown(e, index)
-                  })
-                )
+                  };
+                  if (props.pointStyle === "circle") {
+                    return vue.h("circle", {
+                      key: `point-${index}`,
+                      cx: point.cx,
+                      cy: point.cy,
+                      r: point.r,
+                      ...shared
+                    });
+                  }
+                  return vue.h("path", {
+                    key: `point-${index}`,
+                    d: tigercatCore.getScatterPointPath(props.pointStyle, point.r),
+                    transform: `translate(${point.cx},${point.cy})`,
+                    ...shared
+                  });
+                })
               }
             )
           ].filter(Boolean)

package/dist/chunk-OOKS4KMK.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/utils/icon-helpers.ts
+function createStatusIcon(path, className, extraAttrs) {
+  return vue.h(
+    "svg",
+    {
+      class: className,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: tigercatCore.icon24ViewBox,
+      stroke: "currentColor",
+      "stroke-width": String(tigercatCore.icon24StrokeWidth),
+      ...extraAttrs
+    },
+    [
+      vue.h("path", {
+        "stroke-linecap": tigercatCore.icon24PathStrokeLinecap,
+        "stroke-linejoin": tigercatCore.icon24PathStrokeLinejoin,
+        d: path
+      })
+    ]
+  );
+}
+function createStatusIconWithLoading(path, className, isLoading, spinnerClass) {
+  const merged = tigercatCore.classNames(className, isLoading && spinnerClass);
+  return createStatusIcon(path, merged);
+}
+
+exports.createStatusIcon = createStatusIcon;
+exports.createStatusIconWithLoading = createStatusIconWithLoading;