@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/chunk-ZREPAOSW.mjs

@@ -0,0 +1,284 @@
+import { PieChart } from './chunk-DATFV22V.mjs';
+import { defineComponent, computed, h } from 'vue';
+import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
+
+var DONUT_PALETTE = [
+  "#5470c6",
+  "#91cc75",
+  "#fac858",
+  "#ee6666",
+  "#73c0de",
+  "#3ba272",
+  "#fc8452",
+  "#9a60b4",
+  "#ea7ccc"
+];
+var DonutChart = defineComponent({
+  name: "TigerDonutChart",
+  props: {
+    width: {
+      type: Number,
+      default: 320
+    },
+    height: {
+      type: Number,
+      default: 240
+    },
+    padding: {
+      type: [Number, Object],
+      default: 24
+    },
+    data: {
+      type: Array,
+      required: true
+    },
+    innerRadius: {
+      type: Number
+    },
+    innerRadiusRatio: {
+      type: Number,
+      default: 0.62
+    },
+    outerRadius: {
+      type: Number
+    },
+    startAngle: {
+      type: Number,
+      default: 0
+    },
+    endAngle: {
+      type: Number,
+      default: Math.PI * 2
+    },
+    padAngle: {
+      type: Number,
+      default: 0.04
+    },
+    colors: {
+      type: Array
+    },
+    showLabels: {
+      type: Boolean,
+      default: false
+    },
+    labelFormatter: {
+      type: Function
+    },
+    // Interaction props
+    hoverable: {
+      type: Boolean,
+      default: false
+    },
+    hoveredIndex: {
+      type: Number,
+      default: void 0
+    },
+    activeOpacity: {
+      type: Number,
+      default: 1
+    },
+    inactiveOpacity: {
+      type: Number,
+      default: 0.3
+    },
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    selectedIndex: {
+      type: Number,
+      default: void 0
+    },
+    // Legend props
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendPosition: {
+      type: String,
+      default: "bottom"
+    },
+    legendMarkerSize: {
+      type: Number,
+      default: 10
+    },
+    legendGap: {
+      type: Number,
+      default: 8
+    },
+    // Tooltip props
+    showTooltip: {
+      type: Boolean,
+      default: true
+    },
+    tooltipFormatter: {
+      type: Function
+    },
+    // Accessibility
+    title: {
+      type: String
+    },
+    desc: {
+      type: String
+    },
+    className: {
+      type: String
+    },
+    // Visual enhancements
+    borderWidth: {
+      type: Number,
+      default: 0
+    },
+    borderColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    hoverOffset: {
+      type: Number,
+      default: 10
+    },
+    labelPosition: {
+      type: String,
+      default: "inside"
+    },
+    shadow: {
+      type: Boolean,
+      default: true
+    },
+    // DonutChart-specific
+    centerValue: {
+      type: [String, Number]
+    },
+    centerLabel: {
+      type: String
+    },
+    animated: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
+  setup(props, { emit }) {
+    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const pad = computed(() => normalizeChartPadding(props.padding));
+    const resolvedOuterRadius = 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 resolvedInnerRadius = computed(() => {
+      if (typeof props.innerRadius === "number") {
+        return Math.min(Math.max(0, props.innerRadius), resolvedOuterRadius.value);
+      }
+      const ratio = Math.min(Math.max(props.innerRadiusRatio ?? 0.62, 0), 1);
+      return resolvedOuterRadius.value * ratio;
+    });
+    const centerPos = computed(() => ({
+      x: pad.value.left + innerRect.value.width / 2,
+      y: pad.value.top + innerRect.value.height / 2
+    }));
+    const hasCenterContent = computed(
+      () => props.centerValue !== void 0 || props.centerLabel !== void 0
+    );
+    const resolvedColors = computed(
+      () => props.colors && props.colors.length > 0 ? props.colors : DONUT_PALETTE
+    );
+    const donutTooltipFormatter = computed(() => {
+      if (props.tooltipFormatter) return props.tooltipFormatter;
+      const total = props.data.reduce((s, d) => s + d.value, 0);
+      return (datum, index) => {
+        const pct = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
+        const label = datum.label ?? `#${index + 1}`;
+        return `${label}: ${datum.value} (${pct}%)`;
+      };
+    });
+    const handleHoveredIndexUpdate = (index) => {
+      emit("update:hoveredIndex", index);
+    };
+    const handleSelectedIndexUpdate = (index) => {
+      emit("update:selectedIndex", index);
+    };
+    const handleSliceClick = (datum, index) => {
+      emit("slice-click", datum, index);
+    };
+    const handleSliceHover = (datum, index) => {
+      emit("slice-hover", datum, index);
+    };
+    return () => {
+      const pie = h(PieChart, {
+        width: props.width,
+        height: props.height,
+        padding: props.padding,
+        data: props.data,
+        innerRadius: resolvedInnerRadius.value,
+        outerRadius: props.outerRadius,
+        startAngle: props.startAngle,
+        endAngle: props.endAngle,
+        padAngle: props.padAngle,
+        colors: resolvedColors.value,
+        showLabels: props.showLabels,
+        labelFormatter: props.labelFormatter,
+        labelPosition: props.labelPosition,
+        borderWidth: props.borderWidth,
+        borderColor: props.borderColor,
+        hoverOffset: props.hoverOffset,
+        shadow: props.shadow,
+        hoverable: props.hoverable,
+        hoveredIndex: props.hoveredIndex,
+        activeOpacity: props.activeOpacity,
+        inactiveOpacity: props.inactiveOpacity,
+        selectable: props.selectable,
+        selectedIndex: props.selectedIndex,
+        showLegend: props.showLegend,
+        legendPosition: props.legendPosition,
+        legendMarkerSize: props.legendMarkerSize,
+        legendGap: props.legendGap,
+        showTooltip: props.showTooltip,
+        tooltipFormatter: donutTooltipFormatter.value,
+        title: props.title,
+        desc: props.desc,
+        className: classNames(props.className),
+        "onUpdate:hoveredIndex": handleHoveredIndexUpdate,
+        "onUpdate:selectedIndex": handleSelectedIndexUpdate,
+        onSliceClick: handleSliceClick,
+        onSliceHover: handleSliceHover
+      });
+      const center = hasCenterContent.value ? h(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: `${centerPos.value.x}px`,
+            top: `${centerPos.value.y}px`,
+            transform: "translate(-50%, -50%)",
+            textAlign: "center",
+            pointerEvents: "none",
+            lineHeight: "1.3"
+          },
+          "data-donut-center": "true"
+        },
+        [
+          props.centerValue !== void 0 ? h(
+            "div",
+            {
+              class: "text-xl font-semibold text-[color:var(--tiger-text,#1f2937)]",
+              style: { lineHeight: "1.2" }
+            },
+            `${props.centerValue}`
+          ) : null,
+          props.centerLabel !== void 0 ? h(
+            "div",
+            {
+              class: "text-xs text-[color:var(--tiger-text-secondary,#6b7280)]",
+              style: { marginTop: "2px" }
+            },
+            props.centerLabel
+          ) : null
+        ]
+      ) : null;
+      return h("div", { class: "inline-block relative", "data-donut-chart": "true" }, [pie, center]);
+    };
+  }
+});
+var DonutChart_default = DonutChart;
+
+export { DonutChart, DonutChart_default };

