@expcat/tigercat-vue 2.0.4 → 2.1.0

package/dist/{chunk-OTGGPXDT.mjs → chunk-IEAEB4TX.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/Cascader.ts
-import { defineComponent, computed, ref, h, watch } from "vue";
+import { defineComponent, computed, ref, h, watch, nextTick } from "vue";
 import {
   classNames,
   cascaderBaseClasses,
@@ -23,10 +23,15 @@ import {
   flattenCascaderOptions,
   filterCascaderOptions,
   isCascaderOptionExpandable,
+  getCascaderVirtualItemHeight,
+  getCascaderVirtualRange,
+  getCascaderVirtualAlignScrollTop,
+  CASCADER_DEFAULT_LIST_HEIGHT,
   getPickerComboboxAria,
   getPickerListboxAria,
   getPickerOptionAria,
   getPickerTriggerKeyAction,
+  getPickerNavigationIndex,
   icon20ViewBox,
   chevronDownSolidIcon20PathD,
   closeSolidIcon20PathD,
@@ -106,6 +111,21 @@ var Cascader = defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Whether to use virtual scrolling for column and search lists
+     */
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Height of each column panel (and searchable list) in pixels
+     * @default 256
+     */
+    listHeight: {
+      type: Number,
+      default: CASCADER_DEFAULT_LIST_HEIGHT
+    },
     /**
      * Locale overrides merged on top of ConfigProvider locale
      */
@@ -139,6 +159,12 @@ var Cascader = defineComponent({
       restoreFocusOnDismiss: true,
       onDismiss: closeDropdown
     });
+    const columnScrollTops = ref([]);
+    const columnScrollEls = ref([]);
+    const columnActiveIndices = ref([]);
+    const searchScrollTop = ref(0);
+    const searchScrollEl = ref(null);
+    const searchActiveIndex = ref(-1);
     const displayLabel = computed(() => {
       if (!props.modelValue || props.modelValue.length === 0) return "";
       return getCascaderDisplayLabel(props.options, props.modelValue, props.separator);
@@ -163,12 +189,77 @@ var Cascader = defineComponent({
         coerceClassValue(attrs.class)
       )
     );
+    function selectedIndexInColumn(options, selectedValue) {
+      if (selectedValue === void 0) return -1;
+      return options.findIndex((option) => option.value === selectedValue);
+    }
+    function alignVirtualScroll(el, index, setScrollTop) {
+      if (!props.virtual || !el || index < 0) return;
+      const itemH = getCascaderVirtualItemHeight(props.size);
+      const next = getCascaderVirtualAlignScrollTop(el.scrollTop, index, itemH, props.listHeight);
+      if (el.scrollTop !== next) el.scrollTop = next;
+      setScrollTop(next);
+    }
     watch(isOpen, (open) => {
       if (open) {
+        columnScrollTops.value = [];
+        columnScrollEls.value = [];
+        columnActiveIndices.value = [];
+        searchScrollTop.value = 0;
+        searchActiveIndex.value = -1;
         activePath.value = props.modelValue ? [...props.modelValue] : [];
         updateSearchValue("");
       }
     });
+    watch(
+      columns,
+      (cols) => {
+        if (!props.virtual || !isOpen.value) return;
+        const itemH = getCascaderVirtualItemHeight(props.size);
+        columnActiveIndices.value = cols.map((col, i) => {
+          const prev = columnActiveIndices.value[i];
+          if (prev !== void 0 && prev >= 0 && prev < col.options.length) return prev;
+          return selectedIndexInColumn(col.options, col.selectedValue);
+        });
+        columnScrollTops.value = cols.map((col, i) => {
+          const stored = columnScrollTops.value[i];
+          if (stored !== void 0) return stored;
+          return getCascaderVirtualAlignScrollTop(
+            0,
+            columnActiveIndices.value[i] ?? -1,
+            itemH,
+            props.listHeight
+          );
+        });
+      },
+      { immediate: true }
+    );
+    watch(
+      columnActiveIndices,
+      (indices) => {
+        if (!props.virtual) return;
+        nextTick(() => {
+          indices.forEach((idx, colIndex) => {
+            alignVirtualScroll(columnScrollEls.value[colIndex] ?? null, idx, (top) => {
+              columnScrollTops.value[colIndex] = top;
+            });
+          });
+        });
+      },
+      { deep: true }
+    );
+    watch(searchActiveIndex, (idx) => {
+      if (!props.virtual) return;
+      nextTick(() => {
+        alignVirtualScroll(searchScrollEl.value, idx, (top) => {
+          searchScrollTop.value = top;
+        });
+      });
+    });
+    watch(searchQuery, () => {
+      searchScrollTop.value = 0;
+      searchActiveIndex.value = -1;
+    });
     function updateSearchValue(value) {
       if (props.searchValue === void 0) {
         uncontrolledSearchValue.value = value;
@@ -183,11 +274,22 @@ var Cascader = defineComponent({
     function closeDropdown() {
       isOpen.value = false;
     }
+    function setColumnActiveIndex(colIndex, index) {
+      const next = columnActiveIndices.value.slice();
+      next[colIndex] = index;
+      columnActiveIndices.value = next;
+    }
     function handleOptionClick(option, level) {
       if (option.disabled) return;
+      const optionIndex = columns.value[level]?.options.findIndex(
+        (item) => item.value === option.value
+      );
       const newPath = activePath.value.slice(0, level);
       newPath.push(option.value);
       activePath.value = newPath;
+      if (optionIndex !== void 0 && optionIndex >= 0) {
+        setColumnActiveIndex(level, optionIndex);
+      }
       const hasChildren = isCascaderOptionExpandable(option);
       if (!hasChildren) {
         emit("update:modelValue", newPath);
@@ -199,6 +301,12 @@ var Cascader = defineComponent({
       }
     }
     function handleOptionHover(option, level) {
+      const optionIndex = columns.value[level]?.options.findIndex(
+        (item) => item.value === option.value
+      );
+      if (optionIndex !== void 0 && optionIndex >= 0 && !option.disabled) {
+        setColumnActiveIndex(level, optionIndex);
+      }
       if (props.expandTrigger !== "hover" || option.disabled) return;
       const newPath = activePath.value.slice(0, level);
       newPath.push(option.value);
@@ -218,6 +326,53 @@ var Cascader = defineComponent({
     function handleSearchInput(e) {
       updateSearchValue(e.target.value);
     }
+    function handleVirtualListKeyDown(e, items, current, setIndex) {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      setIndex(getPickerNavigationIndex(items, current, e.key));
+    }
+    function renderVirtualWindow(itemCount, scrollTop, onScrollTop, setScrollEl, renderItem, extraAttrs, onKeyDown) {
+      const itemH = getCascaderVirtualItemHeight(props.size);
+      const { startIndex, endIndex, totalHeight } = getCascaderVirtualRange(
+        scrollTop,
+        props.listHeight,
+        itemCount,
+        itemH
+      );
+      const fromIndex = itemCount <= 0 ? 0 : Math.min(startIndex, endIndex, itemCount - 1);
+      const toIndex = itemCount <= 0 ? -1 : Math.min(endIndex, itemCount - 1);
+      const visible = [];
+      if (fromIndex <= toIndex) {
+        for (let i = fromIndex; i <= toIndex; i++) {
+          const node = renderItem(i);
+          if (node) visible.push(node);
+        }
+      }
+      return h(
+        "div",
+        {
+          ...extraAttrs,
+          ref: ((el) => {
+            setScrollEl(el);
+          }),
+          "data-tiger-cascader-virtual": "",
+          tabindex: 0,
+          style: { maxHeight: `${props.listHeight}px`, overflowY: "auto" },
+          onScroll: (e) => {
+            onScrollTop(e.target.scrollTop);
+          },
+          onKeydown: onKeyDown
+        },
+        [
+          h("div", { style: { height: `${totalHeight}px`, position: "relative" } }, [
+            h("div", { style: { transform: `translateY(${fromIndex * itemH}px)` } }, visible)
+          ])
+        ]
+      );
+    }
     function handleTriggerKeyDown(e) {
       const action = getPickerTriggerKeyAction(e.key, isOpen.value);
       if (action === "none") return;
@@ -344,59 +499,115 @@ var Cascader = defineComponent({
               )
             );
           } else {
-            const searchList = h(
+            const renderSearchItem = (item, index) => h(
               "div",
-              { class: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }) },
-              searchResults.value.map(
-                (item) => h(
-                  "div",
-                  {
-                    class: classNames(
-                      cascaderSearchResultClasses,
-                      item.disabled && "opacity-50 cursor-not-allowed"
-                    ),
-                    ...getPickerOptionAria({
-                      selected: props.modelValue?.join(",") === item.valuePath.join(","),
-                      disabled: item.disabled
-                    }),
-                    onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
-                  },
-                  typeof props.searchable === "object" && props.searchable.render ? props.searchable.render(searchQuery.value, item.path) : item.label
-                )
+              {
+                key: item.valuePath.join(","),
+                "data-option-index": index,
+                class: classNames(
+                  cascaderSearchResultClasses,
+                  item.disabled && "opacity-50 cursor-not-allowed"
+                ),
+                ...getPickerOptionAria({
+                  selected: props.modelValue?.join(",") === item.valuePath.join(","),
+                  disabled: item.disabled
+                }),
+                onMouseenter: () => {
+                  if (!item.disabled) searchActiveIndex.value = index;
+                },
+                onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
+              },
+              typeof props.searchable === "object" && props.searchable.render ? props.searchable.render(searchQuery.value, item.path) : item.label
+            );
+            const searchList = props.virtual ? renderVirtualWindow(
+              searchResults.value.length,
+              searchScrollTop.value,
+              (top) => {
+                searchScrollTop.value = top;
+              },
+              (el) => {
+                searchScrollEl.value = el;
+              },
+              (index) => renderSearchItem(searchResults.value[index], index),
+              {
+                ...getPickerListboxAria({ id: listboxId })
+              },
+              (e) => handleVirtualListKeyDown(
+                e,
+                searchResults.value,
+                searchActiveIndex.value,
+                (index) => {
+                  searchActiveIndex.value = index;
+                }
               )
+            ) : h(
+              "div",
+              { class: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }) },
+              searchResults.value.map((item, index) => renderSearchItem(item, index))
             );
             children.push(searchList);
           }
         } else {
-          const columnElements = columns.value.map(
-            (col, colIndex) => h(
+          const renderColumnOption = (option, col, colIndex, optionIndex) => {
+            const isSelected = col.selectedValue === option.value;
+            const hasChildren = isCascaderOptionExpandable(option);
+            return h(
+              "div",
+              {
+                key: option.value,
+                "data-option-index": optionIndex,
+                class: getCascaderOptionClasses(isSelected, !!option.disabled, props.size),
+                ...getPickerOptionAria({ selected: isSelected, disabled: !!option.disabled }),
+                onClick: () => handleOptionClick(option, colIndex),
+                onMouseenter: () => handleOptionHover(option, colIndex)
+              },
+              [
+                h("span", { class: "flex-1 truncate" }, option.label),
+                hasChildren ? ChevronRightIcon : null
+              ]
+            );
+          };
+          const columnElements = columns.value.map((col, colIndex) => {
+            const listboxAttrs = getPickerListboxAria({
+              id: colIndex === 0 ? listboxId : void 0,
+              label: `Level ${colIndex + 1}`
+            });
+            if (props.virtual) {
+              return renderVirtualWindow(
+                col.options.length,
+                columnScrollTops.value[colIndex] ?? 0,
+                (top) => {
+                  columnScrollTops.value[colIndex] = top;
+                },
+                (el) => {
+                  const next = columnScrollEls.value.slice();
+                  next[colIndex] = el;
+                  columnScrollEls.value = next;
+                },
+                (index) => renderColumnOption(col.options[index], col, colIndex, index),
+                {
+                  class: cascaderColumnClasses,
+                  ...listboxAttrs
+                },
+                (e) => handleVirtualListKeyDown(
+                  e,
+                  col.options,
+                  columnActiveIndices.value[colIndex] ?? -1,
+                  (index) => setColumnActiveIndex(colIndex, index)
+                )
+              );
+            }
+            return h(
               "div",
               {
                 class: cascaderColumnClasses,
-                ...getPickerListboxAria({
-                  id: colIndex === 0 ? listboxId : void 0,
-                  label: `Level ${colIndex + 1}`
-                })
+                ...listboxAttrs
               },
-              col.options.map((option) => {
-                const isSelected = col.selectedValue === option.value;
-                const hasChildren = isCascaderOptionExpandable(option);
-                return h(
-                  "div",
-                  {
-                    class: getCascaderOptionClasses(isSelected, !!option.disabled, props.size),
-                    ...getPickerOptionAria({ selected: isSelected, disabled: !!option.disabled }),
-                    onClick: () => handleOptionClick(option, colIndex),
-                    onMouseenter: () => handleOptionHover(option, colIndex)
-                  },
-                  [
-                    h("span", { class: "flex-1 truncate" }, option.label),
-                    hasChildren ? ChevronRightIcon : null
-                  ]
-                );
-              })
-            )
-          );
+              col.options.map(
+                (option, optionIndex) => renderColumnOption(option, col, colIndex, optionIndex)
+              )
+            );
+          });
           children.push(h("div", { class: "flex" }, columnElements));
         }
         dropdownContent = h(

package/dist/chunk-P6FMU4AT.mjs

@@ -0,0 +1,54 @@
+// src/components/AspectRatio.ts
+import { defineComponent, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  getAspectRatioContentClasses,
+  getAspectRatioRootClasses,
+  getAspectRatioStyle,
+  ASPECT_RATIO_DEFAULT
+} from "@expcat/tigercat-core";
+var AspectRatio = defineComponent({
+  name: "TigerAspectRatio",
+  inheritAttrs: false,
+  props: {
+    ratio: {
+      type: [Number, String],
+      default: ASPECT_RATIO_DEFAULT
+    },
+    className: { type: String, default: void 0 },
+    contentClassName: { type: String, default: void 0 }
+  },
+  setup(props, { slots, attrs }) {
+    return () => h(
+      "div",
+      {
+        ...attrs,
+        class: classNames(
+          getAspectRatioRootClasses(),
+          props.className,
+          coerceClassValue(attrs.class)
+        ),
+        style: mergeStyleValues(getAspectRatioStyle(props.ratio), attrs.style),
+        "data-aspect-ratio": ""
+      },
+      [
+        h(
+          "div",
+          {
+            class: classNames(getAspectRatioContentClasses(), props.contentClassName),
+            "data-aspect-ratio-content": ""
+          },
+          slots.default?.()
+        )
+      ]
+    );
+  }
+});
+var AspectRatio_default = AspectRatio;
+
+export {
+  AspectRatio,
+  AspectRatio_default
+};

package/dist/chunk-PFIV5MXD.mjs

@@ -0,0 +1,48 @@
+// src/components/LoadingBarRoot.ts
+var loadingBarModulePromise = null;
+var pendingCommands = [];
+var resolvedApi = null;
+function loadLoadingBarModule() {
+  loadingBarModulePromise ??= import("./components/LoadingBar.mjs");
+  return loadingBarModulePromise;
+}
+function applyCommand(api, command) {
+  if (command.type === "start") {
+    api.start(command.options);
+    return;
+  }
+  api[command.type]();
+}
+function enqueue(command) {
+  if (resolvedApi) {
+    applyCommand(resolvedApi, command);
+    return;
+  }
+  pendingCommands.push(command);
+  void loadLoadingBarModule().then(({ LoadingBar: LoadingBar2 }) => {
+    resolvedApi = LoadingBar2;
+    const queue = pendingCommands;
+    pendingCommands = [];
+    for (const item of queue) {
+      applyCommand(LoadingBar2, item);
+    }
+  });
+}
+var LoadingBar = {
+  start(options) {
+    enqueue({ type: "start", options });
+  },
+  finish() {
+    enqueue({ type: "finish" });
+  },
+  error() {
+    enqueue({ type: "error" });
+  },
+  clear() {
+    enqueue({ type: "clear" });
+  }
+};
+
+export {
+  LoadingBar
+};

package/dist/chunk-TBOXTAIA.mjs

@@ -0,0 +1,94 @@
+// src/components/LoadingBarContainer.ts
+import { computed, defineComponent, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  DEFAULT_LOADING_BAR_ARIA_LABEL,
+  DEFAULT_LOADING_BAR_COLOR,
+  DEFAULT_LOADING_BAR_HEIGHT,
+  getLoadingBarContainerClasses,
+  getLoadingBarFillClasses,
+  getLoadingBarFillStyle,
+  LOADING_BAR_CONTAINER_ID,
+  mergeStyleValues
+} from "@expcat/tigercat-core";
+var LoadingBarContainer = /* @__PURE__ */ defineComponent({
+  name: "TigerLoadingBarContainer",
+  inheritAttrs: false,
+  props: {
+    percentage: {
+      type: Number,
+      default: 0
+    },
+    status: {
+      type: String,
+      default: "idle"
+    },
+    color: {
+      type: String,
+      default: DEFAULT_LOADING_BAR_COLOR
+    },
+    height: {
+      type: Number,
+      default: DEFAULT_LOADING_BAR_HEIGHT
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    ariaLabel: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { attrs }) {
+    const containerClasses = computed(
+      () => getLoadingBarContainerClasses(classNames(props.className, coerceClassValue(attrs.class)))
+    );
+    const fillClasses = computed(() => getLoadingBarFillClasses(props.status, props.color));
+    const fillStyle = computed(() => getLoadingBarFillStyle(props.percentage, props.height));
+    const resolvedAriaLabel = computed(
+      () => props.ariaLabel?.trim() || DEFAULT_LOADING_BAR_ARIA_LABEL
+    );
+    return () => {
+      const isBusy = props.status === "loading";
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: containerClasses.value,
+          style: mergeStyleValues(attrs.style, props.style, { height: `${props.height}px` }),
+          id: LOADING_BAR_CONTAINER_ID,
+          "data-tiger-loading-bar-container": "",
+          "data-tiger-loading-bar-status": props.status
+        },
+        [
+          h("div", {
+            class: fillClasses.value,
+            style: fillStyle.value,
+            role: "progressbar",
+            "aria-label": resolvedAriaLabel.value,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(props.percentage),
+            "aria-busy": isBusy ? "true" : void 0,
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            "data-tiger-loading-bar": "",
+            "data-tiger-loading-bar-status": props.status
+          })
+        ]
+      );
+    };
+  }
+});
+var LoadingBarContainer_default = LoadingBarContainer;
+
+export {
+  LoadingBarContainer,
+  LoadingBarContainer_default
+};

package/dist/{chunk-H6FZBFRT.mjs → chunk-TPESRDUG.mjs}

@@ -12,6 +12,7 @@ import {
   handleTabKey,
   getActiveLineIndex,
   getCodeEditorActiveLineClasses,
+  getCodeEditorCaretClasses,
   codeEditorTextareaClasses,
   codeEditorHighlightClasses
 } from "@expcat/tigercat-core";
@@ -157,7 +158,11 @@ var CodeEditor = defineComponent({
       );
       const textareaNode = h("textarea", {
         ref: textareaRef,
-        class: classNames(codeEditorTextareaClasses, wrapClass),
+        class: classNames(
+          codeEditorTextareaClasses,
+          getCodeEditorCaretClasses(props.theme),
+          wrapClass
+        ),
         value: code.value,
         onInput,
         onKeydown: onKeyDown,

package/dist/{chunk-2XCXK3NQ.mjs → chunk-U4B5QT72.mjs}

@@ -1,6 +1,6 @@
 import {
   PieChart
-} from "./chunk-NNC75I7F.mjs";
+} from "./chunk-CHEXI7MO.mjs";
 
 // src/components/DonutChart.ts
 import { defineComponent, computed, h, onMounted, ref } from "vue";