@nmorph/nmorph-ui-kit 2.2.12 → 2.2.13

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

@@ -1,30 +1,30 @@
 import './NmorphSelect.css';
-import p from "./NmorphSelect.vue2.js";
-import { openBlock as o, createElementBlock as r, normalizeClass as v, createElementVNode as i, withKeys as t, Fragment as a, renderList as d, withModifiers as w, toDisplayString as h, createBlock as l, mergeProps as m, createVNode as s, withCtx as c, renderSlot as k, createCommentVNode as g } from "vue";
+import y from "./NmorphSelect.vue2.js";
+import { openBlock as o, createElementBlock as r, normalizeClass as g, createElementVNode as t, withKeys as a, Fragment as i, renderList as c, withModifiers as u, toDisplayString as _, createBlock as n, mergeProps as d, createVNode as v, withCtx as h, normalizeStyle as s, renderSlot as w, createCommentVNode as k } from "vue";
 /* empty css                  */
-import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-select__content" }, b = ["id", "name", "autocomplete", "tabindex", "disabled"], x = ["value"], O = {
+import x from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled"], b = ["value"], H = {
   key: 0,
   class: "nmorph-select__selected-value"
-}, D = {
+}, O = {
   key: 1,
   class: "nmorph-select__selected-value"
-}, H = {
+}, C = {
   key: 2,
   class: "nmorph-select__selected-value"
-}, u = {
+}, D = {
   ref: "optionsDOMRef",
   class: "nmorph-select__options"
 };
