@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-Y4QBDL7S.mjs → chunk-IIU6FINW.mjs}

@@ -1,9 +1,10 @@
-import { useChartInteraction } from './chunk-264DR3I2.mjs';
+import { useChartInteraction } from './chunk-DU2NXX75.mjs';
 import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartLegend } from './chunk-F5HOHSFH.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
 import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
 import { defineComponent, computed, ref, h } from 'vue';
-import { DEFAULT_CHART_COLORS, getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, getChartGridLineDasharray, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { getChartInnerRect, resolveSeriesData, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, RADAR_SPLIT_AREA_COLORS, getRadarLabelAlign, getChartGridLineDasharray, resolveChartPalette, resolveMultiSeriesTooltipContent, defaultRadarTooltipFormatter, buildChartLegendItems, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 
 var RadarChart = defineComponent({
   name: "TigerRadarChart",
@@ -129,16 +130,14 @@ var RadarChart = defineComponent({
       default: 1
     },
     strokeColor: {
-      type: String,
-      default: DEFAULT_CHART_COLORS[0]
+      type: String
     },
     strokeWidth: {
       type: Number,
       default: 2
     },
     fillColor: {
-      type: String,
-      default: DEFAULT_CHART_COLORS[0]
+      type: String
     },
     fillOpacity: {
       type: Number,
@@ -155,6 +154,37 @@ var RadarChart = defineComponent({
     pointColor: {
       type: String
     },
+    gridShape: {
+      type: String,
+      default: "polygon"
+    },
+    showSplitArea: {
+      type: Boolean,
+      default: false
+    },
+    splitAreaOpacity: {
+      type: Number,
+      default: 0.06
+    },
+    splitAreaColors: {
+      type: Array
+    },
+    pointBorderWidth: {
+      type: Number,
+      default: 2
+    },
+    pointBorderColor: {
+      type: String,
+      default: "#fff"
+    },
+    pointHoverSize: {
+      type: Number,
+      default: void 0
+    },
+    labelAutoAlign: {
+      type: Boolean,
+      default: true
+    },
     title: {
       type: String
     },
@@ -173,10 +203,11 @@ var RadarChart = defineComponent({
     );
     const cx = computed(() => innerRect.value.width / 2);
     const cy = computed(() => innerRect.value.height / 2);
-    const resolvedSeries = computed(() => {
-      if (props.series && props.series.length > 0) return props.series;
-      return [{ data: props.data ?? [] }];
-    });
+    const resolvedSeries = computed(
+      () => resolveSeriesData(props.series, props.data, {
+        data: []
+      })
+    );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
       resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -186,12 +217,15 @@ var RadarChart = defineComponent({
       handleMouseMove,
       handleMouseLeave: handleHoverLeave,
       handleClick: handleSelectIndex,
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave,
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
-      hoveredIndexProp: props.hoveredIndex,
+      hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
-      selectedIndexProp: props.selectedIndex,
+      selectedIndexProp: () => props.selectedIndex,
       activeOpacity: computed(() => props.activeOpacity),
       inactiveOpacity: computed(() => props.inactiveOpacity),
       legendPosition: computed(() => props.legendPosition),
@@ -243,10 +277,45 @@ var RadarChart = defineComponent({
       const resolvedLevels = Math.max(1, Math.floor(props.levels));
       return Array.from({ length: resolvedLevels }, (_, index) => {
         const levelRadius = radius.value * ((index + 1) / resolvedLevels);
+        if (props.gridShape === "circle") {
+          return { type: "circle", cx: cx.value, cy: cy.value, r: levelRadius };
+        }
         const ringPoints = angles.value.map(
           (angle) => polarToCartesian(cx.value, cy.value, levelRadius, angle)
         );
-        return createPolygonPath(ringPoints);
+        return {
+          type: "polygon",
+          d: createPolygonPath(ringPoints),
+          cx: cx.value,
+          cy: cy.value,
+          r: levelRadius
+        };
+      });
+    });
+    const splitAreaPaths = computed(() => {
+      if (!props.showSplitArea || angles.value.length === 0) return [];
+      const resolvedLevels = Math.max(1, Math.floor(props.levels));
+      const areaColors = props.splitAreaColors && props.splitAreaColors.length > 0 ? props.splitAreaColors : RADAR_SPLIT_AREA_COLORS;
+      return Array.from({ length: resolvedLevels }, (_, index) => {
+        const outerIndex = resolvedLevels - 1 - index;
+        const outerRadius = radius.value * ((outerIndex + 1) / resolvedLevels);
+        const innerRadius = radius.value * (outerIndex / resolvedLevels);
+        const color = areaColors[outerIndex % areaColors.length];
+        if (props.gridShape === "circle") {
+          return {
+            type: "circle-ring",
+            cx: cx.value,
+            cy: cy.value,
+            outerRadius,
+            innerRadius,
+            color
+          };
+        }
+        const outerPoints = angles.value.map(
+          (angle) => polarToCartesian(cx.value, cy.value, outerRadius, angle)
+        );
+        const innerPoints = outerIndex > 0 ? angles.value.map((angle) => polarToCartesian(cx.value, cy.value, innerRadius, angle)) : [];
+        return { type: "polygon-ring", outerPoints, innerPoints, color };
       });
     });
     const axisLines = computed(() => {
@@ -272,10 +341,13 @@ var RadarChart = defineComponent({
           radius.value + props.labelOffset,
           angle
         );
+        const align = props.labelAutoAlign ? getRadarLabelAlign(angle) : { textAnchor: "middle", dominantBaseline: "middle" };
         return {
           x: position.x,
           y: position.y,
-          text: formatLabel(datum, index)
+          text: formatLabel(datum, index),
+          textAnchor: align.textAnchor,
+          dominantBaseline: align.dominantBaseline
         };
       });
     });
@@ -300,43 +372,24 @@ var RadarChart = defineComponent({
       });
     });
     const dasharray = computed(() => getChartGridLineDasharray(props.gridLineStyle));
-    const palette = computed(
-      () => props.colors && props.colors.length > 0 ? props.colors : [...DEFAULT_CHART_COLORS]
+    const palette = computed(() => resolveChartPalette(props.colors));
+    const tooltipContent = computed(
+      () => resolveMultiSeriesTooltipContent(
+        hoveredPoint.value,
+        resolvedSeries.value,
+        props.tooltipFormatter,
+        defaultRadarTooltipFormatter
+      )
     );
-    const formatTooltip = computed(
-      () => props.tooltipFormatter ?? ((datum, seriesIndex, index, series) => {
-        const label = datum.label ?? `#${index + 1}`;
-        const value = datum.value;
-        const name = series?.name ?? `Series ${seriesIndex + 1}`;
-        return `${name} \xB7 ${label}: ${value}`;
+    const legendItems = computed(
+      () => buildChartLegendItems({
+        data: resolvedSeries.value,
+        palette: palette.value,
+        activeIndex: resolvedActiveIndex.value,
+        getLabel: (s, i) => props.legendFormatter ? props.legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+        getColor: (s, i) => s.color ?? palette.value[i % palette.value.length]
       })
     );
-    const tooltipContent = computed(() => {
-      if (!hoveredPoint.value) return "";
-      const { seriesIndex, pointIndex } = hoveredPoint.value;
-      const series = resolvedSeries.value[seriesIndex];
-      if (!series) return "";
-      const datum = series.data[pointIndex];
-      if (!datum) return "";
-      return formatTooltip.value(datum, seriesIndex, pointIndex, series);
-    });
-    const resolvedLegendItems = computed(
-      () => resolvedSeries.value.map((item, index) => {
-        const color = item.color ?? palette.value[index % palette.value.length];
-        const label = props.legendFormatter ? props.legendFormatter(item, index) : item.name ?? `Series ${index + 1}`;
-        return {
-          index,
-          label,
-          color
-        };
-      })
-    );
-    const legendContainerClasses = computed(
-      () => classNames(
-        "flex flex-wrap",
-        props.legendPosition === "right" ? "flex-col gap-2" : "flex-row gap-3"
-      )
-    );
     return () => {
       const chart = h(
         ChartCanvas,
@@ -350,10 +403,58 @@ var RadarChart = defineComponent({
         },
         {
           default: () => [
+            // Split area (alternating fills – ECharts splitArea style)
+            ...splitAreaPaths.value.map((area, index) => {
+              if (area.type === "circle-ring") {
+                return h("g", { key: `split-${index}` }, [
+                  h("circle", {
+                    cx: area.cx,
+                    cy: area.cy,
+                    r: area.outerRadius,
+                    fill: area.color,
+                    "fill-opacity": props.splitAreaOpacity,
+                    stroke: "none",
+                    "data-radar-split-area": "true"
+                  }),
+                  area.innerRadius > 0 ? h("circle", {
+                    cx: area.cx,
+                    cy: area.cy,
+                    r: area.innerRadius,
+                    fill: "var(--tiger-bg,#fff)",
+                    stroke: "none"
+                  }) : null
+                ]);
+              }
+              const outerPath = createPolygonPath(area.outerPoints);
+              return h("g", { key: `split-${index}` }, [
+                outerPath ? h("path", {
+                  d: outerPath,
+                  fill: area.color,
+                  "fill-opacity": props.splitAreaOpacity,
+                  stroke: "none",
+                  "data-radar-split-area": "true"
+                }) : null,
+                area.innerPoints.length > 0 ? h("path", {
+                  d: createPolygonPath(area.innerPoints),
+                  fill: "var(--tiger-bg,#fff)",
+                  stroke: "none"
+                }) : null
+              ]);
+            }),
+            // Grid lines
             ...gridPaths.value.map(
-              (path, index) => h("path", {
+              (grid, index) => grid.type === "circle" ? h("circle", {
                 key: `grid-${index}`,
-                d: path,
+                cx: grid.cx,
+                cy: grid.cy,
+                r: grid.r,
+                class: chartGridLineClasses,
+                fill: "none",
+                "stroke-width": props.gridStrokeWidth,
+                "stroke-dasharray": dasharray.value
+              }) : h("path", {
+                key: `grid-${index}`,
+                d: grid.d,
                 class: chartGridLineClasses,
                 fill: "none",
                 "stroke-width": props.gridStrokeWidth,
@@ -374,8 +475,8 @@ var RadarChart = defineComponent({
             ),
             ...seriesPoints.value.map((item, seriesIndex) => {
               const seriesColor = item.series.color ?? palette.value[seriesIndex % palette.value.length];
-              const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? props.strokeColor;
-              const resolvedFillColor = item.series.fillColor ?? seriesColor ?? props.fillColor;
+              const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? props.strokeColor ?? palette.value[0];
+              const resolvedFillColor = item.series.fillColor ?? seriesColor ?? props.fillColor ?? palette.value[0];
               const resolvedFillOpacity = item.series.fillOpacity ?? props.fillOpacity;
               const resolvedStrokeWidth = item.series.strokeWidth ?? props.strokeWidth;
               const resolvedShowPoints = item.series.showPoints ?? props.showPoints;
@@ -416,17 +517,30 @@ var RadarChart = defineComponent({
                       "fill-opacity": resolvedFillOpacity,
                       stroke: resolvedStrokeColor,
                       "stroke-width": resolvedStrokeWidth,
+                      "stroke-linejoin": "round",
+                      class: "transition-[fill-opacity,filter] duration-200 ease-out",
+                      style: resolvedActiveIndex.value === seriesIndex ? { filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))" } : void 0,
                       "data-radar-area": "true",
                       "data-series-index": seriesIndex
                     }) : null,
                     resolvedShowPoints ? item.points.map((point) => {
+                      const isHoveredPoint = hoveredPoint.value?.seriesIndex === seriesIndex && hoveredPoint.value?.pointIndex === point.index;
+                      const hoverSize = props.pointHoverSize ?? resolvedPointSize + 2;
+                      const currentSize = isHoveredPoint ? hoverSize : point.data.size ?? resolvedPointSize;
+                      const resolvedBorderWidth = item.series.pointBorderWidth ?? props.pointBorderWidth;
+                      const resolvedBorderColor = item.series.pointBorderColor ?? props.pointBorderColor;
                       return h("circle", {
                         key: `point-${seriesIndex}-${point.index}`,
                         cx: point.x,
                         cy: point.y,
-                        r: point.data.size ?? resolvedPointSize,
+                        r: currentSize,
                         fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
-                        class: props.showTooltip && props.hoverable ? "cursor-pointer" : null,
+                        stroke: resolvedBorderColor,
+                        "stroke-width": resolvedBorderWidth,
+                        class: classNames(
+                          props.showTooltip && props.hoverable ? "cursor-pointer" : null,
+                          "transition-[r] duration-150 ease-out"
+                        ),
                         "data-radar-point": "true",
                         "data-series-index": seriesIndex,
                         "data-point-index": point.index,
@@ -447,8 +561,8 @@ var RadarChart = defineComponent({
                   x: label.x,
                   y: label.y,
                   class: chartAxisTickTextClasses,
-                  "text-anchor": "middle",
-                  "dominant-baseline": "middle"
+                  "text-anchor": label.textAnchor,
+                  "dominant-baseline": label.dominantBaseline
                 },
                 label.text
               )
@@ -482,37 +596,16 @@ var RadarChart = defineComponent({
       }
       return h("div", { class: wrapperClasses.value }, [
         chart,
-        h(
-          "div",
-          { class: legendContainerClasses.value },
-          resolvedLegendItems.value.map(
-            (item) => h(
-              "button",
-              {
-                key: `legend-${item.index}`,
-                type: "button",
-                class: classNames(
-                  "flex items-center gap-2 text-sm text-gray-600",
-                  props.selectable ? "cursor-pointer" : "cursor-default"
-                ),
-                onClick: props.selectable ? () => handleSelectIndex(item.index) : void 0,
-                onMouseenter: props.hoverable ? (e) => handleHoverEnter(item.index, e) : void 0,
-                onMouseleave: props.hoverable ? handlePointLeave : void 0
-              },
-              [
-                h("span", {
-                  class: "inline-block rounded-full",
-                  style: {
-                    width: `${props.legendMarkerSize}px`,
-                    height: `${props.legendMarkerSize}px`,
-                    backgroundColor: item.color
-                  }
-                }),
-                h("span", { style: { marginRight: `${props.legendGap}px` } }, item.label)
-              ]
-            )
-          )
-        ),
+        h(ChartLegend, {
+          items: legendItems.value,
+          position: props.legendPosition,
+          markerSize: props.legendMarkerSize,
+          gap: props.legendGap,
+          interactive: props.hoverable || props.selectable,
+          onItemClick: handleLegendClick,
+          onItemHover: handleLegendHover,
+          onItemLeave: handleLegendLeave
+        }),
         tooltip
       ]);
     };

package/dist/{chunk-6NWG6SG3.mjs → chunk-J5J4UYGP.mjs}

@@ -1,27 +1,7 @@
+import { createStatusIcon } from './chunk-7RRA3TIG.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
-import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, mergeStyleValues, coerceClassValue, icon24ViewBox, icon24StrokeWidth, icon24PathStrokeLinejoin, icon24PathStrokeLinecap, alertCloseIconPath } from '@expcat/tigercat-core';
+import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath, mergeStyleValues, coerceClassValue } from '@expcat/tigercat-core';
 
-// src/components/Alert.ts
-function createIcon(path, className) {
-  return h(
-    "svg",
-    {
-      class: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: icon24ViewBox,
-      stroke: "currentColor",
-      "stroke-width": String(icon24StrokeWidth)
-    },
-    [
-      h("path", {
-        "stroke-linecap": icon24PathStrokeLinecap,
-        "stroke-linejoin": icon24PathStrokeLinejoin,
-        d: path
-      })
-    ]
-  );
-}
 var Alert = defineComponent({
   name: "TigerAlert",
   inheritAttrs: false,
@@ -141,7 +121,7 @@ var Alert = defineComponent({
       if (props.showIcon) {
         const iconPath = getAlertIconPath(props.type);
         children.push(
-          h("div", { class: alertIconContainerClasses }, createIcon(iconPath, iconClasses.value))
+          h("div", { class: alertIconContainerClasses }, createStatusIcon(iconPath, iconClasses.value))
         );
       }
       const contentChildren = [];
@@ -175,7 +155,7 @@ var Alert = defineComponent({
               "aria-label": props.closeAriaLabel,
               type: "button"
             },
-            createIcon(alertCloseIconPath, "h-4 w-4")
+            createStatusIcon(alertCloseIconPath, "h-4 w-4")
           )
         );
       }