package/dist/{chunk-PZOSCHRV.mjs → chunk-ZTJTIQZY.mjs}

@@ -4,42 +4,18 @@ import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateDat
 // src/components/Table.ts
 var spinnerSvg = getSpinnerSVG("spinner");
 var SortIcon = (direction) => {
-  if (direction === "asc") {
-    return h(
-      "svg",
-      {
-        class: getSortIconClasses(true),
-        width: "16",
-        height: "16",
-        viewBox: icon16ViewBox,
-        fill: "currentColor"
-      },
-      [h("path", { d: sortAscIcon16PathD })]
-    );
-  }
-  if (direction === "desc") {
-    return h(
-      "svg",
-      {
-        class: getSortIconClasses(true),
-        width: "16",
-        height: "16",
-        viewBox: icon16ViewBox,
-        fill: "currentColor"
-      },
-      [h("path", { d: sortDescIcon16PathD })]
-    );
-  }
+  const active = direction !== null;
+  const pathD = direction === "asc" ? sortAscIcon16PathD : direction === "desc" ? sortDescIcon16PathD : sortBothIcon16PathD;
   return h(
     "svg",
     {
-      class: getSortIconClasses(false),
+      class: getSortIconClasses(active),
       width: "16",
       height: "16",
       viewBox: icon16ViewBox,
       fill: "currentColor"
     },
-    [h("path", { d: sortBothIcon16PathD })]
+    [h("path", { d: pathD })]
   );
 };
 var LockIcon = (locked) => {
@@ -223,8 +199,8 @@ var Table = defineComponent({
     });
     const isSortControlled = computed(() => props.sort !== void 0);
     const isFiltersControlled = computed(() => props.filters !== void 0);
-    const isCurrentPageControlled = computed(() => paginationConfig.value?.current !== void 0);
-    const isPageSizeControlled = computed(() => paginationConfig.value?.pageSize !== void 0);
+    computed(() => paginationConfig.value?.current !== void 0);
+    computed(() => paginationConfig.value?.pageSize !== void 0);
     const isSelectionControlled = computed(() => props.rowSelection?.selectedRowKeys !== void 0);
     const uncontrolledSortState = ref(props.defaultSort);
     const uncontrolledFilterState = ref(props.defaultFilters);
@@ -393,11 +369,7 @@ var Table = 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,
@@ -409,16 +381,8 @@ var Table = 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,
@@ -512,13 +476,11 @@ var Table = 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);
         }
