@expcat/tigercat-vue 1.0.7 → 1.2.0

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

@@ -1,7 +1,37 @@
-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 {
+  VirtualList
+} from "./chunk-PENI3H3I.mjs";
 
 // src/components/Tree.ts
+import { defineComponent, computed, ref, h, watch, nextTick } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getTreeNodeClasses,
+  getTreeNodeExpandIconClasses,
+  treeBaseClasses,
+  treeNodeWrapperClasses,
+  treeNodeIndentClasses,
+  treeNodeCheckboxClasses,
+  treeNodeIconClasses,
+  treeNodeLabelClasses,
+  treeNodeChildrenClasses,
+  treeLoadingClasses,
+  treeEmptyStateClasses,
+  treeLineClasses,
+  getSpinnerSVG,
+  normalizeSvgAttrs,
+  getVisibleTreeItems,
+  getParentKeys,
+  getAllKeys,
+  findNode,
+  calculateCheckedState,
+  handleNodeCheck,
+  getCheckedKeysByStrategy,
+  filterTreeNodes,
+  getAutoExpandKeys,
+  checkedSetsFromState
+} from "@expcat/tigercat-core";
 var spinnerSvg = getSpinnerSVG("spinner");
 var ExpandIcon = (expanded, hasChildren) => {
   if (!hasChildren) {
@@ -203,6 +233,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 +505,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 +525,7 @@ var Tree = defineComponent({
         indent.push(h("span", { key: i, class: treeNodeIndentClasses }));
       }
       const nodeContent = [
-        // Indentation
         ...indent,
-        // Expand icon
         h(
           "span",
           {
@@ -489,7 +540,6 @@ var Tree = defineComponent({
           },
           [ExpandIcon(isExpanded, isExpandable)]
         ),
-        // Checkbox
         props.checkable ? h("input", {
           type: "checkbox",
           class: treeNodeCheckboxClasses,
@@ -503,9 +553,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 +564,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 +712,6 @@ var Tree = defineComponent({
           )
         ]
       );
-      return treeNode;
     }
     return () => {
       const rootClass = classNames(treeBaseClasses, coerceClassValue(attrs.class));
@@ -691,11 +746,31 @@ 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))
+        ]
       );
     };
   }
 });
 var Tree_default = Tree;
 
-export { Tree, Tree_default };
+export {
+  Tree,
+  Tree_default
+};

package/dist/{chunk-EJCHNSVG.mjs → chunk-DTUTHYQY.mjs}

@@ -1,7 +1,9 @@
-import { defineComponent, computed, h } from 'vue';
-import { getDividerClasses, getDividerStyle } from '@expcat/tigercat-core';
-
 // src/components/Divider.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  getDividerClasses,
