@idds/vue 1.4.12 → 1.4.14

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, inject, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent, Transition, withCtx, provide, withModifiers, normalizeStyle, nextTick, h, unref, Fragment, renderList, mergeProps, useAttrs, withDirectives, vModelDynamic, withKeys, vModelText, Teleport, createStaticVNode, vModelRadio } from "vue";
+import { defineComponent, inject, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent, Transition, withCtx, provide, withModifiers, normalizeStyle, nextTick, h, unref, Fragment, renderList, mergeProps, useAttrs, withDirectives, vModelDynamic, Teleport, withKeys, vModelText, createStaticVNode, vModelRadio } from "vue";
 const iddsColorTokens = {
   // Neutral Colors
   "neutral-25": "var(--ina-neutral-25)",
@@ -2924,6 +2924,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const props = __props;
     const containerRef = ref();
     const isOpen = ref(false);
+    const mounted = ref(false);
     const dropdownPosition = ref({ vertical: "bottom", horizontal: "right" });
     const displayItems = computed(() => {
       return props.items || [];
@@ -2960,6 +2961,19 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         ...props.dropdownStyle
       };
     });
+    const computedDropdownStyle = computed(() => {
+      const style = {
+        ...dropdownStyle.value,
+        position: "absolute"
+      };
+      if (dropdownPosition.value.top !== void 0) {
+        style.top = `${dropdownPosition.value.top}px`;
+      }
+      if (dropdownPosition.value.left !== void 0) {
+        style.left = `${dropdownPosition.value.left}px`;
+      }
+      return style;
+    });
     const handleTriggerClick = (e) => {
       e.stopPropagation();
       if (props.disabled) return;
@@ -2971,7 +2985,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         const vertical = fitsBelow ? "bottom" : "top";
         const fitsRight = rect.right + props.dropdownWidth <= window.innerWidth;
         const horizontal = fitsRight ? "right" : "left";
-        dropdownPosition.value = { vertical, horizontal };
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        let top = 0;
+        let left = 0;
+        if (vertical === "bottom") {
+          top = rect.bottom + scrollTop + 8;
+        } else {
+          top = rect.top + scrollTop - dropdownHeight - 8;
+        }
+        if (horizontal === "right") {
+          left = rect.left + scrollLeft;
+        } else {
+          left = rect.right + scrollLeft - props.dropdownWidth;
+        }
+        dropdownPosition.value = { vertical, horizontal, top, left };
       }
       isOpen.value = !isOpen.value;
     };
@@ -2981,6 +3009,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
     };
     onMounted(() => {
+      mounted.value = true;
       document.addEventListener("click", handleClickOutside);
     });
     onUnmounted(() => {
@@ -3002,38 +3031,43 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             ], 64))
           ], true)
         ], 2),
-        createVNode(Transition, { name: "dropdown" }, {
-          default: withCtx(() => [
-            isOpen.value ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(menuClasses.value),
-              style: normalizeStyle(dropdownStyle.value),
-              role: "menu",
-              onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
-              }, ["stop"]))
-            }, [
-              createElementVNode("ul", _hoisted_1$t, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(displayItems.value, (item, idx) => {
-                  return openBlock(), createElementBlock("li", {
-                    key: idx,
-                    role: "none"
-                  }, [
-                    (openBlock(), createBlock(resolveDynamicComponent(item), {
-                      class: normalizeClass("ina-dropdown__item")
-                    }))
-                  ]);
-                }), 128))
-              ]),
-              renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 38)) : createCommentVNode("", true)
-          ]),
-          _: 3
-        })
+        mounted.value ? (openBlock(), createBlock(Teleport, {
+          key: 0,
+          to: "body"
+        }, [
+          createVNode(Transition, { name: "dropdown" }, {
+            default: withCtx(() => [
+              isOpen.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(menuClasses.value),
+                style: normalizeStyle(computedDropdownStyle.value),
+                role: "menu",
+                onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["stop"]))
+              }, [
+                createElementVNode("ul", _hoisted_1$t, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(displayItems.value, (item, idx) => {
+                    return openBlock(), createElementBlock("li", {
+                      key: idx,
+                      role: "none"
+                    }, [
+                      (openBlock(), createBlock(resolveDynamicComponent(item), {
+                        class: normalizeClass("ina-dropdown__item")
+                      }))
+                    ]);
+                  }), 128))
+                ]),
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ], 38)) : createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-37b57e49"]]);
+const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-caab13f9"]]);
 const _hoisted_1$s = { class: "ina-field-input-table__wrapper" };
 const _hoisted_2$r = { class: "ina-field-input-table__label" };
 const _hoisted_3$p = ["value"];