@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-IE5CXLWU.mjs

@@ -0,0 +1,203 @@
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu
+} from "./chunk-IWIRPC5E.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/DataExport.ts
+import { computed, defineComponent, h, ref } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  DEFAULT_DATA_EXPORT_FORMATS,
+  devWarn,
+  getDataExportFormatLabel,
+  getDataExportLabels,
+  isDataExportFormat,
+  mergeStyleValues,
+  mergeTigerLocale,
+  resolveButtonClasses,
+  yieldDataExportFrame
+} from "@expcat/tigercat-core";
+var dataExportModulePromise = null;
+function loadDataExportModule() {
+  dataExportModulePromise ??= import("@expcat/tigercat-core/utils/data-export");
+  return dataExportModulePromise;
+}
+var DataExport = defineComponent({
+  name: "TigerDataExport",
+  inheritAttrs: false,
+  props: {
+    columns: {
+      type: Array,
+      required: true
+    },
+    dataSource: {
+      type: Array,
+      required: true
+    },
+    /**
+     * Formats offered to the user. A single format renders a plain button,
+     * multiple formats render a dropdown menu.
+     */
+    formats: {
+      type: Array,
+      default: () => [...DEFAULT_DATA_EXPORT_FORMATS]
+    },
+    /** Download file name. Matching suffixes are not duplicated. */
+    fileName: {
+      type: String,
+      default: "export"
+    },
+    /** Worksheet name used for xlsx output */
+    sheetName: {
+      type: String,
+      default: void 0
+    },
+    /** Transform a cell value before serialization */
+    cellFormatter: {
+      type: Function,
+      default: void 0
+    },
+    hiddenColumnKeys: {
+      type: Array,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    /** Locale overrides merged on top of ConfigProvider locale */
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    /** UI labels for custom text. Takes precedence over locale and ConfigProvider text. */
+    labels: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    export: (_format) => true,
+    error: (_error) => true
+  },
+  setup(props, { emit, expose, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const resolvedLabels = computed(() => getDataExportLabels(mergedLocale.value, props.labels));
+    const exporting = ref(false);
+    const exportError = ref(null);
+    const formatsEmpty = computed(() => props.formats.length === 0);
+    const offeredFormats = computed(
+      () => formatsEmpty.value ? [...DEFAULT_DATA_EXPORT_FORMATS] : props.formats
+    );
+    const triggerDisabled = computed(() => props.disabled || exporting.value || formatsEmpty.value);
+    const handleExport = async (format) => {
+      if (triggerDisabled.value || exporting.value) return;
+      if (!isDataExportFormat(format)) {
+        devWarn("DataExport.format", `Unknown export format "${String(format)}"`);
+        return;
+      }
+      exporting.value = true;
+      exportError.value = null;
+      try {
+        await yieldDataExportFrame();
+        const mod = await loadDataExportModule();
+        mod.runDataExport({
+          columns: props.columns,
+          dataSource: props.dataSource,
+          format,
+          fileName: props.fileName,
+          sheetName: props.sheetName,
+          cellFormatter: props.cellFormatter,
+          hiddenColumnKeys: props.hiddenColumnKeys
+        });
+        emit("export", format);
+      } catch (error) {
+        exportError.value = resolvedLabels.value.errorText;
+        emit("error", error);
+      } finally {
+        exporting.value = false;
+      }
+    };
+    expose({ export: handleExport });
+    return () => {
+      if (formatsEmpty.value) {
+        devWarn("DataExport.formats", "formats is empty; the export trigger stays disabled");
+      }
+      const attrsRecord = attrs;
+      const {
+        class: attrsClass,
+        style: attrsStyle,
+        ...restAttrs
+      } = attrsRecord;
+      const triggerText = exporting.value ? resolvedLabels.value.exportingText : offeredFormats.value.length === 1 ? getDataExportFormatLabel(offeredFormats.value[0], resolvedLabels.value) : resolvedLabels.value.triggerText;
+      const triggerButton = h(
+        "button",
+        {
+          ...restAttrs,
+          type: "button",
+          class: classNames(
+            resolveButtonClasses({
+              variant: "outline",
+              size: "sm",
+              disabled: triggerDisabled.value
+            }),
+            props.className,
+            coerceClassValue(attrsClass)
+          ),
+          style: mergeStyleValues(attrsStyle),
+          disabled: triggerDisabled.value,
+          "aria-busy": exporting.value || void 0,
+          onClick: offeredFormats.value.length === 1 && !formatsEmpty.value ? () => void handleExport(offeredFormats.value[0]) : void 0
+        },
+        triggerText
+      );
+      const errorStatus = exportError.value ? h("span", { role: "status", "aria-live": "polite" }, exportError.value) : null;
+      if (offeredFormats.value.length === 1 || formatsEmpty.value) {
+        return [triggerButton, errorStatus];
+      }
+      return [
+        h(
+          Dropdown,
+          {
+            trigger: "click",
+            disabled: triggerDisabled.value,
+            asChild: true,
+            showArrow: false
+          },
+          {
+            default: () => [
+              triggerButton,
+              h(DropdownMenu, null, {
+                default: () => offeredFormats.value.map(
+                  (format) => h(
+                    DropdownItem,
+                    {
+                      key: format,
+                      onClick: () => void handleExport(format)
+                    },
+                    { default: () => getDataExportFormatLabel(format, resolvedLabels.value) }
+                  )
+                )
+              })
+            ]
+          }
+        ),
+        errorStatus
+      ];
+    };
+  }
+});
+
+export {
+  DataExport
+};

package/dist/{chunk-67VS6QHJ.mjs → chunk-IK6D7U2T.mjs}

@@ -1,59 +1,69 @@
-import {
-  useResponsiveChartSize
-} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-FHUGOSEY.mjs";
+} from "./chunk-AI6X2WFK.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-W2FOU4XH.mjs";
 import {
   ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
+} from "./chunk-ZTALXP6T.mjs";
 import {
   ChartTooltip
-} from "./chunk-SPFL55TF.mjs";
+} from "./chunk-JRDQVGMH.mjs";
 import {
   ChartAxis
-} from "./chunk-ZWVA7HT3.mjs";
+} from "./chunk-4KOKMAMY.mjs";
 import {
   ChartCanvas
-} from "./chunk-SNNT64HK.mjs";
+} from "./chunk-6K5BLE4Q.mjs";
 import {
   ChartGrid
-} from "./chunk-MI6TL3CQ.mjs";
+} from "./chunk-VJ5OA6JN.mjs";
 import {
   ChartLegend
-} from "./chunk-V443QIJM.mjs";
+} from "./chunk-V4H2Z5ZO.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/ScatterChart.ts
-import { defineComponent, computed, h, onMounted, ref, useId } from "vue";
+import { defineComponent, computed, h, onMounted, ref, useId, watch } from "vue";
 import {
   classNames,
   createLinearScale,
-  getChartElementOpacity,
   getNumberExtent,
   getStableChartGradientPrefix,
   getScatterHoverShadow,
-  getScatterHoverSize,
-  getScatterPointPath,
   scatterPointTransitionClasses,
-  SCATTER_ENTRANCE_KEYFRAMES,
   SCATTER_ENTRANCE_CLASS,
+  layoutScatterPoints,
+  scatterPointDisplayLabel,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  CHART_SURFACE_FILL,
+  SCATTER_ENTRANCE_STAGGER_MS,
+  SCATTER_ENTRANCE_STAGGER_MAX_MS,
+  formatChartTemplate,
+  coerceClassValue,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   resolveChartTooltipContent,
   mergeTigerLocale,
   getChartLabels
 } from "@expcat/tigercat-core";
 var ScatterChart = defineComponent({
   name: "TigerScatterChart",
+  inheritAttrs: false,
   props: {
     width: { type: Number, default: 320 },
     height: { type: Number, default: 200 },
     padding: {
       type: [Number, Object],
-      default: 24
+      default: () => ({ ...DEFAULT_CHART_PADDING })
     },
     responsive: { type: Boolean, default: false },
     data: {
@@ -75,7 +85,11 @@ var ScatterChart = defineComponent({
     gradient: { type: Boolean, default: false },
     animated: { type: Boolean, default: false },
     pointBorderWidth: { type: Number, default: 0 },
-    pointBorderColor: { type: String, default: "white" },
+    pointBorderColor: { type: String, default: CHART_SURFACE_FILL },
+    sizeScale: {
+      type: [Boolean, Object],
+      default: false
+    },
     showGrid: { type: Boolean, default: true },
     showAxis: { type: Boolean, default: true },
     showXAxis: { type: Boolean, default: true },
@@ -111,6 +125,9 @@ var ScatterChart = defineComponent({
       type: Number,
       default: void 0
     },
+    onPointClick: {
+      type: Function
+    },
     // Legend
     showLegend: { type: Boolean, default: false },
     legendPosition: {
@@ -136,7 +153,7 @@ var ScatterChart = defineComponent({
     className: { type: String }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "point-click", "point-hover"],
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
     const config = useTigerConfig();
     const gradientPrefix = getStableChartGradientPrefix("scatter", useId());
     const mounted = ref(false);
@@ -145,10 +162,17 @@ var ScatterChart = defineComponent({
     onMounted(() => {
       if (props.animated) mounted.value = true;
     });
+    watch(
+      () => props.animated,
+      (value) => {
+        if (value) mounted.value = true;
+      }
+    );
     const {
       tooltipPosition,
       resolvedHoveredIndex,
       activeIndex,
+      resolvedSelectedIndex,
       handleMouseEnter,
       handleMouseMove,
       handleMouseLeave,
@@ -156,8 +180,7 @@ var ScatterChart = defineComponent({
       handleKeyDown,
       handleLegendClick,
       handleLegendHover,
-      handleLegendLeave,
-      wrapperClasses
+      handleLegendLeave
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
       showTooltip: computed(() => props.showTooltip),
@@ -167,9 +190,14 @@ var ScatterChart = defineComponent({
       activeOpacity: computed(() => props.activeOpacity),
       inactiveOpacity: computed(() => props.inactiveOpacity),
       legendPosition: computed(() => props.legendPosition),
-      emit,
+      onHoveredIndexChange: (index) => emit("update:hoveredIndex", index),
+      onSelectedIndexChange: (index) => emit("update:selectedIndex", index),
       getData: (index) => props.data[index],
-      eventNames: { hover: "point-hover", click: "point-click" }
+      onHover: (index, datum) => emit("point-hover", index, datum),
+      onClick: (index, datum) => {
+        props.onPointClick?.(index, datum);
+        emit("point-click", index, datum);
+      }
     });
     const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
       () => props.width,
@@ -193,25 +221,18 @@ var ScatterChart = defineComponent({
     const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
     const palette = computed(() => resolveChartPalette(props.colors, props.pointColor));
     const points = computed(
-      () => props.data.map((item, index) => {
-        const color = item.color ?? palette.value[index % palette.value.length];
-        const opacity = getChartElementOpacity(index, activeIndex.value, {
-          activeOpacity: props.activeOpacity,
-          inactiveOpacity: props.inactiveOpacity
-        });
-        const isHovered = resolvedHoveredIndex.value === index;
-        const baseSize = item.size ?? props.pointSize;
-        const r = isHovered ? getScatterHoverSize(baseSize) : baseSize;
-        return {
-          cx: resolvedXScale.value.map(item.x),
-          cy: resolvedYScale.value.map(item.y),
-          r,
-          baseSize,
-          color,
-          opacity: props.pointOpacity ?? opacity,
-          isHovered,
-          datum: item
-        };
+      () => layoutScatterPoints(props.data, resolvedXScale.value, resolvedYScale.value, {
+        pointSize: props.pointSize,
+        pointStyle: props.pointStyle,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        hoveredIndex: resolvedHoveredIndex.value,
+        gradient: props.gradient,
+        gradientPrefix,
+        sizeScale: props.sizeScale,
+        pointOpacity: props.pointOpacity,
+        activeOpacity: props.activeOpacity,
+        inactiveOpacity: props.inactiveOpacity
       })
     );
     const legendItems = computed(
@@ -219,7 +240,8 @@ var ScatterChart = defineComponent({
         data: props.data,
         palette: palette.value,
         activeIndex: activeIndex.value,
-        getLabel: (d, i) => props.legendFormatter ? props.legendFormatter(d, i) : d.label ?? `(${d.x}, ${d.y})`,
+        selectedIndex: resolvedSelectedIndex.value,
+        getLabel: (d, i) => props.legendFormatter ? props.legendFormatter(d, i) : scatterPointDisplayLabel(d, i, labels.value.pointAriaLabel),
         getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
       })
     );
@@ -228,29 +250,46 @@ var ScatterChart = defineComponent({
         resolvedHoveredIndex.value,
         props.data,
         props.tooltipFormatter,
-        (datum, index) => {
-          const label = datum.label ?? `Point ${index + 1}`;
-          return `${label}: (${datum.x}, ${datum.y})`;
-        }
+        (datum, index) => formatChartTemplate(labels.value.pointAriaLabel, {
+          index: index + 1,
+          x: datum.x,
+          y: datum.y
+        })
       )
     );
     return () => {
       const defs = props.gradient ? h(
         "defs",
         null,
-        palette.value.map(
-          (color, i) => h(
+        points.value.map(
+          (point) => h(
             "radialGradient",
-            { id: `${gradientPrefix}-${i}`, cx: "35%", cy: "35%", r: "65%" },
+            {
+              id: `${gradientPrefix}-${point.index}`,
+              cx: "35%",
+              cy: "35%",
+              r: "65%"
+            },
             [
-              h("stop", { offset: "0%", "stop-color": "#fff", "stop-opacity": "0.5" }),
-              h("stop", { offset: "50%", "stop-color": color, "stop-opacity": "0.95" }),
-              h("stop", { offset: "100%", "stop-color": color, "stop-opacity": "1" })
+              h("stop", {
+                offset: "0%",
+                "stop-color": CHART_SURFACE_FILL,
+                "stop-opacity": "0.5"
+              }),
+              h("stop", {
+                offset: "50%",
+                "stop-color": point.color,
+                "stop-opacity": "0.95"
+              }),
+              h("stop", {
+                offset: "100%",
+                "stop-color": point.color,
+                "stop-opacity": "1"
+              })
             ]
           )
         )
       ) : null;
-      const animStyle = props.animated && mounted.value ? h("style", null, SCATTER_ENTRANCE_KEYFRAMES) : null;
       const chart = h(
         ChartCanvas,
         {
@@ -260,13 +299,11 @@ var ScatterChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className),
           onResolvedSizeChange
         },
         {
           default: () => [
             defs,
-            animStyle,
             props.showGrid ? h(ChartGrid, {
               xScale: resolvedXScale.value,
               yScale: resolvedYScale.value,
@@ -299,40 +336,61 @@ var ScatterChart = defineComponent({
               ChartSeries,
               { data: props.data, type: "scatter" },
               {
-                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;
+                default: () => points.value.map((point, visualIndex) => {
+                  const interactive = props.hoverable || props.selectable || typeof props.onPointClick === "function";
                   const filterStyle = point.isHovered ? getScatterHoverShadow(point.color) : void 0;
-                  const animDelay = props.animated && mounted.value ? `${index * 60}ms` : void 0;
+                  const animDelay = props.animated && mounted.value ? `${Math.min(visualIndex * SCATTER_ENTRANCE_STAGGER_MS, SCATTER_ENTRANCE_STAGGER_MAX_MS)}ms` : void 0;
+                  const visualActive = points.value.findIndex(
+                    (item) => item.index === (activeIndex.value ?? 0)
+                  );
                   const styleStr = [
                     filterStyle ? `filter:${filterStyle}` : "",
-                    animDelay ? `animation:${SCATTER_ENTRANCE_CLASS} var(--tiger-motion-duration-slow,500ms) var(--tiger-motion-ease-spring,cubic-bezier(.34,1.56,.64,1)) ${animDelay} both` : ""
+                    animDelay ? `animation-delay:${animDelay}` : ""
                   ].filter(Boolean).join(";");
                   const shared = {
-                    fill,
+                    fill: point.fill,
                     opacity: point.opacity,
                     stroke: props.pointBorderColor,
                     "stroke-width": props.pointBorderWidth,
                     class: classNames(
-                      scatterPointTransitionClasses,
+                      props.animated ? scatterPointTransitionClasses : void 0,
                       animDelay && SCATTER_ENTRANCE_CLASS,
                       interactive && "cursor-pointer"
                     ),
                     style: styleStr || void 0,
-                    tabindex: props.selectable ? 0 : void 0,
-                    role: props.selectable ? "button" : "img",
-                    "aria-label": point.datum.label ?? labels.value.pointAriaLabel.replace("{index}", String(index + 1)).replace("{x}", String(point.datum.x)).replace("{y}", String(point.datum.y)),
-                    "data-point-index": index,
-                    onMouseenter: (e) => handleMouseEnter(index, e),
+                    tabindex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? 0 : visualActive) : void 0,
+                    role: interactive ? "button" : void 0,
+                    "aria-hidden": interactive ? void 0 : true,
+                    "aria-label": interactive ? point.datum.label ?? formatChartTemplate(labels.value.pointAriaLabel, {
+                      index: point.index + 1,
+                      x: point.datum.x,
+                      y: point.datum.y
+                    }) : void 0,
+                    "data-point-index": point.index,
+                    onMouseenter: (e) => handleMouseEnter(point.index, e),
                     onMousemove: handleMouseMove,
                     onMouseleave: handleMouseLeave,
-                    onClick: () => handleClick(index),
-                    onKeydown: (e) => handleKeyDown(e, index)
+                    onClick: () => handleClick(point.index),
+                    onKeydown: (e) => {
+                      if (isChartNavigationKey(e.key)) {
+                        e.preventDefault();
+                        const nextVisual = nextChartRovingIndex(
+                          visualIndex,
+                          e.key,
+                          points.value.length
+                        );
+                        const next = points.value[nextVisual];
+                        const node = e.currentTarget.parentElement?.querySelector(`[data-point-index="${next.index}"]`);
+                        if (node instanceof SVGElement) node.focus();
+                        handleMouseEnter(next.index, e);
+                        return;
+                      }
+                      handleKeyDown(e, point.index);
+                    }
                   };
                   if (props.pointStyle === "circle") {
                     return h("circle", {
-                      key: `point-${index}`,
+                      key: `point-${point.index}`,
                       cx: point.cx,
                       cy: point.cy,
                       r: point.r,
@@ -342,11 +400,11 @@ var ScatterChart = defineComponent({
                   return h(
                     "g",
                     {
-                      key: `point-${index}`,
+                      key: `point-${point.index}`,
                       transform: `translate(${point.cx},${point.cy})`
                     },
                     h("path", {
-                      d: getScatterPointPath(props.pointStyle, point.r),
+                      d: point.d,
                       ...shared
                     })
                   );
@@ -362,26 +420,21 @@ var ScatterChart = defineComponent({
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;
-      if (!props.showLegend) {
-        return h(
-          "div",
-          {
-            class: classNames(
-              "relative",
-              props.responsive ? "block w-full min-w-0" : "inline-block"
-            )
-          },
-          [chart, tooltip]
-        );
-      }
       return h(
         "div",
-        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        {
+          class: getCartesianChartShellClasses({
+            showLegend: props.showLegend,
+            legendPosition: props.legendPosition,
+            responsive: props.responsive,
+            className: classNames(coerceClassValue(attrs.class), props.className)
+          })
+        },
         [
           chart,
-          h(ChartLegend, {
+          props.showLegend ? h(ChartLegend, {
             items: legendItems.value,
-            position: props.legendPosition,
+            orientation: chartLegendOrientationFromPosition(props.legendPosition),
             markerSize: props.legendMarkerSize,
             gap: props.legendGap,
             ariaLabel: labels.value.legendAriaLabel,
@@ -389,7 +442,7 @@ var ScatterChart = defineComponent({
             onItemClick: handleLegendClick,
             onItemHover: handleLegendHover,
             onItemLeave: handleLegendLeave
-          }),
+          }) : null,
           tooltip
         ]
       );