@expcat/tigercat-vue 2.0.4 → 2.1.0

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

@@ -1,3 +1,6 @@
+import {
+  VirtualList
+} from "./chunk-HS4YQGZQ.mjs";
 import {
   renderVueOverlayTeleport,
   useVueAnchoredOverlay
@@ -7,22 +10,28 @@ import {
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/TreeSelect.ts
-import { defineComponent, h, ref, computed } from "vue";
+import { defineComponent, h, ref, computed, watch, nextTick } from "vue";
 import {
   treeSelectBaseClasses,
-  treeSelectDropdownClasses,
   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,
+  findFirstEnabledIndex,
   coerceClassValue,
   classNames,
   icon20ViewBox,
@@ -116,6 +125,30 @@ var TreeSelect = defineComponent({
       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
      */
@@ -136,6 +169,9 @@ var TreeSelect = defineComponent({
     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,
@@ -173,6 +209,58 @@ var TreeSelect = defineComponent({
       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;
+      }
+      if (!props.virtual) return;
+      commitActiveIndex(resolveActiveIndex());
+      nextTick(() => alignVirtualScroll(activeIndex.value));
+    });
+    watch(activeIndex, (idx) => {
+      if (!props.virtual || !isOpen.value) return;
+      nextTick(() => alignVirtualScroll(idx));
+    });
+    watch(searchQuery, () => {
+      if (!props.virtual || !isOpen.value) return;
+      commitActiveIndex(resolveActiveIndex());
+    });
+    watch([expandedKeys, () => props.treeData], () => {
+      if (!props.virtual || !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;
@@ -241,6 +329,57 @@ var TreeSelect = defineComponent({
         closeDropdown();
       }
     }
+    function renderFlatNode(flatNode) {
+      const { node, level, hasChildren, isExpanded } = flatNode;
+      const selected = isSelected(node.key);
+      const indent = level * 20;
+      return h(
+        "div",
+        {
+          key: node.key,
+          ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
+          class: getTreeSelectNodeClasses(selected, !!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 }, [
@@ -295,7 +434,10 @@ var TreeSelect = defineComponent({
             {
               ref: dropdownRef,
               ...getPickerListboxAria({ id: listboxId }),
-              class: classNames(treeSelectDropdownClasses, overlay.floatingClasses.value),
+              class: classNames(
+                getTreeSelectDropdownClasses(props.virtual),
+                overlay.floatingClasses.value
+              ),
               style: overlay.floatingStyles.value,
               "data-positioned": overlay.positioned.value
             },
@@ -316,59 +458,31 @@ var TreeSelect = defineComponent({
                 onInput: (e) => updateSearchValue(e.target.value)
               }) : null,
               // Tree nodes
-              visibleNodes.value.length > 0 ? visibleNodes.value.map((flatNode) => {
-                const { node, level, hasChildren, isExpanded } = flatNode;
-                const selected = isSelected(node.key);
-                const indent = level * 20;
-                return h(
-                  "div",
-                  {
-                    key: node.key,
-                    ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
-                    class: getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
-                    style: { paddingLeft: `${indent + 8}px` },
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleNodeSelect(node);
+              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) : null;
+                      }
                     }
-                  },
-                  [
-                    // Expand toggle
-                    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" }),
-                    // Label
-                    h("span", { class: "flex-1 truncate" }, node.label)
-                  ]
-                );
-              }) : h(
+                  )
+                ]
+              ) : visibleNodes.value.map((flatNode) => renderFlatNode(flatNode)) : h(
                 "div",
                 { class: treeSelectEmptyClasses },
                 resolveLocaleText(

package/dist/components/ActivityFeed.d.mts

@@ -112,9 +112,9 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
     className: string;
     style: Record<string, string | number>;
     loading: boolean;
+    groups: ActivityGroup[];
     groupBy: (item: ActivityItem) => string;
     items: ActivityItem[];
-    groups: ActivityGroup[];
     groupOrder: string[];
     showAvatar: boolean;
     showTime: boolean;

package/dist/components/ActivityFeed.mjs

@@ -8,9 +8,9 @@ import "../chunk-AUMTHL6N.mjs";
 import "../chunk-342DH5CF.mjs";
 import "../chunk-NN6AINLG.mjs";
 import "../chunk-TC6ZPQFT.mjs";
-import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-ZFTRR3KW.mjs";
 import "../chunk-JHFM6IFO.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/Alert.d.mts

@@ -210,10 +210,10 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
     className: string;
     style: Record<string, string | number>;
     title: string;
-    description: string;
     closable: boolean;
-    showIcon: boolean;
     duration: number;
+    description: string;
+    showIcon: boolean;
     banner: boolean;
     showCountdown: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/components/AreaChart.mjs

@@ -1,14 +1,14 @@
 import {
   AreaChart,
   AreaChart_default
-} from "../chunk-ZGA66PSG.mjs";
+} from "../chunk-EZYOCPMM.mjs";
 import "../chunk-PE5OA4YG.mjs";
+import "../chunk-2ZUEXCVJ.mjs";
 import "../chunk-SPFL55TF.mjs";
 import "../chunk-ZWVA7HT3.mjs";
 import "../chunk-W5RZPTFD.mjs";
 import "../chunk-MI6TL3CQ.mjs";
 import "../chunk-V443QIJM.mjs";
-import "../chunk-2ZUEXCVJ.mjs";
 export {
   AreaChart,
   AreaChart_default as default

package/dist/components/AspectRatio.d.mts

@@ -0,0 +1,44 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { AspectRatioValue } from '@expcat/tigercat-core';
+
+interface VueAspectRatioProps {
+    ratio?: AspectRatioValue;
+    className?: string;
+    contentClassName?: string;
+}
+declare const AspectRatio: vue.DefineComponent<vue.ExtractPropTypes<{
+    ratio: {
+        type: PropType<AspectRatioValue>;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    contentClassName: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    ratio: {
+        type: PropType<AspectRatioValue>;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    contentClassName: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    className: string;
+    ratio: AspectRatioValue;
+    contentClassName: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AspectRatio, type VueAspectRatioProps, AspectRatio as default };

package/dist/components/AspectRatio.mjs

@@ -0,0 +1,8 @@
+import {
+  AspectRatio,
+  AspectRatio_default
+} from "../chunk-P6FMU4AT.mjs";
+export {
+  AspectRatio,
+  AspectRatio_default as default
+};

package/dist/components/BarChart.mjs

@@ -1,14 +1,14 @@
 import {
   BarChart,
   BarChart_default
-} from "../chunk-OTHJIFDV.mjs";
+} from "../chunk-W5XFWVNV.mjs";
 import "../chunk-PE5OA4YG.mjs";
+import "../chunk-2ZUEXCVJ.mjs";
 import "../chunk-SPFL55TF.mjs";
 import "../chunk-ZWVA7HT3.mjs";
 import "../chunk-W5RZPTFD.mjs";
 import "../chunk-MI6TL3CQ.mjs";
 import "../chunk-V443QIJM.mjs";
-import "../chunk-2ZUEXCVJ.mjs";
 export {
   BarChart,
   BarChart_default as default

package/dist/components/Carousel.d.mts

@@ -269,6 +269,7 @@ declare const Carousel: vue.DefineComponent<vue.ExtractPropTypes<{
     style: Record<string, string | number>;
     dots: boolean;
     infinite: boolean;
+    pauseOnHover: boolean;
     currentIndex: number;
     autoplay: boolean;
     autoplaySpeed: number;
@@ -277,7 +278,6 @@ declare const Carousel: vue.DefineComponent<vue.ExtractPropTypes<{
     arrows: boolean;
     speed: number;
     defaultCurrentIndex: number;
-    pauseOnHover: boolean;
     pauseOnFocus: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 

package/dist/components/Cascader.d.mts

@@ -16,6 +16,8 @@ interface VueCascaderProps {
     changeOnSelect?: boolean;
     separator?: string;
     emptyText?: string;
+    virtual?: boolean;
+    listHeight?: number;
     locale?: Partial<TigerLocale>;
 }
 declare const Cascader: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -71,6 +73,21 @@ declare const Cascader: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * Whether to use virtual scrolling for column and search lists
+     */
+    virtual: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Height of each column panel (and searchable list) in pixels
+     * @default 256
+     */
+    listHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * Locale overrides merged on top of ConfigProvider locale
      */
@@ -133,6 +150,21 @@ declare const Cascader: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * Whether to use virtual scrolling for column and search lists
+     */
+    virtual: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Height of each column panel (and searchable list) in pixels
+     * @default 256
+     */
+    listHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * Locale overrides merged on top of ConfigProvider locale
      */
@@ -153,10 +185,12 @@ declare const Cascader: vue.DefineComponent<vue.ExtractPropTypes<{
     disabled: boolean;
     modelValue: CascaderValue;
     searchable: boolean | CascaderSearchConfig;
+    virtual: boolean;
     options: CascaderOption[];
     searchValue: string;
     defaultSearchValue: string;
     clearable: boolean;
+    listHeight: number;
     expandTrigger: CascaderExpandTrigger;
     changeOnSelect: boolean;
     separator: string;

package/dist/components/Cascader.mjs

@@ -1,7 +1,7 @@
 import {
   Cascader,
   Cascader_default
-} from "../chunk-OTGGPXDT.mjs";
+} from "../chunk-IEAEB4TX.mjs";
 import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";

package/dist/components/ChartLegend.d.mts

@@ -76,8 +76,8 @@ declare const ChartLegend: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     ariaLabel: string;
     position: ChartLegendPosition;
-    markerSize: number;
     gap: number;
+    markerSize: number;
     interactive: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 

package/dist/components/ChatWindow.mjs

@@ -4,8 +4,8 @@ import {
 } from "../chunk-PYRKFQ6J.mjs";
 import "../chunk-HS4YQGZQ.mjs";
 import "../chunk-XLNK3Z2P.mjs";
-import "../chunk-SJINC5NF.mjs";
 import "../chunk-P2LZ2MR5.mjs";
+import "../chunk-SJINC5NF.mjs";
 import "../chunk-2OI6GWOT.mjs";
 import "../chunk-VIIGYWUY.mjs";
 import "../chunk-YZBQ6IR7.mjs";

package/dist/components/CodeEditor.mjs

@@ -1,7 +1,7 @@
 import {
   CodeEditor,
   CodeEditor_default
-} from "../chunk-H6FZBFRT.mjs";
+} from "../chunk-TPESRDUG.mjs";
 export {
   CodeEditor,
   CodeEditor_default as default

package/dist/components/ColorSwatch.d.mts

@@ -71,8 +71,8 @@ declare const ColorSwatch: vue.DefineComponent<vue.ExtractPropTypes<{
     size: ComponentSize;
     disabled: boolean;
     modelValue: string;
-    columns: number;
     groups: ColorSwatchGroup[];
+    columns: number;
     colors: ColorSwatchOptionInput[];
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;