@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-6Y4NWO4I.mjs → chunk-HWL36OCD.mjs}

@@ -18,7 +18,10 @@ import {
   getStepTitleClasses,
   getStepDescriptionClasses,
   getStepsContainerClasses,
-  calculateStepStatus
+  calculateStepStatus,
+  stepFinishIconViewBox,
+  stepFinishIconStrokeWidth,
+  stepFinishIconPathD
 } from "@expcat/tigercat-core";
 var StepsContextKey = /* @__PURE__ */ Symbol("StepsContext");
 var StepsItem = defineComponent({
@@ -159,14 +162,14 @@ var StepsItem = defineComponent({
               class: "w-4 h-4 shrink-0 transition-transform duration-300 animate-fade-in",
               fill: "none",
               stroke: "currentColor",
-              "stroke-width": "3",
-              viewBox: "0 0 24 24"
+              "stroke-width": stepFinishIconStrokeWidth,
+              viewBox: stepFinishIconViewBox
             },
             [
               h("path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
-                d: "M4.5 12.75l6 6 9-13.5"
+                d: stepFinishIconPathD
               })
             ]
           )

package/dist/{chunk-GQAVLQEZ.mjs → chunk-IGT4QB7O.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-KY3O3FWK.mjs";
+} from "./chunk-36WSYHJU.mjs";
 
 // src/components/ImageGroup.ts
 import { defineComponent, h, ref, provide, onBeforeUnmount } from "vue";
@@ -15,7 +15,7 @@ var ImageGroup = defineComponent({
   props: {
     preview: { type: Boolean, default: true }
   },
-  emits: ["preview-visible-change"],
+  emits: ["preview-open-change"],
   setup(props, { slots, emit }) {
     const images = ref([]);
     const previewVisible = ref(false);
@@ -33,7 +33,7 @@ var ImageGroup = defineComponent({
         if (!props.preview) return;
         previewIndex.value = index;
         previewVisible.value = true;
-        emit("preview-visible-change", true);
+        emit("preview-open-change", true);
       }
     };
     provide(IMAGE_GROUP_INJECTION_KEY, context);
@@ -48,7 +48,7 @@ var ImageGroup = defineComponent({
         currentIndex: previewIndex.value,
         "onUpdate:open": (val) => {
           previewVisible.value = val;
-          if (!val) emit("preview-visible-change", false);
+          if (!val) emit("preview-open-change", false);
         },
         "onUpdate:currentIndex": (val) => {
           previewIndex.value = val;

package/dist/{chunk-3VFZB5ZK.mjs → chunk-IQNZ4UEA.mjs}

@@ -23,6 +23,7 @@ import {
   nextTick
 } from "vue";
 import {
+  ANIMATION_DURATION_MS,
   classNames,
   coerceClassValue,
   mergeStyleValues,
@@ -199,15 +200,6 @@ var Modal = defineComponent({
       type: Boolean,
       default: false
     },
-    /**
-     * Disable teleport (useful for testing)
-     * @default false
-     * @internal
-     */
-    disableTeleport: {
-      type: Boolean,
-      default: false
-    },
     /**
      * Whether the modal is draggable by its header
      * @default false
@@ -217,7 +209,7 @@ var Modal = defineComponent({
       default: false
     }
   },
-  emits: ["update:open", "close", "cancel", "ok"],
+  emits: ["update:open", "close", "cancel", "ok", "after-close"],
   setup(props, { slots, emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
@@ -255,10 +247,12 @@ var Modal = defineComponent({
     const handleClose = () => {
       emit("update:open", false);
       emit("cancel");
+      emit("close");
     };
     const handleOk = () => {
       emit("ok");
       emit("update:open", false);
+      emit("close");
     };
     const handleMaskClick = (event) => {
       if (shouldCloseOnMaskClick(event, props.maskClosable)) {
@@ -305,7 +299,7 @@ var Modal = defineComponent({
     });
     watch(
       () => props.open,
-      async (nextVisible) => {
+      async (nextVisible, previousVisible, onCleanup) => {
         if (nextVisible) {
           hasBeenOpened.value = true;
           const active = document.activeElement;
@@ -314,9 +308,12 @@ var Modal = defineComponent({
           const el = closeButtonRef.value ?? dialogRef.value;
           el?.focus?.();
         } else {
-          emit("close");
           previousActiveElement.value?.focus?.();
           dragOffset.value = { x: 0, y: 0 };
+          if (previousVisible) {
+            const timer = window.setTimeout(() => emit("after-close"), ANIMATION_DURATION_MS);
+            onCleanup(() => window.clearTimeout(timer));
+          }
         }
       }
     );
@@ -474,7 +471,7 @@ var Modal = defineComponent({
           )
         ]
       );
-      return renderVueBodyTeleport([renderedWrapper], props.disableTeleport);
+      return renderVueBodyTeleport([renderedWrapper]);
     };
   }
 });

package/dist/{chunk-TUSWQVI2.mjs → chunk-JCGWN7WV.mjs}

@@ -71,6 +71,7 @@ var InfiniteScroll = defineComponent({
         threshold: props.threshold,
         direction: props.direction,
         root: containerRef.value,
+        inverse: props.inverse,
         onLoadMore: handleLoadMore
       });
       if (teardown) {

package/dist/{chunk-QAMXVTNN.mjs → chunk-JMVALNIO.mjs}

@@ -13,12 +13,17 @@ import {
   selectGroupLabelClasses,
   selectSearchInputClasses,
   selectEmptyStateClasses,
+  selectDoneActionClasses,
+  selectDoneButtonClasses,
   isOptionGroup,
   createSelectSearchDebouncer,
   getCreateSelectOptionLabel,
   flattenSelectOptions,
   resolveCreatableSelectOption,
   resolveSelectFilteredOptions,
+  getSelectVirtualItemHeight,
+  fixedSizeStrategy,
+  getPickerOptionAria,
   findFirstEnabledIndex as pickerFindFirstEnabledIndex,
   findLastEnabledIndex as pickerFindLastEnabledIndex,
   findNextEnabledIndex as pickerFindNextEnabledIndex,
@@ -119,6 +124,14 @@ var Select = defineComponent({
      * Enable search functionality
      */
     searchable: Boolean,
+    searchValue: {
+      type: String,
+      default: void 0
+    },
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
     /**
      * Allow multiple selection
      */
@@ -132,18 +145,9 @@ var Select = defineComponent({
       default: true
     },
     /**
-     * Text shown when no search results
-     * @default 'No options found'
+     * Text shown when the options list is empty or no search result matches
      */
-    noOptionsText: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Text shown when no data available
-     * @default 'No options available'
-     */
-    noDataText: {
+    emptyText: {
       type: String,
       default: void 0
     },
@@ -201,7 +205,7 @@ var Select = defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue", "change", "search", "create"],
+  emits: ["update:modelValue", "update:searchValue", "change", "search-change", "create"],
   setup(props, { emit }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
@@ -209,16 +213,36 @@ var Select = defineComponent({
     const listboxId = `tiger-select-listbox-${instanceId}`;
     const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
     const isOpen = ref(false);
-    const searchQuery = ref("");
+    const uncontrolledSearchValue = ref(props.defaultSearchValue);
+    const searchQuery = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const activeIndex = ref(-1);
     const createdOptions = ref([]);
     const dropdownRef = ref(null);
     const triggerRef = ref(null);
     const searchInputRef = ref(null);
+    const virtualScrollTop = ref(0);
+    const virtualScrollRef = ref(null);
+    watch(activeIndex, (idx) => {
+      if (!props.virtual || idx < 0) return;
+      const el = virtualScrollRef.value;
+      if (!el) return;
+      const itemH = getSelectVirtualItemHeight(props.size);
+      const top = idx * itemH;
+      if (top < el.scrollTop) el.scrollTop = top;
+      else if (top + itemH > el.scrollTop + props.listHeight)
+        el.scrollTop = top + itemH - props.listHeight;
+    });
     let searchDebouncer = createSelectSearchDebouncer({
       delay: props.searchDebounce,
-      onSearch: (query) => emit("search", query)
+      onSearchChange: (query) => emit("search-change", query)
     });
+    function updateSearchValue(query) {
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = query;
+      }
+      emit("update:searchValue", query);
+      searchDebouncer.schedule(query);
+    }
     const filteredOptions = computed(() => {
       return resolveSelectFilteredOptions(props.options, searchQuery.value, {
         searchable: props.searchable,
@@ -263,6 +287,13 @@ var Select = defineComponent({
     const showClearButton = computed(() => {
       return props.clearable && !props.disabled && props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "" && (!Array.isArray(props.modelValue) || props.modelValue.length > 0);
     });
+    const doneText = computed(
+      () => resolveLocaleText(
+        "Done",
+        mergedLocale.value?.common?.okText,
+        mergedLocale.value?.common?.closeText
+      )
+    );
     function isSelected(option) {
       if (props.multiple && Array.isArray(props.modelValue)) {
         return props.modelValue.includes(option.value);
@@ -298,7 +329,7 @@ var Select = defineComponent({
     }
     function closeDropdown() {
       isOpen.value = false;
-      searchQuery.value = "";
+      updateSearchValue("");
       activeIndex.value = -1;
     }
     function selectOption(option) {
@@ -342,8 +373,7 @@ var Select = defineComponent({
     }
     function handleSearchInput(event) {
       const target = event.target;
-      searchQuery.value = target.value;
-      searchDebouncer.schedule(target.value);
+      updateSearchValue(target.value);
     }
     function getActiveOption() {
       if (activeIndex.value < 0) {
@@ -541,7 +571,7 @@ var Select = defineComponent({
         searchDebouncer.cancel();
         searchDebouncer = createSelectSearchDebouncer({
           delay,
-          onSearch: (query) => emit("search", query)
+          onSearchChange: (query) => emit("search-change", query)
         });
       }
     );
@@ -558,7 +588,7 @@ var Select = defineComponent({
           {
             ref: triggerRef,
             type: "button",
-            class: triggerClasses,
+            class: classNames(triggerClasses, "pr-16"),
             disabled: props.disabled,
             onClick: toggleDropdown,
             onKeydown: handleTriggerKeyDown,
@@ -578,26 +608,35 @@ var Select = defineComponent({
                 )
               },
               displayText.value
+            )
+          ]
+        ),
+        h(
+          "span",
+          { class: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1" },
+          [
+            showClearButton.value && h(
+              "button",
+              {
+                type: "button",
+                class: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-select-ring,var(--tiger-primary,#2563eb))]",
+                "data-tiger-select-clear": "",
+                "aria-label": resolveLocaleText(
+                  "Clear selection",
+                  mergedLocale.value?.common?.clearText
+                ),
+                onClick: clearSelection
+              },
+              CloseIcon
             ),
-            h("span", { class: "flex items-center gap-1" }, [
-              showClearButton.value && h(
-                "span",
-                {
-                  class: "inline-flex",
-                  "data-tiger-select-clear": "",
-                  "aria-label": "Clear selection",
-                  onClick: clearSelection
-                },
-                CloseIcon
-              ),
-              h(
-                "span",
-                {
-                  class: classNames("inline-flex", isOpen.value && "rotate-180")
-                },
-                ChevronDownIcon
-              )
-            ])
+            h(
+              "span",
+              {
+                class: classNames("inline-flex", isOpen.value && "rotate-180"),
+                "aria-hidden": "true"
+              },
+              ChevronDownIcon
+            )
           ]
         ),
         // Dropdown
@@ -631,15 +670,17 @@ var Select = defineComponent({
               const renderOptionItem = (option, idx, displayLabel = option.label) => {
                 const selected = isSelected(option);
                 const active = idx === activeIndex.value;
+                const optionAria = getPickerOptionAria({
+                  selected,
+                  disabled: !!option.disabled
+                });
                 return h(
                   "div",
                   {
                     key: option.value,
                     id: getOptionId(idx),
                     "data-option-index": idx,
-                    role: "option",
-                    "aria-selected": selected,
-                    "aria-disabled": option.disabled ? true : void 0,
+                    ...optionAria,
                     tabindex: active ? 0 : -1,
                     class: getSelectOptionClasses(selected, !!option.disabled, props.size),
                     onMouseenter: () => {
@@ -657,6 +698,52 @@ var Select = defineComponent({
                   ]
                 );
               };
+              const hasGroups = filteredOptions.value.some(isOptionGroup);
+              if (props.virtual && !hasGroups) {
+                const flat = filteredOptions.value.filter(
+                  (o) => !isOptionGroup(o)
+                );
+                const all = creatableOption.value ? [...flat, creatableOption.value] : flat;
+                const itemH = getSelectVirtualItemHeight(props.size);
+                const { startIndex, endIndex, totalHeight } = fixedSizeStrategy(
+                  itemH
+                ).getRange(virtualScrollTop.value, props.listHeight, all.length, 5);
+                const visible = [];
+                for (let i = startIndex; i <= endIndex; i++) {
+                  const isCreate = creatableOption.value && i === all.length - 1;
+                  visible.push(
+                    renderOptionItem(
+                      all[i],
+                      i,
+                      isCreate ? getCreateSelectOptionLabel(all[i], props.createOptionText) : all[i].label
+                    )
+                  );
+                }
+                return h(
+                  "div",
+                  {
+                    ref: virtualScrollRef,
+                    "data-tiger-select-virtual": "",
+                    style: { maxHeight: `${props.listHeight}px`, overflowY: "auto" },
+                    onScroll: (e) => {
+                      virtualScrollTop.value = e.target.scrollTop;
+                    }
+                  },
+                  [
+                    h(
+                      "div",
+                      { style: { height: `${totalHeight}px`, position: "relative" } },
+                      [
+                        h(
+                          "div",
+                          { style: { transform: `translateY(${startIndex * itemH}px)` } },
+                          visible
+                        )
+                      ]
+                    )
+                  ]
+                );
+              }
               const optionNodes = filteredOptions.value.map((item) => {
                 if (isOptionGroup(item)) {
                   return h("div", { key: item.label }, [
@@ -712,16 +799,28 @@ var Select = defineComponent({
             })() : h(
               "div",
               { class: selectEmptyStateClasses },
-              props.options.length === 0 ? resolveLocaleText(
-                "No options available",
-                props.noDataText,
-                mergedLocale.value?.common?.emptyText
-              ) : resolveLocaleText(
+              resolveLocaleText(
                 "No options found",
-                props.noOptionsText,
+                props.emptyText,
                 mergedLocale.value?.common?.emptyText
               )
-            )
+            ),
+            h("div", { class: selectDoneActionClasses }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: selectDoneButtonClasses,
+                  onClick: closeDropdown,
+                  onKeydown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.stopPropagation();
+                    }
+                  }
+                },
+                doneText.value
+              )
+            ])
           ]
         )
       ]);

package/dist/{chunk-M5PGWW25.mjs → chunk-JPCMI3A4.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
-import {
-  ChartLegend
-} from "./chunk-VVS2CQS4.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
+} from "./chunk-PE5OA4YG.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";
+import {
+  ChartLegend
+} from "./chunk-HLPSHCXO.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 
 // src/components/RadarChart.ts
 import { defineComponent, computed, h, ref, useId } from "vue";
@@ -295,6 +295,15 @@ var RadarChart = defineComponent({
       hoveredPoint.value = null;
       handleHoverLeave();
     };
+    const showPointTooltipFromElement = (el, seriesIndex, pointIndex) => {
+      if (!props.hoverable) return;
+      const rect = el.getBoundingClientRect();
+      hoveredPoint.value = { seriesIndex, pointIndex };
+      handleHoverEnter(seriesIndex, {
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2
+      });
+    };
     const axisData = computed(() => {
       if (props.series && props.series.length > 0) return props.series[0]?.data ?? [];
       return props.data ?? [];
@@ -678,13 +687,34 @@ var RadarChart = defineComponent({
                           props.showTooltip && props.hoverable ? "cursor-pointer" : null,
                           "transition-[r] duration-150 ease-out"
                         ),
+                        role: props.showTooltip && props.hoverable ? "button" : "img",
+                        "aria-label": point.data.label ?? String(point.data.value),
+                        tabindex: props.showTooltip && props.hoverable ? 0 : void 0,
                         "data-radar-point": "true",
                         "data-series-index": seriesIndex,
                         "data-series-key": item.seriesKey,
                         "data-point-index": point.index,
                         onMouseenter: props.showTooltip && props.hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
                         onMousemove: props.showTooltip && props.hoverable ? handlePointMove : void 0,
-                        onMouseleave: props.showTooltip && props.hoverable ? handlePointLeave : void 0
+                        onMouseleave: props.showTooltip && props.hoverable ? handlePointLeave : void 0,
+                        onFocus: props.showTooltip && props.hoverable ? (e) => showPointTooltipFromElement(
+                          e.currentTarget,
+                          seriesIndex,
+                          point.index
+                        ) : void 0,
+                        onBlur: props.showTooltip && props.hoverable ? handlePointLeave : void 0,
+                        onKeydown: props.showTooltip && props.hoverable ? (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            showPointTooltipFromElement(
+                              e.currentTarget,
+                              seriesIndex,
+                              point.index
+                            );
+                          } else if (e.key === "Escape") {
+                            handlePointLeave();
+                          }
+                        } : void 0
                       });
                     }) : null
                   ]
@@ -725,7 +755,7 @@ var RadarChart = defineComponent({
       );
       const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: hoveredPoint.value !== null && tooltipContent.value !== "",
+        open: hoveredPoint.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

package/dist/{chunk-YSUT2GRP.mjs → chunk-KBJANUZZ.mjs}

@@ -1,3 +1,6 @@
+import {
+  ChartTooltip
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";
@@ -30,6 +33,8 @@ var GaugeChart = defineComponent({
     showTicks: { type: Boolean, default: true },
     tickCount: { type: Number, default: 5 },
     valueFormatter: { type: Function },
+    tooltipFormatter: { type: Function },
+    showTooltip: { type: Boolean, default: true },
     label: { type: String },
     segments: {
       type: Array
@@ -67,6 +72,26 @@ var GaugeChart = defineComponent({
     onBeforeUnmount(() => {
       animCtrl?.stop();
     });
+    const wrapperRef = ref(null);
+    const tooltipState = ref({ open: false, x: 0, y: 0 });
+    const handleTooltipMove = (e) => {
+      if (!props.showTooltip) return;
+      tooltipState.value = { open: true, x: e.clientX, y: e.clientY };
+    };
+    const handleTooltipLeave = () => {
+      tooltipState.value = { ...tooltipState.value, open: false };
+    };
+    const handleTooltipFocus = () => {
+      if (!props.showTooltip) return;
+      const rect = wrapperRef.value?.getBoundingClientRect();
+      if (rect) {
+        tooltipState.value = {
+          open: true,
+          x: rect.left + rect.width / 2,
+          y: rect.top + rect.height / 2
+        };
+      }
+    };
     const ticks = computed(
       () => props.showTicks ? computeGaugeTicks(
         cx.value,
@@ -110,7 +135,8 @@ var GaugeChart = defineComponent({
       }) ?? [];
       const needlePath = createGaugeNeedlePath(c, cY, r - aw - 6, animatedAngle.value);
       const formattedValue = props.valueFormatter ? props.valueFormatter(props.value) : `${props.value}`;
-      return h(
+      const tooltipContent = props.tooltipFormatter ? props.tooltipFormatter(props.value) : props.label ? `${props.label}: ${formattedValue}` : formattedValue;
+      const canvas = h(
         ChartCanvas,
         {
           width: props.width,
@@ -219,6 +245,29 @@ var GaugeChart = defineComponent({
           ]
         }
       );
+      return h(
+        "div",
+        {
+          ref: wrapperRef,
+          class: "inline-block relative",
+          tabindex: props.showTooltip ? 0 : void 0,
+          role: "img",
+          "aria-label": props.label ? `${props.label}: ${formattedValue}` : formattedValue,
+          onMousemove: handleTooltipMove,
+          onMouseleave: handleTooltipLeave,
+          onFocus: handleTooltipFocus,
+          onBlur: handleTooltipLeave
+        },
+        [
+          canvas,
+          props.showTooltip ? h(ChartTooltip, {
+            content: tooltipContent,
+            open: tooltipState.value.open && tooltipContent !== "",
+            x: tooltipState.value.x,
+            y: tooltipState.value.y
+          }) : null
+        ]
+      );
     };
   }
 });

package/dist/{chunk-M4EP4OVR.mjs → chunk-KE6RGD4Y.mjs}

@@ -127,7 +127,8 @@ function useFloatingPopup(options) {
     y,
     actualPlacement,
     floatingStyles,
-    triggerHandlers
+    triggerHandlers,
+    closeAndRestoreFocus
   };
 }