@expcat/tigercat-vue 2.0.0 → 2.0.4

package/dist/{chunk-JKPXJ3VB.mjs → chunk-JALHMWKW.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-LPZBXTJ6.mjs";
 import {
   useFloatingPopup
-} from "./chunk-KE6RGD4Y.mjs";
+} from "./chunk-26OI3TEA.mjs";
 import {
-  renderVueBodyTeleport
-} from "./chunk-BDTPFPSB.mjs";
+  renderVueOverlayTeleport
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/Image.ts
 import {
@@ -86,6 +86,9 @@ var Image = defineComponent({
       triggerRef: hoverTriggerRef,
       floatingRef: hoverFloatingRef,
       floatingStyles: hoverFloatingStyles,
+      floatingClasses: hoverFloatingClasses,
+      positioned: hoverPositioned,
+      overlayTarget: hoverOverlayTarget,
       triggerHandlers: hoverTriggerHandlers
     } = useFloatingPopup({
       props: floatingPopupProps,
@@ -237,14 +240,18 @@ var Image = defineComponent({
           emit("preview-open-change", val);
         }
       }) : null;
-      const hoverPreviewEl = hoverPreviewEnabled.value && hoverVisible.value && props.src ? renderVueBodyTeleport(
+      const hoverPreviewEl = hoverPreviewEnabled.value && hoverVisible.value && props.src ? renderVueOverlayTeleport(
         h(
           "div",
           {
             ref: hoverFloatingRef,
             style: hoverFloatingStyles.value,
+            "data-positioned": hoverPositioned.value,
             "aria-hidden": true,
-            class: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+            class: classNames(
+              hoverFloatingClasses.value,
+              "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+            )
           },
           [
             h("img", {
@@ -253,7 +260,8 @@ var Image = defineComponent({
               class: "block max-w-[16rem] max-h-[16rem] object-contain"
             })
           ]
-        )
+        ),
+        hoverOverlayTarget.value
       ) : null;
       return h(
         "div",

package/dist/{chunk-OHPXOLNB.mjs → chunk-K3WTQBE4.mjs}

@@ -4,6 +4,10 @@ import {
 import {
   FORM_ITEM_CONTROL_INJECTION_KEY
 } from "./chunk-P2LZ2MR5.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/FormItem.ts
 import {
@@ -108,6 +112,8 @@ var FormItem = defineComponent({
     const errorMessage = ref("");
     const shakeTrigger = ref(0);
     const prevFormError = ref("");
+    const contentRef = ref(null);
+    const errorRef = ref(null);
     const instanceId = ++formItemIdCounter;
     const baseId = `tiger-form-item-${instanceId}`;
     const labelId = `${baseId}-label`;
@@ -226,6 +232,16 @@ var FormItem = defineComponent({
     const hasError = computed(() => {
       return !!errorMessage.value;
     });
+    const popupErrorVisible = computed(
+      () => props.showMessage && hasError.value && props.errorDisplayMode === "popup"
+    );
+    const overlay = useVueAnchoredOverlay({
+      enabled: popupErrorVisible,
+      referenceRef: contentRef,
+      floatingRef: errorRef,
+      placement: "bottom-start",
+      offset: 4
+    });
     provide(FORM_ITEM_CONTROL_INJECTION_KEY, {
       status: computed(() => hasError.value ? "error" : void 0),
       errorMessage: computed(
@@ -317,6 +333,7 @@ var FormItem = defineComponent({
       const contentElement = h(
         "div",
         {
+          ref: contentRef,
           class: classNames(contentClasses.value, props.errorDisplayMode === "popup" && "relative")
         },
         [
@@ -333,21 +350,29 @@ var FormItem = defineComponent({
             },
             fieldChildren
           ),
-          props.showMessage && h(
-            "div",
-            {
-              id: hasError.value ? errorId : void 0,
-              role: hasError.value ? "alert" : void 0,
-              class: props.errorDisplayMode === "block" ? classNames(
-                "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
-                !hasError.value && "hidden"
-              ) : props.errorDisplayMode === "popup" ? classNames(
-                "absolute z-10 mt-1 px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
-                !hasError.value && "hidden"
-              ) : errorClasses.value,
-              "aria-hidden": hasError.value ? void 0 : "true"
-            },
-            hasError.value ? errorMessage.value : ""
+          props.showMessage && renderVueOverlayTeleport(
+            h(
+              "div",
+              {
+                ref: errorRef,
+                id: hasError.value ? errorId : void 0,
+                role: hasError.value ? "alert" : void 0,
+                class: props.errorDisplayMode === "block" ? classNames(
+                  "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
+                  !hasError.value && "hidden"
+                ) : props.errorDisplayMode === "popup" ? classNames(
+                  "px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
+                  overlay.floatingClasses.value,
+                  !hasError.value && "hidden"
+                ) : errorClasses.value,
+                style: props.errorDisplayMode === "popup" ? overlay.floatingStyles.value : void 0,
+                "data-positioned": props.errorDisplayMode === "popup" ? overlay.positioned.value : void 0,
+                "aria-hidden": hasError.value ? void 0 : "true"
+              },
+              hasError.value ? errorMessage.value : ""
+            ),
+            overlay.target.value,
+            props.errorDisplayMode !== "popup"
           )
         ]
       );

package/dist/{chunk-VMYV5EWI.mjs → chunk-KICZSLOX.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/Popconfirm.ts
 import { defineComponent, computed, h, cloneVNode, isVNode } from "vue";
@@ -93,6 +93,9 @@ var Popconfirm = defineComponent({
       floatingRef,
       closeAndRestoreFocus,
       floatingStyles,
+      floatingClasses,
+      positioned,
+      overlayTarget,
       actualPlacement
     } = useFloatingPopup({ props, emit, multiTrigger: false });
     const popconfirmId = createPopconfirmId();
@@ -118,9 +121,6 @@ var Popconfirm = defineComponent({
       );
     });
     const triggerClasses = computed(() => getPopconfirmTriggerClasses(props.disabled));
-    const contentWrapperClasses = computed(
-      () => classNames("absolute z-50", currentVisible.value ? "block" : "hidden")
-    );
     const arrowClasses = computed(() => getPopconfirmArrowClasses(actualPlacement.value));
     const contentClasses = getPopconfirmContentClasses();
     const titleClasses = getPopconfirmTitleClasses();
@@ -211,8 +211,9 @@ var Popconfirm = defineComponent({
         "div",
         {
           ref: floatingRef,
-          class: contentWrapperClasses.value,
+          class: floatingClasses.value,
           style: floatingStyles.value,
+          "data-positioned": positioned.value,
           hidden: !currentVisible.value,
           "aria-hidden": !currentVisible.value
         },
@@ -272,7 +273,7 @@ var Popconfirm = defineComponent({
           class: containerClasses.value,
           style: mergeStyleValues(attrs.style, props.style)
         },
-        [trigger, renderVueBodyTeleport(content)]
+        [trigger, renderVueOverlayTeleport(content, overlayTarget.value)]
       );
     };
   }

package/dist/{chunk-SK2QJ66E.mjs → chunk-KROVW4AW.mjs}

@@ -1,9 +1,7 @@
 import {
-  renderVueBodyTeleport,
-  useVueClickOutside,
-  useVueEscapeKey,
-  useVueFloating
-} from "./chunk-BDTPFPSB.mjs";
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/Dropdown.ts
 import {
@@ -29,9 +27,7 @@ import {
   getDropdownChevronClasses,
   getDropdownMenuClasses,
   getDropdownItemClasses,
-  getTransformOrigin,
   injectDropdownStyles,
-  FLOATING_OVERLAY_Z_INDEX,
   DROPDOWN_CHEVRON_PATH,
   DROPDOWN_ENTER_CLASS,
   handleMenuNavigation,
@@ -312,54 +308,22 @@ var Dropdown = defineComponent({
         handleMenuNavigation(floatingRef.value, event);
       }
     };
-    const {
-      x,
-      y,
-      placement: currentPlacement
-    } = useVueFloating({
+    const clickOutsideEnabled = computed(() => props.trigger === "click");
+    const portalEnabled = computed(() => props.portal);
+    const overlay = useVueAnchoredOverlay({
       referenceRef: triggerRef,
       floatingRef,
       enabled: currentVisible,
       placement: props.placement,
-      offset: props.offset
+      offset: props.offset,
+      portal: portalEnabled,
+      containerRef,
+      dismissOnOutside: clickOutsideEnabled,
+      dismissOnEscape: true,
+      onDismiss: () => setVisible(false)
     });
-    const clickOutsideEnabled = computed(() => currentVisible.value && props.trigger === "click");
-    let cleanupClickOutside = null;
-    watch(
-      clickOutsideEnabled,
-      (enabled) => {
-        cleanupClickOutside?.();
-        cleanupClickOutside = null;
-        if (enabled) {
-          cleanupClickOutside = useVueClickOutside({
-            enabled: currentVisible,
-            refs: [containerRef, floatingRef],
-            onOutsideClick: () => setVisible(false),
-            defer: true
-          });
-        }
-      },
-      { immediate: true }
-    );
-    let cleanupEscapeKey = null;
-    watch(
-      currentVisible,
-      (visible) => {
-        cleanupEscapeKey?.();
-        cleanupEscapeKey = null;
-        if (visible) {
-          cleanupEscapeKey = useVueEscapeKey({
-            enabled: currentVisible,
-            onEscape: () => setVisible(false)
-          });
-        }
-      },
-      { immediate: true }
-    );
     onBeforeUnmount(() => {
       if (hoverTimer) clearTimeout(hoverTimer);
-      cleanupClickOutside?.();
-      cleanupEscapeKey?.();
     });
     const containerClasses = computed(
       () => classNames(
@@ -371,14 +335,9 @@ var Dropdown = defineComponent({
     );
     const mergedStyle = computed(() => mergeStyleValues(attrsStyle, props.style));
     const triggerClasses = computed(() => getDropdownTriggerClasses(props.disabled));
-    const menuWrapperClasses = classNames("absolute", DROPDOWN_ENTER_CLASS);
-    const menuWrapperStyles = computed(() => ({
-      position: "absolute",
-      left: `${x.value}px`,
-      top: `${y.value}px`,
-      zIndex: FLOATING_OVERLAY_Z_INDEX,
-      transformOrigin: getTransformOrigin(currentPlacement.value)
-    }));
+    const menuWrapperClasses = computed(
+      () => classNames(overlay.floatingClasses.value, DROPDOWN_ENTER_CLASS)
+    );
     const dropdownContext = reactive({
       closeOnClick: props.closeOnClick,
       handleItemClick
@@ -443,8 +402,9 @@ var Dropdown = defineComponent({
         "div",
         {
           ref: floatingRef,
-          class: menuWrapperClasses,
-          style: menuWrapperStyles.value,
+          class: menuWrapperClasses.value,
+          style: overlay.floatingStyles.value,
+          "data-positioned": overlay.positioned.value,
           "data-tiger-dropdown-menu": "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
@@ -453,7 +413,7 @@ var Dropdown = defineComponent({
         },
         [cloneVNode(menuNode, { id: menuId })]
       ) : null;
-      const menu = menuWrapper ? renderVueBodyTeleport(menuWrapper, !props.portal) : null;
+      const menu = menuWrapper ? renderVueOverlayTeleport(menuWrapper, overlay.target.value, !props.portal) : null;
       const {
         class: _class,
         style: _style,