@expcat/tigercat-vue 2.1.0 → 2.1.1

package/dist/{chunk-N3C6YI7I.mjs → chunk-SWMYIORV.mjs}

@@ -1,5 +1,5 @@
 // src/components/Switch.ts
-import { defineComponent, computed, h } from "vue";
+import { defineComponent, computed, h, ref } from "vue";
 import {
   getSwitchClasses,
   getSwitchThumbClasses,
@@ -10,10 +10,17 @@ var Switch = defineComponent({
   inheritAttrs: false,
   props: {
     /**
-     * Whether the switch is checked
-     * @default false
+     * Whether the switch is checked (controlled mode)
      */
     modelValue: {
+      type: [Boolean, null],
+      default: null
+    },
+    /**
+     * Default checked state (uncontrolled mode)
+     * @default false
+     */
+    defaultValue: {
       type: Boolean,
       default: false
     },
@@ -51,13 +58,21 @@ var Switch = defineComponent({
     change: (value) => typeof value === "boolean"
   },
   setup(props, { emit, attrs }) {
+    const internalChecked = ref(props.defaultValue);
+    const isControlled = computed(() => props.modelValue !== null);
+    const checked = computed(
+      () => isControlled.value ? props.modelValue === true : internalChecked.value
+    );
     const switchClasses = computed(
-      () => getSwitchClasses(props.size, props.modelValue, props.disabled, props.className, attrs.class)
+      () => getSwitchClasses(props.size, checked.value, props.disabled, props.className, attrs.class)
     );
-    const thumbClasses = computed(() => getSwitchThumbClasses(props.size, props.modelValue));
+    const thumbClasses = computed(() => getSwitchThumbClasses(props.size, checked.value));
     const emitChange = () => {
       if (props.disabled) return;
-      const newValue = !props.modelValue;
+      const newValue = !checked.value;
+      if (!isControlled.value) {
+        internalChecked.value = newValue;
+      }
       emit("update:modelValue", newValue);
       emit("change", newValue);
     };
@@ -74,7 +89,7 @@ var Switch = defineComponent({
         ...attrs,
         type: "button",
         role: "switch",
-        "aria-checked": props.modelValue,
+        "aria-checked": checked.value,
         "aria-disabled": props.disabled ? "true" : void 0,
         class: switchClasses.value,
         style: mergeStyleValues(attrs.style, props.style),

package/dist/{chunk-U4B5QT72.mjs → chunk-SX3NAN4M.mjs}

@@ -1,6 +1,6 @@
 import {
   PieChart
-} from "./chunk-CHEXI7MO.mjs";
+} from "./chunk-7TJE7OYH.mjs";
 
 // src/components/DonutChart.ts
 import { defineComponent, computed, h, onMounted, ref } from "vue";

package/dist/{chunk-JL3CN4UK.mjs → chunk-TDBMAKTJ.mjs}

@@ -13,6 +13,7 @@ import {
   calendarWeekdayClasses,
   getCalendarDayClasses,
   getCalendarMonthClasses,
+  isCalendarMonthDisabled,
   isSameDay,
   getMonthDays,
   getShortDayNames,
@@ -79,8 +80,12 @@ var Calendar = defineComponent({
       emit("change", date);
     }
     function selectMonth(monthIdx) {
+      if (isCalendarMonthDisabled(viewYear.value, monthIdx, props.disabledDate)) return;
       viewMonth.value = monthIdx;
-      emit("panel-change", new Date(viewYear.value, monthIdx, 1), props.mode);
+      const date = new Date(viewYear.value, monthIdx, 1);
+      emit("update:modelValue", date);
+      emit("change", date);
+      emit("panel-change", date, "month");
     }
     const dayGridEl = ref(null);
     const monthGridEl = ref(null);
@@ -261,6 +266,7 @@ var Calendar = defineComponent({
               { key: ri, class: "grid grid-cols-3 gap-2", role: "row" },
               row.map((m, ci) => {
                 const i = ri * 3 + ci;
+                const isDisabled = isCalendarMonthDisabled(viewYear.value, i, props.disabledDate);
                 return h(
                   "button",
                   {
@@ -268,8 +274,9 @@ var Calendar = defineComponent({
                     type: "button",
                     role: "gridcell",
                     "aria-selected": viewMonth.value === i,
-                    tabindex: rovingMonthIdx === i ? 0 : -1,
-                    class: getCalendarMonthClasses(viewMonth.value === i),
+                    disabled: isDisabled,
+                    tabindex: rovingMonthIdx === i && !isDisabled ? 0 : -1,
+                    class: getCalendarMonthClasses(viewMonth.value === i, isDisabled),
                     onClick: () => selectMonth(i),
                     onFocus: () => activeMonthIdx.value = i,
                     onKeydown: (e) => handleMonthKeyDown(e, i)

package/dist/chunk-UEGNXN5B.mjs

@@ -0,0 +1,28 @@
+// src/composables/useResponsiveChartSize.ts
+import { computed, ref } from "vue";
+import {
+  getChartInnerRect,
+  resolveResponsiveChartSize
+} from "@expcat/tigercat-core";
+function useResponsiveChartSize(width, height, padding, responsive) {
+  const observedSize = ref(null);
+  const plotSize = computed(
+    () => resolveResponsiveChartSize(
+      { width: width(), height: height() },
+      responsive() ? observedSize.value : null
+    )
+  );
+  const innerRect = computed(
+    () => getChartInnerRect(plotSize.value.width, plotSize.value.height, padding())
+  );
+  function onResolvedSizeChange(size) {
+    const prev = observedSize.value;
+    if (prev && prev.width === size.width && prev.height === size.height) return;
+    observedSize.value = size;
+  }
+  return { plotSize, innerRect, onResolvedSizeChange };
+}
+
+export {
+  useResponsiveChartSize
+};

package/dist/{chunk-NEEGXKJW.mjs → chunk-UGHLEKEZ.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/FileManager.ts
-import { defineComponent, h, ref, computed, nextTick } from "vue";
+import { defineComponent, h, ref, computed, nextTick, watch } from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -41,6 +41,9 @@ var FileManager = defineComponent({
       default: "list"
     },
     selectedKeys: {
+      type: Array
+    },
+    defaultSelectedKeys: {
       type: Array,
       default: () => []
     },
@@ -88,6 +91,19 @@ var FileManager = defineComponent({
     const focusedIndex = ref(0);
     const contentRef = ref(null);
     let dragFromIndex = null;
+    const innerSelectedKeys = ref([...props.defaultSelectedKeys ?? []]);
+    const isControlled = computed(() => props.selectedKeys !== void 0);
+    const resolvedKeys = computed(
+      () => isControlled.value ? props.selectedKeys ?? [] : innerSelectedKeys.value
+    );
+    watch(
+      () => props.selectedKeys,
+      (value) => {
+        if (value !== void 0) {
+          innerSelectedKeys.value = [...value];
+        }
+      }
+    );
     function handleDragStart(event, item, index) {
       if (!props.draggable || item.disabled) return;
       dragFromIndex = index;
@@ -122,7 +138,7 @@ var FileManager = defineComponent({
       () => deriveFileManagerModel({
         files: props.files,
         currentPath: props.currentPath,
-        selectedKeys: props.selectedKeys,
+        selectedKeys: resolvedKeys.value,
         sortField: props.sortField,
         sortOrder: props.sortOrder,
         showHidden: props.showHidden,
@@ -135,7 +151,10 @@ var FileManager = defineComponent({
     function handleSelect(item) {
       if (item.disabled) return;
       emit("select", item);
-      const keys = toggleFileSelection(props.selectedKeys, item.key, props.multiple);
+      const keys = toggleFileSelection(resolvedKeys.value, item.key, props.multiple);
+      if (!isControlled.value) {
+        innerSelectedKeys.value = keys;
+      }
       emit("update:selectedKeys", keys);
     }
     function handleOpen(item) {

package/dist/{chunk-HKYRRQS7.mjs → chunk-UNQO7EVG.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-26OI3TEA.mjs";
+} from "./chunk-PMQSXEMT.mjs";
 import {
   renderVueOverlayTeleport
 } from "./chunk-Q7Y22OFX.mjs";

package/dist/{chunk-VN2TWPRC.mjs → chunk-UR5F74ZB.mjs}

@@ -31,6 +31,7 @@ import {
   getPickerOptionAria,
   getPickerTriggerKeyAction,
   getPickerNavigationIndex,
+  getPickerOptionId,
   findFirstEnabledIndex,
   coerceClassValue,
   classNames,
@@ -234,20 +235,19 @@ var TreeSelect = defineComponent({
         commitActiveIndex(-1);
         return;
       }
-      if (!props.virtual) return;
       commitActiveIndex(resolveActiveIndex());
       nextTick(() => alignVirtualScroll(activeIndex.value));
     });
     watch(activeIndex, (idx) => {
-      if (!props.virtual || !isOpen.value) return;
+      if (!isOpen.value) return;
       nextTick(() => alignVirtualScroll(idx));
     });
     watch(searchQuery, () => {
-      if (!props.virtual || !isOpen.value) return;
+      if (!isOpen.value) return;
       commitActiveIndex(resolveActiveIndex());
     });
     watch([expandedKeys, () => props.treeData], () => {
-      if (!props.virtual || !isOpen.value) return;
+      if (!isOpen.value) return;
       const remapped = getTreeSelectVisibleIndex(visibleNodes.value, lastActiveKey.value);
       if (remapped >= 0) activeIndex.value = remapped;
     });
@@ -316,7 +316,49 @@ var TreeSelect = defineComponent({
       emit("update:modelValue", val);
       emit("change", val);
     }
+    function handleOpenListKeyDown(e, fromSearchInput = false) {
+      const key = e.key;
+      if (fromSearchInput && key === " ") return false;
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+        e.preventDefault();
+        e.stopPropagation();
+        commitActiveIndex(
+          getPickerNavigationIndex(visibleNodes.value, activeIndex.value, key, isNodeDisabled)
+        );
+        return true;
+      }
+      if (key === "Enter" || key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        const item = visibleNodes.value[activeIndex.value];
+        if (item && !item.node.disabled) {
+          handleNodeSelect(item.node);
+        }
+        return true;
+      }
+      if (key === "ArrowRight") {
+        e.preventDefault();
+        e.stopPropagation();
+        const item = visibleNodes.value[activeIndex.value];
+        if (item?.hasChildren && !item.isExpanded) {
+          toggleExpand(item.node.key);
+        }
+        return true;
+      }
+      if (key === "ArrowLeft") {
+        e.preventDefault();
+        e.stopPropagation();
+        const item = visibleNodes.value[activeIndex.value];
+        if (item?.hasChildren && item.isExpanded) {
+          toggleExpand(item.node.key);
+        }
+        return true;
+      }
+      return false;
+    }
     function handleKeyDown(e) {
+      if (props.disabled) return;
+      if (isOpen.value && handleOpenListKeyDown(e)) return;
       const action = getPickerTriggerKeyAction(e.key, isOpen.value);
       if (action === "none") return;
       e.preventDefault();
@@ -329,16 +371,47 @@ var TreeSelect = defineComponent({
         closeDropdown();
       }
     }
-    function renderFlatNode(flatNode) {
+    function handleDropdownKeyDown(e) {
+      if (e.target instanceof HTMLInputElement) return;
+      if (!isOpen.value) return;
+      handleOpenListKeyDown(e);
+    }
+    function handleSearchKeyDown(e) {
+      switch (e.key) {
+        case " ":
+          e.stopPropagation();
+          return;
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+          handleOpenListKeyDown(e, true);
+          return;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          closeDropdown();
+          nextTick(() => {
+            ;
+            triggerRef.value?.focus();
+          });
+          return;
+        default:
+          return;
+      }
+    }
+    function renderFlatNode(flatNode, index) {
       const { node, level, hasChildren, isExpanded } = flatNode;
       const selected = isSelected(node.key);
+      const isActive = index === activeIndex.value;
       const indent = level * 20;
       return h(
         "div",
         {
           key: node.key,
+          id: getPickerOptionId(listboxId, index),
+          "data-active": isActive || void 0,
           ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
-          class: getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
+          class: getTreeSelectNodeClasses(selected || isActive, !!node.disabled, props.size),
           style: { paddingLeft: `${indent + 8}px`, height: props.virtual ? "100%" : void 0 },
           onClick: (e) => {
             e.stopPropagation();
@@ -389,8 +462,15 @@ var TreeSelect = defineComponent({
           {
             ref: triggerRef,
             type: "button",
-            class: getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
-            ...getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
+            class: classNames(
+              getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
+              showClearButton.value ? "pr-14" : void 0
+            ),
+            ...getPickerComboboxAria({
+              expanded: isOpen.value,
+              listboxId,
+              activeIndex: isOpen.value ? activeIndex.value : -1
+            }),
             disabled: props.disabled,
             onClick: toggleDropdown,
             onKeydown: handleKeyDown
@@ -405,12 +485,19 @@ var TreeSelect = defineComponent({
                 )
               },
               displayLabel.value || props.placeholder
-            ),
-            // Clear or chevron
+            )
+          ]
+        ),
+        h(
+          "span",
+          { class: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1" },
+          [
             showClearButton.value ? h(
-              "span",
+              "button",
               {
-                class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+                type: "button",
+                class: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-treeselect-ring,var(--tiger-primary,#2563eb))] text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+                "data-tiger-treeselect-clear": "",
                 "aria-label": resolveLocaleText(
                   "Clear selection",
                   mergedLocale.value?.common?.clearText
@@ -418,10 +505,15 @@ var TreeSelect = defineComponent({
                 onClick: handleClear
               },
               [ClearIcon]
-            ) : h(
+            ) : null,
+            h(
               "span",
               {
-                class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none"
+                class: classNames(
+                  "inline-flex text-[var(--tiger-text-muted,#9ca3af)]",
+                  isOpen.value && "rotate-180"
+                ),
+                "aria-hidden": "true"
               },
               [ChevronDownIcon]
             )
@@ -439,7 +531,8 @@ var TreeSelect = defineComponent({
                 overlay.floatingClasses.value
               ),
               style: overlay.floatingStyles.value,
-              "data-positioned": overlay.positioned.value
+              "data-positioned": overlay.positioned.value,
+              onKeydown: handleDropdownKeyDown
             },
             [
               // Search
@@ -455,7 +548,8 @@ var TreeSelect = defineComponent({
                   "Search tree",
                   mergedLocale.value?.common?.searchPlaceholder
                 ),
-                onInput: (e) => updateSearchValue(e.target.value)
+                onInput: (e) => updateSearchValue(e.target.value),
+                onKeydown: handleSearchKeyDown
               }) : null,
               // Tree nodes
               visibleNodes.value.length > 0 ? props.virtual ? h(
@@ -477,12 +571,12 @@ var TreeSelect = defineComponent({
                     {
                       default: ({ index }) => {
                         const item = visibleNodes.value[index];
-                        return item ? renderFlatNode(item) : null;
+                        return item ? renderFlatNode(item, index) : null;
                       }
                     }
                   )
                 ]
-              ) : visibleNodes.value.map((flatNode) => renderFlatNode(flatNode)) : h(
+              ) : visibleNodes.value.map((flatNode, index) => renderFlatNode(flatNode, index)) : h(
                 "div",
                 { class: treeSelectEmptyClasses },
                 resolveLocaleText(

package/dist/{chunk-VCCK4CDT.mjs → chunk-URPXBKK4.mjs}

@@ -21,6 +21,12 @@ var Slider = defineComponent({
     value: {
       type: [Number, Array]
     },
+    /**
+     * Slider value (for default v-model) - controlled mode
+     */
+    modelValue: {
+      type: [Number, Array]
+    },
     /**
      * Default slider value - uncontrolled mode
      */
@@ -111,14 +117,24 @@ var Slider = defineComponent({
      * Emitted when value changes (for v-model:value)
      */
     "update:value": (value) => typeof value === "number" || Array.isArray(value),
+    /**
+     * Emitted when value changes (for default v-model)
+     */
+    "update:modelValue": (value) => typeof value === "number" || Array.isArray(value),
     /**
      * Emitted when value changes
      */
     change: (value) => typeof value === "number" || Array.isArray(value)
   },
   setup(props, { emit, attrs }) {
-    const getInitialValue = () => {
+    const resolveBoundValue = () => {
       if (props.value !== void 0) return props.value;
+      if (props.modelValue !== void 0) return props.modelValue;
+      return void 0;
+    };
+    const getInitialValue = () => {
+      const bound = resolveBoundValue();
+      if (bound !== void 0) return bound;
       if (props.defaultValue !== void 0) return props.defaultValue;
       return props.range ? [props.min, props.max] : props.min;
     };
@@ -128,10 +144,11 @@ var Slider = defineComponent({
     const showTooltip = ref(false);
     const trackElement = ref(null);
     watch(
-      () => props.value,
-      (newValue) => {
-        if (newValue !== void 0) {
-          internalValue.value = newValue;
+      () => [props.value, props.modelValue],
+      () => {
+        const bound = resolveBoundValue();
+        if (bound !== void 0) {
+          internalValue.value = bound;
         }
       }
     );
@@ -149,6 +166,7 @@ var Slider = defineComponent({
     const updateValue = (newValue) => {
       internalValue.value = newValue;
       emit("update:value", newValue);
+      emit("update:modelValue", newValue);
       emit("change", newValue);
     };
     const handleMove = (event, el) => {

package/dist/{chunk-7KCOF5US.mjs → chunk-VY6FVIOZ.mjs}

@@ -17,6 +17,7 @@ import {
   getAutoCompleteInputClasses,
   getAutoCompleteOptionClasses,
   filterAutoCompleteOptions,
+  resolveAutoCompleteDisplayValue,
   getInitialPickerActiveIndex,
   getPickerComboboxAria,
   getPickerListboxAria,
@@ -109,7 +110,7 @@ var AutoComplete = defineComponent({
     const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
     const isOpen = ref(false);
     const uncontrolledSearchValue = ref(
-      String(props.searchValue ?? props.modelValue ?? props.defaultSearchValue ?? "")
+      props.searchValue ?? resolveAutoCompleteDisplayValue(props.modelValue, props.options, props.defaultSearchValue)
     );
     const inputValue = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const activeIndex = ref(-1);
@@ -135,14 +136,15 @@ var AutoComplete = defineComponent({
     const showClearButton = computed(
       () => props.clearable && !props.disabled && inputValue.value !== ""
     );
-    watch(
-      () => props.modelValue,
-      (val) => {
-        if (props.searchValue === void 0) {
-          uncontrolledSearchValue.value = String(val ?? props.defaultSearchValue ?? "");
-        }
+    watch([() => props.modelValue, () => props.options], () => {
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = resolveAutoCompleteDisplayValue(
+          props.modelValue,
+          props.options,
+          props.defaultSearchValue
+        );
       }
-    );
+    });
     function openDropdown() {
       if (props.disabled) return;
       isOpen.value = true;

package/dist/{chunk-KICZSLOX.mjs → chunk-W2ICYZVU.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-26OI3TEA.mjs";
+} from "./chunk-PMQSXEMT.mjs";
 import {
   renderVueOverlayTeleport
 } from "./chunk-Q7Y22OFX.mjs";

package/dist/{chunk-FIVVKBBF.mjs → chunk-W3QOMJKQ.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartTooltip
 } from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 
 // src/components/HeatmapChart.ts
 import { defineComponent, computed, h, nextTick, ref, watchEffect } from "vue";
@@ -69,6 +69,7 @@ var HeatmapChart = defineComponent({
       wrapperClasses: _wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -192,6 +193,7 @@ var HeatmapChart = defineComponent({
     };
     return () => {
       const interactive = props.hoverable || props.selectable;
+      const pointerInteractive = interactive || props.showTooltip;
       const rect = innerRect.value;
       const chart = h(
         ChartCanvas,
@@ -283,7 +285,7 @@ var HeatmapChart = defineComponent({
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -300,12 +302,12 @@ var HeatmapChart = defineComponent({
           top: `${rect.y}px`,
           width: `${rect.width}px`,
           height: `${rect.height}px`,
-          pointerEvents: interactive ? "auto" : "none"
+          pointerEvents: pointerInteractive ? "auto" : "none"
         },
         "data-heatmap-canvas": "true",
         "data-heatmap-render-mode": resolvedRenderMode.value,
-        onMousemove: interactive ? handleCanvasMouseMove : void 0,
-        onMouseleave: interactive ? handleMouseLeave : void 0,
+        onMousemove: pointerInteractive ? handleCanvasMouseMove : void 0,
+        onMouseleave: pointerInteractive ? handleMouseLeave : void 0,
         onClick: interactive ? handleCanvasClick : void 0
       }) : null;
       return h("div", { class: "inline-block relative" }, [chart, canvas, tooltip]);

package/dist/{chunk-DCMRB3HR.mjs → chunk-WV25G4M3.mjs}

@@ -7,6 +7,7 @@ import { defineComponent, h, ref, computed } from "vue";
 import {
   rateBaseClasses,
   getRateStarClasses,
+  rateHalfStarInnerClasses,
   rateActiveColor,
   rateInactiveColor,
   rateHoverColor,
@@ -126,7 +127,7 @@ var Rate = defineComponent({
               [h("path", { d: starPathD })]
             )
           ]),
-          // Active half (clipped left 50%)
+          // Active half (clipped left 50%; inner glyph keeps full-star width)
           h(
             "span",
             {
@@ -137,12 +138,12 @@ var Rate = defineComponent({
               style: { width: "50%" }
             },
             [
-              isChar ? h("span", null, props.character) : h(
+              isChar ? h("span", { class: rateHalfStarInnerClasses }, props.character) : h(
                 "svg",
                 {
                   viewBox: starViewBox,
                   fill: "currentColor",
-                  class: "w-full h-full"
+                  class: rateHalfStarInnerClasses
                 },
                 [h("path", { d: starPathD })]
               )