@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-LNQYYW3E.mjs → chunk-3G4VPV4D.mjs}

@@ -11,7 +11,8 @@ var CloseIcon = () => h(
     viewBox: icon24ViewBox,
     stroke: "currentColor",
     "stroke-width": String(icon24StrokeWidth),
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    focusable: "false"
   },
   [
     h("path", {
@@ -75,13 +76,14 @@ var Tag = defineComponent({
   emits: ["close"],
   setup(props, { slots, emit, attrs }) {
     const isVisible = ref(true);
-    const tagClasses = computed(() => {
-      return classNames(
+    const tagClasses = computed(
+      () => classNames(
         tagBaseClasses,
         getTagVariantClasses(props.variant),
-        tagSizeClasses[props.size]
-      );
-    });
+        tagSizeClasses[props.size],
+        props.className
+      )
+    );
     const closeButtonClasses = computed(() => {
       const scheme = defaultTagThemeColors[props.variant];
       return classNames(tagCloseButtonBaseClasses, scheme.closeBgHover, scheme.text);
@@ -104,7 +106,7 @@ var Tag = defineComponent({
         "span",
         {
           ...attrs,
-          class: classNames(tagClasses.value, props.className, coerceClassValue(attrsClass)),
+          class: classNames(tagClasses.value, coerceClassValue(attrsClass)),
           style: mergeStyleValues(attrsStyle, props.style),
           role: "status"
         },

package/dist/{chunk-ZFDUZQML.js → chunk-3L36R3UN.js}

@@ -1,6 +1,6 @@
 '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');
@@ -115,6 +115,27 @@ var PieChart = vue.defineComponent({
     },
     className: {
       type: String
+    },
+    // Visual enhancements
+    borderWidth: {
+      type: Number,
+      default: 2
+    },
+    borderColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    hoverOffset: {
+      type: Number,
+      default: 8
+    },
+    labelPosition: {
+      type: String,
+      default: "inside"
+    },
+    shadow: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
@@ -132,11 +153,11 @@ var PieChart = vue.defineComponent({
       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),
@@ -147,7 +168,8 @@ var PieChart = vue.defineComponent({
     const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
     const resolvedOuterRadius = vue.computed(() => {
       if (typeof props.outerRadius === "number") return Math.max(0, props.outerRadius);
-      return Math.max(0, Math.min(innerRect.value.width, innerRect.value.height) / 2);
+      const maxR = Math.min(innerRect.value.width, innerRect.value.height) / 2;
+      return Math.max(0, props.labelPosition === "outside" ? maxR * 0.72 : maxR);
     });
     const resolvedInnerRadius = vue.computed(
       () => Math.min(Math.max(0, props.innerRadius ?? 0), resolvedOuterRadius.value)
@@ -159,37 +181,37 @@ var PieChart = vue.defineComponent({
         padAngle: props.padAngle
       })
     );
-    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 legendItems = vue.computed(
-      () => props.data.map((datum, index) => ({
-        index,
-        label: datum.label ?? `${datum.value}`,
-        color: datum.color ?? palette.value[index % palette.value.length],
-        active: activeIndex.value === null || activeIndex.value === index
-      }))
-    );
-    const formatTooltip = vue.computed(
-      () => props.tooltipFormatter ?? ((datum, index) => {
-        const total = props.data.reduce((sum, d) => sum + d.value, 0);
-        const percent = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
-        const label = datum.label ?? `#${index + 1}`;
-        return `${label}: ${datum.value} (${percent}%)`;
+      () => tigercatCore.buildChartLegendItems({
+        data: props.data,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (d) => d.label ?? `${d.value}`,
+        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
       })
     );
-    const tooltipContent = vue.computed(() => {
-      if (resolvedHoveredIndex.value === null) return "";
-      const datum = props.data[resolvedHoveredIndex.value];
-      return datum ? formatTooltip.value(datum, resolvedHoveredIndex.value) : "";
-    });
+    const total = vue.computed(() => props.data.reduce((sum, d) => sum + d.value, 0));
+    const tooltipContent = vue.computed(
+      () => tigercatCore.resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        props.data,
+        props.tooltipFormatter,
+        (datum, index) => {
+          const percent = total.value > 0 ? (datum.value / total.value * 100).toFixed(1) : "0";
+          const label = datum.label ?? `#${index + 1}`;
+          return `${label}: ${datum.value} (${percent}%)`;
+        }
+      )
+    );
     return () => {
       const rect = innerRect.value;
       const cx = rect.width / 2;
       const cy = rect.height / 2;
-      const outerRadius = resolvedOuterRadius.value;
-      const innerRadius = resolvedInnerRadius.value;
-      const labelRadius = innerRadius + (outerRadius - innerRadius) / 2;
+      const outerR = resolvedOuterRadius.value;
+      const innerR = resolvedInnerRadius.value;
+      const interactive = props.hoverable || props.selectable;
+      const hoverOff = props.hoverOffset ?? 8;
       const formatLabel = props.labelFormatter ?? ((value, datum) => datum.label ?? `${value}`);
       const chart = vue.h(
         chunkFCV4ML6I_js.ChartCanvas,
@@ -202,36 +224,42 @@ var PieChart = vue.defineComponent({
           className: tigercatCore.classNames(props.className)
         },
         {
-          default: () => [
-            vue.h(
+          default: () => {
+            const slices = vue.h(
               chunkHBFFINAI_js.ChartSeries,
-              {
-                data: props.data,
-                type: "pie"
-              },
+              { data: props.data, type: "pie" },
               {
                 default: () => arcs.value.map((arc) => {
                   const color = arc.data.color ?? palette.value[arc.index % palette.value.length];
                   const path = tigercatCore.createPieArcPath({
                     cx,
                     cy,
-                    innerRadius,
-                    outerRadius,
+                    innerRadius: innerR,
+                    outerRadius: outerR,
                     startAngle: arc.startAngle,
                     endAngle: arc.endAngle
                   });
+                  const isEmphasized = activeIndex.value === arc.index;
                   const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex.value, {
                     activeOpacity: props.activeOpacity,
                     inactiveOpacity: props.inactiveOpacity
                   });
+                  const { dx, dy } = interactive && isEmphasized && hoverOff > 0 ? tigercatCore.computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOff) : { dx: 0, dy: 0 };
                   return vue.h("path", {
                     key: `slice-${arc.index}`,
                     d: path,
                     fill: color,
                     opacity,
-                    class: tigercatCore.classNames(
-                      (props.hoverable || props.selectable) && "cursor-pointer transition-opacity duration-150"
-                    ),
+                    stroke: props.borderColor,
+                    "stroke-width": props.borderWidth,
+                    "stroke-linejoin": "round",
+                    class: tigercatCore.classNames(interactive && "cursor-pointer"),
+                    style: {
+                      transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
+                      transformOrigin: `${cx}px ${cy}px`,
+                      transition: "transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease-out, filter 0.3s ease-out",
+                      filter: props.shadow ? isEmphasized ? tigercatCore.PIE_EMPHASIS_SHADOW : tigercatCore.PIE_BASE_SHADOW : void 0
+                    },
                     tabindex: props.selectable ? 0 : void 0,
                     role: props.selectable ? "button" : "img",
                     "aria-label": arc.data.label ?? `${arc.value}`,
@@ -245,8 +273,41 @@ var PieChart = vue.defineComponent({
                   });
                 })
               }
-            ),
-            props.showLabels ? arcs.value.map((arc) => {
+            );
+            if (!props.showLabels) return [slices];
+            if (props.labelPosition === "outside") {
+              const labelNodes = arcs.value.map((arc) => {
+                const color = arc.data.color ?? palette.value[arc.index % palette.value.length];
+                const line = tigercatCore.computePieLabelLine(cx, cy, outerR, arc.startAngle, arc.endAngle);
+                const pct = total.value > 0 ? (arc.value / total.value * 100).toFixed(1) : "0";
+                const labelText = props.labelFormatter ? props.labelFormatter(arc.value, arc.data, arc.index) : `${arc.data.label ?? arc.value} ${pct}%`;
+                return [
+                  vue.h("polyline", {
+                    key: `line-${arc.index}`,
+                    points: `${line.anchor.x},${line.anchor.y} ${line.elbow.x},${line.elbow.y} ${line.label.x},${line.label.y}`,
+                    fill: "none",
+                    stroke: color,
+                    "stroke-width": 1,
+                    opacity: 0.5
+                  }),
+                  vue.h(
+                    "text",
+                    {
+                      key: `label-${arc.index}`,
+                      x: line.label.x,
+                      y: line.label.y,
+                      "text-anchor": line.textAnchor,
+                      "dominant-baseline": "middle",
+                      class: "fill-[color:var(--tiger-text-secondary,#6b7280)] text-xs"
+                    },
+                    labelText
+                  )
+                ];
+              }).flat();
+              return [slices, ...labelNodes];
+            }
+            const labelRadius = innerR + (outerR - innerR) / 2;
+            const insideLabels = arcs.value.map((arc) => {
               const angle = (arc.startAngle + arc.endAngle) / 2;
               const { x, y } = tigercatCore.polarToCartesian(cx, cy, labelRadius, angle);
               const label = formatLabel(arc.value, arc.data, arc.index);
@@ -262,8 +323,9 @@ var PieChart = vue.defineComponent({
                 },
                 label
               );
-            }) : null
-          ].filter(Boolean)
+            });
+            return [slices, ...insideLabels];
+          }
         }
       );
       const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
@@ -282,7 +344,7 @@ var PieChart = vue.defineComponent({
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,
           gap: props.legendGap,
-          interactive: props.hoverable || props.selectable,
+          interactive,
           onItemClick: handleLegendClick,
           onItemHover: handleLegendHover,
           onItemLeave: handleLegendLeave

package/dist/{chunk-CGJTYURK.js → chunk-3PQIZBT5.js}

@@ -6,42 +6,18 @@ var tigercatCore = require('@expcat/tigercat-core');
 // src/components/Table.ts
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var SortIcon = (direction) => {
-  if (direction === "asc") {
-    return vue.h(
-      "svg",
-      {
-        class: tigercatCore.getSortIconClasses(true),
-        width: "16",
-        height: "16",
-        viewBox: tigercatCore.icon16ViewBox,
-        fill: "currentColor"
-      },
-      [vue.h("path", { d: tigercatCore.sortAscIcon16PathD })]
-    );
-  }
-  if (direction === "desc") {
-    return vue.h(
-      "svg",
-      {
-        class: tigercatCore.getSortIconClasses(true),
-        width: "16",
-        height: "16",
-        viewBox: tigercatCore.icon16ViewBox,
-        fill: "currentColor"
-      },
-      [vue.h("path", { d: tigercatCore.sortDescIcon16PathD })]
-    );
-  }
+  const active = direction !== null;
+  const pathD = direction === "asc" ? tigercatCore.sortAscIcon16PathD : direction === "desc" ? tigercatCore.sortDescIcon16PathD : tigercatCore.sortBothIcon16PathD;
   return vue.h(
     "svg",
     {
-      class: tigercatCore.getSortIconClasses(false),
+      class: tigercatCore.getSortIconClasses(active),
       width: "16",
       height: "16",
       viewBox: tigercatCore.icon16ViewBox,
       fill: "currentColor"
     },
-    [vue.h("path", { d: tigercatCore.sortBothIcon16PathD })]
+    [vue.h("path", { d: pathD })]
   );
 };
 var LockIcon = (locked) => {
@@ -225,8 +201,8 @@ var Table = vue.defineComponent({
     });
     const isSortControlled = vue.computed(() => props.sort !== void 0);
     const isFiltersControlled = vue.computed(() => props.filters !== void 0);
-    const isCurrentPageControlled = vue.computed(() => paginationConfig.value?.current !== void 0);
-    const isPageSizeControlled = vue.computed(() => paginationConfig.value?.pageSize !== void 0);
+    vue.computed(() => paginationConfig.value?.current !== void 0);
+    vue.computed(() => paginationConfig.value?.pageSize !== void 0);
     const isSelectionControlled = vue.computed(() => props.rowSelection?.selectedRowKeys !== void 0);
     const uncontrolledSortState = vue.ref(props.defaultSort);
     const uncontrolledFilterState = vue.ref(props.defaultFilters);
@@ -395,11 +371,7 @@ var Table = vue.defineComponent({
       });
     }
     function handlePageChange(page) {
-      if (!isCurrentPageControlled.value) {
-        uncontrolledCurrentPage.value = page;
-      } else {
-        uncontrolledCurrentPage.value = page;
-      }
+      uncontrolledCurrentPage.value = page;
       emit("page-change", { current: page, pageSize: currentPageSize.value });
       emit("change", {
         sort: sortState.value,
@@ -411,16 +383,8 @@ var Table = vue.defineComponent({
       });
     }
     function handlePageSizeChange(pageSize) {
-      if (!isPageSizeControlled.value) {
-        uncontrolledCurrentPageSize.value = pageSize;
-      } else {
-        uncontrolledCurrentPageSize.value = pageSize;
-      }
-      if (!isCurrentPageControlled.value) {
-        uncontrolledCurrentPage.value = 1;
-      } else {
-        uncontrolledCurrentPage.value = 1;
-      }
+      uncontrolledCurrentPageSize.value = pageSize;
+      uncontrolledCurrentPage.value = 1;
       emit("page-change", { current: 1, pageSize });
       emit("change", {
         sort: sortState.value,
@@ -514,13 +478,11 @@ var Table = vue.defineComponent({
         } : void 0;
         const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
         const headerContent = [];
-        if (column.renderHeader) {
-          const slotContent = slots[`header-${column.key}`]?.();
-          if (slotContent && slotContent.length > 0) {
-            headerContent.push(...slotContent);
-          } else {
-            headerContent.push(column.title);
-          }
+        const slotContent = slots[`header-${column.key}`]?.();
+        if (slotContent && slotContent.length > 0) {
+          headerContent.push(...slotContent);
+        } else if (column.renderHeader) {
+          headerContent.push(column.renderHeader());
         } else {
           headerContent.push(column.title);
         }
@@ -560,7 +522,7 @@ var Table = vue.defineComponent({
                   !!column.sortable,
                   column.headerClassName
                 ),
-                (isFixedLeft || isFixedRight) && "bg-gray-50"
+                (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
               ),
               style,
               onClick: column.sortable ? () => handleSort(column.key) : void 0
@@ -670,8 +632,11 @@ var Table = vue.defineComponent({
             width: typeof column.width === "number" ? `${column.width}px` : column.width
           } : void 0;
           const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
-          const stickyBgClass = props.striped && index % 2 === 0 ? "bg-gray-50/50" : "bg-white";
-          const stickyCellClass = isFixedLeft || isFixedRight ? tigercatCore.classNames(stickyBgClass, props.hoverable && "group-hover:bg-gray-50") : void 0;
+          const stickyBgClass = props.striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
+          const stickyCellClass = isFixedLeft || isFixedRight ? tigercatCore.classNames(
+            stickyBgClass,
+            props.hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+          ) : void 0;
           cells.push(
             vue.h(
               "td",
@@ -768,42 +733,40 @@ var Table = vue.defineComponent({
       const wrapperStyle = props.maxHeight ? {
         maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight
       } : void 0;
-      return vue.h("div", { class: "relative" }, [
-        vue.h(
-          "div",
-          {
-            class: tigercatCore.getTableWrapperClasses(props.bordered, props.maxHeight),
-            style: wrapperStyle,
-            "aria-busy": props.loading
-          },
-          [
-            vue.h(
-              "table",
-              {
-                class: tigercatCore.classNames(
-                  tigercatCore.tableBaseClasses,
-                  props.tableLayout === "fixed" ? "table-fixed" : "table-auto"
-                ),
-                style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
-              },
-              [renderTableHeader(), renderTableBody()]
-            ),
-            // Loading overlay
-            props.loading && vue.h(
-              "div",
-              {
-                class: tigercatCore.tableLoadingOverlayClasses,
-                role: "status",
-                "aria-live": "polite",
-                "aria-label": "Loading"
-              },
-              [LoadingSpinner(), vue.h("span", { class: "sr-only" }, "Loading")]
-            )
-          ]
-        ),
-        // Pagination
-        renderPagination()
-      ]);
+      return vue.h(
+        "div",
+        {
+          class: tigercatCore.getTableWrapperClasses(props.bordered, props.maxHeight),
+          style: wrapperStyle,
+          "aria-busy": props.loading
+        },
+        [
+          vue.h(
+            "table",
+            {
+              class: tigercatCore.classNames(
+                tigercatCore.tableBaseClasses,
+                props.tableLayout === "fixed" ? "table-fixed" : "table-auto"
+              ),
+              style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
+            },
+            [renderTableHeader(), renderTableBody()]
+          ),
+          // Loading overlay
+          props.loading && vue.h(
+            "div",
+            {
+              class: tigercatCore.tableLoadingOverlayClasses,
+              role: "status",
+              "aria-live": "polite",
+              "aria-label": "Loading"
+            },
+            [LoadingSpinner(), vue.h("span", { class: "sr-only" }, "Loading")]
+          ),
+          // Pagination
+          renderPagination()
+        ]
+      );
     };
   }
 });

package/dist/{chunk-JHOTXOGL.js → chunk-3QV2D54H.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkU5VOJ4G2_js = require('./chunk-U5VOJ4G2.js');
+var chunkFC7RXQTM_js = require('./chunk-FC7RXQTM.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -74,7 +74,7 @@ var Radio = vue.defineComponent({
   },
   setup(props, { slots, emit, attrs }) {
     const instance = vue.getCurrentInstance();
-    const groupContextRef = vue.inject(chunkU5VOJ4G2_js.RadioGroupKey, null);
+    const groupContextRef = vue.inject(chunkFC7RXQTM_js.RadioGroupKey, null);
     const groupContext = vue.computed(() => groupContextRef?.value);
     const internalChecked = vue.ref(props.defaultChecked);
     const isCheckedControlled = vue.computed(() => {
@@ -93,29 +93,28 @@ var Radio = vue.defineComponent({
       if (isInGroup.value) return groupContext.value?.value === props.value;
       return internalChecked.value;
     });
-    const colors = tigercatCore.getRadioColorClasses();
-    const radioClasses = vue.computed(() => {
-      return tigercatCore.getRadioVisualClasses({
+    const radioClasses = vue.computed(
+      () => tigercatCore.getRadioVisualClasses({
         size: actualSize.value,
         checked: !!isChecked.value,
         disabled: actualDisabled.value,
-        colors
-      });
-    });
-    const dotClasses = vue.computed(() => {
-      return tigercatCore.getRadioDotClasses({
+        colors: tigercatCore.defaultRadioColors
+      })
+    );
+    const dotClasses = vue.computed(
+      () => tigercatCore.getRadioDotClasses({
         size: actualSize.value,
         checked: !!isChecked.value,
-        colors
-      });
-    });
-    const labelClasses = vue.computed(() => {
-      return tigercatCore.getRadioLabelClasses({
+        colors: tigercatCore.defaultRadioColors
+      })
+    );
+    const labelClasses = vue.computed(
+      () => tigercatCore.getRadioLabelClasses({
         size: actualSize.value,
         disabled: actualDisabled.value,
-        colors
-      });
-    });
+        colors: tigercatCore.defaultRadioColors
+      })
+    );
     const handleChange = (event) => {
       if (actualDisabled.value) {
         event.preventDefault();
@@ -140,7 +139,7 @@ var Radio = vue.defineComponent({
     return () => {
       const rootStyle = [attrs.style, props.style];
       const rootClass = tigercatCore.classNames(
-        "inline-flex items-center",
+        tigercatCore.radioRootBaseClasses,
         props.className,
         tigercatCore.coerceClassValue(attrs.class)
       );