@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-IWGC7M62.mjs

@@ -0,0 +1,428 @@
+import {
+  useChartInteraction
+} from "./chunk-AI6X2WFK.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-W2FOU4XH.mjs";
+import {
+  ChartTooltip
+} from "./chunk-2XITUFL6.mjs";
+import {
+  ChartCanvas
+} from "./chunk-6K5BLE4Q.mjs";
+import {
+  ChartLegend
+} from "./chunk-V4H2Z5ZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/PieChart.ts
+import { defineComponent, computed, h, useId } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  resolveChartTooltipContent,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate,
+  layoutPieSlices,
+  pieSliceDisplayLabel,
+  pieSliceTransitionClasses,
+  pieSliceLabelInsideClasses,
+  resolvePieRadii,
+  DEFAULT_PIE_START_ANGLE,
+  DONUT_ENTRANCE_CLASS,
+  PIE_BASE_SHADOW,
+  PIE_EMPHASIS_SHADOW,
+  getChartElementOpacity
+} from "@expcat/tigercat-core";
+var PieChart = defineComponent({
+  name: "TigerPieChart",
+  inheritAttrs: false,
+  props: {
+    width: { type: Number, default: 320 },
+    height: { type: Number, default: 200 },
+    padding: { type: [Number, Object], default: 24 },
+    responsive: { type: Boolean, default: false },
+    data: { type: Array, required: true },
+    innerRadius: { type: Number },
+    innerRadiusRatio: { type: Number },
+    outerRadius: { type: Number },
+    startAngle: { type: Number, default: DEFAULT_PIE_START_ANGLE },
+    endAngle: { type: Number, default: Math.PI * 2 },
+    padAngle: { type: Number, default: 0 },
+    colors: { type: Array },
+    showLabels: { type: Boolean, default: false },
+    labelFormatter: {
+      type: Function
+    },
+    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 },
+    selectedIndex: { type: Number, default: void 0 },
+    showLegend: { type: Boolean, default: false },
+    legendPosition: { type: String, default: "bottom" },
+    legendMarkerSize: { type: Number, default: 10 },
+    legendGap: { type: Number, default: 8 },
+    legendFormatter: {
+      type: Function
+    },
+    showTooltip: { type: Boolean, default: true },
+    tooltipFormatter: {
+      type: Function
+    },
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String },
+    borderWidth: { type: Number, default: 2 },
+    borderColor: { type: String, default: "var(--tiger-surface,#ffffff)" },
+    hoverOffset: { type: Number, default: 8 },
+    labelPosition: { type: String, default: "inside" },
+    shadow: { type: Boolean, default: false },
+    gradient: { type: Boolean, default: false },
+    centerValue: { type: [String, Number] },
+    centerLabel: { type: String },
+    animated: { type: Boolean, default: false }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
+    const interactive = computed(() => props.hoverable || props.selectable);
+    const gradientPrefix = getStableChartGradientPrefix("pie", useId());
+    const {
+      tooltipPosition,
+      resolvedHoveredIndex,
+      activeIndex,
+      resolvedSelectedIndex,
+      handleMouseEnter,
+      handleMouseMove,
+      handleMouseLeave,
+      handleClick,
+      handleKeyDown,
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave
+    } = useChartInteraction({
+      hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
+      hoveredIndexProp: () => props.hoveredIndex,
+      selectable: computed(() => props.selectable),
+      selectedIndexProp: () => props.selectedIndex,
+      activeOpacity: computed(() => props.activeOpacity),
+      inactiveOpacity: computed(() => props.inactiveOpacity),
+      legendPosition: computed(() => props.legendPosition),
+      onHoveredIndexChange: (index) => emit("update:hoveredIndex", index),
+      onSelectedIndexChange: (index) => emit("update:selectedIndex", index),
+      getData: (index) => props.data[index],
+      onHover: (index, datum) => emit("slice-hover", index, datum),
+      onClick: (index, datum) => emit("slice-click", index, datum)
+    });
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
+    const palette = computed(() => resolveChartPalette(props.colors));
+    const radii = computed(
+      () => resolvePieRadii({
+        innerWidth: innerRect.value.width,
+        innerHeight: innerRect.value.height,
+        innerRadius: props.innerRadius,
+        outerRadius: props.outerRadius,
+        innerRadiusRatio: props.innerRadiusRatio,
+        labelPosition: props.labelPosition,
+        hoverOffset: props.hoverOffset
+      })
+    );
+    const slices = computed(
+      () => layoutPieSlices(props.data, {
+        cx: radii.value.cx,
+        cy: radii.value.cy,
+        innerRadius: radii.value.innerRadius,
+        outerRadius: radii.value.outerRadius,
+        startAngle: props.startAngle,
+        endAngle: props.endAngle,
+        padAngle: props.padAngle,
+        palette: palette.value,
+        gradient: props.gradient,
+        gradientPrefix,
+        hoverOffset: props.hoverOffset,
+        labelPosition: props.labelPosition
+      })
+    );
+    const total = computed(() => slices.value.reduce((sum, slice) => sum + slice.value, 0));
+    const sliceName = (datum, index) => pieSliceDisplayLabel(datum, index, labels.value.sliceName);
+    const legendItems = computed(
+      () => buildChartLegendItems({
+        data: slices.value.map((slice) => slice.datum),
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        selectedIndex: resolvedSelectedIndex.value,
+        getLabel: (d, i) => props.legendFormatter ? props.legendFormatter(d, i) : sliceName(d, i),
+        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
+      })
+    );
+    const tooltipContent = computed(
+      () => resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        props.data,
+        props.tooltipFormatter,
+        (datum, index) => {
+          const name = sliceName(datum, index);
+          const percentage = total.value > 0 ? (datum.value / total.value * 100).toFixed(1) : "0";
+          return `${name}: ${datum.value} (${percentage}%)`;
+        }
+      )
+    );
+    return () => {
+      const laid = slices.value;
+      const r = radii.value;
+      const visualActive = laid.findIndex(
+        (slice) => slice.index === (activeIndex.value ?? resolvedHoveredIndex.value)
+      );
+      const centerParts = [props.centerValue, props.centerLabel].filter(
+        (part) => part !== void 0
+      );
+      const resolvedDesc = [props.desc, ...centerParts.map((part) => String(part))].filter(Boolean).join(" ");
+      const handleSliceKeyDown = (event, visualIndex) => {
+        if (isChartNavigationKey(event.key)) {
+          event.preventDefault();
+          const nextVisual = nextChartRovingIndex(visualIndex, event.key, laid.length);
+          const next = laid[nextVisual];
+          const node = event.currentTarget.parentElement?.querySelector(
+            `[data-pie-slice][data-index="${next.index}"]`
+          );
+          if (node instanceof SVGElement) node.focus();
+          handleMouseEnter(next.index, event);
+          return;
+        }
+        handleKeyDown(event, laid[visualIndex].index);
+      };
+      const chart = h(
+        ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          responsive: props.responsive,
+          title: props.title,
+          desc: resolvedDesc || void 0,
+          className: props.animated ? DONUT_ENTRANCE_CLASS : void 0,
+          onResolvedSizeChange
+        },
+        {
+          default: () => {
+            const gradientDefs = props.gradient ? h(
+              "defs",
+              null,
+              laid.map(
+                (slice) => h(
+                  "linearGradient",
+                  {
+                    key: `pie-grad-${slice.index}`,
+                    id: `${gradientPrefix}-${slice.index}`,
+                    gradientUnits: "userSpaceOnUse",
+                    x1: r.cx,
+                    y1: r.cy - r.outerRadius,
+                    x2: r.cx,
+                    y2: r.cy + r.outerRadius
+                  },
+                  [
+                    h("stop", { offset: "0%", "stop-color": slice.color, "stop-opacity": "1" }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": slice.color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                )
+              )
+            ) : null;
+            const clip = r.innerRadius > 0 && centerParts.length > 0 ? h("clipPath", { id: `${gradientPrefix}-center` }, [
+              h("circle", { cx: r.cx, cy: r.cy, r: r.innerRadius })
+            ]) : null;
+            const sliceNodes = laid.map((slice, visualIndex) => {
+              const isEmphasized = activeIndex.value === slice.index;
+              const ariaLabel = formatChartTemplate(labels.value.sliceAriaLabel, {
+                label: sliceName(slice.datum, slice.index),
+                value: slice.value,
+                percent: slice.percent.toFixed(1)
+              });
+              return h(
+                "g",
+                {
+                  key: `slice-${slice.index}`,
+                  transform: interactive.value && isEmphasized ? `translate(${slice.hoverDx} ${slice.hoverDy})` : void 0
+                },
+                [
+                  h("path", {
+                    d: slice.path,
+                    fill: slice.fill,
+                    opacity: getChartElementOpacity(slice.index, activeIndex.value, {
+                      activeOpacity: props.activeOpacity,
+                      inactiveOpacity: props.inactiveOpacity
+                    }),
+                    stroke: props.borderColor,
+                    "stroke-width": props.borderWidth,
+                    "stroke-linejoin": "round",
+                    "data-pie-slice": "true",
+                    "data-index": slice.index,
+                    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 ? ariaLabel : void 0,
+                    class: classNames(
+                      interactive.value && "cursor-pointer",
+                      pieSliceTransitionClasses
+                    ),
+                    style: {
+                      filter: props.shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
+                    },
+                    onMouseenter: (e) => handleMouseEnter(slice.index, e),
+                    onMousemove: handleMouseMove,
+                    onMouseleave: handleMouseLeave,
+                    onFocus: (e) => handleMouseEnter(slice.index, e),
+                    onClick: () => handleClick(slice.index),
+                    onKeydown: (e) => handleSliceKeyDown(e, visualIndex)
+                  })
+                ]
+              );
+            });
+            const outsideLabels = props.showLabels && props.labelPosition === "outside" ? laid.map((slice) => {
+              const text = props.labelFormatter ? props.labelFormatter(slice.value, slice.datum, slice.index) : `${sliceName(slice.datum, slice.index)} ${slice.percent.toFixed(1)}%`;
+              return h("g", { key: `label-group-${slice.index}`, "aria-hidden": "true" }, [
+                h("polyline", {
+                  points: slice.outside?.points,
+                  fill: "none",
+                  stroke: slice.color,
+                  "stroke-width": 1,
+                  opacity: 0.5
+                }),
+                h(
+                  "text",
+                  {
+                    x: slice.outside?.x,
+                    y: slice.outside?.y,
+                    "text-anchor": slice.outside?.textAnchor,
+                    "dominant-baseline": "middle",
+                    class: "fill-[color:var(--tiger-text,#1f2937)] text-xs"
+                  },
+                  text
+                )
+              ]);
+            }) : [];
+            const insideLabels = props.showLabels && props.labelPosition !== "outside" ? laid.map((slice) => {
+              const text = props.labelFormatter ? props.labelFormatter(slice.value, slice.datum, slice.index) : sliceName(slice.datum, slice.index);
+              return h(
+                "text",
+                {
+                  key: `label-${slice.index}`,
+                  x: slice.labelX,
+                  y: slice.labelY,
+                  class: pieSliceLabelInsideClasses,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle",
+                  "aria-hidden": "true"
+                },
+                text
+              );
+            }) : [];
+            const centerNode = centerParts.length > 0 ? h(
+              "g",
+              {
+                "data-donut-center": "true",
+                "clip-path": r.innerRadius > 0 ? `url(#${gradientPrefix}-center)` : void 0,
+                "aria-hidden": "true"
+              },
+              [
+                props.centerValue !== void 0 ? h(
+                  "text",
+                  {
+                    x: r.cx,
+                    y: props.centerLabel !== void 0 ? r.cy - 8 : r.cy,
+                    "text-anchor": "middle",
+                    "dominant-baseline": "middle",
+                    class: "fill-[color:var(--tiger-text,#1f2937)] text-xl font-semibold"
+                  },
+                  `${props.centerValue}`
+                ) : null,
+                props.centerLabel !== void 0 ? h(
+                  "text",
+                  {
+                    x: r.cx,
+                    y: props.centerValue !== void 0 ? r.cy + 12 : r.cy,
+                    "text-anchor": "middle",
+                    "dominant-baseline": "middle",
+                    class: "fill-[color:var(--tiger-text-secondary,#6b7280)] text-xs"
+                  },
+                  props.centerLabel
+                ) : null
+              ]
+            ) : null;
+            return [
+              gradientDefs,
+              clip,
+              ...sliceNodes,
+              ...outsideLabels,
+              ...insideLabels,
+              centerNode
+            ];
+          }
+        }
+      );
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
+        content: tooltipContent.value,
+        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        x: tooltipPosition.value.x,
+        y: tooltipPosition.value.y
+      }) : null;
+      return h(
+        "div",
+        {
+          class: getCartesianChartShellClasses({
+            showLegend: props.showLegend,
+            legendPosition: props.legendPosition,
+            responsive: props.responsive,
+            className: classNames(coerceClassValue(attrs.class), props.className)
+          }),
+          "data-pie-chart": "",
+          "data-donut-chart": r.innerRadius > 0 ? "" : void 0
+        },
+        [
+          chart,
+          props.showLegend ? h(ChartLegend, {
+            items: legendItems.value,
+            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
+        ]
+      );
+    };
+  }
+});
+var PieChart_default = PieChart;
+
+export {
+  PieChart,
+  PieChart_default
+};

