@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-3ZXOARGD.mjs → chunk-R7DMRLHV.mjs}

@@ -1,7 +1,7 @@
+import { createStatusIcon } from './chunk-7RRA3TIG.mjs';
 import { defineComponent, ref, computed, h, Teleport, TransitionGroup, createApp } from 'vue';
-import { classNames, notificationContainerBaseClasses, notificationPositionClasses, coerceClassValue, getNotificationTypeClasses, defaultNotificationThemeColors, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationTitleClasses, notificationDescriptionClasses, notificationContentClasses, notificationCloseButtonClasses, icon24ViewBox, icon24StrokeWidth, icon24PathStrokeLinejoin, icon24PathStrokeLinecap, isBrowser, notificationCloseIconClasses, notificationCloseIconPath } from '@expcat/tigercat-core';
+import { classNames, notificationContainerBaseClasses, notificationPositionClasses, coerceClassValue, getNotificationTypeClasses, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationTitleClasses, notificationDescriptionClasses, notificationContentClasses, notificationCloseButtonClasses, notificationCloseIconPath, notificationCloseIconClasses, isBrowser, normalizeStringOption } from '@expcat/tigercat-core';
 
-// src/components/Notification.ts
 var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
 var NOTIFICATION_CLOSE_ARIA_LABEL = "Close notification";
 var IS_TEST_ENV = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
@@ -27,28 +27,6 @@ var updateCallbacks = {
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
-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),
-      "aria-hidden": "true",
-      focusable: "false"
-    },
-    [
-      h("path", {
-        "stroke-linecap": icon24PathStrokeLinecap,
-        "stroke-linejoin": icon24PathStrokeLinejoin,
-        d: path
-      })
-    ]
-  );
-}
 function getContainerRootId(position) {
   return `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}-root`;
 }
@@ -76,10 +54,7 @@ var NotificationContainer = defineComponent({
       )
     );
     const renderNotificationItem = (notification2) => {
-      const colorScheme = getNotificationTypeClasses(
-        notification2.type,
-        defaultNotificationThemeColors
-      );
+      const colorScheme = getNotificationTypeClasses(notification2.type);
       const notificationClasses = classNames(
         notificationBaseClasses,
         colorScheme.bg,
@@ -111,7 +86,7 @@ var NotificationContainer = defineComponent({
         );
       }
       const children = [
-        createIcon(iconPath, iconClass),
+        createStatusIcon(iconPath, iconClass, { "aria-hidden": "true", focusable: "false" }),
         h("div", { class: notificationContentClasses }, contentChildren)
       ];
       if (notification2.closable) {
@@ -127,7 +102,7 @@ var NotificationContainer = defineComponent({
               "aria-label": NOTIFICATION_CLOSE_ARIA_LABEL,
               type: "button"
             },
-            createIcon(notificationCloseIconPath, notificationCloseIconClasses)
+            createStatusIcon(notificationCloseIconPath, notificationCloseIconClasses, { "aria-hidden": "true", focusable: "false" })
           )
         );
       }
@@ -214,10 +189,7 @@ function destroyContainer(position) {
   }
   updateCallbacks[position] = null;
   if (isBrowser()) {
-    const rootEl = document.getElementById(rootId);
-    if (rootEl?.parentNode) {
-      rootEl.parentNode.removeChild(rootEl);
-    }
+    document.getElementById(rootId)?.remove();
   }
 }
 function addNotification(config) {
@@ -252,9 +224,7 @@ function removeNotification(id, position) {
   if (index !== -1) {
     const instance = instances[index];
     instances.splice(index, 1);
-    if (instance.onClose) {
-      instance.onClose();
-    }
+    instance.onClose?.();
   }
   updateCallbacks[position]?.();
   if (notificationInstancesByPosition[position].length === 0) {
@@ -264,65 +234,41 @@ function removeNotification(id, position) {
 function clearAll(position) {
   if (position) {
     notificationInstancesByPosition[position].forEach((instance) => {
-      if (instance.onClose) {
-        instance.onClose();
-      }
+      instance.onClose?.();
     });
     notificationInstancesByPosition[position] = [];
-    updateCallbacks[position]?.();
     destroyContainer(position);
   } else {
     Object.keys(notificationInstancesByPosition).forEach((pos) => {
       const p = pos;
       notificationInstancesByPosition[p].forEach((instance) => {
-        if (instance.onClose) {
-          instance.onClose();
-        }
+        instance.onClose?.();
       });
       notificationInstancesByPosition[p] = [];
-      updateCallbacks[p]?.();
       destroyContainer(p);
     });
   }
 }
 function normalizeOptions(options) {
-  if (typeof options === "string") {
-    return { title: options };
-  }
-  return options;
+  return normalizeStringOption(options, "title");
 }
 var notification = {
-  /**
-   * Show an info notification
-   */
   info(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "info" });
   },
-  /**
-   * Show a success notification
-   */
   success(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "success" });
   },
-  /**
-   * Show a warning notification
-   */
   warning(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "warning" });
   },
