@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/{chunk-M4FWWEMX.mjs → chunk-MVG5DA7S.mjs}

@@ -1,50 +1,63 @@
-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-2XITUFL6.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-4GOTWNOO.mjs";
 
 // src/components/BarChart.ts
 import { defineComponent, computed, h, useId } from "vue";
 import {
   classNames,
-  clampBarWidth,
+  coerceClassValue,
   createBandScale,
   createLinearScale,
-  ensureBarMinHeight,
   getStableChartGradientPrefix,
   getBarValueLabelY,
   getNumberExtent,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   resolveChartTooltipContent,
   defaultXYTooltipFormatter,
   barValueLabelClasses,
   barValueLabelInsideClasses,
-  barAnimatedTransition
+  barInteractiveClasses,
+  BAR_ANIMATED_CLASS,
+  layoutBarRects,
+  resolveBarCornerRadius,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
-var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
 var BarChart = defineComponent({
   name: "TigerBarChart",
+  inheritAttrs: false,
   props: {
     width: {
       type: Number,
@@ -56,7 +69,7 @@ var BarChart = defineComponent({
     },
     padding: {
       type: [Number, Object],
-      default: () => DEFAULT_CARTESIAN_PADDING
+      default: () => ({ ...DEFAULT_CHART_PADDING })
     },
     responsive: { type: Boolean, default: false },
     data: {
@@ -74,8 +87,7 @@ var BarChart = defineComponent({
       default: "var(--tiger-primary,#2563eb)"
     },
     barRadius: {
-      type: Number,
-      default: 4
+      type: Number
     },
     barPaddingInner: {
       type: Number,
@@ -135,7 +147,6 @@ var BarChart = defineComponent({
       type: Number,
       default: 1
     },
-    // Interaction props
     hoverable: {
       type: Boolean,
       default: false
@@ -160,7 +171,6 @@ var BarChart = defineComponent({
       type: Number,
       default: void 0
     },
-    // Legend props
     showLegend: {
       type: Boolean,
       default: false
@@ -177,7 +187,6 @@ var BarChart = defineComponent({
       type: Number,
       default: 8
     },
-    // Tooltip props
     showTooltip: {
       type: Boolean,
       default: true
@@ -185,7 +194,9 @@ var BarChart = defineComponent({
     tooltipFormatter: {
       type: Function
     },
-    // Value label props
+    legendFormatter: {
+      type: Function
+    },
     showValueLabels: {
       type: Boolean,
       default: false
@@ -197,7 +208,6 @@ var BarChart = defineComponent({
     valueLabelFormatter: {
       type: Function
     },
-    // Bar constraint props
     barMinHeight: {
       type: Number,
       default: 0
@@ -205,7 +215,6 @@ var BarChart = defineComponent({
     barMaxWidth: {
       type: Number
     },
-    // Visual enhancement props
     gradient: {
       type: Boolean,
       default: false
@@ -214,7 +223,6 @@ var BarChart = defineComponent({
       type: Boolean,
       default: false
     },
-    // Other
     colors: {
       type: Array
     },
@@ -226,16 +234,25 @@ var BarChart = defineComponent({
     },
     className: {
       type: String
+    },
+    onBarClick: {
+      type: Function
     }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "bar-click", "bar-hover"],
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
     const gradientPrefix = getStableChartGradientPrefix("bar", useId());
+    const interactive = computed(
+      () => props.hoverable || props.selectable || typeof props.onBarClick === "function"
+    );
+    const corner = computed(() => resolveBarCornerRadius(props.barRadius));
     const {
       tooltipPosition,
       resolvedHoveredIndex,
       activeIndex,
-      getElementOpacity,
+      resolvedSelectedIndex,
       handleMouseEnter,
       handleMouseMove,
       handleMouseLeave,
@@ -243,8 +260,7 @@ var BarChart = defineComponent({
       handleKeyDown,
       handleLegendClick,
       handleLegendHover,
-      handleLegendLeave,
-      wrapperClasses
+      handleLegendLeave
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
       showTooltip: computed(() => props.showTooltip),
@@ -254,9 +270,14 @@ var BarChart = 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: "bar-hover", click: "bar-click" }
+      onHover: (index, datum) => emit("bar-hover", index, datum),
+      onClick: (index, datum) => {
+        props.onBarClick?.(index, datum);
+        emit("bar-click", index, datum);
+      }
     });
     const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
       () => props.width,
@@ -265,7 +286,9 @@ var BarChart = defineComponent({
       () => props.responsive
     );
     const xDomain = computed(() => props.data.map((item) => String(item.x)));
-    const yValues = computed(() => props.data.map((item) => item.y));
+    const yValues = computed(
+      () => props.data.map((item) => item.y).filter((value) => Number.isFinite(value))
+    );
     const resolvedXScale = computed(() => {
       if (props.xScale) return props.xScale;
       return createBandScale(xDomain.value, [0, innerRect.value.width], {
@@ -281,44 +304,24 @@ var BarChart = defineComponent({
     const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
     const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
     const palette = computed(() => resolveChartPalette(props.colors, props.barColor));
-    const bars = computed(() => {
-      const scale = resolvedXScale.value;
-      const rawBandWidth = scale.bandwidth ?? (scale.step ? scale.step * 0.7 : innerRect.value.width / Math.max(1, props.data.length) * 0.8);
-      const bandWidth = clampBarWidth(rawBandWidth, props.barMaxWidth);
-      const bandOffset = rawBandWidth > bandWidth ? (rawBandWidth - bandWidth) / 2 : 0;
-      const baseline = resolvedYScale.value.map(0);
-      return props.data.map((item, index) => {
-        const xKey = scale.type === "linear" ? Number(item.x) : String(item.x);
-        const xPos = scale.map(xKey);
-        const barX = (scale.bandwidth ? xPos : xPos - rawBandWidth / 2) + bandOffset;
-        const barYValue = resolvedYScale.value.map(item.y);
-        let barHeight = Math.abs(baseline - barYValue);
-        let barY = Math.min(baseline, barYValue);
-        if (props.barMinHeight > 0 && barHeight > 0) {
-          const clamped = ensureBarMinHeight(barY, barHeight, baseline, props.barMinHeight);
-          barY = clamped.y;
-          barHeight = clamped.height;
-        }
-        const color = item.color ?? palette.value[index % palette.value.length];
-        const opacity = getElementOpacity(index);
-        return {
-          x: barX,
-          y: barY,
-          width: bandWidth,
-          height: barHeight,
-          color,
-          opacity,
-          datum: item,
-          index
-        };
-      });
-    });
+    const bars = computed(
+      () => layoutBarRects(props.data, resolvedXScale.value, resolvedYScale.value, {
+        barMaxWidth: props.barMaxWidth,
+        barMinHeight: props.barMinHeight,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        activeOpacity: props.activeOpacity,
+        inactiveOpacity: props.inactiveOpacity,
+        innerWidth: innerRect.value.width
+      })
+    );
     const legendItems = computed(
       () => buildChartLegendItems({
         data: props.data,
         palette: palette.value,
         activeIndex: activeIndex.value,
-        getLabel: (d) => d.label ?? String(d.x),
+        selectedIndex: resolvedSelectedIndex.value,
+        getLabel: (d, i) => props.legendFormatter ? props.legendFormatter(d, i) : d.label ?? String(d.x),
         getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
       })
     );
@@ -331,14 +334,30 @@ var BarChart = defineComponent({
       )
     );
     return () => {
+      const visualActive = bars.value.findIndex(
+        (bar) => bar.index === (activeIndex.value ?? resolvedHoveredIndex.value)
+      );
+      const handleBarKeyDown = (event, visualIndex) => {
+        if (isChartNavigationKey(event.key)) {
+          event.preventDefault();
+          const nextVisual = nextChartRovingIndex(visualIndex, event.key, bars.value.length);
+          const next = bars.value[nextVisual];
+          const current = event.currentTarget;
+          const node = current.parentElement?.querySelector(`[data-bar-index="${next.index}"]`);
+          if (node instanceof SVGElement) node.focus();
+          handleMouseEnter(next.index, event);
+          return;
+        }
+        handleKeyDown(event, bars.value[visualIndex].index);
+      };
       const gradientDefs = props.gradient ? h(
         "defs",
         null,
         bars.value.map(
-          (bar, index) => h(
+          (bar) => h(
             "linearGradient",
             {
-              id: `${gradientPrefix}-${index}`,
+              id: `${gradientPrefix}-${bar.index}`,
               x1: "0",
               y1: "0",
               x2: "0",
@@ -359,18 +378,20 @@ var BarChart = defineComponent({
           )
         )
       ) : null;
-      const valueLabels = props.showValueLabels && bars.value.length > 0 ? bars.value.map((bar, index) => {
-        const labelText = props.valueLabelFormatter ? props.valueLabelFormatter(bar.datum, index) : String(bar.datum.y);
-        const labelY = getBarValueLabelY(bar.y, bar.height, props.valueLabelPosition, 8);
+      const valueLabels = props.showValueLabels && bars.value.length > 0 ? bars.value.map((bar) => {
+        const labelText = props.valueLabelFormatter ? props.valueLabelFormatter(bar.datum, bar.index) : String(bar.datum.y);
+        const labelY = getBarValueLabelY(bar.y, bar.height, props.valueLabelPosition, 8, {
+          negative: bar.negative
+        });
         const isInside = props.valueLabelPosition === "inside";
         return h(
           "text",
           {
-            key: `label-${index}`,
+            key: `label-${bar.index}`,
             x: bar.x + bar.width / 2,
             y: labelY,
             "text-anchor": "middle",
-            "dominant-baseline": isInside ? "central" : "auto",
+            "dominant-baseline": isInside ? "central" : bar.negative ? "hanging" : "auto",
             class: isInside ? barValueLabelInsideClasses : barValueLabelClasses,
             opacity: bar.opacity,
             "data-value-label": ""
@@ -387,7 +408,6 @@ var BarChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className),
           onResolvedSizeChange
         },
         {
@@ -429,30 +449,31 @@ var BarChart = defineComponent({
               },
               {
                 default: () => bars.value.map(
-                  (bar, index) => h("rect", {
-                    key: `bar-${index}`,
+                  (bar, visualIndex) => h("rect", {
+                    key: `bar-${bar.index}`,
                     x: bar.x,
                     y: bar.y,
                     width: bar.width,
                     height: bar.height,
-                    rx: props.barRadius,
-                    ry: props.barRadius,
-                    fill: props.gradient ? `url(#${gradientPrefix}-${index})` : bar.color,
+                    rx: corner.value.rx,
+                    ry: corner.value.ry,
+                    fill: props.gradient ? `url(#${gradientPrefix}-${bar.index})` : bar.color,
                     opacity: bar.opacity,
                     class: classNames(
-                      "transition-[opacity,filter] [transition-duration:var(--tiger-motion-duration-base,200ms)] [transition-timing-function:var(--tiger-motion-ease-decelerate,ease-out)]",
-                      (props.hoverable || props.selectable) && "cursor-pointer hover:brightness-110"
+                      props.animated && BAR_ANIMATED_CLASS,
+                      interactive.value && barInteractiveClasses
                     ),
-                    style: props.animated ? `rx:var(--tiger-chart-bar-radius,${props.barRadius}px);ry:var(--tiger-chart-bar-radius,${props.barRadius}px);${barAnimatedTransition}` : `rx:var(--tiger-chart-bar-radius,${props.barRadius}px);ry:var(--tiger-chart-bar-radius,${props.barRadius}px)`,
-                    tabindex: props.selectable ? 0 : void 0,
-                    role: props.selectable ? "button" : "img",
-                    "aria-label": bar.datum.label ?? String(bar.datum.x),
-                    "data-bar-index": index,
-                    onMouseenter: (e) => handleMouseEnter(index, e),
+                    style: corner.value.style,
+                    tabindex: interactive.value ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                    role: interactive.value ? "button" : void 0,
+                    "aria-hidden": interactive.value ? void 0 : true,
+                    "aria-label": interactive.value ? bar.datum.label ?? defaultXYTooltipFormatter(bar.datum, bar.index) : void 0,
+                    "data-bar-index": bar.index,
+                    onMouseenter: (e) => handleMouseEnter(bar.index, e),
                     onMousemove: handleMouseMove,
                     onMouseleave: handleMouseLeave,
-                    onClick: () => handleClick(index),
-                    onKeydown: (e) => handleKeyDown(e, index)
+                    onClick: () => handleClick(bar.index),
+                    onKeydown: (e) => handleBarKeyDown(e, visualIndex)
                   })
                 )
               }
@@ -467,33 +488,29 @@ var BarChart = 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,
             interactive: props.hoverable || props.selectable,
+            ariaLabel: labels.value.legendAriaLabel,
             onItemClick: handleLegendClick,
             onItemHover: handleLegendHover,
             onItemLeave: handleLegendLeave
-          }),
+          }) : null,
           tooltip
         ]
       );

package/dist/{chunk-7XDNHGDA.mjs → chunk-OGKNRXUA.mjs}

@@ -3,17 +3,16 @@ import { defineComponent, computed, h } from "vue";
 import {
   classNames,
   coerceClassValue,
+  getIconDefinition,
   iconSizeClasses,
   iconSvgBaseClasses,
-  iconSvgDefaultStrokeLinecap,
-  iconSvgDefaultStrokeLinejoin,
-  iconSvgDefaultStrokeWidth,
   iconWrapperClasses,
-  getIconDefinition,
-  SVG_DEFAULT_FILL,
-  SVG_DEFAULT_STROKE,
-  SVG_DEFAULT_VIEWBOX_24,
-  SVG_DEFAULT_XMLNS
+  mergeChildSvgAttrs,
+  resolveIconSize,
+  resolveIconSvgAttrs,
+  resolveIconWrapperStyle,
+  toVueSvgAttrs,
+  warnUnknownIconName
 } from "@expcat/tigercat-core";
 var Icon = defineComponent({
   name: "TigerIcon",
@@ -44,53 +43,48 @@ var Icon = defineComponent({
       default: "md"
     },
     /**
-     * Icon color (CSS color value)
-     * @default 'currentColor'
+     * Icon color written onto the wrapper. Omitted values inherit CSS `color`.
      */
     color: {
       type: String,
-      default: "currentColor"
+      default: void 0
     }
   },
   setup(props, { slots, attrs }) {
     const wrapperClasses = computed(
       () => classNames(iconWrapperClasses, coerceClassValue(attrs.class))
     );
-    const svgClasses = computed(() => classNames(iconSvgBaseClasses, iconSizeClasses[props.size]));
+    const svgClasses = computed(
+      () => classNames(iconSvgBaseClasses, iconSizeClasses[resolveIconSize(props.size)])
+    );
     return () => {
       const defaultSlot = slots.default?.();
       const hasSlotContent = Array.isArray(defaultSlot) && defaultSlot.length > 0;
       const isDecorative = attrs["aria-label"] == null && attrs["aria-labelledby"] == null && attrs.role == null;
       const definition = !hasSlotContent ? props.icon ?? (props.name ? getIconDefinition(props.name) : void 0) : void 0;
+      if (!hasSlotContent && !definition && props.name) {
+        warnUnknownIconName(props.name);
+      }
       const builtInSvg = definition ? h(
         "svg",
         {
           class: svgClasses.value,
-          xmlns: SVG_DEFAULT_XMLNS,
-          viewBox: definition.viewBox,
-          fill: definition.mode === "fill" ? "currentColor" : SVG_DEFAULT_FILL,
-          stroke: definition.mode === "stroke" ? "currentColor" : SVG_DEFAULT_STROKE,
-          "stroke-width": definition.mode === "stroke" ? 1.5 : void 0,
-          "stroke-linecap": definition.mode === "stroke" ? iconSvgDefaultStrokeLinecap : void 0,
-          "stroke-linejoin": definition.mode === "stroke" ? iconSvgDefaultStrokeLinejoin : void 0
+          ...toVueSvgAttrs(
+            resolveIconSvgAttrs({ mode: definition.mode, viewBox: definition.viewBox })
+          )
         },
         definition.paths.map((d) => h("path", { d }))
       ) : null;
       const normalizeSlotNode = (node) => {
         if (node && typeof node === "object" && node.type === "svg") {
           const svgProps = node.props ?? {};
+          const merged = mergeChildSvgAttrs(svgProps);
           return h(
             "svg",
             {
               ...svgProps,
-              class: classNames(svgClasses.value, coerceClassValue(svgProps.class)),
-              xmlns: svgProps.xmlns ?? SVG_DEFAULT_XMLNS,
-              viewBox: svgProps.viewBox ?? SVG_DEFAULT_VIEWBOX_24,
-              fill: svgProps.fill ?? SVG_DEFAULT_FILL,
-              stroke: svgProps.stroke ?? SVG_DEFAULT_STROKE,
-              "stroke-width": svgProps["stroke-width"] ?? iconSvgDefaultStrokeWidth,
-              "stroke-linecap": svgProps["stroke-linecap"] ?? iconSvgDefaultStrokeLinecap,
-              "stroke-linejoin": svgProps["stroke-linejoin"] ?? iconSvgDefaultStrokeLinejoin
+              ...toVueSvgAttrs(merged),
+              class: classNames(svgClasses.value, coerceClassValue(svgProps.class))
             },
             node.children === null ? void 0 : node.children
           );
@@ -98,12 +92,14 @@ var Icon = defineComponent({
         return node;
       };
       const children = builtInSvg ? [builtInSvg] : (defaultSlot ?? []).map(normalizeSlotNode);
+      const attrsStyle = attrs.style;
+      const styleObject = attrsStyle && typeof attrsStyle === "object" ? attrsStyle : void 0;
       return h(
         "span",
         {
           ...attrs,
           class: wrapperClasses.value,
-          style: { ...attrs.style, color: props.color },
+          style: resolveIconWrapperStyle(props.color, styleObject),
           ...isDecorative ? { "aria-hidden": "true" } : { role: attrs.role ?? "img" }
         },
         children