@nmorph/nmorph-ui-kit 2.2.10 → 2.2.13

package/dist/components/form/nmorph-select/NmorphSelect.vue2.js

@@ -1,16 +1,17 @@
 import './NmorphSelect.css';
-import { defineComponent as U, computed as n, ref as o, watch as N, onMounted as F, nextTick as j, onUnmounted as z, provide as E } from "vue";
-import { NmorphComponentHeight as G } from "../../../types/index.js";
-import { useModifiers as J } from "../../../utils/create-modifiers.js";
-import { useI18n as K } from "vue-i18n";
-import { useFormItemInput as Q } from "../nmorph-form/use-form-item-input.js";
-import X from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import Y from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-import Z from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ee from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-import te from "../../../assets/icons/chevron-down.svg.js";
-import le from "../../../assets/icons/loader.svg.js";
-const ye = /* @__PURE__ */ U({
+import { defineComponent as le, computed as a, ref as s, watch as f, nextTick as E, onMounted as ae, onUnmounted as re, provide as L } from "vue";
+import { NmorphComponentHeight as ne } from "../../../types/index.js";
+import { useModifiers as ue } from "../../../utils/create-modifiers.js";
+import { useI18n as oe } from "vue-i18n";
+import { useFormItemInput as ie } from "../nmorph-form/use-form-item-input.js";
+import { useVirtualList as se } from "../../../hooks/use-virtual-list.js";
+import de from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import ve from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import ce from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import fe from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import pe from "../../../assets/icons/chevron-down.svg.js";
+import me from "../../../assets/icons/loader.svg.js";
+const _e = /* @__PURE__ */ le({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -23,6 +24,10 @@ const ye = /* @__PURE__ */ U({
     fill: { type: Boolean, required: !1, default: !1 },
     optionsWidth: { type: String, required: !1, default: "truncate" },
     zIndex: { type: Number, required: !1 },
+    virtual: { type: Boolean, required: !1, default: !1 },
+    virtualItemHeight: { type: Number, required: !1, default: 0 },
+    virtualMaxHeight: { type: [Number, String], required: !1, default: 240 },
+    virtualOverscan: { type: Number, required: !1, default: 5 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -31,98 +36,122 @@ const ye = /* @__PURE__ */ U({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(M, { expose: _, emit: $ }) {
-    _();
-    const { t: H } = K(), t = M, I = n(
-      () => t.noElementPlaceholder ? t.noElementPlaceholder : H("noElementPlaceholder")
-    ), v = $, e = o(t.modelValue), r = o(t.open), u = n(() => t.disabled || t.loading), m = n(() => t.optionsWidth === "auto"), c = o(null), w = o(null), h = o(!0), { id: V, name: D, autocomplete: O, tabindex: L } = Q(t), g = (l) => {
-      if (!u.value) {
-        if (r.value = !1, typeof e.value == "string" && (!t.valueRequired && e.value === l ? e.value = "" : e.value = l, v("update:model-value", e.value)), Array.isArray(e.value)) {
-          const a = e.value.includes(l), A = e.value.length === 1 && a;
-          if (t.valueRequired && A) return;
-          a ? e.value = e.value.filter((b) => b !== l) : e.value = [...e.value, l];
+  setup(V, { expose: B, emit: T }) {
+    B();
+    const { t: O } = oe(), l = V, S = a(
+      () => l.noElementPlaceholder ? l.noElementPlaceholder : O("noElementPlaceholder")
+    ), m = T, t = s(l.modelValue), r = s(l.open), d = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = s(!0), { id: C, name: P, autocomplete: k, tabindex: R } = ie(l), y = (e) => {
+      if (!d.value) {
+        if (r.value = !1, typeof t.value == "string" && (!l.valueRequired && t.value === e ? t.value = "" : t.value = e, m("update:model-value", t.value)), Array.isArray(t.value)) {
+          const n = t.value.includes(e), ee = t.value.length === 1 && n;
+          if (l.valueRequired && ee) return;
+          n ? t.value = t.value.filter((te) => te !== e) : t.value = [...t.value, e];
         }
-        v("update:model-value", e.value);
+        m("update:model-value", t.value);
       }
-    }, p = o(!1), P = () => {
+    }, p = s(!1), W = () => {
       p.value = !0;
-    }, B = () => {
+    }, U = () => {
       p.value = !1;
-    }, R = n(
-      () => J({
-        nmorph: [G[t.height]],
+    }, z = a(
+      () => ue({
+        nmorph: [ne[l.height]],
         "nmorph-select": [
-          `${t.disabled && "disabled"}`,
-          `${t.modelValue ? "on" : "off"}`,
-          `${t.loading && "loading"}`,
-          `${r.value && !u.value && "open"}`,
-          `${t.fill && "fill"}`,
-          `${m.value && "options-auto-width"}`,
-          `${h.value ? "selected-line-outset" : "selected-line-inset"}`,
+          `${l.disabled && "disabled"}`,
+          `${l.modelValue ? "on" : "off"}`,
+          `${l.loading && "loading"}`,
+          `${r.value && !d.value && "open"}`,
+          `${l.fill && "fill"}`,
+          `${h.value && "options-auto-width"}`,
+          `${g.value ? "selected-line-outset" : "selected-line-inset"}`,
           `${p.value && "focus"}`
         ]
       })
-    ), W = () => {
-      u.value || (r.value = !r.value);
+    ), F = () => {
+      d.value || (r.value = !r.value);
     };
-    N(
+    f(
       r,
-      (l) => {
-        l && (h.value = !1);
+      (e) => {
+        e && (g.value = !1);
       },
       { immediate: !0 }
     );
-    const y = () => {
+    const b = () => {
       r.value = !1;
     };
-    N(
-      () => t.loading,
-      (l) => {
-        l && (r.value = !1);
+    f(
+      () => l.loading,
+      (e) => {
+        e && (r.value = !1);
       }
     );
-    const f = o(), i = o([]), s = o(0), d = o("");
-    N(s, (l) => {
-      d.value = i.value[l], f.value.forEach((a) => {
-        const b = a.getAttribute("value") === d.value ? "add" : "remove";
-        a.classList[b]("nmorph-select-option--focused");
-      });
-    }), F(async () => {
-      await j(), c.value && (f.value = c.value.querySelectorAll(".nmorph-select-option"), f.value.forEach((l) => {
-        const a = l.getAttribute("value");
-        a && i.value.push(a);
-      }), d.value = i.value[s.value], w.value = `${c.value.clientHeight}px`, document.addEventListener("click", y));
-    }), z(() => {
-      document.removeEventListener("click", y);
+    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), q = s(null), H = s([]), x = a(() => l.options), c = a(() => l.virtual && x.value.length > 0), M = a(() => ({
+      basic: 30,
+      thick: 38,
+      thin: 22
+    })[l.height || "basic"]), w = a(() => l.virtualItemHeight || M.value), A = a(() => l.virtualOverscan), v = se(x, {
+      enabled: c,
+      itemHeight: w,
+      overscan: A
+    }), j = a(() => v.virtualItems.value), Y = a(() => ({
+      height: `${v.totalHeight.value}px`
+    })), G = a(() => ({
+      transform: `translateY(${v.offsetTop.value}px)`
+    })), $ = (e) => typeof e == "number" ? `${e}px` : e, J = a(() => $(l.virtualMaxHeight)), I = () => {
+      i.value.length > 0 || !q.value || (H.value = Array.from(q.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
+    }, o = a(
+      () => i.value.length > 0 ? i.value.map((e) => e.value) : H.value
+    ), K = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = s(0), N = a(() => o.value[u.value] || "");
+    f(u, (e) => {
+      r.value && c.value && v.scrollToIndex(e);
+    }), f(
+      o,
+      (e) => {
+        u.value >= e.length && (u.value = Math.max(e.length - 1, 0));
+      },
+      { immediate: !0 }
+    ), f(r, async (e) => {
+      if (e) {
+        if (await E(), I(), typeof t.value == "string") {
+          const n = o.value.indexOf(t.value);
+          n !== -1 && (u.value = n);
+        }
+        v.refresh(), c.value && v.scrollToIndex(u.value);
+      }
+    }), ae(async () => {
+      await E(), I(), document.addEventListener("click", b);
+    }), re(() => {
+      document.removeEventListener("click", b);
     });
-    const k = n(() => typeof e.value == "string" ? e.value === "" ? I.value : t.options.find((l) => l.value === e.value)?.label : t.options.find((l) => l.value === e.value)?.label), q = n(() => t.options.length > 0 ? t.options : t.optionsMap), C = n(() => q.value.length > 0 ? q.value.filter((a) => e.value.includes(a.value)).map((a) => ({ text: a.label, value: a.value })) : Array.isArray(e.value) ? e.value.map((a) => ({ text: a, value: a })) : [{ text: e.value, value: e.value }]);
-    E("select-selected-value", e), E("select-change-selected-value", g);
-    const S = o(null), T = n(
-      () => m.value ? `${S.value?.clientWidth || 0}px` : void 0
-    ), x = { t: H, props: t, computedNoElementPlaceholder: I, emit: v, initialValue: e, open: r, disabledInput: u, autoOptionsWidth: m, optionsDOMRef: c, optionsHeight: w, selectedLineOutset: h, id: V, name: D, autocomplete: O, tabindex: L, changeHandler: g, focus: p, focusHandler: P, blurHandler: B, modifiers: R, clickHandler: W, closeHandler: y, nodeOptions: f, domOptions: i, currentIndex: s, currentFocusedEl: d, selectedValueTitle: k, optionsMap: q, tags: C, nmorphSelectDOMRef: S, optionsMinWidth: T, spaceHandler: () => {
-      u.value || (r.value = !r.value);
+    const Q = a(() => typeof t.value == "string" ? t.value === "" ? S.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), X = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
+    L("select-selected-value", t), L("select-change-selected-value", y);
+    const D = s(null), Z = a(
+      () => h.value ? `${D.value?.clientWidth || 0}px` : void 0
+    ), _ = { t: O, props: l, computedNoElementPlaceholder: S, emit: m, initialValue: t, open: r, disabledInput: d, autoOptionsWidth: h, selectedLineOutset: g, id: C, name: P, autocomplete: k, tabindex: R, changeHandler: y, focus: p, focusHandler: W, blurHandler: U, modifiers: z, clickHandler: F, closeHandler: b, optionsMap: i, optionsDOMRef: q, slotDomOptions: H, renderedOptions: x, virtualEnabled: c, defaultOptionHeight: M, virtualItemHeight: w, virtualOverscan: A, virtualList: v, virtualOptions: j, virtualSpacerStyle: Y, virtualContentStyle: G, getCssSize: $, virtualMaxHeight: J, refreshDomOptions: I, domOptions: o, nativeOptions: K, currentIndex: u, currentFocusedEl: N, selectedValueTitle: Q, tags: X, nmorphSelectDOMRef: D, optionsMinWidth: Z, spaceHandler: () => {
+      d.value || (r.value = !r.value);
     }, arrowDownHandler: () => {
-      u.value || (s.value = (s.value + 1) % i.value.length);
+      d.value || o.value.length !== 0 && (u.value = (u.value + 1) % o.value.length);
     }, arrowUpHandler: () => {
-      u.value || (s.value = (s.value - 1 + i.value.length) % i.value.length);
+      d.value || o.value.length !== 0 && (u.value = (u.value - 1 + o.value.length) % o.value.length);
     }, enterHandler: () => {
-      r.value && g(d.value);
+      r.value && N.value && y(N.value);
     }, get NmorphTagItem() {
-      return ee;
+      return fe;
     }, get NmorphIcon() {
-      return Z;
+      return ce;
     }, get NmorphSelectOption() {
-      return Y;
+      return ve;
     }, get NmorphDropdown() {
-      return X;
+      return de;
     }, get NmorphIconLoader() {
-      return le;
+      return me;
     }, get NmorphIconChevronDown() {
-      return te;
+      return pe;
     } };
-    return Object.defineProperty(x, "__isScriptSetup", { enumerable: !1, value: !0 }), x;
+    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
   }
 });
 export {
-  ye as default
+  _e as default
 };

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue2.js

@@ -1,14 +1,15 @@
 import './NmorphSelectOption.css';
-import { defineComponent as f, inject as i, computed as n } from "vue";
+import { defineComponent as m, inject as u, computed as s } from "vue";
 import { NmorphComponentHeight as h } from "../../../../../types/index.js";
 import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
 import v from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import b from "../../../../../assets/icons/success.svg.js";
-const I = /* @__PURE__ */ f({
+import y from "../../../../../assets/icons/success.svg.js";
+const I = /* @__PURE__ */ m({
   __name: "NmorphSelectOption",
   props: {
     value: { type: String, required: !0 },
     label: { type: String, required: !0, default: "" },
+    focused: { type: Boolean, required: !1, default: !1 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -17,23 +18,24 @@ const I = /* @__PURE__ */ f({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["change-value"],
-  setup(u, { expose: s, emit: c }) {
-    s();
-    const t = i("select-selected-value"), r = i("select-change-selected-value"), e = u, l = c, p = () => {
+  setup(i, { expose: n, emit: c }) {
+    n();
+    const t = u("select-selected-value"), r = u("select-change-selected-value"), e = i, l = c, d = () => {
       e.disabled || (l("change-value", e.value), r && r(e.value));
-    }, a = n(() => typeof t?.value == "string" ? t.value === e.value : Array.isArray(t?.value) ? t.value.some((m) => m === e.value) : !1), d = n(
+    }, a = s(() => typeof t?.value == "string" ? t.value === e.value : Array.isArray(t?.value) ? t.value.some((f) => f === e.value) : !1), p = s(
       () => g({
         nmorph: [h[e.height]],
         "nmorph-select-option": [
           `${e.disabled && "disabled"}`,
           `${e.label && "with-label"}`,
-          `${a.value && "checked"}`
+          `${a.value && "checked"}`,
+          `${e.focused && "focused"}`
         ]
       })
-    ), o = { selectSelectedValue: t, selectChangeSelectedValue: r, props: e, emit: l, clickHandler: p, checked: a, modifiers: d, get NmorphIcon() {
+    ), o = { selectSelectedValue: t, selectChangeSelectedValue: r, props: e, emit: l, clickHandler: d, checked: a, modifiers: p, get NmorphIcon() {
       return v;
     }, get NmorphIconSuccess() {
-      return b;
+      return y;
     } };
     return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
   }

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js

@@ -1,20 +1,20 @@
 import './NmorphBacktop.css';
 import p from "./NmorphBacktop.vue2.js";
-import { openBlock as l, createElementBlock as a, normalizeStyle as i, createElementVNode as t, normalizeClass as c, withModifiers as m, renderSlot as s, createVNode as r, withCtx as e } from "vue";
+import { openBlock as a, createElementBlock as l, normalizeStyle as c, createElementVNode as t, normalizeClass as i, withModifiers as m, renderSlot as s, createVNode as r, withCtx as e } from "vue";
 /* empty css                   */
 import d from "../../../_virtual/_plugin-vue_export-helper.js";
 function h(n, f, _, o, k, b) {
-  return l(), a(
+  return a(), l(
     "div",
     {
-      style: i({ "--nmorph-backtop-right": `${o.props.right}px`, "--nmorph-backtop-bottom": `${o.props.bottom}px` })
+      style: c({ "--nmorph-backtop-right": `${o.props.right}px`, "--nmorph-backtop-bottom": `${o.props.bottom}px` })
     },
     [
       t(
         "div",
         {
           ref: "selfDOMEl",
-          class: c(o.modifiers)
+          class: i(o.modifiers)
         },
         [
           t("div", {
@@ -27,7 +27,7 @@ function h(n, f, _, o, k, b) {
                 default: e(() => [
                   r(o.NmorphIcon, {
                     class: "nmorph-backtop__up-icon",
-                    color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-white-color)"
+                    color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
                   }, {
                     default: e(() => [
                       r(o.NmorphIconChevronDown)
@@ -50,7 +50,7 @@ function h(n, f, _, o, k, b) {
     /* STYLE */
   );
 }
-const x = /* @__PURE__ */ d(p, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+const g = /* @__PURE__ */ d(p, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
 export {
-  x as default
+  g as default
 };

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js

@@ -1,49 +1,36 @@
 import './NmorphDropdown.css';
 import n from "./NmorphDropdown.vue2.js";
-import { openBlock as d, createElementBlock as i, normalizeStyle as r, createVNode as t, withCtx as m, createElementVNode as p, normalizeClass as a, renderSlot as l } from "vue";
+import { openBlock as r, createBlock as t, withCtx as d, createElementBlock as i, normalizeStyle as p, normalizeClass as l, renderSlot as a, createCommentVNode as m } from "vue";
 /* empty css                    */
 import s from "../../../_virtual/_plugin-vue_export-helper.js";
-function c(e, h, f, o, w, _) {
-  return d(), i(
-    "div",
-    {
-      style: r({
-        "--nmorph-dropdown-width": o.width,
-        "--nmorph-dropdown-min-width": o.getCssSize(o.props.minWidth) || "auto",
-        "--nmorph-dropdown-max-width": o.getCssSize(o.props.maxWidth) || "none"
-      })
-    },
-    [
-      t(o.NmorphOverlay, {
-        show: o.props.open,
-        transparent: "",
-        "z-index": o.props.zIndex,
-        onOnOutsideClick: o.outsideClickHandler
-      }, {
-        default: m(() => [
-          p(
-            "div",
-            {
-              ref: "dropdownDOMRef",
-              class: a(o.modifiers),
-              style: r({ left: `${o.placementCoords.x}`, top: `${o.placementCoords.y}` })
-            },
-            [
-              l(e.$slots, "default")
-            ],
-            6
-            /* CLASS, STYLE */
-          )
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["show", "z-index"])
-    ],
-    4
-    /* STYLE */
-  );
+function c(e, f, _, o, h, w) {
+  return r(), t(o.NmorphOverlay, {
+    show: o.props.open,
+    transparent: "",
+    "z-index": o.props.zIndex,
+    onOnOutsideClick: o.outsideClickHandler
+  }, {
+    default: d(() => [
+      o.props.open ? (r(), i(
+        "div",
+        {
+          key: 0,
+          ref: "dropdownDOMRef",
+          class: l(o.modifiers),
+          style: p(o.dropdownStyle)
+        },
+        [
+          a(e.$slots, "default")
+        ],
+        6
+        /* CLASS, STYLE */
+      )) : m("v-if", !0)
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["show", "z-index"]);
 }
-const k = /* @__PURE__ */ s(n, [["render", c], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
+const z = /* @__PURE__ */ s(n, [["render", c], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
 export {
-  k as default
+  z as default
 };

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js

@@ -1,13 +1,14 @@
 import './NmorphDropdown.css';
-import { defineComponent as a, ref as c, computed as l } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { usePlacement as h } from "../../../hooks/use-placement.js";
-import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const w = /* @__PURE__ */ a({
+import { defineComponent as w, ref as b, toRef as r, computed as i, watch as v } from "vue";
+import { useModifiers as x } from "../../../utils/create-modifiers.js";
+import { usePlacement as O } from "../../../hooks/use-placement.js";
+import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+const g = /* @__PURE__ */ w({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
     relativeElement: { type: null, required: !0 },
+    placement: { type: null, required: !1, default: "bottom" },
     width: { type: [Number, String], required: !1, default: 160 },
     minWidth: { type: [Number, String], required: !1 },
     maxWidth: { type: [Number, String], required: !1 },
@@ -17,26 +18,44 @@ const w = /* @__PURE__ */ a({
     zIndex: { type: Number, required: !1 }
   },
   emits: ["on-outside-click"],
-  setup(s, { expose: d, emit: f }) {
-    d();
-    const e = s, r = f, o = c(null), { placementCoords: m } = h({
-      initialPlacement: "bottom",
-      contentDOMElement: o,
-      relativeElement: e.relativeElement,
-      yOffset: e.yOffset,
-      xOffset: e.xOffset
-    }), u = l(
-      () => y({
+  setup(u, { expose: f, emit: c }) {
+    f();
+    const e = u, l = c, d = b(null), { placementCoords: n, placementReady: p, adjustPlacement: m } = O({
+      initialPlacement: r(e, "placement"),
+      contentDOMElement: d,
+      relativeElement: r(e, "relativeElement"),
+      yOffset: r(e, "yOffset"),
+      xOffset: r(e, "xOffset"),
+      enabled: r(e, "open")
+    }), h = i(
+      () => x({
         "nmorph-dropdown": [`${!e.open && "closed"}`]
       })
-    ), i = (t) => typeof t == "number" ? `${t}px` : t, p = l(() => e.fillWidth ? `${e.relativeElement?.clientWidth}px` : i(e.width)), n = { props: e, emit: r, dropdownDOMRef: o, placementCoords: m, modifiers: u, getCssSize: i, width: p, outsideClickHandler: () => {
-      r("on-outside-click");
+    ), o = (t) => typeof t == "number" ? `${t}px` : t, s = i(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
+    ), y = i(() => ({
+      "--nmorph-dropdown-width": s.value,
+      "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
+      "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
+      left: n.value.x,
+      top: n.value.y,
+      visibility: e.open && p.value ? "visible" : "hidden"
+    }));
+    v(
+      () => e.open,
+      (t) => {
+        t && m();
+      },
+      { flush: "post" }
+    );
+    const a = { props: e, emit: l, dropdownDOMRef: d, placementCoords: n, placementReady: p, adjustPlacement: m, modifiers: h, getCssSize: o, width: s, dropdownStyle: y, outsideClickHandler: () => {
+      l("on-outside-click");
     }, get NmorphOverlay() {
-      return O;
+      return q;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  w as default
+  g as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js

@@ -1,30 +1,35 @@
 import './NmorphOverlay.css';
-import t from "./NmorphOverlay.vue2.js";
-import { openBlock as n, createElementBlock as i, withModifiers as e, normalizeStyle as s, normalizeClass as m, createElementVNode as a, renderSlot as p } from "vue";
+import s from "./NmorphOverlay.vue2.js";
+import { openBlock as i, createBlock as n, Teleport as p, createElementVNode as e, withModifiers as l, normalizeStyle as a, normalizeClass as d, renderSlot as m } from "vue";
 /* empty css                   */
 import c from "../../../_virtual/_plugin-vue_export-helper.js";
-function d(l, r, f, o, _, v) {
-  return n(), i(
-    "div",
-    {
-      class: m(o.modifiers),
-      style: s({ "--nmorph-overlay-z-index": o.zIndex }),
-      onClick: e(o.clickHandler, ["stop"])
-    },
-    [
-      a("div", {
-        class: "nmorph-overlay__slot",
-        onClick: r[0] || (r[0] = e(() => {
-        }, ["stop"]))
-      }, [
-        p(l.$slots, "default")
-      ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
+function f(t, r, _, o, h, v) {
+  return i(), n(p, {
+    to: o.props.teleportTo,
+    disabled: o.props.disabledTeleport || !o.props.show
+  }, [
+    e(
+      "div",
+      {
+        class: d(o.modifiers),
+        style: a({ "--nmorph-overlay-z-index": o.zIndex }),
+        onClick: l(o.clickHandler, ["stop"])
+      },
+      [
+        e("div", {
+          class: "nmorph-overlay__slot",
+          onClick: r[0] || (r[0] = l(() => {
+          }, ["stop"]))
+        }, [
+          m(t.$slots, "default")
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    )
+  ], 8, ["to", "disabled"]);
 }
-const x = /* @__PURE__ */ c(t, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
+const z = /* @__PURE__ */ c(s, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
 export {
-  x as default
+  z as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js

@@ -1,30 +1,32 @@
 import './NmorphOverlay.css';
-import { defineComponent as d, computed as t } from "vue";
-import { useModifiers as m } from "../../../utils/create-modifiers.js";
-import { useZIndex as c } from "../../../hooks/use-z-index.js";
-const h = /* @__PURE__ */ d({
+import { defineComponent as d, computed as o } from "vue";
+import { useModifiers as u } from "../../../utils/create-modifiers.js";
+import { useZIndex as f } from "../../../hooks/use-z-index.js";
+const y = /* @__PURE__ */ d({
   __name: "NmorphOverlay",
   props: {
     show: { type: Boolean, required: !0 },
     transparent: { type: Boolean, required: !1, default: !1 },
-    zIndex: { type: Number, required: !1 }
+    zIndex: { type: Number, required: !1 },
+    teleportTo: { type: null, required: !1, default: "body" },
+    disabledTeleport: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["on-outside-click"],
-  setup(n, { expose: s, emit: i }) {
-    s();
-    const e = n, p = c(
-      t(() => e.show),
+  setup(s, { expose: n, emit: a }) {
+    n();
+    const e = s, l = f(
+      o(() => e.show),
       () => e.zIndex
-    ), a = t(
-      () => m({
+    ), p = o(
+      () => u({
         "nmorph-overlay": [`${e.show && "show"}`, `${e.transparent && "transparent"}`]
       })
-    ), u = () => {
+    ), i = () => {
       r("on-outside-click");
-    }, r = i, o = { props: e, zIndex: p, modifiers: a, clickHandler: u, emit: r };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    }, r = a, t = { props: e, zIndex: l, modifiers: p, clickHandler: i, emit: r };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  h as default
+  y as default
 };