+  getDividerStyle
+} from "@expcat/tigercat-core";
 var Divider = defineComponent({
   name: "TigerDivider",
   props: {
@@ -24,9 +26,7 @@ var Divider = defineComponent({
     const classes = computed(
       () => getDividerClasses(props.orientation, props.lineStyle, props.spacing)
     );
-    const style = computed(
-      () => getDividerStyle(props.orientation, props.color, props.thickness)
-    );
+    const style = computed(() => getDividerStyle(props.orientation, props.color, props.thickness));
     return () => h("div", {
       ...attrs,
       class: [classes.value, attrs.class],
@@ -38,4 +38,7 @@ var Divider = defineComponent({
 });
 var Divider_default = Divider;
 
-export { Divider, Divider_default };
+export {
+  Divider,
+  Divider_default
+};

package/dist/chunk-DUQ7Q2GO.js

@@ -1,10 +1,9 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Text.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Text.ts
-var Text = vue.defineComponent({
+var _tigercatcore = require('@expcat/tigercat-core');
+var Text = _vue.defineComponent.call(void 0, {
   name: "TigerText",
   props: {
     /**
@@ -79,11 +78,13 @@ var Text = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const textClasses = vue.computed(() => tigercatCore.getTextClasses(props));
-    return () => vue.h(props.tag, { ...attrs, class: [textClasses.value, attrs.class] }, slots.default?.());
+    const textClasses = _vue.computed.call(void 0, () => _tigercatcore.getTextClasses.call(void 0, props));
+    return () => _vue.h.call(void 0, props.tag, { ...attrs, class: [textClasses.value, attrs.class] }, _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]));
   }
 });
 var Text_default = Text;
 
-exports.Text = Text;
-exports.Text_default = Text_default;
+
+
+
+exports.Text = Text; exports.Text_default = Text_default;

package/dist/chunk-DYSLYJ2W.js

@@ -1,11 +1,13 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/InputGroup.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/InputGroup.ts
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
 var INPUT_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerInputGroup");
-var InputGroup = vue.defineComponent({
+var InputGroup = _vue.defineComponent.call(void 0, {
   name: "TigerInputGroup",
   inheritAttrs: false,
   props: {
@@ -23,7 +25,7 @@ var InputGroup = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    vue.provide(INPUT_GROUP_INJECTION_KEY, {
+    _vue.provide.call(void 0, INPUT_GROUP_INJECTION_KEY, {
       get size() {
         return props.size;
       },
@@ -31,24 +33,24 @@ var InputGroup = vue.defineComponent({
         return props.compact;
       }
     });
-    const classes = vue.computed(
-      () => tigercatCore.classNames(
-        tigercatCore.getInputGroupClasses(props.compact, props.className),
-        tigercatCore.coerceClassValue(attrs.class)
+    const classes = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getInputGroupClasses.call(void 0, props.compact, props.className),
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       )
     );
-    return () => vue.h(
+    return () => _vue.h.call(void 0, 
       "div",
       {
         ...attrs,
         class: classes.value,
         role: "group"
       },
-      slots.default?.()
+      _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()])
     );
   }
 });
-var InputGroupAddon = vue.defineComponent({
+var InputGroupAddon = _vue.defineComponent.call(void 0, {
   name: "TigerInputGroupAddon",
   inheritAttrs: false,
   props: {
@@ -62,27 +64,29 @@ var InputGroupAddon = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const ctx = vue.inject(INPUT_GROUP_INJECTION_KEY, null);
+    const ctx = _vue.inject.call(void 0, INPUT_GROUP_INJECTION_KEY, null);
     return () => {
-      const size = ctx?.size ?? "md";
-      const compact = ctx?.compact ?? true;
-      return vue.h(
+      const size = _nullishCoalesce(_optionalChain([ctx, 'optionalAccess', _3 => _3.size]), () => ( "md"));
+      const compact = _nullishCoalesce(_optionalChain([ctx, 'optionalAccess', _4 => _4.compact]), () => ( true));
+      return _vue.h.call(void 0, 
         "span",
         {
           ...attrs,
-          class: tigercatCore.classNames(
-            tigercatCore.getInputGroupAddonClasses(size, compact, props.className),
-            tigercatCore.coerceClassValue(attrs.class)
+          class: _tigercatcore.classNames.call(void 0, 
+            _tigercatcore.getInputGroupAddonClasses.call(void 0, size, compact, props.className),
+            _tigercatcore.coerceClassValue.call(void 0, attrs.class)
           )
         },
-        slots.default?.()
+        _optionalChain([slots, 'access', _5 => _5.default, 'optionalCall', _6 => _6()])
       );
     };
   }
 });
 var InputGroup_default = InputGroup;
 
-exports.INPUT_GROUP_INJECTION_KEY = INPUT_GROUP_INJECTION_KEY;
-exports.InputGroup = InputGroup;
-exports.InputGroupAddon = InputGroupAddon;
-exports.InputGroup_default = InputGroup_default;
+
+
+
+
+
+exports.INPUT_GROUP_INJECTION_KEY = INPUT_GROUP_INJECTION_KEY; exports.InputGroup = InputGroup; exports.InputGroupAddon = InputGroupAddon; exports.InputGroup_default = InputGroup_default;