@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-Q7Y22OFX.mjs → chunk-VFRB5L7W.mjs}

@@ -3,18 +3,33 @@ import {
   getFocusTrapNavigation,
   getFocusableElements,
   isEventOutside,
+  isFocusInForeignOverlay,
   lockBodyScroll,
+  setBackgroundInert,
   computeFloatingPosition,
   autoUpdateFloating,
   resolveAnchoredOverlayTarget,
   getAnchoredOverlayTabTarget,
   getAnchoredOverlayLayoutClasses,
-  FLOATING_OVERLAY_Z_INDEX,
+  getOverlayDirLang,
+  isBrowser,
+  OVERLAY_Z_INDEX,
   getTransformOrigin,
   restoreFocus,
+  captureActiveElement,
+  focusFirst,
   registerEscapeDismiss
 } from "@expcat/tigercat-core";
-import { h, ref, computed, Teleport, watch, onBeforeUnmount } from "vue";
+import {
+  h,
+  ref,
+  computed,
+  Teleport,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  toValue
+} from "vue";
 var OVERLAY_LAYER_SELECTOR = "[data-tiger-overlay-layer]";
 function resolveOverlayLayer(element) {
   return element?.closest(OVERLAY_LAYER_SELECTOR) ?? null;
@@ -26,6 +41,7 @@ function useVueClickOutside({
   onOutsideClick,
   defer = false
 }) {
+  if (!isBrowser()) return () => void 0;
   let timer;
   const handler = (event) => {
     if (!enabled.value) return;
@@ -52,6 +68,7 @@ function useVueEscapeKey({
   onEscape,
   layerRef
 }) {
+  if (!isBrowser()) return () => void 0;
   let removeEntry;
   const stop = watch(
     enabled,
@@ -70,60 +87,133 @@ function useVueBodyScrollLock(enabled) {
   watch(
     enabled,
     (isEnabled, _prevEnabled, onCleanup) => {
-      if (!isEnabled) return;
+      if (!isEnabled || !isBrowser()) return;
       const unlock = lockBodyScroll();
       onCleanup(() => unlock());
     },
     { immediate: true }
   );
 }
-function renderVueBodyTeleport(children, disabled = false) {
-  const normalizedChildren = children == null ? [] : Array.isArray(children) ? children : [children];
-  return h(Teleport, { to: "body", disabled }, normalizedChildren);
+function useVueBackgroundInert(enabled, containerRef) {
+  watch(
+    [enabled, containerRef],
+    ([isEnabled, container], _prev, onCleanup) => {
+      if (!isEnabled || !container || !isBrowser()) return;
+      const release = setBackgroundInert(container);
+      onCleanup(() => release());
+    },
+    { immediate: true, flush: "post" }
+  );
 }
-function renderVueOverlayTeleport(children, target, disabled = false) {
-  if (children == null || typeof children === "boolean") return children;
-  const layeredChildren = h("div", { class: "contents", "data-tiger-overlay-layer": "" }, [
+function wrapVueOverlayLayer(children, target) {
+  const dirLang = getOverlayDirLang(target);
+  return h("div", { class: "contents", "data-tiger-overlay-layer": "", ...dirLang }, [
     children,
     h("div", { class: "contents", "data-tiger-overlay-host": "" })
   ]);
-  if (disabled || !target) return layeredChildren;
+}
+function renderVueBodyTeleport(children, disabled = false) {
+  if (children == null || typeof children === "boolean") return children;
+  const target = isBrowser() ? resolveAnchoredOverlayTarget(null) : null;
+  const layeredChildren = wrapVueOverlayLayer(children, target);
+  if (disabled || !isBrowser()) {
+    return layeredChildren;
+  }
+  return h(Teleport, { to: target ?? "body", disabled: !target }, [layeredChildren]);
+}
+function renderVueOverlayTeleport(children, target, disabled = false) {
+  if (children == null || typeof children === "boolean") return children;
+  const layeredChildren = wrapVueOverlayLayer(children, target);
+  if (disabled || !target || !isBrowser()) return layeredChildren;
   return h(Teleport, { to: target }, [layeredChildren]);
 }
-function useVueFocusTrap({ enabled, containerRef }) {
+function useVueOverlayPortalTarget() {
+  const anchorRef = ref(null);
+  const target = ref(isBrowser() ? resolveAnchoredOverlayTarget(null) : null);
+  const resolveTarget = () => {
+    target.value = isBrowser() ? resolveAnchoredOverlayTarget(anchorRef.value) : null;
+  };
+  onMounted(resolveTarget);
+  watch(anchorRef, resolveTarget, { flush: "post" });
+  return { anchorRef, target };
+}
+function useVueFocusTrap({
+  enabled,
+  containerRef,
+  inert = false,
+  autoFocus = false
+}) {
+  let releaseInert;
+  let detachTrap;
+  let restoreTarget = null;
+  const detach = () => {
+    detachTrap?.();
+    detachTrap = void 0;
+    releaseInert?.();
+    releaseInert = void 0;
+  };
+  const restore = () => {
+    if (!autoFocus) return;
+    restoreFocus(restoreTarget);
+    restoreTarget = null;
+  };
+  const teardown = () => {
+    detach();
+    restore();
+  };
   watch(
-    [enabled, containerRef],
-    ([isEnabled, container], _previous, onCleanup) => {
-      if (!isEnabled || !container) return;
+    enabled,
+    (isEnabled) => {
+      if (autoFocus && isEnabled && !restoreTarget) {
+        restoreTarget = captureActiveElement();
+      }
+      if (!isEnabled || !isBrowser()) teardown();
+    },
+    { flush: "sync", immediate: true }
+  );
+  watch(
+    [enabled, containerRef, () => toValue(inert)],
+    ([isEnabled, container, inertEnabled]) => {
+      detach();
+      if (!isEnabled || !container || !isBrowser()) return;
       const ownerDocument = container.ownerDocument;
+      releaseInert = inertEnabled ? setBackgroundInert(container) : void 0;
+      if (autoFocus) {
+        const focusables = getFocusableElements(container);
+        focusFirst([...focusables, container]);
+      }
       const handler = (event) => {
-        if (!(event.target instanceof Node) || !container.contains(event.target)) return;
         const focusables = getFocusableElements(container);
         const activeElement = ownerDocument.activeElement;
+        const inside = activeElement instanceof Node && container.contains(activeElement);
+        if (!inside) {
+          if (event.key !== "Tab") return;
+          if (isFocusInForeignOverlay(container, activeElement)) return;
+          event.preventDefault();
+          const next = event.shiftKey ? focusables[focusables.length - 1] : focusables[0];
+          next?.focus();
+          return;
+        }
         const navigation = getFocusTrapNavigation(event, focusables, activeElement);
-        if (!navigation.shouldHandle || !navigation.next) return;
+        if (!navigation.shouldHandle) return;
         event.preventDefault();
-        navigation.next.focus();
+        navigation.next?.focus();
       };
       ownerDocument.addEventListener("keydown", handler, true);
-      onCleanup(() => ownerDocument.removeEventListener("keydown", handler, true));
+      detachTrap = () => ownerDocument.removeEventListener("keydown", handler, true);
     },
     { immediate: true, flush: "post" }
   );
+  onBeforeUnmount(teardown);
 }
 function useVueFloating(options) {
-  const {
-    referenceRef,
-    floatingRef,
-    enabled,
-    placement: initialPlacement = "bottom",
-    offset: offsetDistance = 8,
-    arrowRef,
-    onPlacementChange
-  } = options;
+  const { referenceRef, floatingRef, enabled, onPlacementChange } = options;
+  const requestedPlacement = () => toValue(options.placement) ?? "bottom";
+  const requestedOffset = () => toValue(options.offset) ?? 8;
+  const requestedArrow = () => toValue(options.arrowRef) ?? null;
   const x = ref(0);
   const y = ref(0);
-  const placement = ref(initialPlacement);
+  const placement = ref(requestedPlacement());
   const arrowX = ref(void 0);
   const arrowY = ref(void 0);
   const isPositioned = ref(false);
@@ -136,11 +226,11 @@ function useVueFloating(options) {
     const floating = floatingRef.value;
     if (!enabled.value || !reference || !floating) return;
     const floatingOptions = {
-      placement: initialPlacement,
-      offset: offsetDistance,
+      placement: requestedPlacement(),
+      offset: requestedOffset(),
       flip: true,
       shift: true,
-      arrowElement: arrowRef?.value
+      arrowElement: requestedArrow()
     };
     const result = await computeFloatingPosition(
       reference,
@@ -164,14 +254,21 @@ function useVueFloating(options) {
     isPositioned.value = true;
   };
   watch(
-    [enabled, referenceRef, floatingRef],
+    () => [
+      enabled.value,
+      referenceRef.value,
+      floatingRef.value,
+      requestedPlacement(),
+      requestedOffset(),
+      requestedArrow()
+    ],
     ([isEnabled, reference, floating]) => {
       updateRequest += 1;
       if (cleanup) {
         cleanup();
         cleanup = null;
       }
-      if (!isEnabled || !reference || !floating) {
+      if (!isEnabled || !reference || !floating || !isBrowser()) {
         isPositioned.value = false;
         return;
       }
@@ -199,32 +296,19 @@ function useVueFloating(options) {
   };
 }
 function useVueAnchoredOverlay(options) {
-  const target = ref(null);
   const floatingLayerRef = computed(
     () => resolveOverlayLayer(options.floatingRef.value) ?? options.floatingRef.value
   );
   const portalEnabled = () => typeof options.portal === "object" ? options.portal.value : options.portal ?? true;
   const optionEnabled = (value) => typeof value === "object" ? value.value : Boolean(value);
-  const targetSources = [
-    options.enabled,
-    options.referenceRef,
-    ...typeof options.portal === "object" ? [options.portal] : []
-  ];
-  watch(
-    targetSources,
-    () => {
-      if (!portalEnabled()) {
-        target.value = null;
-        return;
-      }
-      target.value = resolveAnchoredOverlayTarget(options.referenceRef.value);
-    },
-    { immediate: true, flush: "post" }
-  );
+  const target = computed(() => {
+    if (!portalEnabled() || !isBrowser()) return null;
+    return toValue(options.getContainer) ?? resolveAnchoredOverlayTarget(options.referenceRef.value);
+  });
   watch(
     [options.enabled, options.floatingRef],
     ([enabled, floating2], _previous, onCleanup) => {
-      if (!enabled || !floating2) return;
+      if (!enabled || !floating2 || !isBrowser()) return;
       const handleTab = (event) => {
         if (event.key !== "Tab") return;
         const target2 = getAnchoredOverlayTabTarget(
@@ -245,8 +329,9 @@ function useVueAnchoredOverlay(options) {
     referenceRef: options.referenceRef,
     floatingRef: options.floatingRef,
     enabled: options.enabled,
-    placement: options.placement ?? "bottom-start",
-    offset: options.offset ?? 4
+    placement: () => toValue(options.placement) ?? "bottom-start",
+    offset: () => toValue(options.offset) ?? 4,
+    arrowRef: options.arrowRef
   });
   const dismiss = (reason) => {
     options.onDismiss?.(reason);
@@ -279,7 +364,7 @@ function useVueAnchoredOverlay(options) {
             ...options.outsideRefs ?? []
           ],
           onOutsideClick: () => dismiss("outside"),
-          defer: false
+          defer: true
         });
       }
       if (optionEnabled(options.dismissOnEscape)) {
@@ -300,13 +385,13 @@ function useVueAnchoredOverlay(options) {
     "--tiger-overlay-x": `${floating.x.value}px`,
     "--tiger-overlay-y": `${floating.y.value}px`,
     "--tiger-overlay-reference-width": `${floating.referenceWidth.value}px`,
-    zIndex: FLOATING_OVERLAY_Z_INDEX,
+    zIndex: OVERLAY_Z_INDEX.overlay,
     transformOrigin: getTransformOrigin(floating.placement.value)
   }));
   const floatingClasses = computed(
     () => getAnchoredOverlayLayoutClasses(
-      options.layout ?? "anchored",
-      options.matchReferenceWidth ?? false
+      toValue(options.layout) ?? "anchored",
+      toValue(options.matchReferenceWidth) ?? false
     )
   );
   return {
@@ -316,15 +401,20 @@ function useVueAnchoredOverlay(options) {
     positioned: floating.isPositioned,
     placement: floating.placement,
     x: floating.x,
-    y: floating.y
+    y: floating.y,
+    arrowX: floating.arrowX,
+    arrowY: floating.arrowY
   };
 }
 
 export {
+  useVueClickOutside,
   useVueEscapeKey,
   useVueBodyScrollLock,
+  useVueBackgroundInert,
   renderVueBodyTeleport,
   renderVueOverlayTeleport,
+  useVueOverlayPortalTarget,
   useVueFocusTrap,
   useVueAnchoredOverlay
 };

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;