@nmorph/nmorph-ui-kit 2.2.34 → 2.2.36

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue.js

@@ -0,0 +1,81 @@
+import './NmorphDrawer.css';
+import c from "./NmorphDrawer.vue2.js";
+import { openBlock as e, createBlock as p, withCtx as n, createElementVNode as l, normalizeStyle as m, normalizeClass as d, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as i, createCommentVNode as s } from "vue";
+/* empty css                  */
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = ["aria-label"], w = {
+  key: 0,
+  class: "nmorph-drawer__header"
+}, b = { class: "nmorph-drawer__title" }, y = ["aria-label"], k = {
+  key: 1,
+  class: "nmorph-drawer__footer"
+};
+function v(r, C, N, o, z, O) {
+  return e(), p(o.NmorphOverlay, {
+    show: o.props.modelValue,
+    "z-index": o.props.zIndex,
+    "teleport-to": o.props.teleportTo,
+    "disabled-teleport": o.props.disabledTeleport,
+    "close-on-escape": o.props.closeOnEscape,
+    "trap-focus": "",
+    onOnOutsideClick: o.overlayClickHandler,
+    onOnEscapeKeydown: o.closeHandler
+  }, {
+    default: n(() => [
+      l("aside", {
+        class: d(o.modifiers),
+        style: m(o.drawerStyle),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": o.props.title || void 0
+      }, [
+        o.hasHeader ? (e(), a("div", w, [
+          t(r.$slots, "header", {}, () => [
+            l(
+              "div",
+              b,
+              _(o.props.title),
+              1
+              /* TEXT */
+            ),
+            o.props.showClose ? (e(), a("button", {
+              key: 0,
+              class: "nmorph-drawer__close",
+              type: "button",
+              "aria-label": o.props.title ? `Close ${o.props.title}` : "Close drawer",
+              onClick: o.closeHandler
+            }, [
+              i(o.NmorphIcon, null, {
+                default: n(() => [
+                  i(o.NmorphIconCross)
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ], 8, y)) : s("v-if", !0)
+          ])
+        ])) : s("v-if", !0),
+        l(
+          "div",
+          {
+            class: d(["nmorph-drawer__content", o.props.contentClass])
+          },
+          [
+            t(r.$slots, "default")
+          ],
+          2
+          /* CLASS */
+        ),
+        o.slots.footer ? (e(), a("div", k, [
+          t(r.$slots, "footer")
+        ])) : s("v-if", !0)
+      ], 14, f)
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["show", "z-index", "teleport-to", "disabled-teleport", "close-on-escape"]);
+}
+const V = /* @__PURE__ */ h(c, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-drawer/NmorphDrawer.vue"]]);
+export {
+  V as default
+};

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js

@@ -0,0 +1,47 @@
+import './NmorphDrawer.css';
+import { defineComponent as y, useSlots as h, computed as o } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import _ from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import g from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import N from "../../../assets/icons/cross.svg.js";
+const w = /* @__PURE__ */ y({
+  __name: "NmorphDrawer",
+  props: {
+    modelValue: { type: Boolean, required: !1, default: !1 },
+    title: { type: String, required: !1, default: "" },
+    placement: { type: String, required: !1, default: "right" },
+    size: { type: [Number, String], required: !1, default: "360px" },
+    showClose: { type: Boolean, required: !1, default: !0 },
+    closeOnOverlay: { type: Boolean, required: !1, default: !0 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    teleportTo: { type: null, required: !1, default: "body" },
+    disabledTeleport: { type: Boolean, required: !1, default: !1 },
+    contentClass: { type: String, required: !1, default: "" }
+  },
+  emits: ["on-close", "update:model-value"],
+  setup(p, { expose: u, emit: d }) {
+    u();
+    const e = p, r = d, l = h(), i = o(
+      () => q({
+        "nmorph-drawer": [e.placement, `${e.modelValue && "open"}`]
+      })
+    ), s = (t) => typeof t == "number" ? `${t}px` : t, f = o(() => ({
+      "--nmorph-drawer-size": s(e.size)
+    })), a = () => {
+      r("on-close"), r("update:model-value", !1);
+    }, m = () => {
+      e.closeOnOverlay && a();
+    }, c = o(() => !!(l.header || e.title || e.showClose)), n = { props: e, emit: r, slots: l, modifiers: i, getCssSize: s, drawerStyle: f, closeHandler: a, overlayClickHandler: m, hasHeader: c, get NmorphIcon() {
+      return g;
+    }, get NmorphIconCross() {
+      return N;
+    }, get NmorphOverlay() {
+      return _;
+    } };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  w as default
+};

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css

@@ -1 +1 @@
-.nmorph-autocomplete .nmorph-autocomplete__input-content{position:relative}.nmorph-autocomplete.nmorph-autocomplete--open .nmorph-autocomplete__input-content{z-index:var(--nmorph-autocomplete-input-z-index)}.nmorph-autocomplete__list{padding:var(--indentation-01) 0}.nmorph-autocomplete__list-item{box-sizing:border-box;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete__list-item:hover,.nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}
+.nmorph-autocomplete .nmorph-autocomplete__input-content{position:relative}.nmorph-autocomplete.nmorph-autocomplete--open .nmorph-autocomplete__input-content{z-index:var(--nmorph-autocomplete-input-z-index)}.nmorph-autocomplete__list{padding:var(--indentation-01) 0}.nmorph-autocomplete__list-item{display:flex;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete__list-item:hover,.nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js

@@ -1,16 +1,16 @@
 import './NmorphAutocomplete.css';
 import v from "./NmorphAutocomplete.vue2.js";
-import { openBlock as l, createElementBlock as t, normalizeStyle as n, normalizeClass as a, createElementVNode as i, createVNode as c, createBlock as y, withCtx as p, renderSlot as m, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
+import { openBlock as l, createElementBlock as t, normalizeStyle as n, normalizeClass as a, createElementVNode as d, createVNode as m, createBlock as y, withCtx as p, renderSlot as s, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
 /* empty css                        */
 import k from "../../../_virtual/_plugin-vue_export-helper.js";
-const b = { class: "nmorph-autocomplete__input-content" }, g = {
+const g = { class: "nmorph-autocomplete__input-content" }, b = {
   ref: "nmorphAutocompleteDOMRef",
   class: "nmorph-autocomplete__input"
 }, H = {
   key: 0,
   class: "nmorph-autocomplete__loading"
-}, N = ["id"], C = ["id", "aria-selected", "onClick"], I = ["id"], O = ["id", "aria-selected", "onClick"];
-function V(d, s, w, e, S, A) {
+}, N = ["id"], V = ["id", "aria-selected", "onClick"], C = ["id"], I = ["id", "aria-selected", "onClick"];
+function O(c, i, w, e, D, S) {
   return l(), t(
     "div",
     {
@@ -18,25 +18,25 @@ function V(d, s, w, e, S, A) {
       style: n(e.styles)
     },
     [
-      i("div", b, [
-        i(
+      d("div", g, [
+        d(
           "div",
-          g,
+          b,
           [
-            c(e.NmorphTextInput, {
+            m(e.NmorphTextInput, {
               id: e.props.id,
+              modelValue: e.inputValue,
+              "onUpdate:modelValue": i[0] || (i[0] = (o) => e.inputValue = o),
               name: e.props.name,
               autocomplete: e.props.autocomplete,
               height: e.props.height,
               disabled: e.props.disabled,
-              "model-value": e.initialValue,
               placeholder: e.props.placeholder,
               clearable: e.props.clearable,
               "input-attrs": e.inputAttrs,
               onFocus: e.focusHandler,
-              onKeydown: e.keydownHandler,
-              "onUpdate:modelValue": e.updateValueHandler
-            }, null, 8, ["id", "name", "autocomplete", "height", "disabled", "model-value", "placeholder", "clearable", "input-attrs"])
+              onKeydown: e.keydownHandler
+            }, null, 8, ["id", "modelValue", "name", "autocomplete", "height", "disabled", "placeholder", "clearable", "input-attrs"])
           ],
           512
           /* NEED_PATCH */
@@ -56,10 +56,10 @@ function V(d, s, w, e, S, A) {
       }, {
         default: p(() => [
           e.loader ? (l(), t("div", H, [
-            m(d.$slots, "loader", {}, () => [
-              c(e.NmorphIcon, { size: "large" }, {
+            s(c.$slots, "loader", {}, () => [
+              m(e.NmorphIcon, { size: "large" }, {
                 default: p(() => [
-                  c(e.NmorphIconLoader)
+                  m(e.NmorphIconLoaderDots)
                 ]),
                 _: 1
                 /* STABLE */
@@ -72,16 +72,16 @@ function V(d, s, w, e, S, A) {
             class: a(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
             style: n({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
             role: "listbox",
-            onScroll: s[0] || (s[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
+            onScroll: i[1] || (i[1] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
           }, [
-            i(
+            d(
               "div",
               {
                 class: "nmorph-autocomplete__virtual-spacer",
                 style: n(e.virtualSpacerStyle)
               },
               [
-                i(
+                d(
                   "div",
                   {
                     class: "nmorph-autocomplete__virtual-content",
@@ -96,12 +96,15 @@ function V(d, s, w, e, S, A) {
                         ref_for: !0,
                         ref: (r) => e.setVirtualItemRef(r, o.index),
                         key: o.index,
-                        class: a(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }]),
+                        class: a(["nmorph-autocomplete__list-item", [
+                          e.optionHeightModifiers,
+                          { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }
+                        ]]),
                         role: "option",
                         "aria-selected": o.index === e.currentIndex,
                         onClick: () => e.clickHandler(o.item)
                       }, [
-                        m(d.$slots, "default", {
+                        s(c.$slots, "default", {
                           scope: o.item
                         }, () => [
                           f(
@@ -110,7 +113,7 @@ function V(d, s, w, e, S, A) {
                             /* TEXT */
                           )
                         ])
-                      ], 10, C))),
+                      ], 10, V))),
                       128
                       /* KEYED_FRAGMENT */
                     ))
@@ -134,23 +137,23 @@ function V(d, s, w, e, S, A) {
               h(e.filteredList, (o, r) => (l(), t("div", {
                 id: e.getOptionId(r),
                 key: r,
-                class: a(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]),
+                class: a(["nmorph-autocomplete__list-item", [e.optionHeightModifiers, { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]]),
                 role: "option",
                 "aria-selected": r === e.currentIndex,
                 onClick: () => e.clickHandler(o)
               }, [
-                m(d.$slots, "default", { scope: o }, () => [
+                s(c.$slots, "default", { scope: o }, () => [
                   f(
                     u(o.value),
                     1
                     /* TEXT */
                   )
                 ])
-              ], 10, O))),
+              ], 10, I))),
               128
               /* KEYED_FRAGMENT */
             ))
-          ], 8, I))
+          ], 8, C))
         ]),
         _: 3
         /* FORWARDED */
@@ -160,7 +163,7 @@ function V(d, s, w, e, S, A) {
     /* CLASS, STYLE */
   );
 }
-const M = /* @__PURE__ */ k(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
+const R = /* @__PURE__ */ k(v, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
 export {
-  M as default
+  R as default
 };

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js

@@ -1,13 +1,14 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as P, ref as s, computed as l, watch as c, nextTick as Y } from "vue";
-import { useModifiers as G } from "../../../utils/create-modifiers.js";
-import { useVirtualList as J } from "../../../hooks/use-virtual-list.js";
-import { useZIndex as K } from "../../../hooks/use-z-index.js";
-import Q from "../nmorph-text-input/NmorphTextInput.vue.js";
-import W from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import X from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ee from "../../../assets/icons/loader.svg.js";
-const se = /* @__PURE__ */ P({
+import { defineComponent as K, ref as s, computed as t, watch as c, nextTick as Q } from "vue";
+import { useModifiers as M } from "../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as W } from "../../../types/index.js";
+import { useVirtualList as X } from "../../../hooks/use-virtual-list.js";
+import { useZIndex as ee } from "../../../hooks/use-z-index.js";
+import te from "../nmorph-text-input/NmorphTextInput.vue.js";
+import ae from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import re from "../../../assets/icons/loader.svg.js";
+const ve = /* @__PURE__ */ K({
   __name: "NmorphAutocomplete",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -17,7 +18,7 @@ const se = /* @__PURE__ */ P({
     actionCallback: { type: Function, required: !1, default: void 0 },
     zIndex: { type: Number, required: !1, default: void 0 },
     virtual: { type: Boolean, required: !1, default: !1 },
-    virtualItemHeight: { type: Number, required: !1, default: 34 },
+    virtualItemHeight: { type: Number, required: !1, default: void 0 },
     virtualMaxHeight: { type: [Number, String], required: !1, default: 240 },
     virtualOverscan: { type: Number, required: !1, default: 5 },
     virtualDynamicHeight: { type: Boolean, required: !1, default: !1 },
@@ -29,81 +30,92 @@ const se = /* @__PURE__ */ P({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "select"],
-  setup(_, { expose: C, emit: $ }) {
-    C();
-    const t = _, u = s(t.modelValue), d = $, L = l(
-      () => G({
-        "nmorph-autocomplete": [`${a.value && "open"}`]
+  setup(O, { expose: $, emit: L }) {
+    $();
+    const a = O, o = s(a.modelValue), p = L, T = t(
+      () => M({
+        "nmorph-autocomplete": [`${l.value && "open"}`]
       })
-    ), i = s(!1), O = (e) => {
-      i.value = e === "", u.value = e, a.value = !i.value && r.value.length > 0, o.value = 0, d("update:model-value", u.value);
-    }, a = s(!1), T = s(null), y = () => {
-      i.value = !0, a.value = !1;
-    }, r = l(() => t.list.filter((e) => Object.keys(e).some((g) => String(e[g]).toLowerCase().includes(u.value.toLowerCase())))), f = l(() => t.virtual && r.value.length > 0), x = l(() => t.virtualItemHeight), I = l(() => t.virtualOverscan), b = l(() => t.virtualDynamicHeight), n = J(r, {
+    ), i = s(!1), y = (e) => {
+      i.value = e === "", o.value = e, l.value = !i.value && r.value.length > 0, u.value = 0, p("update:model-value", o.value);
+    }, V = t({
+      get: () => o.value,
+      set: y
+    }), l = s(!1), A = s(null), b = () => {
+      i.value = !0, l.value = !1;
+    }, r = t(() => a.list.filter((e) => Object.keys(e).some((g) => String(e[g]).toLowerCase().includes(o.value.toLowerCase())))), f = t(() => a.virtual && r.value.length > 0), x = t(() => ({
+      basic: 30,
+      thick: 38,
+      thin: 22
+    })[a.height || "basic"]), I = t(() => a.virtualItemHeight || x.value), H = t(() => a.virtualOverscan), q = t(() => a.virtualDynamicHeight), n = X(r, {
       enabled: f,
-      itemHeight: x,
-      overscan: I,
-      dynamic: b
-    }), A = l(() => n.virtualItems.value), V = l(() => ({
+      itemHeight: I,
+      overscan: H,
+      dynamic: q
+    }), z = t(() => n.virtualItems.value), B = t(() => ({
       height: `${n.totalHeight.value}px`
-    })), M = l(() => ({
+    })), E = t(() => ({
       transform: `translateY(${n.offsetTop.value}px)`
-    })), H = (e) => typeof e == "number" ? `${e}px` : e, z = l(() => H(t.virtualMaxHeight)), o = s(0), v = l(() => r.value[o.value]), m = l(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), q = (e) => `${m.value}-option-${e}`;
+    })), N = (e) => typeof e == "number" ? `${e}px` : e, j = t(() => N(a.virtualMaxHeight)), u = s(0), v = t(() => r.value[u.value]), m = t(() => `${a.id || a.name || "nmorph-autocomplete"}-listbox`), w = (e) => `${m.value}-option-${e}`;
     c(
-      () => t.modelValue,
+      () => a.modelValue,
       (e) => {
-        e !== u.value && (u.value = e);
+        e !== o.value && (o.value = e);
       }
     ), c(r, async (e) => {
-      a.value = !i.value && u.value !== "" && e.length > 0, o.value = 0, await Y(), n.scrollToIndex(0), n.refresh();
+      l.value = !i.value && o.value !== "" && e.length > 0, u.value = 0, await Q(), n.scrollToIndex(0), n.refresh();
     });
     const h = (e) => {
-      d("select", e), u.value = e.value, d("update:model-value", u.value), setTimeout(() => {
-        i.value = !0, a.value = !1;
+      p("select", e), o.value = e.value, p("update:model-value", o.value), setTimeout(() => {
+        i.value = !0, l.value = !1;
       });
-    }, B = (e) => {
+    }, R = (e) => {
       h(e);
-    }, E = () => {
-      i.value = !1, a.value = r.value.length > 0;
-    }, p = s(!1);
-    c(u, async (e) => {
-      e !== "" && t.actionCallback && (p.value = !0, await t.actionCallback(), p.value = !1);
-    }), c(p, (e) => {
-      e && (a.value = !0);
-    }), c(o, (e) => {
+    }, U = () => {
+      i.value = !1, l.value = r.value.length > 0;
+    }, d = s(!1);
+    c(o, async (e) => {
+      e !== "" && a.actionCallback && (d.value = !0, await a.actionCallback(), d.value = !1);
+    }), c(d, (e) => {
+      e && (l.value = !0);
+    }), c(u, (e) => {
       f.value && n.scrollToIndex(e);
     });
-    const w = () => {
-      r.value.length && (a.value = !0, o.value = (o.value + 1) % r.value.length);
-    }, N = () => {
-      r.value.length && (a.value = !0, o.value = (o.value - 1 + r.value.length) % r.value.length);
+    const D = () => {
+      r.value.length && (l.value = !0, u.value = (u.value + 1) % r.value.length);
     }, S = () => {
-      !a.value || !v.value || h(v.value);
-    }, j = (e) => {
-      e.key === "ArrowDown" ? (e.preventDefault(), w()) : e.key === "ArrowUp" ? (e.preventDefault(), N()) : e.key === "Enter" ? (e.preventDefault(), S()) : e.key === "Escape" && (e.preventDefault(), y());
-    }, R = l(() => ({
+      r.value.length && (l.value = !0, u.value = (u.value - 1 + r.value.length) % r.value.length);
+    }, k = () => {
+      !l.value || !v.value || h(v.value);
+    }, Z = (e) => {
+      e.key === "ArrowDown" ? (e.preventDefault(), D()) : e.key === "ArrowUp" ? (e.preventDefault(), S()) : e.key === "Enter" ? (e.preventDefault(), k()) : e.key === "Escape" && (e.preventDefault(), b());
+    }, F = t(() => ({
       role: "combobox",
       "aria-autocomplete": "list",
-      "aria-expanded": a.value,
+      "aria-expanded": l.value,
       "aria-controls": m.value,
-      "aria-activedescendant": a.value ? q(o.value) : void 0
-    })), U = (e, g) => {
-      const F = e instanceof Element ? e : e?.$el;
-      n.measureElement(g, F);
-    }, D = K(a, () => t.zIndex), Z = l(() => ({
-      "--nmorph-autocomplete-input-z-index": D.value + 1
-    })), k = { props: t, initialValue: u, emit: d, modifiers: L, userClosed: i, updateValueHandler: O, open: a, nmorphAutocompleteDOMRef: T, closeHandler: y, filteredList: r, virtualEnabled: f, virtualItemHeight: x, virtualOverscan: I, virtualDynamicHeight: b, virtualList: n, virtualItems: A, virtualSpacerStyle: V, virtualContentStyle: M, getCssSize: H, virtualMaxHeight: z, currentIndex: o, activeItem: v, listboxId: m, getOptionId: q, selectItem: h, clickHandler: B, focusHandler: E, loader: p, arrowDownHandler: w, arrowUpHandler: N, enterHandler: S, keydownHandler: j, inputAttrs: R, setVirtualItemRef: U, dropdownZIndex: D, styles: Z, get NmorphIcon() {
-      return X;
+      "aria-activedescendant": l.value ? w(u.value) : void 0
+    })), P = (e, g) => {
+      const J = e instanceof Element ? e : e?.$el;
+      n.measureElement(g, J);
+    }, C = ee(l, () => a.zIndex), Y = t(() => ({
+      "--nmorph-autocomplete-input-z-index": C.value + 1
+    })), G = t(
+      () => M({
+        nmorph: [W[a.height]]
+      })
+    ), _ = { props: a, initialValue: o, emit: p, modifiers: T, userClosed: i, updateValueHandler: y, inputValue: V, open: l, nmorphAutocompleteDOMRef: A, closeHandler: b, filteredList: r, virtualEnabled: f, defaultOptionHeight: x, virtualItemHeight: I, virtualOverscan: H, virtualDynamicHeight: q, virtualList: n, virtualItems: z, virtualSpacerStyle: B, virtualContentStyle: E, getCssSize: N, virtualMaxHeight: j, currentIndex: u, activeItem: v, listboxId: m, getOptionId: w, selectItem: h, clickHandler: R, focusHandler: U, loader: d, arrowDownHandler: D, arrowUpHandler: S, enterHandler: k, keydownHandler: Z, inputAttrs: F, setVirtualItemRef: P, dropdownZIndex: C, styles: Y, optionHeightModifiers: G, get NmorphIcon() {
+      return le;
     }, get NmorphDropdown() {
-      return W;
+      return ae;
     }, get NmorphTextInput() {
-      return Q;
-    }, get NmorphIconLoader() {
-      return ee;
+      return te;
+    }, get NmorphIconLoaderDots() {
+      return re;
     } };
-    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
   }
 });
 export {
-  se as default
+  ve as default
 };

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js

@@ -1,23 +1,23 @@
-import t from "./NmorphDatePickerContent.vue2.js";
-import { openBlock as a, createElementBlock as o, normalizeClass as i, createBlock as r, withCtx as l, createVNode as d, createCommentVNode as n } from "vue";
-import c from "../../../../../_virtual/_plugin-vue_export-helper.js";
-function h(m, k, p, e, Y, f) {
-  return a(), o(
+import l from "./NmorphDatePickerContent.vue2.js";
+import { openBlock as a, createElementBlock as i, normalizeClass as d, createBlock as r, withCtx as c, createVNode as m, createCommentVNode as n } from "vue";
+import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
+function k(Y, t, f, e, p, y) {
+  return a(), i(
     "div",
     {
-      class: i(e.modifiers)
+      class: d(e.modifiers)
     },
     [
       e.selectedPicker === "calendar" ? (a(), r(e.NmorphCalendar, {
         key: 0,
+        modelValue: e.selectedValuesModel,
+        "onUpdate:modelValue": t[0] || (t[0] = (o) => e.selectedValuesModel = o),
         type: e.props.type,
         "initial-date": e.initialDate,
-        "model-value": e.props.selectedValues,
-        "onUpdate:modelValue": e.updateSelectedDate,
         onUpdateInitialDate: e.updateInitialDate
       }, {
-        header: l(() => [
-          d(e.NmorphDatePickerHeader, {
+        header: c(() => [
+          m(e.NmorphDatePickerHeader, {
             year: e.initialDate.getFullYear(),
             month: e.initialDate.getMonth(),
             onPrevMonth: e.prevMonthHandler,
@@ -30,7 +30,7 @@ function h(m, k, p, e, Y, f) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["type", "initial-date", "model-value"])) : n("v-if", !0),
+      }, 8, ["modelValue", "type", "initial-date"])) : n("v-if", !0),
       e.selectedPicker === "year" ? (a(), r(e.NmorphYearMonthPicker, {
         key: 1,
         type: "year",
@@ -50,7 +50,7 @@ function h(m, k, p, e, Y, f) {
     /* CLASS */
   );
 }
-const H = /* @__PURE__ */ c(t, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue"]]);
+const N = /* @__PURE__ */ h(l, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue"]]);
 export {
-  H as default
+  N as default
 };

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as H, computed as n, ref as i } from "vue";
-import { useModifiers as Y } from "../../../../../utils/create-modifiers.js";
-import f from "../nmorph-date-picker-header/NmorphDatePickerHeader.vue.js";
-import M from "../nmorph-year-month-picker/NmorphYearMonthPicker.vue.js";
-import _ from "../../../../data/nmorph-calendar/NmorphCalendar.vue.js";
-const O = /* @__PURE__ */ H({
+import { defineComponent as x, computed as n, ref as i } from "vue";
+import { useModifiers as b } from "../../../../../utils/create-modifiers.js";
+import F from "../nmorph-date-picker-header/NmorphDatePickerHeader.vue.js";
+import P from "../nmorph-year-month-picker/NmorphYearMonthPicker.vue.js";
+import C from "../../../../data/nmorph-calendar/NmorphCalendar.vue.js";
+const O = /* @__PURE__ */ x({
   __name: "NmorphDatePickerContent",
   props: {
     initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
@@ -13,37 +13,38 @@ const O = /* @__PURE__ */ H({
   emits: ["update-selected-value"],
   setup(v, { expose: m, emit: h }) {
     m();
-    const l = v, o = h, D = n(
-      () => Y({
+    const r = v, o = h, D = n(
+      () => b({
         "nmorph-date-picker-content": []
       })
-    ), e = i(l.initialDate), a = i("calendar"), u = n(() => new Date(e.value.setMonth(e.value.getMonth() - 1))), d = n(() => new Date(e.value.setMonth(e.value.getMonth() + 1))), s = n(() => new Date(e.value.setFullYear(e.value.getFullYear() - 1))), c = n(() => new Date(e.value.setFullYear(e.value.getFullYear() + 1))), p = { props: l, emit: o, modifiers: D, initialDate: e, selectedPicker: a, prevMonth: u, nextMonth: d, prevYear: s, nextYear: c, prevMonthHandler: () => {
+    ), e = i(r.initialDate), a = i("calendar"), u = n(() => new Date(e.value.setMonth(e.value.getMonth() - 1))), s = n(() => new Date(e.value.setMonth(e.value.getMonth() + 1))), c = n(() => new Date(e.value.setFullYear(e.value.getFullYear() - 1))), d = n(() => new Date(e.value.setFullYear(e.value.getFullYear() + 1))), f = () => {
       e.value = u.value;
-    }, nextMonthHandler: () => {
-      e.value = d.value;
-    }, prevYearHandler: () => {
+    }, M = () => {
       e.value = s.value;
-    }, nextYearHandler: () => {
+    }, Y = () => {
       e.value = c.value;
-    }, changeYearHandler: () => {
+    }, H = () => {
+      e.value = d.value;
+    }, _ = () => {
       a.value = "year";
-    }, changeMonthHandler: () => {
+    }, g = () => {
       a.value = "month";
-    }, updateYearHandler: (t) => {
-      const r = new Date(e.value.setFullYear(Number(t)));
-      e.value = r, a.value = "month";
-    }, updateMonthHandler: (t) => {
-      const r = new Date(e.value.setMonth(Number(t)));
-      e.value = r, a.value = "calendar";
-    }, backToYearsHandler: () => {
+    }, y = (t) => {
+      const l = new Date(e.value.setFullYear(Number(t)));
+      e.value = l, a.value = "month";
+    }, w = (t) => {
+      const l = new Date(e.value.setMonth(Number(t)));
+      e.value = l, a.value = "calendar";
+    }, N = () => {
       a.value = "year";
-    }, updateSelectedDate: (t) => {
-      o("update-selected-value", t);
-    }, updateInitialDate: (t) => {
+    }, k = n({
+      get: () => r.selectedValues,
+      set: (t) => o("update-selected-value", t)
+    }), p = { props: r, emit: o, modifiers: D, initialDate: e, selectedPicker: a, prevMonth: u, nextMonth: s, prevYear: c, nextYear: d, prevMonthHandler: f, nextMonthHandler: M, prevYearHandler: Y, nextYearHandler: H, changeYearHandler: _, changeMonthHandler: g, updateYearHandler: y, updateMonthHandler: w, backToYearsHandler: N, selectedValuesModel: k, updateInitialDate: (t) => {
       e.value = t;
     }, get NmorphCalendar() {
-      return _;
-    }, NmorphDatePickerHeader: f, NmorphYearMonthPicker: M };
+      return C;
+    }, NmorphDatePickerHeader: F, NmorphYearMonthPicker: P };
     return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });