@expcat/tigercat-vue 2.1.0 → 2.1.2

package/dist/{chunk-7W3NALIL.mjs → chunk-3FPS7XVB.mjs}

@@ -114,46 +114,45 @@ var Affix = defineComponent({
     return () => {
       const attrsRecord = attrs;
       const children = slots.default?.();
+      const useBottom = props.offsetBottom !== void 0;
       const sentinel = h("div", {
         ref: sentinelRef,
         "aria-hidden": "true",
         style: { display: "block", width: "0", height: "0", pointerEvents: "none" }
       });
       if (state.value.affixed) {
-        return h("div", [
-          sentinel,
-          // placeholder reserves layout space
-          h("div", {
-            style: {
-              width: `${originalRect.value?.width ?? 0}px`,
-              height: `${originalRect.value?.height ?? 0}px`
-            }
-          }),
-          h(
-            "div",
-            {
-              ref: wrapperRef,
-              ...attrs,
-              class: classNames(props.className, coerceClassValue(attrsRecord.class)),
-              style: mergeStyleValues(state.value.style, props.style)
-            },
-            children
-          )
-        ]);
-      }
-      return h("div", [
-        sentinel,
-        h(
+        const placeholder = h("div", {
+          style: {
+            width: `${originalRect.value?.width ?? 0}px`,
+            height: `${originalRect.value?.height ?? 0}px`
+          }
+        });
+        const content2 = h(
           "div",
           {
             ref: wrapperRef,
             ...attrs,
             class: classNames(props.className, coerceClassValue(attrsRecord.class)),
-            style: mergeStyleValues(attrsRecord.style, props.style)
+            style: mergeStyleValues(state.value.style, props.style)
           },
           children
-        )
-      ]);
+        );
+        return h(
+          "div",
+          useBottom ? [placeholder, content2, sentinel] : [sentinel, placeholder, content2]
+        );
+      }
+      const content = h(
+        "div",
+        {
+          ref: wrapperRef,
+          ...attrs,
+          class: classNames(props.className, coerceClassValue(attrsRecord.class)),
+          style: mergeStyleValues(attrsRecord.style, props.style)
+        },
+        children
+      );
+      return h("div", useBottom ? [content, sentinel] : [sentinel, content]);
     };
   }
 });

package/dist/{chunk-2OI6GWOT.mjs → chunk-3KAHJF7D.mjs}

@@ -243,18 +243,19 @@ var Textarea = defineComponent({
           onBlur: handleBlur
         })
       ];
-      if (props.showCount) {
-        const countText = props.maxLength ? `${currentLength.value}/${props.maxLength}` : `${currentLength.value}`;
-        children.push(
-          h(
-            "div",
-            {
-              class: "mt-1 text-sm text-gray-500 text-right"
-            },
-            countText
-          )
-        );
+      if (!props.showCount) {
+        return children[0];
       }
+      const countText = props.maxLength ? `${currentLength.value}/${props.maxLength}` : `${currentLength.value}`;
+      children.push(
+        h(
+          "div",
+          {
+            class: "mt-1 text-sm text-gray-500 text-right"
+          },
+          countText
+        )
+      );
       return h("div", { class: "w-full" }, children);
     };
   }

package/dist/{chunk-IEAEB4TX.mjs → chunk-3OCHBGPF.mjs}

