@expcat/tigercat-vue 2.0.19 → 2.1.1

package/dist/chunk-UR5F74ZB.mjs

@@ -0,0 +1,601 @@
+import {
+  VirtualList
+} from "./chunk-HS4YQGZQ.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
+
+// src/components/TreeSelect.ts
+import { defineComponent, h, ref, computed, watch, nextTick } from "vue";
+import {
+  treeSelectBaseClasses,
+  treeSelectSearchClasses,
+  treeSelectEmptyClasses,
+  getTreeSelectTriggerClasses,
+  getTreeSelectNodeClasses,
+  getTreeSelectDropdownClasses,
+  getTreeSelectDisplayLabel,
+  getAllTreeSelectKeys,
+  flattenTreeSelectNodes,
+  filterTreeSelectNodes,
+  getTreeSelectVisibleIndex,
+  alignTreeSelectVirtualScroll,
+  TREE_SELECT_DEFAULT_HEIGHT,
+  TREE_SELECT_DEFAULT_ITEM_HEIGHT,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerOptionAria,
+  getPickerTriggerKeyAction,
+  getPickerNavigationIndex,
+  getPickerOptionId,
+  findFirstEnabledIndex,
+  coerceClassValue,
+  classNames,
+  icon20ViewBox,
+  chevronDownSolidIcon20PathD,
+  chevronRightSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  resolveLocaleText,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+var treeSelectInstanceId = 0;
+var ChevronDownIcon = h(
+  "svg",
+  {
+    class: "w-4 h-4 transition-transform",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    h("path", {
+      d: chevronDownSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var ClearIcon = h(
+  "svg",
+  {
+    class: "w-4 h-4",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    h("path", {
+      d: closeSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var TreeSelect = defineComponent({
+  name: "TigerTreeSelect",
+  props: {
+    modelValue: {
+      type: [String, Number, Array],
+      default: void 0
+    },
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: "Please select"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    searchValue: {
+      type: String,
+      default: void 0
+    },
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
+    emptyText: {
+      type: String,
+      default: void 0
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Enable virtualized rendering of the dropdown tree.
+     * Visible flattened rows are rendered through VirtualList with fixed item height.
+     */
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Pixel height of the virtualized dropdown viewport.
+     * @default 400
+     */
+    height: {
+      type: Number,
+      default: TREE_SELECT_DEFAULT_HEIGHT
+    },
+    /**
+     * Pixel height of each virtualized tree row.
+     * @default 32
+     */
+    itemHeight: {
+      type: Number,
+      default: TREE_SELECT_DEFAULT_ITEM_HEIGHT
+    },
+    /**
+     * Locale overrides merged on top of ConfigProvider locale
+     */
+    locale: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "update:searchValue", "change", "search-change"],
+  setup(props, { emit, attrs }) {
+    const instanceId = ++treeSelectInstanceId;
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const listboxId = `tiger-treeselect-listbox-${instanceId}`;
+    const isOpen = ref(false);
+    const uncontrolledSearchValue = ref(props.defaultSearchValue);
+    const searchQuery = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
+    const containerRef = ref(null);
+    const triggerRef = ref(null);
+    const dropdownRef = ref(null);
+    const virtualListWrapperRef = ref(null);
+    const activeIndex = ref(-1);
+    const lastActiveKey = ref();
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: dropdownRef,
+      containerRef,
+      placement: "bottom-start",
+      offset: 4,
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: closeDropdown
+    });
+    const expandedKeys = ref(
+      props.defaultExpandAll ? new Set(getAllTreeSelectKeys(props.treeData)) : /* @__PURE__ */ new Set()
+    );
+    const displayLabel = computed(() => getTreeSelectDisplayLabel(props.treeData, props.modelValue));
+    const showClearButton = computed(
+      () => props.clearable && !props.disabled && props.modelValue !== void 0 && (Array.isArray(props.modelValue) ? props.modelValue.length > 0 : props.modelValue !== "")
+    );
+    const matchedKeys = computed(() => {
+      if (!searchQuery.value) return null;
+      return filterTreeSelectNodes(props.treeData, searchQuery.value);
+    });
+    const effectiveExpandedKeys = computed(() => {
+      if (matchedKeys.value) {
+        return matchedKeys.value;
+      }
+      return expandedKeys.value;
+    });
+    const flatNodes = computed(
+      () => flattenTreeSelectNodes(props.treeData, effectiveExpandedKeys.value)
+    );
+    const visibleNodes = computed(() => {
+      if (!matchedKeys.value) return flatNodes.value;
+      return flatNodes.value.filter((f) => matchedKeys.value.has(f.node.key));
+    });
+    function isNodeDisabled(item) {
+      return !!item.node.disabled;
+    }
+    function getVirtualScrollEl() {
+      const wrapper = virtualListWrapperRef.value;
+      return wrapper?.firstElementChild ?? wrapper;
+    }
+    function resolveActiveIndex() {
+      const selected = getTreeSelectVisibleIndex(visibleNodes.value, props.modelValue);
+      if (selected >= 0 && !visibleNodes.value[selected]?.node.disabled) return selected;
+      return findFirstEnabledIndex(visibleNodes.value, isNodeDisabled);
+    }
+    function commitActiveIndex(index) {
+      activeIndex.value = index;
+      lastActiveKey.value = index >= 0 ? visibleNodes.value[index]?.node.key : void 0;
+    }
+    function alignVirtualScroll(index) {
+      if (!props.virtual) return;
+      alignTreeSelectVirtualScroll(getVirtualScrollEl(), index, props.itemHeight, props.height);
+    }
+    watch(isOpen, (open) => {
+      if (!open) {
+        commitActiveIndex(-1);
+        return;
+      }
+      commitActiveIndex(resolveActiveIndex());
+      nextTick(() => alignVirtualScroll(activeIndex.value));
+    });
+    watch(activeIndex, (idx) => {
+      if (!isOpen.value) return;
+      nextTick(() => alignVirtualScroll(idx));
+    });
+    watch(searchQuery, () => {
+      if (!isOpen.value) return;
+      commitActiveIndex(resolveActiveIndex());
+    });
+    watch([expandedKeys, () => props.treeData], () => {
+      if (!isOpen.value) return;
+      const remapped = getTreeSelectVisibleIndex(visibleNodes.value, lastActiveKey.value);
+      if (remapped >= 0) activeIndex.value = remapped;
+    });
+    function handleVirtualListKeyDown(e) {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      commitActiveIndex(
+        getPickerNavigationIndex(visibleNodes.value, activeIndex.value, e.key, isNodeDisabled)
+      );
+    }
+    function openDropdown() {
+      if (props.disabled) return;
+      isOpen.value = true;
+    }
+    function closeDropdown() {
+      isOpen.value = false;
+      updateSearchValue("");
+    }
+    function updateSearchValue(value) {
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = value;
+      }
+      emit("update:searchValue", value);
+      emit("search-change", value);
+    }
+    function toggleDropdown() {
+      if (isOpen.value) closeDropdown();
+      else openDropdown();
+    }
+    function toggleExpand(key) {
+      const next = new Set(expandedKeys.value);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      expandedKeys.value = next;
+    }
+    function isSelected(key) {
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(key);
+      }
+      return props.modelValue === key;
+    }
+    function handleNodeSelect(node) {
+      if (node.disabled) return;
+      if (props.multiple) {
+        const current = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+        const idx = current.indexOf(node.key);
+        if (idx >= 0) {
+          current.splice(idx, 1);
+        } else {
+          current.push(node.key);
+        }
+        emit("update:modelValue", current);
+        emit("change", current);
+      } else {
+        emit("update:modelValue", node.key);
+        emit("change", node.key);
+        closeDropdown();
+      }
+    }
+    function handleClear(e) {
+      e.stopPropagation();
+      const val = props.multiple ? [] : void 0;
+      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();
+      if (action === "toggle") {
+        if (isOpen.value) closeDropdown();
+        else openDropdown();
+      } else if (action === "open") {
+        openDropdown();
+      } else if (action === "close") {
+        closeDropdown();
+      }
+    }
+    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 || isActive, !!node.disabled, props.size),
+          style: { paddingLeft: `${indent + 8}px`, height: props.virtual ? "100%" : void 0 },
+          onClick: (e) => {
+            e.stopPropagation();
+            handleNodeSelect(node);
+          }
+        },
+        [
+          hasChildren ? h(
+            "span",
+            {
+              class: classNames(
+                "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                isExpanded ? "rotate-90" : ""
+              ),
+              onClick: (e) => {
+                e.stopPropagation();
+                toggleExpand(node.key);
+              }
+            },
+            [
+              h(
+                "svg",
+                {
+                  class: "w-3 h-3",
+                  viewBox: icon20ViewBox,
+                  fill: "currentColor"
+                },
+                [
+                  h("path", {
+                    d: chevronRightSolidIcon20PathD,
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd"
+                  })
+                ]
+              )
+            ]
+          ) : h("span", { class: "w-4 mr-1" }),
+          h("span", { class: "flex-1 truncate" }, node.label)
+        ]
+      );
+    }
+    return () => {
+      const containerClasses = classNames(treeSelectBaseClasses, coerceClassValue(attrs.class));
+      return h("div", { ref: containerRef, class: containerClasses }, [
+        // Trigger
+        h(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            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
+          },
+          [
+            h(
+              "span",
+              {
+                class: classNames(
+                  "flex-1 truncate",
+                  !displayLabel.value ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
+                )
+              },
+              displayLabel.value || props.placeholder
+            )
+          ]
+        ),
+        h(
+          "span",
+          { class: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1" },
+          [
+            showClearButton.value ? h(
+              "button",
+              {
+                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
+                ),
+                onClick: handleClear
+              },
+              [ClearIcon]
+            ) : null,
+            h(
+              "span",
+              {
+                class: classNames(
+                  "inline-flex text-[var(--tiger-text-muted,#9ca3af)]",
+                  isOpen.value && "rotate-180"
+                ),
+                "aria-hidden": "true"
+              },
+              [ChevronDownIcon]
+            )
+          ]
+        ),
+        // Dropdown
+        isOpen.value ? renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: dropdownRef,
+              ...getPickerListboxAria({ id: listboxId }),
+              class: classNames(
+                getTreeSelectDropdownClasses(props.virtual),
+                overlay.floatingClasses.value
+              ),
+              style: overlay.floatingStyles.value,
+              "data-positioned": overlay.positioned.value,
+              onKeydown: handleDropdownKeyDown
+            },
+            [
+              // Search
+              props.searchable ? h("input", {
+                type: "text",
+                class: treeSelectSearchClasses,
+                placeholder: resolveLocaleText(
+                  "Search...",
+                  mergedLocale.value?.common?.searchPlaceholder
+                ),
+                value: searchQuery.value,
+                "aria-label": resolveLocaleText(
+                  "Search tree",
+                  mergedLocale.value?.common?.searchPlaceholder
+                ),
+                onInput: (e) => updateSearchValue(e.target.value),
+                onKeydown: handleSearchKeyDown
+              }) : null,
+              // Tree nodes
+              visibleNodes.value.length > 0 ? props.virtual ? h(
+                "div",
+                {
+                  ref: virtualListWrapperRef,
+                  "data-tiger-treeselect-virtual": "",
+                  tabindex: 0,
+                  onKeydown: handleVirtualListKeyDown
+                },
+                [
+                  h(
+                    VirtualList,
+                    {
+                      itemCount: visibleNodes.value.length,
+                      itemHeight: props.itemHeight,
+                      height: props.height
+                    },
+                    {
+                      default: ({ index }) => {
+                        const item = visibleNodes.value[index];
+                        return item ? renderFlatNode(item, index) : null;
+                      }
+                    }
+                  )
+                ]
+              ) : visibleNodes.value.map((flatNode, index) => renderFlatNode(flatNode, index)) : h(
+                "div",
+                { class: treeSelectEmptyClasses },
+                resolveLocaleText(
+                  "No data",
+                  props.emptyText,
+                  mergedLocale.value?.common?.emptyText
+                )
+              )
+            ]
+          ),
+          overlay.target.value
+        ) : null
+      ]);
+    };
+  }
+});
+var TreeSelect_default = TreeSelect;
+
+export {
+  TreeSelect,
+  TreeSelect_default
+};

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) => {