-  /**
-   * Show an error notification
-   */
   error(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "error" });
   },
-  /**
-   * Clear all notifications
-   */
   clear(position) {
     clearAll(position);
   }

package/dist/{chunk-6AZFL3WJ.js → chunk-R7S7O3YU.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var chunkJFZDIY7D_js = require('./chunk-JFZDIY7D.js');
+var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
 var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
 var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
 var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
 var vue = require('vue');
@@ -131,16 +132,14 @@ var RadarChart = vue.defineComponent({
       default: 1
     },
     strokeColor: {
-      type: String,
-      default: tigercatCore.DEFAULT_CHART_COLORS[0]
+      type: String
     },
     strokeWidth: {
       type: Number,
       default: 2
     },
     fillColor: {
-      type: String,
-      default: tigercatCore.DEFAULT_CHART_COLORS[0]
+      type: String
     },
     fillOpacity: {
       type: Number,
@@ -157,6 +156,37 @@ var RadarChart = vue.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
     },
@@ -175,10 +205,11 @@ var RadarChart = vue.defineComponent({
     );
     const cx = vue.computed(() => innerRect.value.width / 2);
     const cy = vue.computed(() => innerRect.value.height / 2);
-    const resolvedSeries = vue.computed(() => {
-      if (props.series && props.series.length > 0) return props.series;
-      return [{ data: props.data ?? [] }];
-    });
+    const resolvedSeries = vue.computed(
+      () => tigercatCore.resolveSeriesData(props.series, props.data, {
+        data: []
+      })
+    );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
       resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -188,12 +219,15 @@ var RadarChart = vue.defineComponent({
       handleMouseMove,
       handleMouseLeave: handleHoverLeave,
       handleClick: handleSelectIndex,
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave,
       wrapperClasses
-    } = chunkJFZDIY7D_js.useChartInteraction({
+    } = chunkFLAJKB2O_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
-      hoveredIndexProp: props.hoveredIndex,
+      hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
-      selectedIndexProp: props.selectedIndex,
+      selectedIndexProp: () => props.selectedIndex,
       activeOpacity: vue.computed(() => props.activeOpacity),
       inactiveOpacity: vue.computed(() => props.inactiveOpacity),
       legendPosition: vue.computed(() => props.legendPosition),
@@ -245,10 +279,45 @@ var RadarChart = vue.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) => tigercatCore.polarToCartesian(cx.value, cy.value, levelRadius, angle)
         );
-        return tigercatCore.createPolygonPath(ringPoints);
+        return {
+          type: "polygon",
+          d: tigercatCore.createPolygonPath(ringPoints),
+          cx: cx.value,
+          cy: cy.value,
+          r: levelRadius
+        };
+      });
+    });
+    const splitAreaPaths = vue.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 : tigercatCore.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) => tigercatCore.polarToCartesian(cx.value, cy.value, outerRadius, angle)
+        );
+        const innerPoints = outerIndex > 0 ? angles.value.map((angle) => tigercatCore.polarToCartesian(cx.value, cy.value, innerRadius, angle)) : [];
+        return { type: "polygon-ring", outerPoints, innerPoints, color };
       });
     });
     const axisLines = vue.computed(() => {
@@ -274,10 +343,13 @@ var RadarChart = vue.defineComponent({
           radius.value + props.labelOffset,
           angle
         );
+        const align = props.labelAutoAlign ? tigercatCore.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
         };
       });
     });
@@ -302,43 +374,24 @@ var RadarChart = vue.defineComponent({
       });
     });
     const dasharray = vue.computed(() => tigercatCore.getChartGridLineDasharray(props.gridLineStyle));
