@nmorph/nmorph-ui-kit 2.2.35 → 2.2.37

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

@@ -1,6 +1,6 @@
 import './NmorphAutocomplete.css';
 import v from "./NmorphAutocomplete.vue2.js";
-import { openBlock as l, createElementBlock as t, normalizeStyle as i, normalizeClass as n, createElementVNode as a, 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 g = { class: "nmorph-autocomplete__input-content" }, b = {
@@ -9,34 +9,34 @@ const g = { class: "nmorph-autocomplete__input-content" }, b = {
 }, 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",
     {
-      class: n(e.modifiers),
-      style: i(e.styles)
+      class: a(e.modifiers),
+      style: n(e.styles)
     },
     [
-      a("div", g, [
-        a(
+      d("div", g, [
+        d(
           "div",
           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 */
@@ -69,23 +69,23 @@ function V(d, s, w, e, S, A) {
             key: 1,
             id: e.listboxId,
             ref: e.virtualList.containerRef,
-            class: n(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
-            style: i({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
+            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))
           }, [
-            a(
+            d(
               "div",
               {
                 class: "nmorph-autocomplete__virtual-spacer",
-                style: i(e.virtualSpacerStyle)
+                style: n(e.virtualSpacerStyle)
               },
               [
-                a(
+                d(
                   "div",
                   {
                     class: "nmorph-autocomplete__virtual-content",
-                    style: i(e.virtualContentStyle)
+                    style: n(e.virtualContentStyle)
                   },
                   [
                     (l(!0), t(
@@ -96,7 +96,7 @@ function V(d, s, w, e, S, A) {
                         ref_for: !0,
                         ref: (r) => e.setVirtualItemRef(r, o.index),
                         key: o.index,
-                        class: n(["nmorph-autocomplete__list-item", [
+                        class: a(["nmorph-autocomplete__list-item", [
                           e.optionHeightModifiers,
                           { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }
                         ]]),
@@ -104,7 +104,7 @@ function V(d, s, w, e, S, A) {
                         "aria-selected": o.index === e.currentIndex,
                         onClick: () => e.clickHandler(o.item)
                       }, [
-                        m(d.$slots, "default", {
+                        s(c.$slots, "default", {
                           scope: o.item
                         }, () => [
                           f(
@@ -113,7 +113,7 @@ function V(d, s, w, e, S, A) {
                             /* TEXT */
                           )
                         ])
-                      ], 10, C))),
+                      ], 10, V))),
                       128
                       /* KEYED_FRAGMENT */
                     ))
@@ -137,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: n(["nmorph-autocomplete__list-item", [e.optionHeightModifiers, { "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 */
@@ -163,7 +163,7 @@ function V(d, s, w, e, S, A) {
     /* CLASS, STYLE */
   );
 }
-const R = /* @__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 {
   R as default
 };

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

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

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue2.js

@@ -2,7 +2,7 @@ import './NmorphCheckbox.css';
 import { defineComponent as y, inject as u, watch as k, ref as i, computed as r } from "vue";
 import { useModifiers as x } from "../../../utils/create-modifiers.js";
 import { NmorphSelectionControlHeight as S } from "../../../types/index.js";
-const $ = /* @__PURE__ */ y({
+const j = /* @__PURE__ */ y({
   __name: "NmorphCheckbox",
   props: {
     id: { type: String, required: !1, default: "" },
@@ -41,9 +41,9 @@ const $ = /* @__PURE__ */ y({
       () => x({
         nmorph: [S[c.value]],
         "nmorph-checkbox": [
-          `${s.value && "checked"}`,
-          `${e.disabled && "disabled"}`,
-          `${e.design === "button" && "button"}`
+          s.value && "checked",
+          e.disabled && "disabled",
+          e.design === "button" && "button"
         ]
       })
     ), h = { groupSelectedValue: l, changeValue: a, groupHeight: n, props: e, inputDOMRef: d, hasGroup: o, initialValue: t, checked: s, height: c, emit: p, handleChange: g, modifiers: b };
@@ -51,5 +51,5 @@ const $ = /* @__PURE__ */ y({
   }
 });
 export {
-  $ as default
+  j as default
 };

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue2.js

@@ -42,7 +42,7 @@ const E = /* @__PURE__ */ R({
     ], y = (e) => {
       const [r, t, n] = p(e);
       return `rgb(${r}, ${t}, ${n})`;
-    }, $ = (e) => {
+    }, v = (e) => {
       const [r, t, n] = p(e).map((P) => P / 255), l = Math.max(r, t, n), u = Math.min(r, t, n), f = (l + u) / 2;
       if (l === u)
         return `hsl(0, 0%, ${Math.round(f * 100)}%)`;
@@ -55,11 +55,11 @@ const E = /* @__PURE__ */ R({
     }), q({ inputDOMRef: c });
     const F = C(
       () => H({
-        nmorph: [B[o.height], `${b.value && "focused"}`],
-        "nmorph-color-picker": [`${o.disabled && "disabled"}`, o.displayFormat]
+        nmorph: [B[o.height], b.value && "focused"],
+        "nmorph-color-picker": [o.disabled && "disabled", o.displayFormat]
       })
-    ), w = C(() => o.displayFormat === "rgb" ? y(a.value) : o.displayFormat === "hsl" ? $(a.value) : a.value.toUpperCase()), v = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: a, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: $, modifiers: F, displayValue: w };
-    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+    ), w = C(() => o.displayFormat === "rgb" ? y(a.value) : o.displayFormat === "hsl" ? v(a.value) : a.value.toUpperCase()), $ = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: a, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: v, modifiers: F, displayValue: w };
+    return Object.defineProperty($, "__isScriptSetup", { enumerable: !1, value: !0 }), $;
   }
 });
 export {

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js

@@ -1,16 +1,17 @@
 import './NmorphDatePicker.css';
 import { defineComponent as O, computed as a, ref as u } from "vue";
 import { useModifiers as k } from "../../../utils/create-modifiers.js";
+import { toCssSize as s } from "../../../utils/common.js";
 import { NmorphComponentHeight as B } from "../../../types/index.js";
 import P from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
 import V from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
-import { useI18n as $ } from "vue-i18n";
-import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
+import { useI18n as j } from "vue-i18n";
+import { useFormItemInput as z } from "../nmorph-form/use-form-item-input.js";
 import { formatDate as f } from "../../data/nmorph-calendar/utils.js";
-import z from "../../../assets/icons/calendar.svg.js";
-import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import M from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const Z = /* @__PURE__ */ O({
+import L from "../../../assets/icons/calendar.svg.js";
+import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import R from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const ee = /* @__PURE__ */ O({
   __name: "NmorphDatePicker",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -35,23 +36,23 @@ const Z = /* @__PURE__ */ O({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(m, { expose: c, emit: y }) {
+  setup(m, { expose: c, emit: v }) {
     c();
-    const { t: p } = $(), e = m, { id: h, name: v, autocomplete: g } = j(e), n = a(() => e.placeholder ? e.placeholder : p("pickADate")), t = u(e.modelValue), d = y, l = u(!1), q = () => {
+    const { t: i } = j(), e = m, { id: y, name: h, autocomplete: g } = z(e), n = a(() => e.placeholder ? e.placeholder : i("pickADate")), t = u(e.modelValue), d = v, l = u(!1), q = () => {
       l.value = !0;
     }, S = () => {
       l.value = !1;
     }, N = a(
       () => k({
         nmorph: [B[e.height]],
-        "nmorph-date-picker": [`${e.disabled && "disabled"}`, e.type, `${l.value && "focus"}`]
+        "nmorph-date-picker": [e.disabled && "disabled", e.type, l.value && "focus"]
       })
-    ), i = (r) => typeof r == "number" ? `${r}px` : r, b = a(() => ({
-      ...e.width !== void 0 && { "--width": i(e.width) },
+    ), D = a(() => ({
+      ...e.width !== void 0 && { "--width": s(e.width) },
       ...e.calendarCellHeight !== void 0 && {
-        "--date-picker-calendar-cell-height": i(e.calendarCellHeight)
+        "--date-picker-calendar-cell-height": s(e.calendarCellHeight)
       }
-    })), o = u(!1), D = u(null), C = () => {
+    })), o = u(!1), b = u(null), C = () => {
       o.value = !1;
     }, _ = () => {
       o.value = !o.value;
@@ -74,16 +75,16 @@ const Z = /* @__PURE__ */ O({
       t.value = r, d("update:model-value", t.value);
     }, I = (r) => {
       t.value = r, d("update:model-value", t.value);
-    }, w = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), s = { t: p, props: e, id: h, name: v, autocomplete: g, placeholderText: n, selectedDate: t, emit: d, focus: l, focusHandler: q, blurHandler: S, modifiers: N, getCssSize: i, styles: b, open: o, nmorphInputDOMRef: D, closeHandler: C, toggleOpen: _, displayValue: A, clearHandler: H, updateSelectedDateHandler: I, showClearButton: w, get NmorphDropdown() {
-      return M;
+    }, w = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), p = { t: i, props: e, id: y, name: h, autocomplete: g, placeholderText: n, selectedDate: t, emit: d, focus: l, focusHandler: q, blurHandler: S, modifiers: N, styles: D, open: o, nmorphInputDOMRef: b, closeHandler: C, toggleOpen: _, displayValue: A, clearHandler: H, updateSelectedDateHandler: I, showClearButton: w, get NmorphDropdown() {
+      return R;
     }, get NmorphIcon() {
-      return L;
+      return M;
     }, get NmorphIconCalendar() {
-      return z;
+      return L;
     }, NmorphClearButton: P, NmorphDatePickerContent: V };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {
-  Z as default
+  ee 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;
   }
 });