@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/chunk-VJ5OA6JN.mjs

@@ -0,0 +1,116 @@
+// src/components/ChartGrid.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  chartGridLineClasses,
+  classNames,
+  coerceClassValue,
+  getChartGridLines
+} from "@expcat/tigercat-core";
+var ChartGrid = defineComponent({
+  name: "TigerChartGrid",
+  inheritAttrs: false,
+  props: {
+    xScale: {
+      type: Object
+    },
+    yScale: {
+      type: Object
+    },
+    xRange: {
+      type: Array
+    },
+    yRange: {
+      type: Array
+    },
+    width: {
+      type: Number
+    },
+    height: {
+      type: Number
+    },
+    show: {
+      type: String,
+      default: "both"
+    },
+    xTicks: {
+      type: Number,
+      default: 5
+    },
+    yTicks: {
+      type: Number,
+      default: 5
+    },
+    xTickValues: {
+      type: Array
+    },
+    yTickValues: {
+      type: Array
+    },
+    lineStyle: {
+      type: String,
+      default: "solid"
+    },
+    strokeWidth: {
+      type: Number,
+      default: 1
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    className: {
+      type: String
+    }
+  },
+  setup(props, { attrs }) {
+    const lines = computed(
+      () => getChartGridLines({
+        xScale: props.xScale,
+        yScale: props.yScale,
+        xRange: props.xRange,
+        yRange: props.yRange,
+        width: props.width,
+        height: props.height,
+        show: props.show,
+        xTicks: props.xTicks,
+        yTicks: props.yTicks,
+        xTickValues: props.xTickValues,
+        yTickValues: props.yTickValues,
+        lineStyle: props.lineStyle,
+        strokeWidth: props.strokeWidth
+      })
+    );
+    const gridClasses = computed(() => classNames(coerceClassValue(attrs.class), props.className));
+    return () => h(
+      "g",
+      {
+        ...attrs,
+        class: gridClasses.value,
+        transform: `translate(${props.x}, ${props.y})`,
+        "aria-hidden": "true"
+      },
+      lines.value.map(
+        (line) => h("line", {
+          key: line.key,
+          x1: line.x1,
+          y1: line.y1,
+          x2: line.x2,
+          y2: line.y2,
+          class: chartGridLineClasses,
+          "stroke-width": line.strokeWidth,
+          "stroke-dasharray": line.strokeDasharray
+        })
+      )
+    );
+  }
+});
+var ChartGrid_default = ChartGrid;
+
+export {
+  ChartGrid,
+  ChartGrid_default
+};

package/dist/{chunk-B67RJSXR.mjs → chunk-VJR5UFDE.mjs}

@@ -23,18 +23,33 @@ var Countdown = defineComponent({
       type: [String, Number, Date],
       default: void 0
     },
+    /**
+     * First-paint / SSR clock snapshot only. After mount, ticks use `Date.now()`.
+     * Changing `now` updates the display and does not restart the interval.
+     */
     now: {
       type: [String, Number, Date],
       default: void 0
     },
+    /**
+     * `HH` is total hours unless `D`/`DD` is present. `SSS` needs a smaller interval.
+     * @default 'HH:mm:ss'
+     */
     format: {
       type: String,
       default: COUNTDOWN_DEFAULT_FORMAT
     },
+    /**
+     * Tick period in ms. `<= 0` disables the timer.
+     * @default 1000
+     */
     interval: {
       type: Number,
       default: COUNTDOWN_DEFAULT_INTERVAL_MS
     },
+    /**
+     * Visible title above the value. Not an HTML tooltip. Slot `title` wins.
+     */
     title: {
       type: String,
       default: void 0
@@ -61,8 +76,10 @@ var Countdown = defineComponent({
     }
   },
   emits: ["change", "finish"],
-  setup(props, { attrs, emit }) {
-    const remaining = ref(getCountdownRemaining(props.value, props.now));
+  setup(props, { attrs, emit, slots }) {
+    const remaining = ref(
+      props.now !== void 0 ? getCountdownRemaining(props.value, props.now) : 0
+    );
     const formatted = computed(() => formatCountdown(remaining.value, props.format));
     let finished = remaining.value <= 0;
     let mounted = false;
@@ -71,30 +88,42 @@ var Countdown = defineComponent({
       if (timerId !== null) clearInterval(timerId);
       timerId = null;
     };
+    const syncRemainingFromSnapshot = () => {
+      remaining.value = props.now !== void 0 || !mounted ? getCountdownRemaining(props.value, props.now) : getCountdownRemaining(props.value);
+      finished = remaining.value <= 0;
+    };
     const tick = () => {
       const nextRemaining = getCountdownRemaining(props.value);
       const payload = createCountdownPayload(nextRemaining, props.format);
       remaining.value = nextRemaining;
       emit("change", payload);
-      if (nextRemaining <= 0 && !finished) {
-        finished = true;
-        emit("finish", payload);
+      if (nextRemaining <= 0) {
+        if (!finished) {
+          finished = true;
+          emit("finish", payload);
+        }
         stopTimer();
       }
     };
     const setupTimer = () => {
       stopTimer();
       if (!mounted || props.interval <= 0 || props.value === void 0) return;
+      if (getCountdownRemaining(props.value) <= 0) return;
       timerId = setInterval(tick, props.interval);
     };
     watch(
-      () => [props.value, props.now],
+      () => props.value,
+      () => {
+        syncRemainingFromSnapshot();
+        setupTimer();
+      }
+    );
+    watch(
+      () => props.now,
       () => {
         remaining.value = getCountdownRemaining(props.value, props.now);
         finished = remaining.value <= 0;
-        setupTimer();
-      },
-      { immediate: true }
+      }
     );
     watch(
       () => [props.interval, props.format],
@@ -102,36 +131,46 @@ var Countdown = defineComponent({
     );
     onMounted(() => {
       mounted = true;
+      if (props.now === void 0) {
+        remaining.value = getCountdownRemaining(props.value);
+        finished = remaining.value <= 0;
+      }
       setupTimer();
     });
     onBeforeUnmount(() => {
       mounted = false;
       stopTimer();
     });
-    return () => h(
-      "div",
-      {
-        ...attrs,
-        class: classNames(countdownBaseClasses, props.className, coerceClassValue(attrs.class))
-      },
-      [
-        props.title ? h("div", { class: getCountdownTitleClasses(props.size) }, props.title) : null,
-        h("div", { class: countdownValueWrapperClasses }, [
-          props.prefix ? h("span", { class: countdownPrefixClasses }, props.prefix) : null,
-          h(
-            "span",
-            {
-              class: getCountdownValueClasses(props.size),
-              role: "timer",
-              "aria-live": "polite",
-              "aria-label": props.ariaLabel
-            },
-            formatted.value
-          ),
-          props.suffix ? h("span", { class: countdownSuffixClasses }, props.suffix) : null
-        ])
-      ]
-    );
+    return () => {
+      const titleNode = slots.title?.() ?? props.title;
+      const prefixNode = slots.prefix?.() ?? props.prefix;
+      const suffixNode = slots.suffix?.() ?? props.suffix;
+      const rootAriaLabel = props.ariaLabel ?? attrs["aria-label"];
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(countdownBaseClasses, props.className, coerceClassValue(attrs.class)),
+          role: rootAriaLabel ? "group" : attrs.role,
+          "aria-label": rootAriaLabel
+        },
+        [
+          titleNode ? h("div", { class: getCountdownTitleClasses(props.size) }, titleNode) : null,
+          h("div", { class: countdownValueWrapperClasses }, [
+            prefixNode ? h("span", { class: countdownPrefixClasses }, prefixNode) : null,
+            h(
+              "span",
+              {
+                class: getCountdownValueClasses(props.size),
+                role: "timer"
+              },
+              formatted.value
+            ),
+            suffixNode ? h("span", { class: countdownSuffixClasses }, suffixNode) : null
+          ])
+        ]
+      );
+    };
   }
 });
 var Countdown_default = Countdown;

package/dist/{chunk-TCV6YPH5.mjs → chunk-VMM2KJAS.mjs}

@@ -3,10 +3,10 @@ import {
   useVueBodyScrollLock,
   useVueEscapeKey,
   useVueFocusTrap
-} from "./chunk-Q7Y22OFX.mjs";
+} from "./chunk-Y63TRXZO.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Spotlight.ts
 import {
@@ -17,25 +17,29 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
+  useId,
   watch
 } from "vue";
 import {
   captureActiveElement,
   classNames,
   coerceClassValue,
+  findSpotlightShortcutItem,
   focusFirst,
+  getEmptyLabels,
   getInitialPickerActiveIndex,
   getPickerComboboxAria,
   getPickerListboxAria,
   getPickerNavigationIndex,
   getPickerOptionAria,
   getPickerOptionId,
+  getSpotlightLabels,
   getSpotlightOptionClasses,
   getSpotlightSearchState,
   getSpotlightShortcutLabel,
+  isSpotlightToggleHotkey,
   mergeStyleValues,
   mergeTigerLocale,
-  resolveLocaleText,
   restoreFocus,
   shouldCloseOnMaskClick,
   spotlightEmptyClasses,
@@ -43,14 +47,15 @@ import {
   spotlightGroupLabelClasses,
   spotlightHeaderClasses,
   spotlightInputClasses,
+  spotlightItemDescriptionClasses,
   spotlightListClasses,
   spotlightMaskClasses,
   spotlightPanelClasses,
   spotlightRootClasses,
-  spotlightTitleClasses
+  spotlightShortcutClasses,
+  spotlightTitleClasses,
+  OVERLAY_Z_INDEX
 } from "@expcat/tigercat-core";
-var spotlightIdCounter = 0;
-var createSpotlightId = () => `tiger-spotlight-${++spotlightIdCounter}`;
 var Spotlight = defineComponent({
   name: "TigerSpotlight",
   inheritAttrs: false,
@@ -77,7 +82,7 @@ var Spotlight = defineComponent({
     },
     title: {
       type: String,
-      default: "Spotlight"
+      default: void 0
     },
     placeholder: {
       type: String,
@@ -113,7 +118,7 @@ var Spotlight = defineComponent({
     },
     zIndex: {
       type: Number,
-      default: 1e3
+      default: OVERLAY_Z_INDEX.modal
     },
     className: {
       type: String,
@@ -131,28 +136,35 @@ var Spotlight = defineComponent({
       type: Number,
       default: void 0
     },
+    hotkey: {
+      type: [Boolean, String],
+      default: true
+    },
     style: {
       type: Object,
       default: void 0
-    },
-    disableTeleport: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ["update:open", "open-change", "update:query", "query-change", "select"],
-  setup(props, { emit, attrs, slots }) {
+  setup(props, { emit, attrs, slots, expose }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const placeholderText = computed(
-      () => resolveLocaleText("Search", props.placeholder, mergedLocale.value?.common?.searchPlaceholder)
+    const labels = computed(() => getSpotlightLabels(mergedLocale.value));
+    const emptyLabels = computed(() => getEmptyLabels(mergedLocale.value));
+    const resolvedTitle = computed(
+      () => props.title === void 0 ? labels.value.title : props.title
     );
+    const placeholderText = computed(() => props.placeholder ?? labels.value.placeholder);
+    const emptyMessage = computed(() => props.emptyText ?? emptyLabels.value.noResults);
     const uncontrolledOpen = ref(props.defaultOpen);
     const uncontrolledQuery = ref(props.defaultQuery);
     const activeIndex = ref(-1);
-    const instanceId = createSpotlightId();
-    const titleId = `${instanceId}-title`;
-    const listboxId = `${instanceId}-listbox`;
+    const instanceId = useId();
+    const dialogId = `tiger-spotlight-${instanceId}`;
+    const titleId = `${dialogId}-title`;
+    const listboxId = `${dialogId}-listbox`;
+    const overlayHostId = `${dialogId}-overlay-host`;
+    const rootRef = ref(null);
     const dialogRef = ref(null);
     const inputRef = ref(null);
     const previousActiveElement = ref(null);
@@ -175,6 +187,13 @@ var Spotlight = defineComponent({
       emit("query-change", nextQuery);
     };
     const closeSpotlight = () => setOpenValue(false);
+    const openSpotlight = () => setOpenValue(true);
+    const toggleSpotlight = () => setOpenValue(!resolvedOpen.value);
+    expose({
+      open: openSpotlight,
+      close: closeSpotlight,
+      toggle: toggleSpotlight
+    });
     const selectItem = (item) => {
       if (item.disabled) return;
       emit("select", item);
@@ -198,7 +217,8 @@ var Spotlight = defineComponent({
             searchState.value.flatResults,
             activeIndex.value,
             event.key,
-            (result) => result.item.disabled === true
+            (result) => result.item.disabled === true,
+            { wrap: true }
           );
           break;
         case "Enter": {
@@ -219,16 +239,44 @@ var Spotlight = defineComponent({
       }
     };
     useVueBodyScrollLock(resolvedOpen);
-    useVueFocusTrap({ enabled: resolvedOpen, containerRef: dialogRef });
+    useVueFocusTrap({ enabled: resolvedOpen, containerRef: rootRef, inert: true });
     let cleanupEscape;
-    onMounted(() => {
-      cleanupEscape = useVueEscapeKey({ enabled: resolvedOpen, onEscape: closeSpotlight });
-      if (resolvedOpen.value) {
-        nextTick(() => focusFirst([inputRef.value, dialogRef.value]));
+    const onDocumentKeyDown = (event) => {
+      if (isSpotlightToggleHotkey(event, props.hotkey)) {
+        event.preventDefault();
+        toggleSpotlight();
+        return;
       }
+      if (!resolvedOpen.value) return;
+      const item = findSpotlightShortcutItem(event, props.items);
+      if (!item) return;
+      event.preventDefault();
+      selectItem(item);
+    };
+    onMounted(() => {
+      cleanupEscape = useVueEscapeKey({
+        enabled: resolvedOpen,
+        onEscape: closeSpotlight,
+        layerRef: rootRef
+      });
+      document.addEventListener("keydown", onDocumentKeyDown);
     });
-    onBeforeUnmount(() => cleanupEscape?.());
-    watch([resolvedOpen, resolvedQuery, () => props.items], updateActiveIndex, { immediate: true });
+    onBeforeUnmount(() => {
+      cleanupEscape?.();
+      document.removeEventListener("keydown", onDocumentKeyDown);
+    });
+    watch(
+      [
+        resolvedOpen,
+        resolvedQuery,
+        () => props.items,
+        () => props.filterItem,
+        () => props.limit,
+        () => props.defaultActiveFirstItem
+      ],
+      updateActiveIndex,
+      { immediate: true }
+    );
     watch(
       resolvedOpen,
       async (isOpen) => {
@@ -240,19 +288,57 @@ var Spotlight = defineComponent({
         await nextTick();
         focusFirst([inputRef.value, dialogRef.value]);
       },
-      { flush: "post" }
+      { flush: "post", immediate: true }
     );
+    watch(activeIndex, (index) => {
+      if (!resolvedOpen.value || index < 0) return;
+      document.getElementById(getPickerOptionId(listboxId, index))?.scrollIntoView({ block: "nearest" });
+    });
     return () => {
       if (!resolvedOpen.value) return null;
       const state = searchState.value;
       const activeResult = state.flatResults[activeIndex.value];
       const activeOptionId = activeResult ? getPickerOptionId(listboxId, activeResult.flatIndex) : void 0;
+      const showTitle = Boolean(resolvedTitle.value);
+      const renderOption = (result) => {
+        const active = result.flatIndex === activeIndex.value;
+        const shortcutLabel = getSpotlightShortcutLabel(result.item.shortcut);
+        const iconNode = slots.icon ? slots.icon({ item: result.item }) : result.item.icon;
+        return h(
+          "div",
+          {
+            key: String(result.item.key),
+            id: getPickerOptionId(listboxId, result.flatIndex),
+            ...getPickerOptionAria({
+              selected: false,
+              disabled: result.item.disabled
+            }),
+            class: getSpotlightOptionClasses(active, result.item.disabled === true),
+            onMouseenter: () => {
+              if (result.item.disabled) return;
+              activeIndex.value = result.flatIndex;
+            },
+            onMousedown: (event) => event.preventDefault(),
+            onClick: () => selectItem(result.item)
+          },
+          [
+            iconNode ? h("span", { class: "shrink-0" }, iconNode) : null,
+            h("span", { class: "min-w-0 flex-1" }, [
+              h("span", { class: "block truncate text-sm font-medium" }, result.item.label),
+              result.item.description ? h("span", { class: spotlightItemDescriptionClasses }, result.item.description) : null
+            ]),
+            shortcutLabel ? h("kbd", { class: spotlightShortcutClasses }, shortcutLabel) : null
+          ]
+        );
+      };
       const content = h(
         "div",
         {
+          ref: rootRef,
           class: spotlightRootClasses,
           style: { zIndex: props.zIndex },
-          "data-tiger-spotlight-root": ""
+          "data-tiger-spotlight-root": "",
+          "data-tiger-overlay-layer": ""
         },
         [
           props.mask ? h("div", {
@@ -265,10 +351,12 @@ var Spotlight = defineComponent({
             {
               ...attrs,
               ref: dialogRef,
-              id: instanceId,
+              id: dialogId,
               role: "dialog",
               "aria-modal": "true",
-              "aria-labelledby": props.title ? titleId : void 0,
+              "aria-labelledby": showTitle ? titleId : void 0,
+              "aria-label": showTitle ? void 0 : labels.value.title,
+              "aria-owns": overlayHostId,
               tabindex: -1,
               class: classNames(
                 spotlightPanelClasses,
@@ -282,7 +370,7 @@ var Spotlight = defineComponent({
             },
             [
               h("div", { class: spotlightHeaderClasses }, [
-                props.title ? h("div", { id: titleId, class: spotlightTitleClasses }, props.title) : null,
+                showTitle ? h("div", { id: titleId, class: spotlightTitleClasses }, resolvedTitle.value) : null,
                 h("input", {
                   ref: inputRef,
                   value: resolvedQuery.value,
@@ -294,95 +382,50 @@ var Spotlight = defineComponent({
                   ...getPickerComboboxAria({
                     expanded: true,
                     listboxId,
-                    activeOptionId
+                    activeOptionId,
+                    autocomplete: "list"
                   }),
                   onInput: (event) => setQueryValue(event.target.value),
                   onKeydown: handleKeyDown
                 })
               ]),
-              state.flatResults.length > 0 ? h(
+              h(
                 "div",
                 {
                   ...getPickerListboxAria({ id: listboxId, label: props.listboxLabel }),
                   class: spotlightListClasses
                 },
-                state.groups.map(
-                  (group, groupIndex) => h(
-                    "div",
-                    {
-                      key: group.label ?? `group-${groupIndex}`,
-                      class: spotlightGroupClasses,
-                      role: group.label ? "group" : void 0,
-                      "aria-label": group.label
-                    },
-                    [
-                      group.label ? h("div", { class: spotlightGroupLabelClasses }, group.label) : null,
-                      ...group.items.map((result) => {
-                        const active = result.flatIndex === activeIndex.value;
-                        const shortcutLabel = getSpotlightShortcutLabel(result.item.shortcut);
-                        const iconNode = slots.icon ? slots.icon({ item: result.item }) : result.item.icon;
-                        return h(
+                state.groups.flatMap((group, groupIndex) => {
+                  const options = group.items.map(renderOption);
+                  if (!group.label) return options;
+                  return [
+                    h(
+                      "div",
+                      {
+                        key: group.label ?? `group-${groupIndex}`,
+                        class: spotlightGroupClasses,
+                        role: "group",
+                        "aria-label": group.label
+                      },
+                      [
+                        h(
                           "div",
-                          {
-                            key: String(result.item.key),
-                            id: getPickerOptionId(listboxId, result.flatIndex),
-                            ...getPickerOptionAria({
-                              selected: active,
-                              disabled: result.item.disabled
-                            }),
-                            class: getSpotlightOptionClasses(
-                              active,
-                              result.item.disabled === true
-                            ),
-                            onMouseenter: () => {
-                              activeIndex.value = result.flatIndex;
-                            },
-                            onMousedown: (event) => event.preventDefault(),
-                            onClick: () => selectItem(result.item)
-                          },
-                          [
-                            iconNode ? h("span", { class: "shrink-0" }, iconNode) : null,
-                            h("span", { class: "min-w-0 flex-1" }, [
-                              h(
-                                "span",
-                                { class: "block truncate text-sm font-medium" },
-                                result.item.label
-                              ),
-                              result.item.description ? h(
-                                "span",
-                                {
-                                  class: "block truncate text-xs text-[var(--tiger-spotlight-item-description,var(--tiger-text-muted,#6b7280))]"
-                                },
-                                result.item.description
-                              ) : null
-                            ]),
-                            shortcutLabel ? h(
-                              "kbd",
-                              {
-                                class: "shrink-0 rounded border border-[var(--tiger-spotlight-shortcut-border,var(--tiger-border,#d1d5db))] px-1.5 py-0.5 text-xs text-[var(--tiger-spotlight-shortcut-text,var(--tiger-text-muted,#6b7280))]"
-                              },
-                              shortcutLabel
-                            ) : null
-                          ]
-                        );
-                      })
-                    ]
-                  )
-                )
-              ) : h(
-                "div",
-                { class: spotlightEmptyClasses },
-                resolveLocaleText(
-                  "No results found",
-                  props.emptyText,
-                  mergedLocale.value?.common?.emptyText
-                )
-              )
+                          { class: spotlightGroupLabelClasses, "aria-hidden": "true" },
+                          group.label
+                        ),
+                        ...options
+                      ]
+                    )
+                  ];
+                })
+              ),
+              state.flatResults.length === 0 ? h("div", { class: spotlightEmptyClasses }, emptyMessage.value) : null
             ]
-          )
+          ),
+          h("div", { id: overlayHostId, class: "contents", "data-tiger-overlay-host": "" })
         ]
       );
-      return renderVueBodyTeleport(content, props.disableTeleport);
+      return renderVueBodyTeleport(content);
     };
   }
 });