@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-M4FWWEMX.mjs → chunk-WT5FY6VG.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-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-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-ASOJXXU6.mjs → chunk-WULBKPDO.mjs}

@@ -1,6 +1,6 @@
 import {
   createStatusIcon
-} from "./chunk-2TNZ4JNT.mjs";
+} from "./chunk-5VSSB4QF.mjs";
 
 // src/components/Result.ts
 import { defineComponent, computed, h } from "vue";
@@ -11,12 +11,15 @@ import {
   resultBaseClasses,
   resultIconContainerBaseClasses,
   resultIconClasses,
+  resultHttpLabelClasses,
   resultTitleClasses,
   resultSubTitleClasses,
   resultExtraClasses,
+  RESULT_ICON_SIZE_PX,
   getResultColorScheme,
   getResultIconPath,
-  isHttpResultStatus
+  isHttpResultStatus,
+  resultHeadingTag
 } from "@expcat/tigercat-core";
 var Result = defineComponent({
   name: "TigerResult",
@@ -34,6 +37,10 @@ var Result = defineComponent({
       type: String,
       default: void 0
     },
+    headingLevel: {
+      type: Number,
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
@@ -47,16 +54,27 @@ var Result = defineComponent({
     const colors = computed(() => getResultColorScheme(props.status));
     const iconPath = computed(() => getResultIconPath(props.status));
     const httpLabel = computed(() => isHttpResultStatus(props.status) ? props.status : void 0);
-    const iconContainerClasses = computed(
-      () => classNames(resultIconContainerBaseClasses, colors.value.iconBg)
-    );
+    const headingTag = computed(() => resultHeadingTag(props.headingLevel));
     const iconSvgClasses = computed(() => classNames(resultIconClasses, colors.value.iconColor));
-    const titleCls = computed(() => classNames(resultTitleClasses, colors.value.titleColor));
     return () => {
       const attrsRecord = attrs;
       const children = [];
+      const hasTitle = Boolean(props.title || slots.title);
       if (slots.icon) {
-        children.push(h("div", { class: iconContainerClasses.value }, slots.icon()));
+        children.push(
+          h(
+            "div",
+            {
+              class: resultIconContainerBaseClasses,
+              style: {
+                width: `${RESULT_ICON_SIZE_PX}px`,
+                height: `${RESULT_ICON_SIZE_PX}px`,
+                background: colors.value.iconBg
+              }
+            },
+            slots.icon()
+          )
+        );
       } else {
         const iconContent = [];
         if (httpLabel.value) {
@@ -64,19 +82,42 @@ var Result = defineComponent({
             h(
               "span",
               {
-                class: classNames("text-5xl font-bold", colors.value.iconColor)
+                class: classNames(resultHttpLabelClasses, colors.value.iconColor),
+                "aria-hidden": hasTitle ? "true" : void 0
               },
               httpLabel.value
             )
           );
         } else {
-          iconContent.push(createStatusIcon(iconPath.value, iconSvgClasses.value));
+          iconContent.push(
+            createStatusIcon(iconPath.value, iconSvgClasses.value, {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
+          );
         }
-        children.push(h("div", { class: iconContainerClasses.value }, iconContent));
+        children.push(
+          h(
+            "div",
+            {
+              class: resultIconContainerBaseClasses,
+              style: {
+                width: `${RESULT_ICON_SIZE_PX}px`,
+                height: `${RESULT_ICON_SIZE_PX}px`,
+                background: colors.value.iconBg
+              }
+            },
+            iconContent
+          )
+        );
       }
-      if (props.title || slots.title) {
+      if (hasTitle) {
         children.push(
-          h("div", { class: titleCls.value }, slots.title ? slots.title() : props.title)
+          h(
+            headingTag.value,
+            { class: resultTitleClasses },
+            slots.title ? slots.title() : props.title
+          )
         );
       }
       if (props.subTitle || slots.subTitle) {
@@ -103,8 +144,7 @@ var Result = defineComponent({
             props.className,
             coerceClassValue(attrsRecord.class)
           ),
-          style: mergeStyleValues(attrsRecord.style, props.style),
-          role: "status"
+          style: mergeStyleValues(attrsRecord.style, props.style)
         },
         children
       );