-    const palette = vue.computed(
-      () => props.colors && props.colors.length > 0 ? props.colors : [...tigercatCore.DEFAULT_CHART_COLORS]
+    const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
+    const tooltipContent = vue.computed(
+      () => tigercatCore.resolveMultiSeriesTooltipContent(
+        hoveredPoint.value,
+        resolvedSeries.value,
+        props.tooltipFormatter,
+        tigercatCore.defaultRadarTooltipFormatter
+      )
     );
-    const formatTooltip = vue.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 = vue.computed(
+      () => tigercatCore.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 = vue.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 = vue.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 = vue.computed(
-      () => tigercatCore.classNames(
-        "flex flex-wrap",
-        props.legendPosition === "right" ? "flex-col gap-2" : "flex-row gap-3"
-      )
-    );
     return () => {
       const chart = vue.h(
         chunkFCV4ML6I_js.ChartCanvas,
@@ -352,10 +405,58 @@ var RadarChart = vue.defineComponent({
         },
         {
           default: () => [
+            // Split area (alternating fills – ECharts splitArea style)
+            ...splitAreaPaths.value.map((area, index) => {
+              if (area.type === "circle-ring") {
+                return vue.h("g", { key: `split-${index}` }, [
+                  vue.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 ? vue.h("circle", {
+                    cx: area.cx,
+                    cy: area.cy,
+                    r: area.innerRadius,
+                    fill: "var(--tiger-bg,#fff)",
+                    stroke: "none"
+                  }) : null
+                ]);
+              }
+              const outerPath = tigercatCore.createPolygonPath(area.outerPoints);
+              return vue.h("g", { key: `split-${index}` }, [
+                outerPath ? vue.h("path", {
+                  d: outerPath,
+                  fill: area.color,
+                  "fill-opacity": props.splitAreaOpacity,
+                  stroke: "none",
+                  "data-radar-split-area": "true"
+                }) : null,
+                area.innerPoints.length > 0 ? vue.h("path", {
+                  d: tigercatCore.createPolygonPath(area.innerPoints),
+                  fill: "var(--tiger-bg,#fff)",
+                  stroke: "none"
+                }) : null
+              ]);
+            }),
+            // Grid lines
             ...gridPaths.value.map(
-              (path, index) => vue.h("path", {
+              (grid, index) => grid.type === "circle" ? vue.h("circle", {
                 key: `grid-${index}`,
-                d: path,
+                cx: grid.cx,
+                cy: grid.cy,
+                r: grid.r,
+                class: tigercatCore.chartGridLineClasses,
+                fill: "none",
+                "stroke-width": props.gridStrokeWidth,
+                "stroke-dasharray": dasharray.value
+              }) : vue.h("path", {
+                key: `grid-${index}`,
+                d: grid.d,
                 class: tigercatCore.chartGridLineClasses,
                 fill: "none",
                 "stroke-width": props.gridStrokeWidth,
@@ -376,8 +477,8 @@ var RadarChart = vue.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;
@@ -418,17 +519,30 @@ var RadarChart = vue.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 vue.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: tigercatCore.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,
@@ -449,8 +563,8 @@ var RadarChart = vue.defineComponent({
                   x: label.x,
                   y: label.y,
                   class: tigercatCore.chartAxisTickTextClasses,
-                  "text-anchor": "middle",
-                  "dominant-baseline": "middle"
+                  "text-anchor": label.textAnchor,
+                  "dominant-baseline": label.dominantBaseline
                 },
                 label.text
               )
@@ -484,37 +598,16 @@ var RadarChart = vue.defineComponent({
       }
       return vue.h("div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(
-          "div",
-          { class: legendContainerClasses.value },
-          resolvedLegendItems.value.map(
-            (item) => vue.h(
-              "button",
-              {
-                key: `legend-${item.index}`,
-                type: "button",
-                class: tigercatCore.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
-              },
-              [
-                vue.h("span", {
-                  class: "inline-block rounded-full",
-                  style: {
-                    width: `${props.legendMarkerSize}px`,
-                    height: `${props.legendMarkerSize}px`,
-                    backgroundColor: item.color
-                  }
-                }),
-                vue.h("span", { style: { marginRight: `${props.legendGap}px` } }, item.label)
-              ]
-            )
-          )
-        ),
+        vue.h(chunkBKTQ6RWR_js.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-XS7OPLPB.mjs → chunk-RKPYLBPU.mjs}

@@ -38,26 +38,26 @@ var Sidebar = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const sidebarClasses = computed(
-      () => classNames(layoutSidebarClasses, props.className, coerceClassValue(attrsRecord.class))
+      () => classNames(
+        layoutSidebarClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
     );
     const sidebarStyle = computed(() => ({
       width: props.collapsed ? "0px" : props.width,
-      minWidth: props.collapsed ? "0px" : props.width,
-      overflow: "hidden"
+      minWidth: props.collapsed ? "0px" : props.width
     }));
-    return () => {
-      return h(
-        "aside",
-        {
-          ...attrs,
-          class: sidebarClasses.value,
-          style: mergeStyleValues(attrsRecord.style, props.style, sidebarStyle.value)
-        },
-        !props.collapsed && slots.default?.()
-      );
-    };
+    return () => h(
+      "aside",
+      {
+        ...attrs,
+        class: sidebarClasses.value,
+        style: mergeStyleValues(props.style, sidebarStyle.value)
+      },
+      !props.collapsed && slots.default?.()
+    );
   }
 });
 var Sidebar_default = Sidebar;