@@ -32,6 +32,8 @@ import {
   getPickerOptionAria,
   getPickerTriggerKeyAction,
   getPickerNavigationIndex,
+  getPickerOptionId,
+  findFirstEnabledIndex,
   icon20ViewBox,
   chevronDownSolidIcon20PathD,
   closeSolidIcon20PathD,
@@ -137,6 +139,7 @@ var Cascader = defineComponent({
   emits: ["update:modelValue", "update:searchValue", "change", "search-change"],
   setup(props, { emit, attrs }) {
     const instanceId = ++cascaderInstanceId;
+    const listboxId = `tiger-cascader-listbox-${instanceId}`;
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const isOpen = ref(false);
@@ -165,6 +168,7 @@ var Cascader = defineComponent({
     const searchScrollTop = ref(0);
     const searchScrollEl = ref(null);
     const searchActiveIndex = ref(-1);
+    const focusedColumnIndex = ref(0);
     const displayLabel = computed(() => {
       if (!props.modelValue || props.modelValue.length === 0) return "";
       return getCascaderDisplayLabel(props.options, props.modelValue, props.separator);
@@ -207,20 +211,28 @@ var Cascader = defineComponent({
         columnActiveIndices.value = [];
         searchScrollTop.value = 0;
         searchActiveIndex.value = -1;
+        focusedColumnIndex.value = 0;
         activePath.value = props.modelValue ? [...props.modelValue] : [];
         updateSearchValue("");
       }
     });
     watch(
-      columns,
-      (cols) => {
-        if (!props.virtual || !isOpen.value) return;
-        const itemH = getCascaderVirtualItemHeight(props.size);
+      [isOpen, columns],
+      () => {
+        if (!isOpen.value) return;
+        const cols = columns.value;
         columnActiveIndices.value = cols.map((col, i) => {
           const prev = columnActiveIndices.value[i];
-          if (prev !== void 0 && prev >= 0 && prev < col.options.length) return prev;
+          if (prev !== void 0 && prev >= 0 && prev < col.options.length && !col.options[prev]?.disabled) {
+            return prev;
+          }
           return selectedIndexInColumn(col.options, col.selectedValue);
         });
+        if (focusedColumnIndex.value > cols.length - 1) {
+          focusedColumnIndex.value = Math.max(0, cols.length - 1);
+        }
+        if (!props.virtual) return;
+        const itemH = getCascaderVirtualItemHeight(props.size);
         columnScrollTops.value = cols.map((col, i) => {
           const stored = columnScrollTops.value[i];
           if (stored !== void 0) return stored;
@@ -274,11 +286,39 @@ var Cascader = defineComponent({
     function closeDropdown() {
       isOpen.value = false;
     }
+    function isOptionDisabled(option) {
+      return !!option.disabled;
+    }
+    function getColumnOptionDomId(colIndex, optionIndex) {
+      return `${listboxId}-col${colIndex}-opt${optionIndex}`;
+    }
+    function getCurrentColumnIndex() {
+      const last = columns.value.length - 1;
+      if (last < 0) return 0;
+      const focused = focusedColumnIndex.value;
+      if (focused >= 0 && focused <= last) return focused;
+      return last;
+    }
     function setColumnActiveIndex(colIndex, index) {
       const next = columnActiveIndices.value.slice();
       next[colIndex] = index;
       columnActiveIndices.value = next;
     }
+    function activateColumnOption(colIndex, index) {
+      setColumnActiveIndex(colIndex, index);
+      focusedColumnIndex.value = colIndex;
+    }
+    function resolveColumnActiveIndex(colIndex) {
+      const col = columns.value[colIndex];
+      if (!col) return -1;
+      const current = columnActiveIndices.value[colIndex];
+      if (current !== void 0 && current >= 0 && current < col.options.length && !col.options[current].disabled) {
+        return current;
+      }
+      const selected = selectedIndexInColumn(col.options, col.selectedValue);
+      if (selected >= 0 && !col.options[selected]?.disabled) return selected;
+      return findFirstEnabledIndex(col.options, isOptionDisabled);
+    }
     function handleOptionClick(option, level) {
       if (option.disabled) return;
       const optionIndex = columns.value[level]?.options.findIndex(
@@ -288,7 +328,7 @@ var Cascader = defineComponent({
       newPath.push(option.value);
       activePath.value = newPath;
       if (optionIndex !== void 0 && optionIndex >= 0) {
-        setColumnActiveIndex(level, optionIndex);
+        activateColumnOption(level, optionIndex);
       }
       const hasChildren = isCascaderOptionExpandable(option);
       if (!hasChildren) {
@@ -305,7 +345,7 @@ var Cascader = defineComponent({
         (item) => item.value === option.value
       );
       if (optionIndex !== void 0 && optionIndex >= 0 && !option.disabled) {
-        setColumnActiveIndex(level, optionIndex);
+        activateColumnOption(level, optionIndex);
       }
       if (props.expandTrigger !== "hover" || option.disabled) return;
       const newPath = activePath.value.slice(0, level);
@@ -373,7 +413,98 @@ var Cascader = defineComponent({
         ]
       );
     }
+    function commitActiveOption() {
+      if (isSearchMode.value) {
+        const item = searchResults.value[searchActiveIndex.value];
+        if (!item || item.disabled) return;
+        handleSearchResultClick(item.valuePath, item.disabled);
+        return;
+      }
+      const colIndex = getCurrentColumnIndex();
+      const col = columns.value[colIndex];
+      const idx = columnActiveIndices.value[colIndex] ?? -1;
+      const option = col?.options[idx];
+      if (!option || option.disabled) return;
+      handleOptionClick(option, colIndex);
+      if (isCascaderOptionExpandable(option)) {
+        nextTick(() => {
+          const nextCol = colIndex + 1;
+          if (!columns.value[nextCol]) return;
+          activateColumnOption(nextCol, resolveColumnActiveIndex(nextCol));
+        });
+      }
+    }
+    function handleOpenListKeyDown(e, fromSearchInput = false) {
+      const key = e.key;
+      if (fromSearchInput && key === " ") return false;
+      if (isSearchMode.value) {
+        if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+          e.preventDefault();
+          e.stopPropagation();
+          searchActiveIndex.value = getPickerNavigationIndex(
+            searchResults.value,
+            searchActiveIndex.value,
+            key,
+            (item) => !!item.disabled
+          );
+          return true;
+        }
+        if (key === "Enter" || key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          commitActiveOption();
+          return true;
+        }
+        return false;
+      }
+      const colIndex = getCurrentColumnIndex();
+      const col = columns.value[colIndex];
+      if (!col) return false;
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+        e.preventDefault();
+        e.stopPropagation();
+        const current = columnActiveIndices.value[colIndex] ?? -1;
+        const next = getPickerNavigationIndex(col.options, current, key, isOptionDisabled);
+        activateColumnOption(colIndex, next);
+        return true;
+      }
+      if (key === "ArrowRight") {
+        e.preventDefault();
+        e.stopPropagation();
+        const idx = columnActiveIndices.value[colIndex] ?? -1;
+        const option = col.options[idx];
+        if (option && !option.disabled && isCascaderOptionExpandable(option)) {
+          handleOptionClick(option, colIndex);
+          nextTick(() => {
+            const nextCol = colIndex + 1;
+            if (!columns.value[nextCol]) return;
+            activateColumnOption(nextCol, resolveColumnActiveIndex(nextCol));
+          });
+        }
+        return true;
+      }
+      if (key === "ArrowLeft") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (activePath.value.length > 0) {
+          activePath.value = activePath.value.slice(0, -1);
+          nextTick(() => {
+            focusedColumnIndex.value = Math.max(0, Math.min(colIndex - 1, columns.value.length - 1));
+          });
+        }
+        return true;
+      }
+      if (key === "Enter" || key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        commitActiveOption();
+        return true;
+      }
+      return false;
+    }
     function handleTriggerKeyDown(e) {
+      if (props.disabled) return;
+      if (isOpen.value && handleOpenListKeyDown(e)) return;
       const action = getPickerTriggerKeyAction(e.key, isOpen.value);
       if (action === "none") return;
       e.preventDefault();
@@ -385,34 +516,71 @@ var Cascader = defineComponent({
         closeDropdown();
       }
     }
+    function handleDropdownKeyDown(e) {
+      if (e.target instanceof HTMLInputElement) return;
+      if (!isOpen.value) return;
+      handleOpenListKeyDown(e);
+    }
+    function handleSearchKeyDown(e) {
+      switch (e.key) {
+        case " ":
+          e.stopPropagation();
+          return;
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+          handleOpenListKeyDown(e, true);
+          return;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          closeDropdown();
+          nextTick(() => {
+            ;
+            triggerRef.value?.focus();
+          });
+          return;
+        default:
+          return;
+      }
+    }
     return () => {
       const hasValue = props.modelValue && props.modelValue.length > 0;
       const showClear = props.clearable && hasValue && !props.disabled;
-      const listboxId = `tiger-cascader-listbox-${instanceId}`;
+      const currentCol = getCurrentColumnIndex();
+      const currentOpt = columnActiveIndices.value[currentCol] ?? -1;
+      const activeOptionId = !isOpen.value ? void 0 : isSearchMode.value ? searchActiveIndex.value >= 0 ? getPickerOptionId(listboxId, searchActiveIndex.value) : void 0 : currentOpt >= 0 ? getColumnOptionDomId(currentCol, currentOpt) : void 0;
       const chevronIcon = h(
-        "svg",
+        "span",
         {
-          class: classNames(
-            "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
-            isOpen.value && "rotate-180"
-          ),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: icon20ViewBox,
-          fill: "currentColor"
+          class: classNames("inline-flex", isOpen.value && "rotate-180"),
+          "aria-hidden": "true"
         },
         [
-          h("path", {
-            "fill-rule": "evenodd",
-            d: chevronDownSolidIcon20PathD,
-            "clip-rule": "evenodd"
-          })
+          h(
+            "svg",
+            {
+              class: "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: icon20ViewBox,
+              fill: "currentColor"
+            },
+            [
+              h("path", {
+                "fill-rule": "evenodd",
+                d: chevronDownSolidIcon20PathD,
+                "clip-rule": "evenodd"
+              })
+            ]
+          )
         ]
       );
-      const clearIcon = showClear ? h(
-        "span",
+      const clearButton = showClear ? h(
+        "button",
         {
-          class: "flex items-center",
-          role: "button",
+          type: "button",
+          class: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-cascader-ring,var(--tiger-primary,#2563eb))]",
+          "data-tiger-cascader-clear": "",
           "aria-label": resolveLocaleText(
             "Clear selection",
             mergedLocale.value?.common?.clearText
@@ -443,9 +611,13 @@ var Cascader = defineComponent({
         {
           ref: triggerRef,
           type: "button",
-          class: triggerClasses.value,
+          class: classNames(triggerClasses.value, showClear ? "pr-14" : "pr-9"),
           disabled: props.disabled,
-          ...getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
+          ...getPickerComboboxAria({
+            expanded: isOpen.value,
+            listboxId,
+            activeOptionId
+          }),
           onClick: toggleOpen,
           onKeydown: handleTriggerKeyDown
         },
@@ -459,10 +631,14 @@ var Cascader = defineComponent({
               )
             },
             hasValue ? displayLabel.value : props.placeholder
-          ),
-          h("span", { class: "flex items-center gap-1" }, [clearIcon, chevronIcon])
+          )
         ]
       );
+      const iconRow = h(
+        "span",
+        { class: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1" },
+        [clearButton, chevronIcon]
+      );
       let dropdownContent = null;
       if (isOpen.value) {
         const children = [];
@@ -478,6 +654,7 @@ var Cascader = defineComponent({
               ),
               value: searchQuery.value,
               onInput: handleSearchInput,
+              onKeydown: handleSearchKeyDown,
               "aria-label": resolveLocaleText(
                 "Search options",
                 mergedLocale.value?.common?.searchPlaceholder
@@ -499,26 +676,32 @@ var Cascader = defineComponent({
               )
             );
           } else {
-            const renderSearchItem = (item, index) => h(
-              "div",
-              {
-                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;
+            const renderSearchItem = (item, index) => {
+              const isActive = searchActiveIndex.value === index;
+              return h(
+                "div",
+                {
+                  key: item.valuePath.join(","),
+                  id: getPickerOptionId(listboxId, index),
+                  "data-option-index": index,
+                  "data-active": isActive || void 0,
+                  class: classNames(
+                    cascaderSearchResultClasses,
+                    isActive && "bg-[var(--tiger-cascader-option-bg-selected,var(--tiger-outline-bg-hover,#eff6ff))]",
+                    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)
                 },
-                onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
-              },
-              typeof props.searchable === "object" && props.searchable.render ? props.searchable.render(searchQuery.value, item.path) : item.label
-            );
+                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,
@@ -550,13 +733,20 @@ var Cascader = defineComponent({
         } else {
           const renderColumnOption = (option, col, colIndex, optionIndex) => {
             const isSelected = col.selectedValue === option.value;
+            const isActive = (columnActiveIndices.value[colIndex] ?? -1) === optionIndex;
             const hasChildren = isCascaderOptionExpandable(option);
             return h(
               "div",
               {
                 key: option.value,
+                id: getColumnOptionDomId(colIndex, optionIndex),
                 "data-option-index": optionIndex,
-                class: getCascaderOptionClasses(isSelected, !!option.disabled, props.size),
+                "data-active": isActive || void 0,
+                class: getCascaderOptionClasses(
+                  isSelected || isActive,
+                  !!option.disabled,
+                  props.size
+                ),
                 ...getPickerOptionAria({ selected: isSelected, disabled: !!option.disabled }),
                 onClick: () => handleOptionClick(option, colIndex),
                 onMouseenter: () => handleOptionHover(option, colIndex)
@@ -620,7 +810,8 @@ var Cascader = defineComponent({
               overlay.floatingClasses.value
             ),
             style: overlay.floatingStyles.value,
-            "data-positioned": overlay.positioned.value
+            "data-positioned": overlay.positioned.value,
+            onKeydown: handleDropdownKeyDown
           },
           children
         );
@@ -631,7 +822,7 @@ var Cascader = defineComponent({
           class: cascaderBaseClasses,
           "data-testid": "cascader"
         },
-        [trigger, renderVueOverlayTeleport(dropdownContent, overlay.target.value)]
+        [trigger, iconRow, renderVueOverlayTeleport(dropdownContent, overlay.target.value)]
       );
     };
   }

package/dist/{chunk-OHR7IUBQ.mjs → chunk-5OILGUNU.mjs}

@@ -13,7 +13,7 @@ import {
   richTextToolbarClasses,
   richTextToolbarSeparatorClasses,
   richTextPlaceholderClasses,
-  defaultToolbar,
+  createDefaultRichTextToolbar,
   isInlineFormat,
   findHotkeyMatch,
   isContentEmpty,
@@ -62,10 +62,10 @@ var RichTextEditor = defineComponent({
     const currentContent = computed(
       () => props.value !== void 0 ? props.value : internalValue.value
     );
-    const toolbarItems = computed(() => props.toolbar ?? defaultToolbar);
     const isEmpty = computed(() => isContentEmpty(currentContent.value));
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getRichTextEditorLabels(mergedLocale.value, props.labels));
+    const toolbarItems = computed(() => props.toolbar ?? createDefaultRichTextToolbar(labels.value));
     watch(
       () => props.value,
       (newVal) => {

package/dist/{chunk-OQVGB7X6.mjs → chunk-626VUZ2Q.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-26OI3TEA.mjs";
+} from "./chunk-PMQSXEMT.mjs";
 import {
   renderVueOverlayTeleport
 } from "./chunk-Q7Y22OFX.mjs";

package/dist/{chunk-66OS5A4D.mjs → chunk-67VS6QHJ.mjs}

@@ -1,6 +1,9 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -12,7 +15,7 @@ import {
 } from "./chunk-ZWVA7HT3.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
@@ -29,7 +32,6 @@ import {
   classNames,
   createLinearScale,
   getChartElementOpacity,
-  getChartInnerRect,
   getNumberExtent,
   getStableChartGradientPrefix,
   getScatterHoverShadow,
@@ -158,6 +160,7 @@ var ScatterChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -168,7 +171,12 @@ var ScatterChart = defineComponent({
       getData: (index) => props.data[index],
       eventNames: { hover: "point-hover", click: "point-click" }
     });
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
     const xValues = computed(() => props.data.map((item) => item.x));
     const yValues = computed(() => props.data.map((item) => item.y));
     const resolvedXScale = computed(() => {
@@ -252,7 +260,8 @@ var ScatterChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className)
+          className: classNames(props.className),
+          onResolvedSizeChange
         },
         {
           default: () => [
@@ -330,19 +339,24 @@ var ScatterChart = defineComponent({
                       ...shared
                     });
                   }
-                  return h("path", {
-                    key: `point-${index}`,
-                    d: getScatterPointPath(props.pointStyle, point.r),
-                    transform: `translate(${point.cx},${point.cy})`,
-                    ...shared
-                  });
+                  return h(
+                    "g",
+                    {
+                      key: `point-${index}`,
+                      transform: `translate(${point.cx},${point.cy})`
+                    },
+                    h("path", {
+                      d: getScatterPointPath(props.pointStyle, point.r),
+                      ...shared
+                    })
+                  );
                 })
               }
             )
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,