@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

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

@@ -1,222 +1,304 @@
 import './NmorphSelect.css';
-import w from "./NmorphSelect.vue2.js";
-import { openBlock as o, createElementBlock as l, normalizeStyle as c, normalizeClass as x, createElementVNode as t, withKeys as a, withModifiers as n, Fragment as d, renderList as h, toDisplayString as _, createBlock as i, mergeProps as m, createVNode as f, withCtx as s, renderSlot as b, createCommentVNode as k } from "vue";
-/* empty css                  */
-import H from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], I = ["value"], O = {
+import { defineComponent as Be, computed as n, ref as m, watch as x, nextTick as Z, onMounted as Ce, onUnmounted as Re, provide as $, toRef as ze, openBlock as i, createElementBlock as d, normalizeStyle as I, normalizeClass as Ne, createElementVNode as b, withKeys as h, withModifiers as f, unref as u, Fragment as H, renderList as O, toDisplayString as ee, createBlock as y, mergeProps as L, createVNode as te, withCtx as P, renderSlot as $e, createCommentVNode as Le } from "vue";
+import { useModifiers as Pe } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as qe, getNmorphOptionHeight as Fe, toCssSize as We, resolveDomElement as Ke } from "../../../utils/common.js";
+import { useVirtualList as Te } from "../../../hooks/use-virtual-list.js";
+import { useI18n as Ue } from "vue-i18n";
+import { useFormItemModel as je, useFormItemInput as Ge } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as Je } from "../../../types/common.types.js";
+import Qe from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+/* empty css                                                                       */
+import le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import Xe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+/* empty css                                                   */
+import ae from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+/* empty css                                                        */
+import Ye from "../../../assets/icons/loader.svg.js";
+import ne from "../../../assets/icons/chevron-down.svg.js";
+const Ze = { class: "nmorph-select__content" }, et = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], tt = ["value"], lt = {
   key: 0,
   class: "nmorph-select__selected-value"
-}, u = {
+}, at = {
   key: 1,
   class: "nmorph-select__selected-value"
-}, D = {
+}, nt = {
   key: 2,
   class: "nmorph-select__selected-value"
-}, C = ["id"];
-function E(y, v, p, e, M, R) {
-  return o(), l(
-    "div",
-    {
-      class: x(e.modifiers),
-      style: c(e.styles)
-    },
-    [
-      t("div", N, [
-        t("select", {
-          id: e.id,
-          name: e.name,
-          autocomplete: e.autocomplete,
-          tabindex: e.tabindex,
-          disabled: e.disabledInput,
+}, rt = ["id"], Ht = /* @__PURE__ */ Be({
+  __name: "NmorphSelect",
+  props: {
+    noElementPlaceholder: { default: "" },
+    valueRequired: { type: Boolean, default: !1 },
+    options: { default: () => [] },
+    optionsMap: { default: () => [] },
+    modelValue: { default: "" },
+    multiple: { default: void 0 },
+    nullable: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    open: { type: Boolean, default: !1 },
+    fill: { type: Boolean, default: !1 },
+    optionsWidth: { default: "truncate" },
+    zIndex: { default: void 0 },
+    virtual: { type: Boolean, default: !1 },
+    virtualItemHeight: { default: 0 },
+    virtualMaxHeight: { default: 240 },
+    virtualOverscan: { default: 5 },
+    virtualDynamicHeight: { type: Boolean, default: !1 },
+    width: { default: void 0 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value"],
+  setup(q, { emit: re }) {
+    const { t: oe } = Ue(), t = q, S = n(
+      () => t.noElementPlaceholder ? t.noElementPlaceholder : oe("noElementPlaceholder")
+    ), ue = re, { modelValue: k, updateModelValue: F } = je(
+      t,
+      (e) => ue("update:model-value", e),
+      ""
+    ), V = () => t.nullable ? null : "", W = n(() => t.multiple ?? Array.isArray(k.value)), K = (e) => W.value ? Array.isArray(e) ? e : e ? [e] : [] : Array.isArray(e) ? e[0] ?? V() : e ?? V(), l = m(K(k.value)), r = m(t.open), p = n(() => t.disabled || t.loading), A = n(() => t.optionsWidth === "auto"), T = m(!0), { id: E, name: U, autocomplete: ie, tabindex: se } = Ge(t), D = (e) => {
+      if (p.value) return;
+      if (r.value = !1, !W.value) {
+        !t.valueRequired && l.value === e ? l.value = V() : l.value = e, F(l.value);
+        return;
+      }
+      const o = Array.isArray(l.value) ? l.value : [], a = o.includes(e), N = o.length === 1 && a;
+      t.valueRequired && N || (a ? l.value = o.filter((De) => De !== e) : l.value = [...o, e], F(l.value));
+    }, B = m(!1), de = () => {
+      B.value = !0;
+    }, ve = () => {
+      B.value = !1;
+    }, ce = n(
+      () => Pe({
+        nmorph: [Je[t.height]],
+        "nmorph-select": [
+          t.disabled && "disabled",
+          k.value ? "on" : "off",
+          t.loading && "loading",
+          r.value && !p.value && "open",
+          t.fill && "fill",
+          A.value && "options-auto-width",
+          T.value ? "selected-line-outset" : "selected-line-inset",
+          B.value && "focus"
+        ]
+      })
+    ), me = n(
+      () => qe({
+        "--base-width": t.width
+      })
+    ), fe = () => {
+      p.value || (r.value = !r.value);
+    };
+    x(
+      r,
+      (e) => {
+        e && (T.value = !1);
+      },
+      { immediate: !0 }
+    );
+    const C = () => {
+      r.value = !1;
+    };
+    x(
+      () => t.loading,
+      (e) => {
+        e && (r.value = !1);
+      }
+    ), x(
+      k,
+      (e) => {
+        l.value = K(e);
+      },
+      { deep: !0 }
+    );
+    const g = n(() => t.options.length > 0 ? t.options : t.optionsMap), R = m(null), j = m([]), G = n(() => t.options), w = n(() => t.virtual && G.value.length > 0), pe = n(() => t.virtualItemHeight || Fe(t.height)), he = n(() => t.virtualOverscan), ye = n(() => t.virtualDynamicHeight), v = Te(G, {
+      enabled: w,
+      itemHeight: pe,
+      overscan: he,
+      dynamic: ye
+    }), ge = n(() => v.virtualItems.value), _e = v.spacerStyle, xe = v.contentStyle, be = n(() => We(t.virtualMaxHeight)), J = () => {
+      g.value.length > 0 || !R.value || (j.value = Array.from(R.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
+    }, c = n(
+      () => g.value.length > 0 ? g.value.map((e) => e.value) : j.value
+    ), we = n(() => w.value ? Array.isArray(l.value) ? l.value : l.value ? [l.value] : [] : c.value), s = m(0), _ = n(() => c.value[s.value] || ""), Q = n(() => `${E.value}-listbox`), z = (e) => `${E.value}-option-${e.replace(/\s+/g, "-")}`;
+    x(s, (e) => {
+      r.value && w.value && v.scrollToIndex(e);
+    }), x(
+      c,
+      (e) => {
+        s.value >= e.length && (s.value = Math.max(e.length - 1, 0));
+      },
+      { immediate: !0 }
+    ), x(r, async (e) => {
+      if (e) {
+        if (await Z(), J(), !Array.isArray(l.value) && l.value) {
+          const o = c.value.indexOf(l.value);
+          o !== -1 && (s.value = o);
+        }
+        v.refresh(), w.value && v.scrollToIndex(s.value);
+      }
+    }), Ce(async () => {
+      await Z(), J(), document.addEventListener("click", C);
+    }), Re(() => {
+      document.removeEventListener("click", C);
+    });
+    const He = n(() => Array.isArray(l.value) ? S.value : l.value ? g.value.find((e) => e.value === l.value)?.label : S.value), X = n(() => g.value.length > 0 ? g.value.filter((o) => Array.isArray(l.value) && l.value.includes(o.value)).map((o) => ({ text: o.label, value: o.value })) : Array.isArray(l.value) ? l.value.map((o) => ({ text: o, value: o })) : l.value ? [{ text: l.value, value: l.value }] : []);
+    $("select-selected-value", l), $("select-change-selected-value", D), $("select-height", ze(t, "height"));
+    const M = m(null), ke = n(
+      () => A.value ? `${M.value?.clientWidth || 0}px` : void 0
+    ), Ae = () => {
+      p.value || (r.value = !r.value);
+    }, Me = () => {
+      p.value || c.value.length !== 0 && (r.value || (r.value = !0), s.value = (s.value + 1) % c.value.length);
+    }, Ie = () => {
+      p.value || c.value.length !== 0 && (r.value || (r.value = !0), s.value = (s.value - 1 + c.value.length) % c.value.length);
+    }, Oe = () => {
+      r.value && _.value && D(_.value);
+    }, Se = (e, o) => {
+      v.measureElement(o, Ke(e));
+    }, Y = () => {
+      r.value = !1;
+    }, Ve = () => {
+      s.value = 0;
+    }, Ee = () => {
+      s.value = Math.max(c.value.length - 1, 0);
+    };
+    return (e, o) => (i(), d("div", {
+      class: Ne(ce.value),
+      style: I(me.value)
+    }, [
+      b("div", Ze, [
+        b("select", {
+          id: u(E),
+          name: u(U),
+          autocomplete: u(ie),
+          tabindex: u(se),
+          disabled: p.value,
           role: "combobox",
-          "aria-expanded": e.open,
-          "aria-controls": e.listboxId,
-          "aria-activedescendant": e.open && e.currentFocusedEl ? e.getOptionId(e.currentFocusedEl) : void 0,
-          onFocus: e.focusHandler,
-          onBlur: e.blurHandler,
+          "aria-expanded": r.value,
+          "aria-controls": Q.value,
+          "aria-activedescendant": r.value && _.value ? z(_.value) : void 0,
+          onFocus: de,
+          onBlur: ve,
           onKeydown: [
-            a(n(e.spaceHandler, ["prevent"]), ["space"]),
-            a(n(e.arrowDownHandler, ["prevent"]), ["arrow-down"]),
-            a(n(e.arrowUpHandler, ["prevent"]), ["arrow-up"]),
-            a(n(e.enterHandler, ["prevent"]), ["enter"]),
-            a(n(e.escapeHandler, ["prevent"]), ["escape"]),
-            a(n(e.homeHandler, ["prevent"]), ["home"]),
-            a(n(e.endHandler, ["prevent"]), ["end"])
+            h(f(Ae, ["prevent"]), ["space"]),
+            h(f(Me, ["prevent"]), ["arrow-down"]),
+            h(f(Ie, ["prevent"]), ["arrow-up"]),
+            h(f(Oe, ["prevent"]), ["enter"]),
+            h(f(Y, ["prevent"]), ["escape"]),
+            h(f(Ve, ["prevent"]), ["home"]),
+            h(f(Ee, ["prevent"]), ["end"])
           ]
         }, [
-          (o(!0), l(
-            d,
-            null,
-            h(e.nativeOptions, (r) => (o(), l("option", {
-              key: r,
-              value: r
-            }, null, 8, I))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ], 40, S),
-        t(
-          "div",
-          {
-            ref: "nmorphSelectDOMRef",
-            class: "nmorph-select__selected-values-line",
-            "aria-hidden": "true",
-            onClick: n(e.clickHandler, ["stop"])
-          },
-          [
-            Array.isArray(e.initialValue) ? e.initialValue.length === 0 ? (o(), l(
-              "div",
-              u,
-              _(e.computedNoElementPlaceholder),
-              1
-              /* TEXT */
-            )) : (o(), l("div", D, [
-              (o(!0), l(
-                d,
-                null,
-                h(e.tags, (r) => (o(), i(e.NmorphTagItem, m({
-                  key: r.value
-                }, { ref_for: !0 }, r, {
-                  transparent: "",
-                  removable: e.tags.length > 1 || !e.props.valueRequired,
-                  height: "thin",
-                  onClose: e.changeHandler
-                }), null, 16, ["removable"]))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ])) : (o(), l(
-              "div",
-              O,
-              _(e.selectedValueTitle),
-              1
-              /* TEXT */
-            )),
-            f(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
-              default: s(() => [
-                e.props.loading ? (o(), i(e.NmorphIconLoaderDots, { key: 0 })) : (o(), i(e.NmorphIconChevronDown, { key: 1 }))
-              ]),
-              _: 1
-              /* STABLE */
-            })
-          ],
-          512
-          /* NEED_PATCH */
-        )
+          (i(!0), d(H, null, O(we.value, (a) => (i(), d("option", {
+            key: a,
+            value: a
+          }, null, 8, tt))), 128))
+        ], 40, et),
+        b("div", {
+          ref_key: "nmorphSelectDOMRef",
+          ref: M,
+          class: "nmorph-select__selected-values-line",
+          "aria-hidden": "true",
+          onClick: f(fe, ["stop"])
+        }, [
+          Array.isArray(l.value) ? l.value.length === 0 ? (i(), d("div", at, ee(S.value), 1)) : (i(), d("div", nt, [
+            (i(!0), d(H, null, O(X.value, (a) => (i(), y(u(Qe), L({
+              key: a.value
+            }, { ref_for: !0 }, a, {
+              transparent: "",
+              removable: X.value.length > 1 || !t.valueRequired,
+              height: "thin",
+              onClose: D
+            }), null, 16, ["removable"]))), 128))
+          ])) : (i(), d("div", lt, ee(He.value), 1)),
+          te(u(le), { class: "nmorph-select__chevron" }, {
+            default: P(() => [
+              t.loading ? (i(), y(u(Ye), { key: 0 })) : (i(), y(u(ne), { key: 1 }))
+            ]),
+            _: 1
+          })
+        ], 512)
       ]),
-      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), i(e.NmorphDropdown, {
+      M.value && !t.disabled ? (i(), y(u(Xe), {
         key: 0,
-        open: e.open && !e.props.loading,
-        "relative-element": e.nmorphSelectDOMRef,
-        "fill-width": !e.autoOptionsWidth,
-        width: e.autoOptionsWidth ? "max-content" : void 0,
-        "min-width": e.optionsMinWidth,
+        open: r.value && !t.loading,
+        "relative-element": M.value,
+        "fill-width": !A.value,
+        width: A.value ? "max-content" : void 0,
+        "min-width": ke.value,
         "max-width": "calc(100vw - 16px)",
-        "z-index": e.props.zIndex,
-        "aria-label": e.name,
-        onOnOutsideClick: e.closeHandler,
-        onOnEscapeKeydown: e.escapeHandler
+        "z-index": t.zIndex,
+        "aria-label": u(U),
+        onOnOutsideClick: C,
+        onOnEscapeKeydown: Y
       }, {
-        default: s(() => [
-          t("div", {
-            id: e.listboxId,
-            ref: "optionsDOMRef",
+        default: P(() => [
+          b("div", {
+            id: Q.value,
+            ref_key: "optionsDOMRef",
+            ref: R,
             class: "nmorph-select__options",
             role: "listbox"
           }, [
-            e.props.loading ? (o(), i(e.NmorphIcon, {
+            t.loading ? (i(), y(u(le), {
               key: 0,
               class: "nmorph-select__chevron",
               size: "medium"
             }, {
-              default: s(() => [
-                f(e.NmorphIconChevronDown)
+              default: P(() => [
+                te(u(ne))
               ]),
               _: 1
-              /* STABLE */
-            })) : e.virtualEnabled ? (o(), l(
-              "div",
-              {
-                key: 1,
-                ref: e.virtualList.containerRef,
-                class: "nmorph-select__virtual-list",
-                style: c({ maxHeight: e.virtualMaxHeight }),
-                onScroll: v[0] || (v[0] = (...r) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...r))
-              },
-              [
-                t(
-                  "div",
-                  {
-                    class: "nmorph-select__virtual-spacer",
-                    style: c(e.virtualSpacerStyle)
-                  },
-                  [
-                    t(
-                      "div",
-                      {
-                        class: "nmorph-select__virtual-content",
-                        style: c(e.virtualContentStyle)
-                      },
-                      [
-                        (o(!0), l(
-                          d,
-                          null,
-                          h(e.virtualOptions, (r) => (o(), i(e.NmorphSelectOption, m({
-                            id: e.getOptionId(r.item.value),
-                            ref_for: !0,
-                            ref: (g) => e.setVirtualOptionRef(g, r.index),
-                            key: r.index
-                          }, { ref_for: !0 }, r.item, {
-                            focused: r.item.value === e.currentFocusedEl,
-                            height: e.props.height
-                          }), null, 16, ["id", "focused", "height"]))),
-                          128
-                          /* KEYED_FRAGMENT */
-                        ))
-                      ],
-                      4
-                      /* STYLE */
-                    )
-                  ],
-                  4
-                  /* STYLE */
-                )
-              ],
-              36
-              /* STYLE, NEED_HYDRATION */
-            )) : (o(), l(
-              d,
-              { key: 2 },
-              [
-                (o(!0), l(
-                  d,
-                  null,
-                  h(p.options, (r) => (o(), i(e.NmorphSelectOption, m({
-                    id: e.getOptionId(r.value),
-                    key: r.value
-                  }, { ref_for: !0 }, r, {
-                    focused: r.value === e.currentFocusedEl,
-                    height: e.props.height
-                  }), null, 16, ["id", "focused", "height"]))),
-                  128
-                  /* KEYED_FRAGMENT */
-                )),
-                b(y.$slots, "default")
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            ))
-          ], 8, C)
+            })) : w.value ? (i(), d("div", {
+              key: 1,
+              ref: u(v).containerRef,
+              class: "nmorph-select__virtual-list",
+              style: I({ maxHeight: be.value }),
+              onScroll: o[0] || (o[0] = //@ts-ignore
+              (...a) => u(v).scrollHandler && u(v).scrollHandler(...a))
+            }, [
+              b("div", {
+                class: "nmorph-select__virtual-spacer",
+                style: I(u(_e))
+              }, [
+                b("div", {
+                  class: "nmorph-select__virtual-content",
+                  style: I(u(xe))
+                }, [
+                  (i(!0), d(H, null, O(ge.value, (a) => (i(), y(u(ae), L({
+                    id: z(a.item.value),
+                    ref_for: !0,
+                    ref: (N) => Se(N, a.index),
+                    key: a.index
+                  }, { ref_for: !0 }, a.item, {
+                    focused: a.item.value === _.value,
+                    height: t.height
+                  }), null, 16, ["id", "focused", "height"]))), 128))
+                ], 4)
+              ], 4)
+            ], 36)) : (i(), d(H, { key: 2 }, [
+              (i(!0), d(H, null, O(q.options, (a) => (i(), y(u(ae), L({
+                id: z(a.value),
+                key: a.value
+              }, { ref_for: !0 }, a, {
+                focused: a.value === _.value,
+                height: t.height
+              }), null, 16, ["id", "focused", "height"]))), 128)),
+              $e(e.$slots, "default")
+            ], 64))
+          ], 8, rt)
         ]),
         _: 3
-        /* FORWARDED */
-      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : k("v-if", !0)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const B = /* @__PURE__ */ H(w, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : Le("", !0)
+    ], 6));
+  }
+});
 export {
-  B as default
+  Ht as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphSelect.css';
+import o from "./NmorphSelect.vue.js";
+/* empty css                  */
+export {
+  o as default
+};

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

@@ -1,42 +1,74 @@
 import './NmorphSelectOption.css';
-import c from "./NmorphSelectOption.vue2.js";
-import { openBlock as o, createElementBlock as l, normalizeStyle as n, normalizeClass as a, createElementVNode as r, toDisplayString as i, renderSlot as s, createBlock as d, withCtx as m, createVNode as p, createCommentVNode as _ } from "vue";
-/* empty css                        */
-import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const f = ["value", "aria-selected", "aria-disabled"], k = { class: "nmorph-select-option__content" };
-function v(t, N, b, e, y, S) {
-  return o(), l("div", {
-    class: a(e.modifiers),
-    style: n(e.styles),
-    value: e.props.value,
-    role: "option",
-    "aria-selected": e.checked,
-    "aria-disabled": e.props.disabled,
-    onClick: e.clickHandler
-  }, [
-    r("div", k, [
-      r(
-        "span",
-        null,
-        i(e.props.label),
-        1
-        /* TEXT */
-      ),
-      s(t.$slots, "default")
-    ]),
-    e.checked ? (o(), d(e.NmorphIcon, {
-      key: 0,
-      class: "nmorph-select-option__checked"
-    }, {
-      default: m(() => [
-        p(e.NmorphIconSuccess)
+import { defineComponent as b, inject as r, computed as o, openBlock as c, createElementBlock as g, normalizeStyle as k, normalizeClass as y, createElementVNode as i, toDisplayString as C, renderSlot as B, createBlock as S, unref as n, withCtx as N, createVNode as V, createCommentVNode as x } from "vue";
+import { useModifiers as H } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as w } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as z } from "../../../../../types/common.types.js";
+import A from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                            */
+import E from "../../../../../assets/icons/success.svg.js";
+const $ = ["value", "aria-selected", "aria-disabled"], j = { class: "nmorph-select-option__content" }, K = /* @__PURE__ */ b({
+  __name: "NmorphSelectOption",
+  props: {
+    value: {},
+    label: { default: "" },
+    focused: { type: Boolean, default: !1 },
+    hoverBackground: { default: void 0 },
+    hoverColor: { default: void 0 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: {},
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["change-value"],
+  setup(d, { emit: u }) {
+    const t = r("select-selected-value"), s = r("select-change-selected-value"), m = r(
+      "select-height",
+      void 0
+    ), e = d, h = u, p = () => {
+      e.disabled || (h("change-value", e.value), s && s(e.value));
+    }, l = o(() => typeof t?.value == "string" ? t.value === e.value : Array.isArray(t?.value) ? t.value.some((a) => a === e.value) : !1), v = o(() => e.height || m?.value || "basic"), f = o(
+      () => H({
+        nmorph: [z[v.value]],
+        "nmorph-select-option": [
+          e.disabled && "disabled",
+          e.label && "with-label",
+          l.value && "checked",
+          e.focused && "focused"
+        ]
+      })
+    ), _ = o(
+      () => w({
+        "--hover-bg": e.hoverBackground,
+        "--hover-color": e.hoverColor
+      })
+    );
+    return (a, D) => (c(), g("div", {
+      class: y(f.value),
+      style: k(_.value),
+      value: e.value,
+      role: "option",
+      "aria-selected": l.value,
+      "aria-disabled": e.disabled,
+      onClick: p
+    }, [
+      i("div", j, [
+        i("span", null, C(e.label), 1),
+        B(a.$slots, "default")
       ]),
-      _: 1
-      /* STABLE */
-    })) : _("v-if", !0)
-  ], 14, f);
-}
-const V = /* @__PURE__ */ h(c, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue"]]);
+      l.value ? (c(), S(n(A), {
+        key: 0,
+        class: "nmorph-select-option__checked"
+      }, {
+        default: N(() => [
+          V(n(E))
+        ]),
+        _: 1
+      })) : x("", !0)
+    ], 14, $));
+  }
+});
 export {
-  V as default
+  K as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphSelectOption.css';
+import o from "./NmorphSelectOption.vue.js";
+/* empty css                        */
+export {
+  o as default
+};