-function C(_, I, f, e, S, M) {
+function I(f, m, p, e, M, z) {
   return o(), r(
     "div",
     {
-      class: v(e.modifiers)
+      class: g(e.modifiers)
     },
     [
-      i("div", N, [
-        i("select", {
+      t("div", N, [
+        t("select", {
           id: e.id,
           name: e.name,
           autocomplete: e.autocomplete,
@@ -33,51 +33,51 @@ function C(_, I, f, e, S, M) {
           onFocus: e.focusHandler,
           onBlur: e.blurHandler,
           onKeydown: [
-            t(e.spaceHandler, ["space"]),
-            t(e.arrowDownHandler, ["arrow-down"]),
-            t(e.arrowUpHandler, ["arrow-up"]),
-            t(e.enterHandler, ["enter"])
+            a(e.spaceHandler, ["space"]),
+            a(e.arrowDownHandler, ["arrow-down"]),
+            a(e.arrowUpHandler, ["arrow-up"]),
+            a(e.enterHandler, ["enter"])
           ]
         }, [
           (o(!0), r(
-            a,
+            i,
             null,
-            d(e.domOptions, (n) => (o(), r("option", {
-              key: n,
-              value: n
-            }, null, 8, x))),
+            c(e.nativeOptions, (l) => (o(), r("option", {
+              key: l,
+              value: l
+            }, null, 8, b))),
             128
             /* KEYED_FRAGMENT */
           ))
-        ], 40, b),
-        i(
+        ], 40, S),
+        t(
           "div",
           {
             ref: "nmorphSelectDOMRef",
             class: "nmorph-select__selected-values-line",
-            onClick: w(e.clickHandler, ["stop"])
+            onClick: u(e.clickHandler, ["stop"])
           },
           [
             typeof e.initialValue == "string" ? (o(), r(
               "div",
-              O,
-              h(e.selectedValueTitle),
+              H,
+              _(e.selectedValueTitle),
               1
               /* TEXT */
             )) : e.initialValue.length === 0 ? (o(), r(
               "div",
-              D,
-              h(e.computedNoElementPlaceholder),
+              O,
+              _(e.computedNoElementPlaceholder),
               1
               /* TEXT */
-            )) : (o(), r("div", H, [
+            )) : (o(), r("div", C, [
               (o(!0), r(
-                a,
+                i,
                 null,
-                d(e.tags, (n) => (o(), l(e.NmorphTagItem, m({
-                  key: n.value,
+                c(e.tags, (l) => (o(), n(e.NmorphTagItem, d({
+                  key: l.value,
                   ref_for: !0
-                }, n, {
+                }, l, {
                   transparent: "",
                   removable: e.tags.length > 1 || !e.props.valueRequired,
                   height: "thin",
@@ -87,9 +87,9 @@ function C(_, I, f, e, S, M) {
                 /* KEYED_FRAGMENT */
               ))
             ])),
-            s(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
-              default: c(() => [
-                e.props.loading ? (o(), l(e.NmorphIconLoader, { key: 0 })) : (o(), l(e.NmorphIconChevronDown, { key: 1 }))
+            v(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
+              default: h(() => [
+                e.props.loading ? (o(), n(e.NmorphIconLoader, { key: 0 })) : (o(), n(e.NmorphIconChevronDown, { key: 1 }))
               ]),
               _: 1
               /* STABLE */
@@ -99,7 +99,7 @@ function C(_, I, f, e, S, M) {
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), l(e.NmorphDropdown, {
+      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), n(e.NmorphDropdown, {
         key: 0,
         open: e.open && !e.props.loading,
         "relative-element": e.nmorphSelectDOMRef,
@@ -110,34 +110,91 @@ function C(_, I, f, e, S, M) {
         "z-index": e.props.zIndex,
         onOnOutsideClick: e.closeHandler
       }, {
-        default: c(() => [
-          i(
+        default: h(() => [
+          t(
             "div",
-            u,
+            D,
             [
-              e.props.loading ? (o(), l(e.NmorphIcon, {
+              e.props.loading ? (o(), n(e.NmorphIcon, {
                 key: 0,
                 class: "nmorph-select__chevron",
                 size: "medium"
               }, {
-                default: c(() => [
-                  s(e.NmorphIconChevronDown)
+                default: h(() => [
+                  v(e.NmorphIconChevronDown)
                 ]),
                 _: 1
                 /* STABLE */
-              })) : (o(!0), r(
-                a,
-                { key: 1 },
-                d(f.options, (n) => (o(), l(e.NmorphSelectOption, m({
-                  key: n.value,
-                  ref_for: !0
-                }, n, {
-                  height: e.props.height
-                }), null, 16, ["height"]))),
-                128
-                /* KEYED_FRAGMENT */
-              )),
-              k(_.$slots, "default")
+              })) : e.virtualEnabled ? (o(), r(
+                "div",
+                {
+                  key: 1,
+                  ref: e.virtualList.containerRef,
+                  class: "nmorph-select__virtual-list",
+                  style: s({ maxHeight: e.virtualMaxHeight }),
+                  onScroll: m[0] || (m[0] = (...l) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...l))
+                },
+                [
+                  t(
+                    "div",
+                    {
+                      class: "nmorph-select__virtual-spacer",
+                      style: s(e.virtualSpacerStyle)
+                    },
+                    [
+                      t(
+                        "div",
+                        {
+                          class: "nmorph-select__virtual-content",
+                          style: s(e.virtualContentStyle)
+                        },
+                        [
+                          (o(!0), r(
+                            i,
+                            null,
+                            c(e.virtualOptions, (l) => (o(), n(e.NmorphSelectOption, d({
+                              key: l.index,
+                              ref_for: !0
+                            }, l.item, {
+                              focused: l.item.value === e.currentFocusedEl,
+                              height: e.props.height
+                            }), null, 16, ["focused", "height"]))),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ],
+                        4
+                        /* STYLE */
+                      )
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ],
+                36
+                /* STYLE, NEED_HYDRATION */
+              )) : (o(), r(
+                i,
+                { key: 2 },
+                [
+                  (o(!0), r(
+                    i,
+                    null,
+                    c(p.options, (l) => (o(), n(e.NmorphSelectOption, d({
+                      key: l.value,
+                      ref_for: !0
+                    }, l, {
+                      focused: l.value === e.currentFocusedEl,
+                      height: e.props.height
+                    }), null, 16, ["focused", "height"]))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )),
+                  w(f.$slots, "default")
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              ))
             ],
             512
             /* NEED_PATCH */
@@ -145,13 +202,13 @@ function C(_, I, f, e, S, M) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : g("v-if", !0)
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : k("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const E = /* @__PURE__ */ y(p, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
+const B = /* @__PURE__ */ x(y, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
 export {
-  E as default
+  B as default
 };

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-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
 };