@expcat/tigercat-vue 2.0.0-rc.2 → 2.0.4

package/dist/{chunk-SYRRMZT2.mjs → chunk-OQVGB7X6.mjs}

@@ -1,9 +1,9 @@
 import {
   useFloatingPopup
-} from "./chunk-KE6RGD4Y.mjs";
+} from "./chunk-26OI3TEA.mjs";
 import {
-  renderVueBodyTeleport
-} from "./chunk-BDTPFPSB.mjs";
+  renderVueOverlayTeleport
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/Popover.ts
 import { defineComponent, computed, h } from "vue";
@@ -53,6 +53,9 @@ var Popover = defineComponent({
       triggerRef,
       floatingRef,
       floatingStyles,
+      floatingClasses,
+      positioned,
+      overlayTarget,
       triggerHandlers
     } = useFloatingPopup({ props, emit });
     const popoverId = createPopoverId();
@@ -100,32 +103,43 @@ var Popover = defineComponent({
             triggerSlotContent
           ),
           // Floating content
-          currentVisible.value ? renderVueBodyTeleport(
-            h("div", { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false }, [
-              h(
-                "div",
-                {
-                  id: popoverId,
-                  role: "dialog",
-                  "aria-modal": "false",
-                  "aria-labelledby": hasTitle ? titleId : void 0,
-                  "aria-describedby": hasContent ? contentId : void 0,
-                  class: contentClasses.value
-                },
-                [
-                  hasTitle && h(
-                    "div",
-                    { id: titleId, class: POPOVER_TITLE_CLASSES },
-                    slots.title ? slots.title() : props.title
-                  ),
-                  hasContent && h(
-                    "div",
-                    { id: contentId, class: POPOVER_TEXT_CLASSES },
-                    slots.content ? slots.content() : props.content
-                  )
-                ].filter(Boolean)
-              )
-            ])
+          currentVisible.value ? renderVueOverlayTeleport(
+            h(
+              "div",
+              {
+                ref: floatingRef,
+                class: floatingClasses.value,
+                style: floatingStyles.value,
+                "data-positioned": positioned.value,
+                "aria-hidden": false
+              },
+              [
+                h(
+                  "div",
+                  {
+                    id: popoverId,
+                    role: "dialog",
+                    "aria-modal": "false",
+                    "aria-labelledby": hasTitle ? titleId : void 0,
+                    "aria-describedby": hasContent ? contentId : void 0,
+                    class: contentClasses.value
+                  },
+                  [
+                    hasTitle && h(
+                      "div",
+                      { id: titleId, class: POPOVER_TITLE_CLASSES },
+                      slots.title ? slots.title() : props.title
+                    ),
+                    hasContent && h(
+                      "div",
+                      { id: contentId, class: POPOVER_TEXT_CLASSES },
+                      slots.content ? slots.content() : props.content
+                    )
+                  ].filter(Boolean)
+                )
+              ]
+            ),
+            overlayTarget.value
           ) : null
         ]
       );

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

@@ -1,9 +1,13 @@
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/Cascader.ts
-import { defineComponent, computed, ref, h, watch, onBeforeUnmount } from "vue";
+import { defineComponent, computed, ref, h, watch } from "vue";
 import {
   classNames,
   cascaderBaseClasses,
@@ -122,6 +126,19 @@ var Cascader = defineComponent({
     const triggerRef = ref(null);
     const dropdownRef = ref(null);
     const searchInputRef = ref(null);
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: dropdownRef,
+      placement: "bottom-start",
+      offset: 4,
+      layout: "fullscreen-sm",
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: closeDropdown
+    });
     const displayLabel = computed(() => {
       if (!props.modelValue || props.modelValue.length === 0) return "";
       return getCascaderDisplayLabel(props.options, props.modelValue, props.separator);
@@ -213,22 +230,6 @@ var Cascader = defineComponent({
         closeDropdown();
       }
     }
-    function handleDocumentClick(e) {
-      const target = e.target;
-      if (triggerRef.value && !triggerRef.value.contains(target) && dropdownRef.value && !dropdownRef.value.contains(target)) {
-        closeDropdown();
-      }
-    }
-    watch(isOpen, (open) => {
-      if (open) {
-        document.addEventListener("click", handleDocumentClick, true);
-      } else {
-        document.removeEventListener("click", handleDocumentClick, true);
-      }
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener("click", handleDocumentClick, true);
-    });
     return () => {
       const hasValue = props.modelValue && props.modelValue.length > 0;
       const showClear = props.clearable && hasValue && !props.disabled;
@@ -402,7 +403,13 @@ var Cascader = defineComponent({
           "div",
           {
             ref: dropdownRef,
-            class: classNames(cascaderDropdownClasses, isSearchMode.value && "flex-col")
+            class: classNames(
+              cascaderDropdownClasses,
+              isSearchMode.value && "flex-col",
+              overlay.floatingClasses.value
+            ),
+            style: overlay.floatingStyles.value,
+            "data-positioned": overlay.positioned.value
           },
           children
         );
@@ -413,7 +420,7 @@ var Cascader = defineComponent({
           class: cascaderBaseClasses,
           "data-testid": "cascader"
         },
-        [trigger, dropdownContent]
+        [trigger, renderVueOverlayTeleport(dropdownContent, overlay.target.value)]
       );
     };
   }

package/dist/{chunk-5KPO3EDM.mjs → chunk-OTHJIFDV.mjs}

@@ -459,22 +459,35 @@ var BarChart = defineComponent({
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return h(
+          "div",
+          {
+            class: classNames(
+              "relative",
+              props.responsive ? "block w-full min-w-0" : "inline-block"
+            )
+          },
+          [chart, tooltip]
+        );
       }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          interactive: props.hoverable || props.selectable,
-          onItemClick: handleLegendClick,
-          onItemHover: handleLegendHover,
-          onItemLeave: handleLegendLeave
-        }),
-        tooltip
-      ]);
+      return h(
+        "div",
+        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        [
+          chart,
+          h(ChartLegend, {
+            items: legendItems.value,
+            position: props.legendPosition,
+            markerSize: props.legendMarkerSize,
+            gap: props.legendGap,
+            interactive: props.hoverable || props.selectable,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }),
+          tooltip
+        ]
+      );
     };
   }
 });

package/dist/{chunk-DWPZRG7A.mjs → chunk-PGF7HLLR.mjs}

@@ -1,12 +1,16 @@
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
+
 // src/components/Mentions.ts
-import { defineComponent, h, ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
+import { defineComponent, h, ref, computed } from "vue";
 import { classNames, coerceClassValue } from "@expcat/tigercat-core";
 import {
   getMentionsInputClasses,
   mentionsDropdownClasses,
   getMentionsOptionClasses,
   extractMentionQuery,
-  positionMentionsDropdown,
   getCyclicIndex
 } from "@expcat/tigercat-core";
 var Mentions = defineComponent({
@@ -34,6 +38,19 @@ var Mentions = defineComponent({
       const q = query.value.toLowerCase();
       return (props.options || []).filter((o) => !o.disabled && o.label.toLowerCase().includes(q));
     });
+    const overlayEnabled = computed(() => isOpen.value && filteredOptions.value.length > 0);
+    const overlay = useVueAnchoredOverlay({
+      enabled: overlayEnabled,
+      referenceRef: textareaRef,
+      floatingRef: dropdownRef,
+      containerRef,
+      placement: "bottom-start",
+      offset: 4,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: () => isOpen.value = false
+    });
     function handleInput(e) {
       const target = e.target;
       const value = target.value;
@@ -77,28 +94,6 @@ var Mentions = defineComponent({
         isOpen.value = false;
       }
     }
-    function onClickOutside(e) {
-      if (containerRef.value && !containerRef.value.contains(e.target)) {
-        isOpen.value = false;
-      }
-    }
-    watch(isOpen, (val) => {
-      if (val) document.addEventListener("mousedown", onClickOutside);
-      else document.removeEventListener("mousedown", onClickOutside);
-    });
-    watch(
-      [isOpen, filteredOptions],
-      async () => {
-        if (!isOpen.value || filteredOptions.value.length === 0) return;
-        await nextTick();
-        if (!textareaRef.value || !dropdownRef.value) return;
-        await positionMentionsDropdown(textareaRef.value, dropdownRef.value);
-      },
-      { flush: "post" }
-    );
-    onBeforeUnmount(() => {
-      document.removeEventListener("mousedown", onClickOutside);
-    });
     return () => {
       const wrapperClass = classNames("relative", coerceClassValue(attrs.class));
       return h("div", { ref: containerRef, class: wrapperClass }, [
@@ -112,22 +107,31 @@ var Mentions = defineComponent({
           onInput: handleInput,
           onKeydown: handleKeydown
         }),
-        isOpen.value && filteredOptions.value.length > 0 ? h(
-          "div",
-          { ref: dropdownRef, class: mentionsDropdownClasses, role: "listbox" },
-          filteredOptions.value.map(
-            (opt, i) => h(
-              "div",
-              {
-                key: opt.value,
-                class: getMentionsOptionClasses(i === activeIndex.value, !!opt.disabled),
-                role: "option",
-                "aria-selected": i === activeIndex.value,
-                onClick: () => selectOption(opt)
-              },
-              opt.label
+        isOpen.value && filteredOptions.value.length > 0 ? renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: dropdownRef,
+              class: classNames(mentionsDropdownClasses, overlay.floatingClasses.value),
+              style: overlay.floatingStyles.value,
+              "data-positioned": overlay.positioned.value,
+              role: "listbox"
+            },
+            filteredOptions.value.map(
+              (opt, i) => h(
+                "div",
+                {
+                  key: opt.value,
+                  class: getMentionsOptionClasses(i === activeIndex.value, !!opt.disabled),
+                  role: "option",
+                  "aria-selected": i === activeIndex.value,
+                  onClick: () => selectOption(opt)
+                },
+                opt.label
+              )
             )
-          )
+          ),
+          overlay.target.value
         ) : null
       ]);
     };

package/dist/chunk-Q7Y22OFX.mjs

@@ -0,0 +1,330 @@
+// src/utils/overlay.ts
+import {
+  getFocusTrapNavigation,
+  getFocusableElements,
+  isEventOutside,
+  lockBodyScroll,
+  computeFloatingPosition,
+  autoUpdateFloating,
+  resolveAnchoredOverlayTarget,
+  getAnchoredOverlayTabTarget,
+  getAnchoredOverlayLayoutClasses,
+  FLOATING_OVERLAY_Z_INDEX,
+  getTransformOrigin,
+  restoreFocus,
+  registerEscapeDismiss
+} from "@expcat/tigercat-core";
+import { h, ref, computed, Teleport, watch, onBeforeUnmount } from "vue";
+var OVERLAY_LAYER_SELECTOR = "[data-tiger-overlay-layer]";
+function resolveOverlayLayer(element) {
+  return element?.closest(OVERLAY_LAYER_SELECTOR) ?? null;
+}
+function useVueClickOutside({
+  enabled,
+  containerRef,
+  refs,
+  onOutsideClick,
+  defer = false
+}) {
+  let timer;
+  const handler = (event) => {
+    if (!enabled.value) return;
+    const elements = refs?.length ? refs.map((ref2) => ref2?.value) : [containerRef?.value];
+    if (!elements.some(Boolean)) return;
+    if (isEventOutside(event, elements)) {
+      onOutsideClick();
+    }
+  };
+  const attach = () => document.addEventListener("click", handler);
+  const detach = () => document.removeEventListener("click", handler);
+  if (!defer) {
+    attach();
+    return () => detach();
+  }
+  timer = window.setTimeout(() => attach(), 0);
+  return () => {
+    if (timer !== void 0) window.clearTimeout(timer);
+    detach();
+  };
+}
+function useVueEscapeKey({
+  enabled,
+  onEscape,
+  layerRef
+}) {
+  let removeEntry;
+  const stop = watch(
+    enabled,
+    (isEnabled) => {
+      removeEntry?.();
+      removeEntry = isEnabled ? registerEscapeDismiss(document, onEscape, () => layerRef?.value ?? null) : void 0;
+    },
+    { immediate: true, flush: "sync" }
+  );
+  return () => {
+    stop();
+    removeEntry?.();
+  };
+}
+function useVueBodyScrollLock(enabled) {
+  watch(
+    enabled,
+    (isEnabled, _prevEnabled, onCleanup) => {
+      if (!isEnabled) 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 renderVueOverlayTeleport(children, target, disabled = false) {
+  if (children == null || typeof children === "boolean") return children;
+  const layeredChildren = h("div", { class: "contents", "data-tiger-overlay-layer": "" }, [
+    children,
+    h("div", { class: "contents", "data-tiger-overlay-host": "" })
+  ]);
+  if (disabled || !target) return layeredChildren;
+  return h(Teleport, { to: target }, [layeredChildren]);
+}
+function useVueFocusTrap({ enabled, containerRef }) {
+  watch(
+    [enabled, containerRef],
+    ([isEnabled, container], _previous, onCleanup) => {
+      if (!isEnabled || !container) return;
+      const ownerDocument = container.ownerDocument;
+      const handler = (event) => {
+        if (!(event.target instanceof Node) || !container.contains(event.target)) return;
+        const focusables = getFocusableElements(container);
+        const activeElement = ownerDocument.activeElement;
+        const navigation = getFocusTrapNavigation(event, focusables, activeElement);
+        if (!navigation.shouldHandle || !navigation.next) return;
+        event.preventDefault();
+        navigation.next.focus();
+      };
+      ownerDocument.addEventListener("keydown", handler, true);
+      onCleanup(() => ownerDocument.removeEventListener("keydown", handler, true));
+    },
+    { immediate: true, flush: "post" }
+  );
+}
+function useVueFloating(options) {
+  const {
+    referenceRef,
+    floatingRef,
+    enabled,
+    placement: initialPlacement = "bottom",
+    offset: offsetDistance = 8,
+    arrowRef,
+    onPlacementChange
+  } = options;
+  const x = ref(0);
+  const y = ref(0);
+  const placement = ref(initialPlacement);
+  const arrowX = ref(void 0);
+  const arrowY = ref(void 0);
+  const isPositioned = ref(false);
+  const referenceWidth = ref(0);
+  let cleanup = null;
+  let updateRequest = 0;
+  const update = async () => {
+    const request = ++updateRequest;
+    const reference = referenceRef.value;
+    const floating = floatingRef.value;
+    if (!enabled.value || !reference || !floating) return;
+    const floatingOptions = {
+      placement: initialPlacement,
+      offset: offsetDistance,
+      flip: true,
+      shift: true,
+      arrowElement: arrowRef?.value
+    };
+    const result = await computeFloatingPosition(
+      reference,
+      floating,
+      floatingOptions
+    );
+    if (request !== updateRequest || !enabled.value || referenceRef.value !== reference || floatingRef.value !== floating) {
+      return;
+    }
+    referenceWidth.value = reference.getBoundingClientRect().width;
+    x.value = result.x;
+    y.value = result.y;
+    if (result.placement !== placement.value) {
+      placement.value = result.placement;
+      onPlacementChange?.(result.placement);
+    }
+    if (result.arrow) {
+      arrowX.value = result.arrow.x;
+      arrowY.value = result.arrow.y;
+    }
+    isPositioned.value = true;
+  };
+  watch(
+    [enabled, referenceRef, floatingRef],
+    ([isEnabled, reference, floating]) => {
+      updateRequest += 1;
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+      if (!isEnabled || !reference || !floating) {
+        isPositioned.value = false;
+        return;
+      }
+      update();
+      cleanup = autoUpdateFloating(reference, floating, update);
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => {
+    updateRequest += 1;
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+  });
+  return {
+    x,
+    y,
+    placement,
+    arrowX,
+    arrowY,
+    update,
+    isPositioned,
+    referenceWidth
+  };
+}
+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" }
+  );
+  watch(
+    [options.enabled, options.floatingRef],
+    ([enabled, floating2], _previous, onCleanup) => {
+      if (!enabled || !floating2) return;
+      const handleTab = (event) => {
+        if (event.key !== "Tab") return;
+        const target2 = getAnchoredOverlayTabTarget(
+          options.referenceRef.value,
+          options.floatingRef.value,
+          event.shiftKey
+        );
+        if (!target2) return;
+        event.preventDefault();
+        window.setTimeout(() => restoreFocus(target2, { preventScroll: true }), 0);
+      };
+      floating2.addEventListener("keydown", handleTab, true);
+      onCleanup(() => floating2.removeEventListener("keydown", handleTab, true));
+    },
+    { immediate: true, flush: "post" }
+  );
+  const floating = useVueFloating({
+    referenceRef: options.referenceRef,
+    floatingRef: options.floatingRef,
+    enabled: options.enabled,
+    placement: options.placement ?? "bottom-start",
+    offset: options.offset ?? 4
+  });
+  const dismiss = (reason) => {
+    options.onDismiss?.(reason);
+    if (options.restoreFocusOnDismiss && reason === "escape") {
+      window.setTimeout(() => restoreFocus(options.referenceRef.value, { preventScroll: true }), 0);
+    }
+  };
+  let outsideCleanup;
+  let escapeCleanup;
+  const dismissSources = [
+    options.enabled,
+    ...typeof options.dismissOnOutside === "object" ? [options.dismissOnOutside] : [],
+    ...typeof options.dismissOnEscape === "object" ? [options.dismissOnEscape] : []
+  ];
+  watch(
+    dismissSources,
+    ([enabled]) => {
+      outsideCleanup?.();
+      escapeCleanup?.();
+      outsideCleanup = void 0;
+      escapeCleanup = void 0;
+      if (!enabled) return;
+      if (optionEnabled(options.dismissOnOutside)) {
+        outsideCleanup = useVueClickOutside({
+          enabled: options.enabled,
+          refs: [
+            options.containerRef,
+            options.referenceRef,
+            floatingLayerRef,
+            ...options.outsideRefs ?? []
+          ],
+          onOutsideClick: () => dismiss("outside"),
+          defer: false
+        });
+      }
+      if (optionEnabled(options.dismissOnEscape)) {
+        escapeCleanup = useVueEscapeKey({
+          enabled: options.enabled,
+          onEscape: () => dismiss("escape"),
+          layerRef: floatingLayerRef
+        });
+      }
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => {
+    outsideCleanup?.();
+    escapeCleanup?.();
+  });
+  const floatingStyles = computed(() => ({
+    "--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,
+    transformOrigin: getTransformOrigin(floating.placement.value)
+  }));
+  const floatingClasses = computed(
+    () => getAnchoredOverlayLayoutClasses(
+      options.layout ?? "anchored",
+      options.matchReferenceWidth ?? false
+    )
+  );
+  return {
+    target,
+    floatingStyles,
+    floatingClasses,
+    positioned: floating.isPositioned,
+    placement: floating.placement,
+    x: floating.x,
+    y: floating.y
+  };
+}
+
+export {
+  useVueEscapeKey,
+  useVueBodyScrollLock,
+  renderVueBodyTeleport,
+  renderVueOverlayTeleport,
+  useVueFocusTrap,
+  useVueAnchoredOverlay
+};