@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-S2PMAXBQ.js → chunk-BQRXHUIC.js}

@@ -1,10 +1,52 @@
 'use strict';
 
-var chunkN5I5Y5JG_js = require('./chunk-N5I5Y5JG.js');
-var chunkIVTBNUKQ_js = require('./chunk-IVTBNUKQ.js');
+var chunkJDCVS4SJ_js = require('./chunk-JDCVS4SJ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
+var DropdownMenu = vue.defineComponent({
+  name: "TigerDropdownMenu",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const attrsRecord = attrs;
+    const attrsClass = attrsRecord.class;
+    const attrsStyle = attrsRecord.style;
+    const menuClasses = vue.computed(
+      () => tigercatCore.classNames(tigercatCore.getDropdownMenuClasses(), props.className, tigercatCore.coerceClassValue(attrsClass))
+    );
+    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrsStyle, props.style));
+    return () => {
+      const {
+        class: _class,
+        style: _style,
+        ...restAttrs
+      } = attrsRecord;
+      return vue.h(
+        "div",
+        {
+          ...restAttrs,
+          class: menuClasses.value,
+          role: "menu",
+          style: mergedStyle.value
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
 var dropdownIdCounter = 0;
 var createDropdownMenuId = () => `tiger-dropdown-menu-${++dropdownIdCounter}`;
 var DropdownContextKey = /* @__PURE__ */ Symbol("DropdownContext");
@@ -150,7 +192,7 @@ var Dropdown = vue.defineComponent({
       x,
       y,
       placement: currentPlacement
-    } = chunkIVTBNUKQ_js.useVueFloating({
+    } = chunkJDCVS4SJ_js.useVueFloating({
       referenceRef: triggerRef,
       floatingRef,
       enabled: currentVisible,
@@ -165,7 +207,7 @@ var Dropdown = vue.defineComponent({
         cleanupClickOutside?.();
         cleanupClickOutside = null;
         if (enabled) {
-          cleanupClickOutside = chunkIVTBNUKQ_js.useVueClickOutside({
+          cleanupClickOutside = chunkJDCVS4SJ_js.useVueClickOutside({
             enabled: currentVisible,
             containerRef,
             onOutsideClick: () => setVisible(false),
@@ -182,7 +224,7 @@ var Dropdown = vue.defineComponent({
         cleanupEscapeKey?.();
         cleanupEscapeKey = null;
         if (visible) {
-          cleanupEscapeKey = chunkIVTBNUKQ_js.useVueEscapeKey({
+          cleanupEscapeKey = chunkJDCVS4SJ_js.useVueEscapeKey({
             enabled: currentVisible,
             onEscape: () => setVisible(false)
           });
@@ -222,7 +264,7 @@ var Dropdown = vue.defineComponent({
       let triggerNode = null;
       let menuNode = null;
       defaultSlot.forEach((node) => {
-        if (node.type === chunkN5I5Y5JG_js.DropdownMenu) {
+        if (node.type === DropdownMenu) {
           menuNode = node;
           return;
         }
@@ -299,4 +341,5 @@ var Dropdown_default = Dropdown;
 
 exports.Dropdown = Dropdown;
 exports.DropdownContextKey = DropdownContextKey;
+exports.DropdownMenu = DropdownMenu;
 exports.Dropdown_default = Dropdown_default;

package/dist/{chunk-V4PBWEAU.js → chunk-BZBQUUXF.js}

@@ -15,7 +15,7 @@ var ConfigProvider = vue.defineComponent({
   name: "TigerConfigProvider",
   props: {
     locale: {
-      type: Object,
+      type: [Object, Function, Promise],
       default: void 0
     },
     theme: {
@@ -29,9 +29,41 @@ var ConfigProvider = vue.defineComponent({
   },
   setup(props, { slots }) {
     const parent = useTigerConfig();
+    const resolvedLocale = vue.ref(
+      tigercatCore.isLazyTigerLocale(props.locale) ? void 0 : tigercatCore.getImmediateTigerLocale(props.locale)
+    );
+    const localeLoading = vue.ref(tigercatCore.isLazyTigerLocale(props.locale));
+    let loadId = 0;
+    vue.watch(
+      () => props.locale,
+      (locale) => {
+        if (!tigercatCore.isLazyTigerLocale(locale)) {
+          resolvedLocale.value = tigercatCore.getImmediateTigerLocale(locale);
+          localeLoading.value = false;
+          return;
+        }
+        const thisId = ++loadId;
+        localeLoading.value = true;
+        tigercatCore.resolveTigerLocale(locale).then(
+          (result) => {
+            if (thisId === loadId) {
+              resolvedLocale.value = result;
+              localeLoading.value = false;
+            }
+          },
+          () => {
+            if (thisId === loadId) {
+              localeLoading.value = false;
+            }
+          }
+        );
+      },
+      { immediate: true }
+    );
     const merged = vue.computed(() => {
       return {
-        locale: tigercatCore.mergeTigerLocale(parent.value.locale, props.locale),
+        locale: tigercatCore.mergeTigerLocale(parent.value.locale, resolvedLocale.value),
+        localeLoading: localeLoading.value || parent.value.localeLoading,
         theme: props.theme ?? parent.value.theme,
         colorScheme: props.colorScheme ?? parent.value.colorScheme
       };

package/dist/{chunk-4L5UYIV6.mjs → chunk-C6ER6OUB.mjs}

@@ -1,6 +1,6 @@
 import { CollapseContextKey } from './chunk-DVFDA2P2.mjs';
-import { defineComponent, inject, computed, h } from 'vue';
-import { isPanelActive, classNames, getCollapsePanelClasses, coerceClassValue, getCollapsePanelHeaderClasses, getCollapseIconClasses, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
+import { defineComponent, inject, computed, ref, onMounted, watch, onBeforeUnmount, h } from 'vue';
+import { isPanelActive, getInitialCollapseContentStyle, classNames, getCollapsePanelClasses, coerceClassValue, getCollapsePanelHeaderClasses, getCollapseIconClasses, createCollapseTransitionController, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
 
 var CollapsePanel = defineComponent({
   name: "TigerCollapsePanel",
@@ -58,6 +58,9 @@ var CollapsePanel = defineComponent({
     const isActive = computed(() => {
       return isPanelActive(props.panelKey, collapseContext.activeKeys);
     });
+    const contentRef = ref();
+    const initialContentStyle = getInitialCollapseContentStyle(isActive.value);
+    let transitionController;
     const panelClasses = computed(() => {
       return classNames(
         getCollapsePanelClasses(collapseContext.ghost, props.className),
@@ -84,6 +87,23 @@ var CollapsePanel = defineComponent({
         collapseContext.handlePanelClick(props.panelKey);
       }
     };
+    onMounted(() => {
+      if (!contentRef.value) return;
+      transitionController = createCollapseTransitionController(contentRef.value, {
+        expanded: isActive.value
+      });
+    });
+    watch(
+      isActive,
+      (expanded) => {
+        transitionController?.update(expanded);
+      },
+      { flush: "post" }
+    );
+    onBeforeUnmount(() => {
+      transitionController?.dispose();
+      transitionController = void 0;
+    });
     return () => {
       const headerSlot = slots.header?.();
       const extraSlot = slots.extra?.();
@@ -140,11 +160,10 @@ var CollapsePanel = defineComponent({
       const content = h(
         "div",
         {
+          ref: contentRef,
+          "data-tiger-collapse-content": "",
           class: collapsePanelContentWrapperClasses,
-          style: {
-            maxHeight: isActive.value ? "none" : "0",
-            opacity: isActive.value ? "1" : "0"
-          }
+          style: initialContentStyle
         },
         [
           h(

package/dist/{chunk-GMYSHJCU.mjs → chunk-C7VGTRHE.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, h } from 'vue';
-import { calculateVirtualRange, classNames, getVirtualTableContainerClasses, coerceClassValue, virtualTableHeaderCellClasses, virtualTableHeaderClasses, getVirtualRowKey, virtualTableCellClasses, getVirtualTableRowClasses, virtualTableEmptyClasses, virtualTableLoadingClasses } from '@expcat/tigercat-core';
+import { calculateVirtualRange, classNames, getVirtualTableContainerClasses, coerceClassValue, getVirtualTableFixedInfo, getVirtualTableFixedCellStyle, virtualTableHeaderCellClasses, virtualTableHeaderClasses, getVirtualRowKey, virtualTableCellClasses, getVirtualTableRowClasses, virtualTableEmptyClasses, virtualTableLoadingClasses } from '@expcat/tigercat-core';
 
 // src/components/VirtualTable.ts
 var VirtualTable = defineComponent({
@@ -59,18 +59,22 @@ var VirtualTable = defineComponent({
       )
     );
     const selectedSet = computed(() => new Set(props.selectedKeys));
+    const fixedInfo = computed(() => getVirtualTableFixedInfo(props.columns));
     return () => {
-      const headerCells = props.columns.map(
-        (col) => h(
+      const fi = fixedInfo.value;
+      const headerCells = props.columns.map((col) => {
+        const widthStyle = col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : {};
+        const stickyStyle = getVirtualTableFixedCellStyle(col.key, fi);
+        return h(
           "th",
           {
             key: col.key,
             class: virtualTableHeaderCellClasses,
-            style: col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
+            style: { ...widthStyle, ...stickyStyle }
           },
           col.title ?? ""
-        )
-      );
+        );
+      });
       const headerRow = h("tr", {}, headerCells);
       const thead = h(
         "thead",
@@ -90,7 +94,8 @@ var VirtualTable = defineComponent({
             "td",
             {
               key: col.key,
-              class: virtualTableCellClasses
+              class: virtualTableCellClasses,
+              style: getVirtualTableFixedCellStyle(col.key, fi)
             },
             String(row[col.key] ?? "")
           )

package/dist/{chunk-7DGAOCPX.mjs → chunk-CERGNVW2.mjs}

@@ -1,7 +1,7 @@
+import { VirtualList } from './chunk-GWNXDOIG.mjs';
 import { defineComponent, ref, computed, watch, nextTick, h } from 'vue';
-import { getSpinnerSVG, calculateCheckedState, getAllKeys, checkedSetsFromState, getVisibleTreeItems, filterTreeNodes, getAutoExpandKeys, classNames, treeBaseClasses, coerceClassValue, treeEmptyStateClasses, treeNodeIndentClasses, treeNodeCheckboxClasses, treeNodeIconClasses, treeNodeLabelClasses, treeNodeWrapperClasses, getTreeNodeClasses, getParentKeys, treeNodeChildrenClasses, treeLineClasses, treeLoadingClasses, normalizeSvgAttrs, findNode, getTreeNodeExpandIconClasses, handleNodeCheck, getCheckedKeysByStrategy } from '@expcat/tigercat-core';
+import { getSpinnerSVG, calculateCheckedState, getAllKeys, checkedSetsFromState, getVisibleTreeItems, filterTreeNodes, getAutoExpandKeys, classNames, treeBaseClasses, coerceClassValue, treeEmptyStateClasses, treeNodeIndentClasses, treeNodeCheckboxClasses, treeNodeIconClasses, treeNodeLabelClasses, getTreeNodeClasses, getParentKeys, treeNodeWrapperClasses, treeNodeChildrenClasses, treeLineClasses, treeLoadingClasses, normalizeSvgAttrs, findNode, getTreeNodeExpandIconClasses, handleNodeCheck, getCheckedKeysByStrategy } from '@expcat/tigercat-core';
 
-// src/components/Tree.ts
 var spinnerSvg = getSpinnerSVG("spinner");
 var ExpandIcon = (expanded, hasChildren) => {
   if (!hasChildren) {
@@ -203,6 +203,29 @@ var Tree = defineComponent({
     draggable: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Enable virtualized rendering. The visible tree is flattened and rendered
+     * through `VirtualList` with fixed item height. Recommended for large
+     * trees (> ~200 visible items).
+     */
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Pixel height of the virtualized scroll viewport.
+     */
+    height: {
+      type: Number,
+      default: 400
+    },
+    /**
+     * Pixel height of each virtualized tree row.
+     */
+    itemHeight: {
+      type: Number,
+      default: 32
     }
   },
   emits: [
@@ -452,7 +475,7 @@ var Tree = defineComponent({
       }
       return void 0;
     }
-    function renderTreeNode(node, level) {
+    function renderTreeRow(node, level) {
       const hasChildren = !!(node.children && node.children.length > 0);
       const isExpanded = computedExpandedKeys.value.has(node.key);
       const isSelected = computedSelectedKeys.value.has(node.key);
@@ -472,9 +495,7 @@ var Tree = defineComponent({
         indent.push(h("span", { key: i, class: treeNodeIndentClasses }));
       }
       const nodeContent = [
-        // Indentation
         ...indent,
-        // Expand icon
         h(
           "span",
           {
@@ -489,7 +510,6 @@ var Tree = defineComponent({
           },
           [ExpandIcon(isExpanded, isExpandable)]
         ),
-        // Checkbox
         props.checkable ? h("input", {
           type: "checkbox",
           class: treeNodeCheckboxClasses,
@@ -503,9 +523,7 @@ var Tree = defineComponent({
             handleCheck(node.key, target.checked);
           }
         }) : null,
-        // Icon (if provided)
         props.showIcon && node.icon ? h("span", { class: treeNodeIconClasses }, node.icon) : null,
-        // Label
         h(
           "span",
           {
@@ -516,137 +534,145 @@ var Tree = defineComponent({
           },
           node.label
         ),
-        // Loading indicator
         isLoading ? LoadingSpinner() : null
       ].filter(Boolean);
-      const treeNode = h(
+      return h(
+        "div",
+        {
+          class: getTreeNodeClasses(isSelected, !!node.disabled, props.blockNode),
+          "data-tiger-treeitem-key": String(node.key),
+          role: "treeitem",
+          "aria-level": level + 1,
+          "aria-disabled": node.disabled ? true : void 0,
+          "aria-selected": effectiveSelectable.value ? isSelected ? true : false : void 0,
+          "aria-expanded": isExpandable ? isExpanded ? true : false : void 0,
+          "aria-checked": props.checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
+          tabIndex: isFocusable ? 0 : -1,
+          draggable: props.draggable && !node.disabled ? true : void 0,
+          onDragstart: props.draggable && !node.disabled ? (e) => {
+            e.stopPropagation();
+            handleTreeDragStart(node.key);
+          } : void 0,
+          onDragover: props.draggable ? handleTreeDragOver : void 0,
+          onDrop: props.draggable ? (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleTreeDrop(node.key);
+          } : void 0,
+          onDragend: props.draggable ? handleTreeDragEnd : void 0,
+          onFocus: () => {
+            if (!node.disabled) activeKey.value = node.key;
+          },
+          onKeydown: (e) => {
+            if (node.disabled) return;
+            const currentKey = getCurrentKey(node.key);
+            const currentIndex = getNavigationIndex(currentKey);
+            const parents = getParentKeys(props.treeData, node.key);
+            const parentKey = parents[parents.length - 1];
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              focusKey(focusableKeys.value[currentIndex + 1] ?? currentKey);
+              return;
+            }
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              focusKey(focusableKeys.value[currentIndex - 1] ?? currentKey);
+              return;
+            }
+            if (e.key === "Home") {
+              e.preventDefault();
+              focusKey(focusableKeys.value[0] ?? currentKey);
+              return;
+            }
+            if (e.key === "End") {
+              e.preventDefault();
+              focusKey(focusableKeys.value[focusableKeys.value.length - 1] ?? currentKey);
+              return;
+            }
+            if (e.key === "ArrowRight") {
+              e.preventDefault();
+              if (isExpandable && !isExpanded) {
+                handleExpand(node.key);
+                return;
+              }
+              if (isExpandable && isExpanded) {
+                focusKey(getFirstChildKey(node.key) ?? currentKey);
+              }
+              return;
+            }
+            if (e.key === "ArrowLeft") {
+              e.preventDefault();
+              if (isExpandable && isExpanded) {
+                handleExpand(node.key);
+                return;
+              }
+              focusKey(parentKey ?? currentKey);
+              return;
+            }
+            if (e.key === "Escape") {
+              e.preventDefault();
+              if (isExpandable && isExpanded) {
+                handleExpand(node.key);
+                return;
+              }
+              if (parentKey !== void 0) {
+                if (computedExpandedKeys.value.has(parentKey)) {
+                  handleExpand(parentKey);
+                }
+                focusKey(parentKey);
+              }
+              return;
+            }
+            if (e.key === "Enter") {
+              e.preventDefault();
+              if (effectiveSelectable.value) {
+                handleSelect(node.key, e);
+                return;
+              }
+              if (isExpandable) {
+                handleExpand(node.key);
+              }
+              return;
+            }
+            if (e.key === " ") {
+              e.preventDefault();
+              if (props.checkable) {
+                handleCheck(node.key, !isChecked);
+                return;
+              }
+              if (isExpandable) {
+                handleExpand(node.key);
+              }
+            }
+          },
+          onClick: (e) => {
+            activeKey.value = node.key;
+            handleNodeClick(node, e);
+            if (effectiveSelectable.value && !node.disabled) {
+              handleSelect(node.key, e);
+            }
+          }
+        },
+        nodeContent
+      );
+    }
+    function renderTreeNode(node, level) {
+      const hasChildren = !!(node.children && node.children.length > 0);
+      const isExpanded = computedExpandedKeys.value.has(node.key);
+      const isFiltered = filteredNodeKeys.value.size > 0;
+      const isMatched = filteredNodeKeys.value.has(node.key);
+      const isVisible = !isFiltered || isMatched;
+      if (!isVisible) {
+        return null;
+      }
+      return h(
         "div",
         {
           key: node.key,
           class: treeNodeWrapperClasses
         },
         [
-          // Node content
-          h(
-            "div",
-            {
-              class: getTreeNodeClasses(isSelected, !!node.disabled, props.blockNode),
-              "data-tiger-treeitem-key": String(node.key),
-              role: "treeitem",
-              "aria-level": level + 1,
-              "aria-disabled": node.disabled ? true : void 0,
-              "aria-selected": effectiveSelectable.value ? isSelected ? true : false : void 0,
-              "aria-expanded": isExpandable ? isExpanded ? true : false : void 0,
-              "aria-checked": props.checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
-              tabIndex: isFocusable ? 0 : -1,
-              draggable: props.draggable && !node.disabled ? true : void 0,
-              onDragstart: props.draggable && !node.disabled ? (e) => {
-                e.stopPropagation();
-                handleTreeDragStart(node.key);
-              } : void 0,
-              onDragover: props.draggable ? handleTreeDragOver : void 0,
-              onDrop: props.draggable ? (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleTreeDrop(node.key);
-              } : void 0,
-              onDragend: props.draggable ? handleTreeDragEnd : void 0,
-              onFocus: () => {
-                if (!node.disabled) activeKey.value = node.key;
-              },
-              onKeydown: (e) => {
-                if (node.disabled) return;
-                const currentKey = getCurrentKey(node.key);
-                const currentIndex = getNavigationIndex(currentKey);
-                const parents = getParentKeys(props.treeData, node.key);
-                const parentKey = parents[parents.length - 1];
-                if (e.key === "ArrowDown") {
-                  e.preventDefault();
-                  focusKey(focusableKeys.value[currentIndex + 1] ?? currentKey);
-                  return;
-                }
-                if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  focusKey(focusableKeys.value[currentIndex - 1] ?? currentKey);
-                  return;
-                }
-                if (e.key === "Home") {
-                  e.preventDefault();
-                  focusKey(focusableKeys.value[0] ?? currentKey);
-                  return;
-                }
-                if (e.key === "End") {
-                  e.preventDefault();
-                  focusKey(focusableKeys.value[focusableKeys.value.length - 1] ?? currentKey);
-                  return;
-                }
-                if (e.key === "ArrowRight") {
-                  e.preventDefault();
-                  if (isExpandable && !isExpanded) {
-                    handleExpand(node.key);
-                    return;
-                  }
-                  if (isExpandable && isExpanded) {
-                    focusKey(getFirstChildKey(node.key) ?? currentKey);
-                  }
-                  return;
-                }
-                if (e.key === "ArrowLeft") {
-                  e.preventDefault();
-                  if (isExpandable && isExpanded) {
-                    handleExpand(node.key);
-                    return;
-                  }
-                  focusKey(parentKey ?? currentKey);
-                  return;
-                }
-                if (e.key === "Escape") {
-                  e.preventDefault();
-                  if (isExpandable && isExpanded) {
-                    handleExpand(node.key);
-                    return;
-                  }
-                  if (parentKey !== void 0) {
-                    if (computedExpandedKeys.value.has(parentKey)) {
-                      handleExpand(parentKey);
-                    }
-                    focusKey(parentKey);
-                  }
-                  return;
-                }
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  if (effectiveSelectable.value) {
-                    handleSelect(node.key, e);
-                    return;
-                  }
-                  if (isExpandable) {
-                    handleExpand(node.key);
-                  }
-                  return;
-                }
-                if (e.key === " ") {
-                  e.preventDefault();
-                  if (props.checkable) {
-                    handleCheck(node.key, !isChecked);
-                    return;
-                  }
-                  if (isExpandable) {
-                    handleExpand(node.key);
-                  }
-                }
-              },
-              onClick: (e) => {
-                activeKey.value = node.key;
-                handleNodeClick(node, e);
-                if (effectiveSelectable.value && !node.disabled) {
-                  handleSelect(node.key, e);
-                }
-              }
-            },
-            nodeContent
-          ),
-          // Children
+          renderTreeRow(node, level),
           hasChildren && isExpanded && h(
             "div",
             {
@@ -656,7 +682,6 @@ var Tree = defineComponent({
           )
         ]
       );
-      return treeNode;
     }
     return () => {
       const rootClass = classNames(treeBaseClasses, coerceClassValue(attrs.class));
@@ -691,7 +716,24 @@ var Tree = defineComponent({
           "aria-multiselectable": effectiveMultiple.value ? true : void 0,
           ref: rootEl
         },
-        [searchInput, ...props.treeData.map((node) => renderTreeNode(node, 0))]
+        [
+          searchInput,
+          props.virtual ? h(
+            VirtualList,
+            {
+              itemCount: visibleItems.value.length,
+              itemHeight: props.itemHeight,
+              height: props.height
+            },
+            {
+              default: ({ index }) => {
+                const item = visibleItems.value[index];
+                if (!item) return null;
+                return renderTreeRow(item.node, item.level - 1);
+              }
+            }
+          ) : props.treeData.map((node) => renderTreeNode(node, 0))
+        ]
       );
     };
   }