@nmorph/nmorph-ui-kit 2.2.12 → 2.2.15

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: "" },
@@ -22,7 +23,11 @@ const ye = /* @__PURE__ */ U({
     open: { type: Boolean, required: !1, default: !1 },
     fill: { type: Boolean, required: !1, default: !1 },
     optionsWidth: { type: String, required: !1, default: "truncate" },
-    zIndex: { type: Number, required: !1 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    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.css

@@ -1 +1 @@
-.nmorph-select-option{--hover-bg: var(--nmorph-accent-color);--hover-color: var(--nmorph-white-color);display:flex;align-items:center;justify-content:space-between;gap:var(--indentation-01);box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-select-option .nmorph-select-option__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nmorph-select-option .nmorph-select-option__content span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nmorph-select-option .nmorph-select-option__checked{flex:0 0 auto}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--hover-bg)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover span{color:var(--hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled){background:var(--hover-bg)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) span{color:var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}
+.nmorph-select-option{--hover-bg: var(--nmorph-accent-color);--hover-color: var(--nmorph-white-color);display:flex;gap:var(--indentation-01);justify-content:space-between;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-select-option .nmorph-select-option__content{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select-option .nmorph-select-option__content span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select-option .nmorph-select-option__checked{flex:0 0 auto}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--hover-bg)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover span{color:var(--hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled){background:var(--hover-bg)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) span{color:var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}

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

@@ -7,8 +7,8 @@ const h = ["value"], f = { class: "nmorph-select-option__content" };
 function k(t, u, v, e, N, S) {
   return o(), n("div", {
     class: l(e.modifiers),
-    onClick: e.clickHandler,
-    value: e.props.value
+    value: e.props.value,
+    onClick: e.clickHandler
   }, [
     r("div", f, [
       r(

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/form/nmorph-select-button/NmorphSelectButton.css

@@ -1 +1 @@
-.nmorph-select-button{--track-padding: 4px;--item-size: calc(var(--default-thickness-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-small);display:inline-flex;align-items:center;width:fit-content;padding:var(--track-padding);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select-button.nmorph-select-button--thin{--item-size: calc(var(--thin-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-extra-small)}.nmorph-select-button.nmorph-select-button--thick{--item-size: calc(var(--thick-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-base)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}
+.nmorph-select-button{--track-padding: 4px;--item-size: calc(var(--default-thickness-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-small);display:inline-flex;align-items:center;width:fit-content;padding:var(--track-padding);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select-button.nmorph-select-button--thin{--item-size: calc(var(--thin-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-extra-small)}.nmorph-select-button.nmorph-select-button--thick{--item-size: calc(var(--thick-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-base)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.css

@@ -1 +1 @@
-.nmorph-select-button-item{display:inline-flex;align-items:center;justify-content:center;height:var(--item-size);padding:0 var(--indentation-04);border-radius:var(--default-border-radius);cursor:pointer;opacity:.45;font-size:var(--item-font-size)}.nmorph-select-button-item input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.nmorph-select-button-item:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-select-button-item.nmorph-select-button-item--checked{opacity:1;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-select-button-item{display:inline-flex;justify-content:center;align-items:center;height:var(--item-size);padding:0 var(--indentation-04);font-size:var(--item-font-size);border-radius:var(--default-border-radius);cursor:pointer;opacity:.45}.nmorph-select-button-item input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.nmorph-select-button-item:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-select-button-item.nmorph-select-button-item--checked{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);opacity:1}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-slider/NmorphSlider.css

@@ -1 +1 @@
-.nmorph-slider{position:relative;width:100%;height:20px;--slider-height: 24px;--value-fixed-container-height: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{display:flex;align-items:center;width:100%;height:var(--value-fixed-container-height);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__input-container{position:relative;display:flex;align-items:center;width:100%;height:var(--slider-height);touch-action:none}.nmorph-slider .nmorph-slider__thumb{position:absolute;z-index:1;border:0;border-radius:var(--default-border-radius);height:20px;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__thumb--smooth{transition:left ease-in-out .2s}.nmorph-slider .nmorph-slider__value{display:flex;justify-content:center;width:var(--value-fixed-container-width);margin-left:var(--indentation-04)}.nmorph-slider .nmorph-slide__native-input{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;background:transparent;appearance:none}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-runnable-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-moz-range-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-thumb{visibility:hidden}.nmorph-slider .nmorph-slide__native-input::-moz-range-thumb{visibility:hidden}.nmorph-slider.nmorph-slider--fill,.nmorph-slider.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}.nmorph-slider .nmorph-slider__thumb{width:var(--nmorph-slider-thumb-width)}
+.nmorph-slider{position:relative;width:100%;height:20px;--slider-height: 24px;--value-fixed-container-height: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{display:flex;align-items:center;width:100%;height:var(--value-fixed-container-height);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__input-container{position:relative;display:flex;align-items:center;width:100%;height:var(--slider-height);touch-action:none}.nmorph-slider .nmorph-slider__thumb{position:absolute;z-index:1;width:var(--nmorph-slider-thumb-width);height:20px;background:var(--nmorph-main-color);border:0;border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__thumb--smooth{transition:left ease-in-out .2s}.nmorph-slider .nmorph-slider__value{display:flex;justify-content:center;width:var(--value-fixed-container-width);margin-left:var(--indentation-04)}.nmorph-slider .nmorph-slide__native-input{position:absolute;top:50%;left:50%;width:100%;background:transparent;transform:translate(-50%,-50%);appearance:none}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-runnable-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-moz-range-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-thumb{visibility:hidden}.nmorph-slider .nmorph-slide__native-input::-moz-range-thumb{visibility:hidden}.nmorph-slider.nmorph-slider--fill,.nmorph-slider.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}

package/dist/components/form/nmorph-switch/NmorphSwitch.css

@@ -1 +1 @@
-.nmorph-switch{--height: 20px;--offset: 3px;--thumb-height: 14px;width:40px;height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;border-radius:var(--border-radius-999);font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:flex-end;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);width:var(--thumb-height);height:var(--thumb-height);border-radius:var(--border-radius-999);transition:left ease-in-out var(--transition-02);display:flex;justify-content:center;align-items:center;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - 16px);box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}
+.nmorph-switch{--height: 20px;--offset: 3px;--thumb-height: 14px;width:40px;height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;justify-content:flex-end;align-items:center;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);display:flex;justify-content:center;align-items:center;width:var(--thumb-height);height:var(--thumb-height);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);transition:left ease-in-out var(--transition-02)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - 16px);box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.css

@@ -1 +1 @@
-.nmorph-backtop{position:fixed;opacity:0;transition:opacity .2s ease-in-out}.nmorph-backtop .nmorph-backtop__up-icon{transform:rotate(180deg)}.nmorph-backtop.nmorph-backtop--show{opacity:1}.nmorph-backtop.nmorph-backtop--common .nmorph-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-backtop{right:var(--nmorph-backtop-right);bottom:var(--nmorph-backtop-bottom)}
+.nmorph-backtop{position:fixed;right:var(--nmorph-backtop-right);bottom:calc(var(--nmorph-backtop-bottom) + env(safe-area-inset-bottom,0px));z-index:var(--nmorph-backtop-z-index);opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.nmorph-backtop .nmorph-backtop__up-icon{transform:rotate(180deg)}.nmorph-backtop.nmorph-backtop--show{opacity:1;pointer-events:auto}.nmorph-backtop.nmorph-backtop--common .nmorph-button{background:var(--nmorph-overlay-color);border-radius:4px}

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

@@ -1,56 +1,66 @@
 import './NmorphBacktop.css';
-import p from "./NmorphBacktop.vue2.js";
-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";
+import l from "./NmorphBacktop.vue2.js";
+import { openBlock as e, createElementBlock as a, normalizeStyle as c, createBlock as i, Teleport as d, createElementVNode as t, normalizeClass as m, withModifiers as s, renderSlot as h, createVNode as r, withCtx as p } from "vue";
 /* empty css                   */
-import d from "../../../_virtual/_plugin-vue_export-helper.js";
-function h(n, f, _, o, k, b) {
-  return a(), l(
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+function _(n, b, k, o, v, x) {
+  return e(), a(
     "div",
     {
-      style: c({ "--nmorph-backtop-right": `${o.props.right}px`, "--nmorph-backtop-bottom": `${o.props.bottom}px` })
+      ref: "placeholderDOMEl",
+      style: c({
+        "--nmorph-backtop-right": `${o.props.right}px`,
+        "--nmorph-backtop-bottom": `${o.props.bottom}px`,
+        "--nmorph-backtop-z-index": o.props.zIndex
+      })
     },
     [
-      t(
-        "div",
-        {
-          ref: "selfDOMEl",
-          class: i(o.modifiers)
-        },
-        [
-          t("div", {
-            onClick: m(o.scrollToTopHandler, ["stop"])
-          }, [
-            s(n.$slots, "default", {}, () => [
-              r(o.NmorphButton, {
-                "style-type": o.props.design === "nmorph" ? "default" : "transparent"
-              }, {
-                default: e(() => [
-                  r(o.NmorphIcon, {
-                    class: "nmorph-backtop__up-icon",
-                    color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
-                  }, {
-                    default: e(() => [
-                      r(o.NmorphIconChevronDown)
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["color"])
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["style-type"])
+      (e(), i(d, {
+        to: o.props.teleportTo,
+        disabled: !o.isMounted || o.props.teleportDisabled
+      }, [
+        t(
+          "div",
+          {
+            ref: "selfDOMEl",
+            class: m(o.modifiers)
+          },
+          [
+            t("div", {
+              onClick: s(o.scrollToTopHandler, ["stop"])
+            }, [
+              h(n.$slots, "default", {}, () => [
+                r(o.NmorphButton, {
+                  "style-type": o.props.design === "nmorph" ? "default" : "transparent"
+                }, {
+                  default: p(() => [
+                    r(o.NmorphIcon, {
+                      class: "nmorph-backtop__up-icon",
+                      color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
+                    }, {
+                      default: p(() => [
+                        r(o.NmorphIconChevronDown)
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["color"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["style-type"])
+              ])
             ])
-          ])
-        ],
-        2
-        /* CLASS */
-      )
+          ],
+          2
+          /* CLASS */
+        )
+      ], 8, ["to", "disabled"]))
     ],
     4
     /* STYLE */
   );
 }
-const g = /* @__PURE__ */ d(p, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+const z = /* @__PURE__ */ f(l, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
 export {
-  g as default
+  z as default
 };

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

@@ -1,50 +1,53 @@
 import './NmorphBacktop.css';
-import { defineComponent as h, computed as v, ref as l, onMounted as g, onUnmounted as b } from "vue";
-import { useModifiers as N } from "../../../utils/create-modifiers.js";
-import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import y from "../../basic/nmorph-button/NmorphButton.vue.js";
-import E from "../../../assets/icons/chevron-down.svg.js";
-const I = /* @__PURE__ */ h({
+import { defineComponent as b, computed as g, ref as t, onMounted as y, onUnmounted as N } from "vue";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import E from "../../basic/nmorph-button/NmorphButton.vue.js";
+import T from "../../../assets/icons/chevron-down.svg.js";
+const k = /* @__PURE__ */ b({
   __name: "NmorphBacktop",
   props: {
     right: { type: Number, required: !1, default: 40 },
     bottom: { type: Number, required: !1, default: 40 },
     visibilityHeight: { type: Number, required: !1, default: 200 },
-    design: { type: String, required: !1, default: "nmorph" }
+    design: { type: String, required: !1, default: "nmorph" },
+    zIndex: { type: Number, required: !1, default: 10 },
+    teleportTo: { type: String, required: !1, default: "body" },
+    teleportDisabled: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["click"],
-  setup(a, { expose: m, emit: p }) {
-    m();
-    const t = a, i = p, c = v(
-      () => N({
-        "nmorph-backtop": [`${o.value && "show"}`, t.design]
+  setup(m, { expose: c, emit: f }) {
+    c();
+    const r = m, n = f, d = g(
+      () => _({
+        "nmorph-backtop": [`${o.value && "show"}`, r.design]
       })
-    ), e = l(null), r = l(null), o = l(!1), n = (s) => {
-      if (!s) return;
-      const d = s.target;
-      o.value = d.scrollTop > t.visibilityHeight;
-    }, f = () => {
-      i("click"), e.value && e.value.scrollTo({
+    ), e = t(null), u = t(null), i = t(null), o = t(!1), s = t(!1), l = (p) => {
+      if (!p) return;
+      const h = p.target;
+      o.value = h.scrollTop > r.visibilityHeight;
+    }, v = () => {
+      n("click"), e.value && e.value.scrollTo({
         top: 0,
         left: 0,
         behavior: "smooth"
       });
     };
-    g(() => {
-      r.value && (e.value = r.value.parentElement?.parentElement, e.value?.addEventListener("scroll", n));
-    }), b(() => {
-      e.value && e.value?.removeEventListener("scroll", n);
+    y(() => {
+      e.value = u.value?.parentElement ?? i.value?.parentElement?.parentElement ?? null, e.value?.addEventListener("scroll", l), o.value = (e.value?.scrollTop ?? 0) > r.visibilityHeight, s.value = !0;
+    }), N(() => {
+      e.value && e.value?.removeEventListener("scroll", l);
     });
-    const u = { props: t, emit: i, modifiers: c, container: e, selfDOMEl: r, showButton: o, scrollHandler: n, scrollToTopHandler: f, get NmorphButton() {
-      return y;
+    const a = { props: r, emit: n, modifiers: d, container: e, placeholderDOMEl: u, selfDOMEl: i, showButton: o, isMounted: s, scrollHandler: l, scrollToTopHandler: v, get NmorphButton() {
+      return E;
     }, get NmorphIcon() {
-      return _;
+      return q;
     }, get NmorphIconChevronDown() {
-      return E;
+      return T;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  I as default
+  k as default
 };

package/dist/components/navigation/nmorph-breadcrumb/components/nmorph-breadcrumb-item/NmorphBreadcrumbItem.vue2.js

@@ -1,15 +1,15 @@
 import { defineComponent as m, computed as p, inject as d, ref as c, onMounted as i } from "vue";
 import { useModifiers as f } from "../../../../../utils/create-modifiers.js";
 import { generateUUID as l } from "../../../../../utils/common.js";
-const v = /* @__PURE__ */ m({
+const j = /* @__PURE__ */ m({
   __name: "NmorphBreadcrumbItem",
   props: {
-    to: { type: null, required: !1, default: "" },
+    to: { type: [String, Object], required: !1, default: "" },
     replace: { type: Boolean, required: !1, default: !1 }
   },
-  setup(u, { expose: s }) {
-    s();
-    const e = u, n = p(
+  setup(s, { expose: u }) {
+    u();
+    const e = s, n = p(
       () => f({
         "nmorph-breadcrumb-item": []
       })
@@ -22,5 +22,5 @@ const v = /* @__PURE__ */ m({
   }
 });
 export {
-  v as default
+  j as default
 };

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.css

@@ -1 +1 @@
-.nmorph-dropdown{position:fixed;border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}.nmorph-dropdown{width:var(--nmorph-dropdown-width);min-width:var(--nmorph-dropdown-min-width);max-width:var(--nmorph-dropdown-max-width)}
+.nmorph-dropdown{position:fixed;width:var(--nmorph-dropdown-width);min-width:var(--nmorph-dropdown-min-width);max-width:var(--nmorph-dropdown-max-width);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-dropdown--closed{z-index:-1000;opacity:0}