@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-ECUROLZ7.js → chunk-PBQVYZRB.js}

@@ -1,9 +1,9 @@
 'use strict';
 
+var chunkEHBPMUT2_js = require('./chunk-EHBPMUT2.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Tree.ts
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var ExpandIcon = (expanded, hasChildren) => {
   if (!hasChildren) {
@@ -205,6 +205,29 @@ var Tree = vue.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: [
@@ -454,7 +477,7 @@ var Tree = vue.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);
@@ -474,9 +497,7 @@ var Tree = vue.defineComponent({
         indent.push(vue.h("span", { key: i, class: tigercatCore.treeNodeIndentClasses }));
       }
       const nodeContent = [
-        // Indentation
         ...indent,
-        // Expand icon
         vue.h(
           "span",
           {
@@ -491,7 +512,6 @@ var Tree = vue.defineComponent({
           },
           [ExpandIcon(isExpanded, isExpandable)]
         ),
-        // Checkbox
         props.checkable ? vue.h("input", {
           type: "checkbox",
           class: tigercatCore.treeNodeCheckboxClasses,
@@ -505,9 +525,7 @@ var Tree = vue.defineComponent({
             handleCheck(node.key, target.checked);
           }
         }) : null,
-        // Icon (if provided)
         props.showIcon && node.icon ? vue.h("span", { class: tigercatCore.treeNodeIconClasses }, node.icon) : null,
-        // Label
         vue.h(
           "span",
           {
@@ -518,137 +536,145 @@ var Tree = vue.defineComponent({
           },
           node.label
         ),
-        // Loading indicator
         isLoading ? LoadingSpinner() : null
       ].filter(Boolean);
-      const treeNode = vue.h(
+      return vue.h(
+        "div",
+        {
+          class: tigercatCore.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 = tigercatCore.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 vue.h(
         "div",
         {
           key: node.key,
           class: tigercatCore.treeNodeWrapperClasses
         },
         [
-          // Node content
-          vue.h(
-            "div",
-            {
-              class: tigercatCore.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 = tigercatCore.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 && vue.h(
             "div",
             {
@@ -658,7 +684,6 @@ var Tree = vue.defineComponent({
           )
         ]
       );
-      return treeNode;
     }
     return () => {
       const rootClass = tigercatCore.classNames(tigercatCore.treeBaseClasses, tigercatCore.coerceClassValue(attrs.class));
@@ -693,7 +718,24 @@ var Tree = vue.defineComponent({
           "aria-multiselectable": effectiveMultiple.value ? true : void 0,
           ref: rootEl
         },
-        [searchInput, ...props.treeData.map((node) => renderTreeNode(node, 0))]
+        [
+          searchInput,
+          props.virtual ? vue.h(
+            chunkEHBPMUT2_js.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))
+        ]
       );
     };
   }

package/dist/{chunk-Q6OYCTQO.mjs → chunk-PCUUTKQZ.mjs}

@@ -1,7 +1,7 @@
-import { defineComponent, ref, watch, onUnmounted, computed, h } from 'vue';
+import { useVueBodyScrollLock, renderVueBodyTeleport } from './chunk-7RIWAO2A.mjs';
+import { defineComponent, ref, computed, watch, onUnmounted, h } from 'vue';
 import { injectLoadingAnimationStyles, getLoadingClasses, getLoadingTextClasses, classNames, loadingFullscreenBaseClasses, loadingContainerBaseClasses, coerceClassValue, mergeStyleValues, getSpinnerSVG, normalizeSvgAttrs, loadingColorClasses, getLoadingBarsWrapperClasses, getLoadingBarClasses, getLoadingDotsWrapperClasses, getLoadingDotClasses } from '@expcat/tigercat-core';
 
-// src/components/Loading.ts
 var Loading = defineComponent({
   name: "TigerLoading",
   inheritAttrs: false,
@@ -38,6 +38,14 @@ var Loading = defineComponent({
       type: String,
       default: void 0
     },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    disableTeleport: {
+      type: Boolean,
+      default: false
+    },
     className: {
       type: String,
       default: void 0
@@ -51,6 +59,10 @@ var Loading = defineComponent({
     injectLoadingAnimationStyles();
     const visible = ref(false);
     let timer = null;
+    const shouldLockBodyScroll = computed(
+      () => props.fullscreen && visible.value && props.lockScroll
+    );
+    useVueBodyScrollLock(shouldLockBodyScroll);
     const clearTimer = () => {
       if (timer) {
         clearTimeout(timer);
@@ -162,7 +174,7 @@ var Loading = defineComponent({
       if (props.text) {
         children.push(h("div", { class: textClasses.value }, props.text));
       }
-      return h(
+      const loadingNode = h(
         "div",
         {
           role: "status",
@@ -175,6 +187,10 @@ var Loading = defineComponent({
         },
         children
       );
+      if (props.fullscreen) {
+        return renderVueBodyTeleport([loadingNode], props.disableTeleport);
+      }
+      return loadingNode;
     };
   }
 });

package/dist/{chunk-BQEVLY2O.mjs → chunk-PUSTYAMS.mjs}

@@ -1,7 +1,8 @@
-import { StepsContextKey } from './chunk-7UU4PULK.mjs';
-import { defineComponent, inject, computed, h } from 'vue';
-import { calculateStepStatus, classNames, getStepItemClasses, coerceClassValue, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, mergeStyleValues, stepFinishChar } from '@expcat/tigercat-core';
+import { defineComponent, inject, computed, h, provide, reactive } from 'vue';
+import { calculateStepStatus, classNames, getStepItemClasses, coerceClassValue, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, mergeStyleValues, getStepsContainerClasses, stepFinishChar } from '@expcat/tigercat-core';
 
+// src/components/Steps.ts
+var StepsContextKey = /* @__PURE__ */ Symbol("StepsContext");
 var StepsItem = defineComponent({
   name: "TigerStepsItem",
   inheritAttrs: false,
@@ -98,7 +99,13 @@ var StepsItem = defineComponent({
       );
     });
     const tailClasses = computed(() => {
-      return getStepTailClasses(stepsContext.direction, stepStatus.value, props.isLast, stepsContext.size, stepsContext.simple);
+      return getStepTailClasses(
+        stepsContext.direction,
+        stepStatus.value,
+        props.isLast,
+        stepsContext.size,
+        stepsContext.simple
+      );
     });
     const contentClasses = computed(() => {
       return getStepContentClasses(stepsContext.direction);
@@ -163,11 +170,7 @@ var StepsItem = defineComponent({
     };
     const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
     return () => {
-      const {
-        class: _class,
-        style: _style,
-        ...restAttrs
-      } = attrs;
+      const { class: _class, style: _style, ...restAttrs } = attrs;
       if (stepsContext.direction === "vertical") {
         return h(
           "li",
@@ -179,9 +182,7 @@ var StepsItem = defineComponent({
             ...restAttrs
           },
           [
-            // Icon and tail wrapper
             h("div", { class: "relative" }, [renderIcon(), h("div", { class: tailClasses.value })]),
-            // Content
             renderContent()
           ]
         );
@@ -195,18 +196,137 @@ var StepsItem = defineComponent({
           "aria-disabled": props.disabled || void 0,
           ...restAttrs
         },
-        [
-          // Icon
-          renderIcon(),
-          // Tail (connector)
-          h("div", { class: tailClasses.value }),
-          // Content
-          renderContent()
-        ]
+        [renderIcon(), h("div", { class: tailClasses.value }), renderContent()]
+      );
+    };
+  }
+});
+var Steps = defineComponent({
+  name: "TigerSteps",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Current step index (0-based)
+     * @default 0
+     */
+    current: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Step status (for current step)
+     * @default 'process'
+     */
+    status: {
+      type: String,
+      default: "process"
+    },
+    /**
+     * Steps direction/orientation
+     * @default 'horizontal'
+     */
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    /**
+     * Step size
+     * @default 'default'
+     */
+    size: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * Whether to use simple style (no description, smaller icons)
+     * @default false
+     */
+    simple: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether steps are clickable
+     * @default false
+     */
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change", "update:current"],
+  setup(props, { slots, attrs, emit }) {
+    const containerClasses = computed(
+      () => classNames(
+        getStepsContainerClasses(props.direction),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    const handleStepClick = (index) => {
+      if (!props.clickable) {
+        return;
+      }
+      emit("update:current", index);
+      emit("change", index);
+    };
+    provide(
+      StepsContextKey,
+      reactive({
+        current: computed(() => props.current),
+        status: computed(() => props.status),
+        direction: computed(() => props.direction),
+        size: computed(() => props.size),
+        simple: computed(() => props.simple),
+        clickable: computed(() => props.clickable),
+        handleStepClick: computed(() => props.clickable ? handleStepClick : void 0)
+      })
+    );
+    return () => {
+      const children = slots.default?.() || [];
+      const { class: _class, style: _style, ...restAttrs } = attrs;
+      const stepsWithProps = children.map((child, index) => {
+        const childType = child?.type;
+        const childName = typeof childType === "object" && childType && "name" in childType ? childType.name : void 0;
+        if (childName === "TigerStepsItem") {
+          const childProps = child.props ?? {};
+          const stepItemType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
+          return h(
+            stepItemType,
+            {
+              ...childProps,
+              stepIndex: index,
+              isLast: index === children.length - 1
+            },
+            child.children ?? void 0
+          );
+        }
+        return child;
+      });
+      return h(
+        "ol",
+        {
+          class: containerClasses.value,
+          style: mergedStyle.value,
+          ...restAttrs
+        },
+        stepsWithProps
       );
     };
   }
 });
-var StepsItem_default = StepsItem;
+var Steps_default = Steps;
 
-export { StepsItem, StepsItem_default };
+export { Steps, StepsContextKey, StepsItem, Steps_default };