package/dist/chunk-IX3VRRYB.mjs

@@ -0,0 +1,60 @@
+// src/components/Col.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getColClasses,
+  getColMergedStyleVars
+} from "@expcat/tigercat-core";
+var Col = defineComponent({
+  name: "TigerCol",
+  inheritAttrs: false,
+  props: {
+    span: {
+      type: [Number, Object],
+      default: 24
+    },
+    offset: {
+      type: [Number, Object],
+      default: 0
+    },
+    order: {
+      type: [Number, Object]
+    },
+    flex: {
+      type: [String, Number]
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const colClasses = computed(
+      () => classNames(
+        getColClasses({ flex: props.flex }),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const colMergedStyle = computed(
+      () => getColMergedStyleVars(props.span, props.offset, props.order, props.flex)
+    );
+    return () => {
+      const { class: _class, style: attrsStyle, ...rest } = attrs;
+      return h(
+        "div",
+        {
+          ...rest,
+          class: colClasses.value,
+          style: [colMergedStyle.value, attrsStyle]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+export {
+  Col
+};

package/dist/{chunk-VIIGYWUY.mjs → chunk-J4HGCSOE.mjs}

@@ -4,7 +4,8 @@ import {
   classNames,
   coerceClassValue,
   getInputGroupClasses,
-  getInputGroupAddonClasses
+  getInputGroupAddonClasses,
+  TIGER_CHROME_ATTR
 } from "@expcat/tigercat-core";
 var INPUT_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerInputGroup");
 var InputGroup = defineComponent({
@@ -39,25 +40,24 @@ var InputGroup = defineComponent({
         coerceClassValue(attrs.class)
       )
     );
-    return () => h(
-      "div",
-      {
-        ...attrs,
-        class: classes.value,
-        role: "group"
-      },
-      slots.default?.()
-    );
+    return () => {
+      const named = Boolean(attrs["aria-label"] || attrs["aria-labelledby"]);
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classes.value,
+          role: named ? "group" : void 0
+        },
+        slots.default?.()
+      );
+    };
   }
 });
 var InputGroupAddon = defineComponent({
   name: "TigerInputGroupAddon",
   inheritAttrs: false,
   props: {
-    type: {
-      type: String,
-      default: "text"
-    },
     className: {
       type: String,
       default: void 0
@@ -67,11 +67,12 @@ var InputGroupAddon = defineComponent({
     const ctx = inject(INPUT_GROUP_INJECTION_KEY, null);
     return () => {
       const size = ctx?.size ?? "md";
-      const compact = ctx?.compact ?? true;
+      const compact = ctx?.compact ?? false;
       return h(
         "span",
         {
           ...attrs,
+          [TIGER_CHROME_ATTR]: "",
           class: classNames(
             getInputGroupAddonClasses(size, compact, props.className),
             coerceClassValue(attrs.class)