@@ -558,7 +520,7 @@ var Table = 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
@@ -668,8 +630,11 @@ var Table = 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 ? 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 ? classNames(
+            stickyBgClass,
+            props.hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+          ) : void 0;
           cells.push(
             h(
               "td",
@@ -766,42 +731,40 @@ var Table = defineComponent({
       const wrapperStyle = props.maxHeight ? {
         maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight
       } : void 0;
-      return h("div", { class: "relative" }, [
-        h(
-          "div",
-          {
-            class: getTableWrapperClasses(props.bordered, props.maxHeight),
-            style: wrapperStyle,
-            "aria-busy": props.loading
-          },
-          [
-            h(
-              "table",
-              {
-                class: classNames(
-                  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 && h(
-              "div",
-              {
-                class: tableLoadingOverlayClasses,
-                role: "status",
-                "aria-live": "polite",
-                "aria-label": "Loading"
-              },
-              [LoadingSpinner(), h("span", { class: "sr-only" }, "Loading")]
-            )
-          ]
-        ),
-        // Pagination
-        renderPagination()
-      ]);
+      return h(
+        "div",
+        {
+          class: getTableWrapperClasses(props.bordered, props.maxHeight),
+          style: wrapperStyle,
+          "aria-busy": props.loading
+        },
+        [
+          h(
+            "table",
+            {
+              class: classNames(
+                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 && h(
+            "div",
+            {
+              class: tableLoadingOverlayClasses,
+              role: "status",
+              "aria-live": "polite",
+              "aria-label": "Loading"
+            },
+            [LoadingSpinner(), h("span", { class: "sr-only" }, "Loading")]
+          ),
+          // Pagination
+          renderPagination()
+        ]
+      );
     };
   }
 });

package/dist/{chunk-WPWMXSXK.js → chunk-ZZ5LMO3X.js}

@@ -234,6 +234,10 @@ var DatePicker = vue.defineComponent({
     });
     const dayNames = vue.computed(() => tigercatCore.getShortDayNames(props.locale));
     const labels = vue.computed(() => tigercatCore.getDatePickerLabels(props.locale, props.labels));
+    const emitValue = (value) => {
+      emit("update:modelValue", value);
+      emit("change", value);
+    };
     const addDays = (date, days) => {
       const next = new Date(date);
       next.setDate(next.getDate() + days);
@@ -351,7 +355,7 @@ var DatePicker = vue.defineComponent({
       if (!props.disabled && !props.readonly) {
         isOpen.value = !isOpen.value;
         if (isOpen.value) {
-          restoreFocusEl.value = restoreFocusEl.value ?? document.activeElement ?? inputRef.value ?? null;
+          restoreFocusEl.value = inputRef.value ?? null;
           const baseDate = selectedDate.value ?? selectedRange.value[0];
           if (baseDate) {
             viewingMonth.value = baseDate.getMonth();
@@ -373,34 +377,20 @@ var DatePicker = vue.defineComponent({
         return;
       }
       if (!isRangeMode.value) {
-        emit("update:modelValue", normalizedDate);
-        emit("change", normalizedDate);
+        emitValue(normalizedDate);
         closeCalendar();
         return;
       }
       const [start, end] = selectedRange.value;
       if (!start || start && end) {
-        emit("update:modelValue", [normalizedDate, null]);
-        emit("change", [normalizedDate, null]);
+        emitValue([normalizedDate, null]);
         return;
       }
-      if (normalizedDate < start) {
-        emit("update:modelValue", [start, start]);
-        emit("change", [start, start]);
-      } else {
-        emit("update:modelValue", [start, normalizedDate]);
-        emit("change", [start, normalizedDate]);
-      }
+      emitValue([start, normalizedDate < start ? start : normalizedDate]);
     }
     function clearDate(event) {
       event.stopPropagation();
-      if (!isRangeMode.value) {
-        emit("update:modelValue", null);
-        emit("change", null);
-      } else {
-        emit("update:modelValue", [null, null]);
-        emit("change", [null, null]);
-      }
+      emitValue(!isRangeMode.value ? null : [null, null]);
       emit("clear");
     }
     function previousMonth() {
@@ -433,13 +423,11 @@ var DatePicker = vue.defineComponent({
       }
     }
     function handleInputClick() {
-      inputRef.value?.focus();
       toggleCalendar();
     }
     vue.watch(isOpen, (newValue) => {
       if (newValue) {
         document.addEventListener("click", handleClickOutside);
-        restoreFocusEl.value = restoreFocusEl.value ?? document.activeElement ?? inputRef.value ?? null;
         const preferred = pendingFocusIso.value ?? getPreferredFocusIso();
         pendingFocusIso.value = null;
         vue.nextTick().then(() => {
@@ -580,59 +568,64 @@ var DatePicker = vue.defineComponent({
                 )
               ]),
               // Calendar grid
-              vue.h(
-                "div",
-                {
-                  class: tigercatCore.datePickerCalendarGridClasses,
-                  role: "grid",
-                  "aria-rowcount": 6,
-                  "aria-colcount": 7
-                },
-                [
-                  ...calendarDays.value.map((date, index) => {
-                    if (!date) return null;
-                    const [rangeStart, rangeEnd] = selectedRange.value;
-                    const isRangeStart = isRangeMode.value && rangeStart ? tigercatCore.isSameDay(date, rangeStart) : false;
-                    const isRangeEnd = isRangeMode.value && rangeEnd ? tigercatCore.isSameDay(date, rangeEnd) : false;
-                    const isInRange = isRangeMode.value && rangeStart && rangeEnd && tigercatCore.normalizeDate(date) >= tigercatCore.normalizeDate(rangeStart) && tigercatCore.normalizeDate(date) <= tigercatCore.normalizeDate(rangeEnd);
-                    const isSelected = !isRangeMode.value ? selectedDate.value ? tigercatCore.isSameDay(date, selectedDate.value) : false : isRangeStart || isRangeEnd;
-                    const isCurrentMonthDay = isCurrentMonth(date);
-                    const isTodayDay = tigercatCore.isToday(date);
-                    const isSelectingRangeEnd = isRangeMode.value && Boolean(rangeStart) && !rangeEnd;
-                    const isBeforeRangeStart = isSelectingRangeEnd && rangeStart && tigercatCore.normalizeDate(date) < tigercatCore.normalizeDate(rangeStart);
-                    const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                    const iso = tigercatCore.formatDate(date, "yyyy-MM-dd");
-                    return vue.h(
-                      "button",
-                      {
-                        key: index,
-                        type: "button",
-                        class: tigercatCore.getDatePickerDayCellClasses(
-                          isCurrentMonthDay,
-                          isSelected,
-                          isTodayDay,
-                          isDisabled,
-                          Boolean(isInRange),
-                          Boolean(isRangeStart),
-                          Boolean(isRangeEnd)
-                        ),
-                        disabled: isDisabled,
-                        onClick: () => selectDate(date),
-                        role: "gridcell",
-                        "data-date": iso,
-                        onFocus: () => {
-                          activeDateIso.value = iso;
+              (() => {
+                const [rangeStart, rangeEnd] = selectedRange.value;
+                const normStart = rangeStart ? tigercatCore.normalizeDate(rangeStart) : null;
+                const normEnd = rangeEnd ? tigercatCore.normalizeDate(rangeEnd) : null;
+                const isSelectingEnd = isRangeMode.value && Boolean(rangeStart) && !rangeEnd;
+                return vue.h(
+                  "div",
+                  {
+                    class: tigercatCore.datePickerCalendarGridClasses,
+                    role: "grid",
+                    "aria-rowcount": 6,
+                    "aria-colcount": 7
+                  },
+                  [
+                    ...calendarDays.value.map((date, index) => {
+                      if (!date) return null;
+                      const normDate = tigercatCore.normalizeDate(date);
+                      const isRangeStart = isRangeMode.value && rangeStart ? tigercatCore.isSameDay(date, rangeStart) : false;
+                      const isRangeEnd = isRangeMode.value && rangeEnd ? tigercatCore.isSameDay(date, rangeEnd) : false;
+                      const isInRange = isRangeMode.value && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
+                      const isSelected = !isRangeMode.value ? selectedDate.value ? tigercatCore.isSameDay(date, selectedDate.value) : false : isRangeStart || isRangeEnd;
+                      const isCurrentMonthDay = isCurrentMonth(date);
+                      const isTodayDay = tigercatCore.isToday(date);
+                      const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
+                      const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
+                      const iso = tigercatCore.formatDate(date, "yyyy-MM-dd");
+                      return vue.h(
+                        "button",
+                        {
+                          key: index,
+                          type: "button",
+                          class: tigercatCore.getDatePickerDayCellClasses(
+                            isCurrentMonthDay,
+                            isSelected,
+                            isTodayDay,
+                            isDisabled,
+                            Boolean(isInRange),
+                            Boolean(isRangeStart),
+                            Boolean(isRangeEnd)
+                          ),
+                          disabled: isDisabled,
+                          onClick: () => selectDate(date),
+                          role: "gridcell",
+                          "data-date": iso,
+                          onFocus: () => {
+                            activeDateIso.value = iso;
+                          },
+                          tabindex: activeDateIso.value === iso && !isDisabled ? 0 : -1,
+                          "aria-label": iso,
+                          "aria-selected": isSelected,
+                          "aria-current": isTodayDay ? "date" : void 0
                         },
-                        tabindex: activeDateIso.value === iso && !isDisabled ? 0 : -1,
-                        "aria-label": iso,
-                        "aria-selected": isSelected,
-                        "aria-current": isTodayDay ? "date" : void 0
-                      },
-                      date.getDate()
-                    );
-                  })
-                ]
-              ),
+                        date.getDate()
+                      );
+                    })
+                  ]
+                );
+              })(),
               // Footer (range mode only)
               isRangeMode.value ? vue.h("div", { class: tigercatCore.datePickerFooterClasses }, [
                 vue.h(