@nmorph/nmorph-ui-kit 2.2.38 → 2.2.39

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js

@@ -1,14 +1,15 @@
 import './NmorphTextInput.css';
-import { defineComponent as E, useSlots as F, computed as r, ref as u } from "vue";
-import { NmorphComponentHeight as O } from "../../../types/index.js";
-import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { defineComponent as k, useSlots as C, computed as o, ref as E } from "vue";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as V } from "../../../hooks/use-focusable-input.js";
 import { useFormItemInput as j, useFormItemModel as H } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as R } from "../../../types/common.types.js";
 import A from "../../../assets/icons/eye-blocked.svg.js";
 import D from "../../../assets/icons/eye.svg.js";
-import R from "../../basic/nmorph-button/NmorphButton.vue.js";
-import T from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import z from "../../../assets/icons/error.svg.js";
-const Z = /* @__PURE__ */ E({
+import T from "../../basic/nmorph-button/NmorphButton.vue.js";
+import z from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import G from "../../../assets/icons/error.svg.js";
+const ee = /* @__PURE__ */ k({
   __name: "NmorphTextInput",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -25,41 +26,42 @@ const Z = /* @__PURE__ */ E({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
-  setup(h, { expose: y, emit: b }) {
-    const p = F(), e = h, n = b, { id: v, name: g, autocomplete: q, tabindex: I } = j(e), { modelValue: w, updateModelValue: l } = H(
+  setup(f, { expose: h, emit: y }) {
+    const l = C(), e = f, r = y, { id: b, name: g, autocomplete: q, tabindex: I } = j(e), { modelValue: v, updateModelValue: n } = H(
       e,
-      (s) => n("update:model-value", s),
+      (a) => r("update:model-value", a),
       ""
-    ), x = r(
-      () => V({
-        nmorph: [O[e.height], a.value && "focused"],
+    ), w = o(
+      () => O({
+        nmorph: [R[e.height], u.value && "focused"],
         "nmorph-text-input": [e.typePassword && "password", (e.typePassword || e.clearable) && "with-action"]
       })
-    ), N = (s) => {
-      const C = s.target;
-      l(C.value);
-    }, t = u(!1), _ = () => {
-      e.clearable ? l("") : t.value = !t.value;
-    }, S = r(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), a = u(!1), B = () => {
-      n("focus"), a.value = !0;
-    }, P = () => {
-      n("blur"), a.value = !1;
-    }, o = u(null), i = () => {
-      o.value?.focus();
-    }, d = () => {
-      o.value?.blur();
-    }, c = () => {
-      o.value?.select();
-    };
-    y({ inputDOMRef: o, focus: i, blur: d, select: c });
-    const M = r(() => e.clearable ? z : t.value ? A : D), m = r(() => e.indentation || (p["prepend-icon"] ? "28px" : "8px")), k = r(() => ({ "--nmorph-text-input-indentation": m.value })), f = { slots: p, props: e, emit: n, id: v, name: g, autocomplete: q, tabindex: I, modelValue: w, updateModelValue: l, modifiers: x, handleInput: N, showPassword: t, actionButtonClickHandler: _, type: S, focused: a, handleFocus: B, handleBlur: P, inputDOMRef: o, focus: i, blur: d, select: c, actionIcon: M, indentation: m, styles: k, get NmorphIcon() {
-      return T;
+    ), x = (a) => {
+      const M = a.target;
+      n(M.value);
+    }, t = E(!1), N = () => {
+      e.clearable ? n("") : t.value = !t.value;
+    }, _ = o(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), {
+      elementRef: s,
+      focused: u,
+      handleFocus: B,
+      handleBlur: S,
+      focus: p,
+      blur: i,
+      select: d
+    } = V({
+      onFocus: () => r("focus"),
+      onBlur: () => r("blur")
+    });
+    h({ inputDOMRef: s, focus: p, blur: i, select: d });
+    const P = o(() => e.clearable ? G : t.value ? A : D), m = o(() => e.indentation || (l["prepend-icon"] ? "28px" : "8px")), F = o(() => ({ "--nmorph-text-input-indentation": m.value })), c = { slots: l, props: e, emit: r, id: b, name: g, autocomplete: q, tabindex: I, modelValue: v, updateModelValue: n, modifiers: w, handleInput: x, showPassword: t, actionButtonClickHandler: N, type: _, inputDOMRef: s, focused: u, handleFocus: B, handleBlur: S, focus: p, blur: i, select: d, actionIcon: P, indentation: m, styles: F, get NmorphIcon() {
+      return z;
     }, get NmorphButton() {
-      return R;
+      return T;
     } };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  Z as default
+  ee as default
 };

package/dist/components/form/nmorph-textarea/NmorphTextarea.vue.js

@@ -1,15 +1,15 @@
 import './NmorphTextarea.css';
-import a from "./NmorphTextarea.vue2.js";
-import { openBlock as n, createElementBlock as t, normalizeStyle as l, normalizeClass as d, createElementVNode as i, mergeProps as m, withKeys as s } from "vue";
+import n from "./NmorphTextarea.vue2.js";
+import { openBlock as a, createElementBlock as l, normalizeStyle as t, normalizeClass as d, createElementVNode as i, mergeProps as m, withKeys as s } from "vue";
 /* empty css                    */
 import p from "../../../_virtual/_plugin-vue_export-helper.js";
-const c = ["id", "name", "autocomplete", "tabindex", "placeholder", "disabled", "value", "rows"];
-function f(x, o, h, e, b, y) {
-  return n(), t(
+const f = ["id", "name", "autocomplete", "tabindex", "placeholder", "disabled", "value", "rows"];
+function x(c, o, b, e, h, y) {
+  return a(), l(
     "div",
     {
       class: d(e.modifiers),
-      style: l(e.styles)
+      style: t(e.styles)
     },
     [
       i("textarea", m({
@@ -25,17 +25,17 @@ function f(x, o, h, e, b, y) {
         rows: e.rows
       }, e.props.textareaAttrs, {
         onInput: e.handleInput,
-        onFocus: e.handleFocus,
-        onBlur: e.handleBlur,
-        onKeydown: o[0] || (o[0] = (r) => e.emit("keydown", r)),
-        onKeyup: o[1] || (o[1] = s((r) => e.emit("on-enter"), ["enter"]))
-      }), null, 16, c)
+        onFocus: o[0] || (o[0] = (...r) => e.handleFocus && e.handleFocus(...r)),
+        onBlur: o[1] || (o[1] = (...r) => e.handleBlur && e.handleBlur(...r)),
+        onKeydown: o[2] || (o[2] = (r) => e.emit("keydown", r)),
+        onKeyup: o[3] || (o[3] = s((r) => e.emit("on-enter"), ["enter"]))
+      }), null, 16, f)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const k = /* @__PURE__ */ p(a, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-textarea/NmorphTextarea.vue"]]);
+const k = /* @__PURE__ */ p(n, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-textarea/NmorphTextarea.vue"]]);
 export {
   k as default
 };

package/dist/components/form/nmorph-textarea/NmorphTextarea.vue2.js

@@ -1,9 +1,10 @@
 import './NmorphTextarea.css';
-import { defineComponent as B, ref as g, computed as l, watch as T, onMounted as V, nextTick as O } from "vue";
-import { NmorphComponentHeight as j } from "../../../types/index.js";
-import { useModifiers as k } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as P, useFormItemModel as A } from "../nmorph-form/use-form-item-input.js";
-const G = /* @__PURE__ */ B({
+import { defineComponent as B, computed as n, watch as C, onMounted as T, nextTick as V } from "vue";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as j } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as k, useFormItemModel as P } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as A } from "../../../types/common.types.js";
+const J = /* @__PURE__ */ B({
   __name: "NmorphTextarea",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -23,49 +24,50 @@ const G = /* @__PURE__ */ B({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
-  setup(x, { expose: b, emit: w }) {
-    const e = x, n = w, { id: q, name: v, autocomplete: S, tabindex: _ } = P(e), { modelValue: i, updateModelValue: u } = A(
+  setup(g, { expose: x, emit: b }) {
+    const e = g, r = b, { id: w, name: q, autocomplete: S, tabindex: v } = k(e), { modelValue: s, updateModelValue: l } = P(
       e,
-      (t) => n("update:model-value", t),
+      (t) => r("update:model-value", t),
       ""
-    ), a = g(null), s = g(!1), z = l(
-      () => k({
-        nmorph: [j[e.height], s.value && "focused"],
+    ), {
+      elementRef: i,
+      focused: u,
+      handleFocus: _,
+      handleBlur: z,
+      focus: d,
+      blur: p,
+      select: m
+    } = j({
+      onFocus: () => r("focus"),
+      onBlur: () => r("blur")
+    }), F = n(
+      () => O({
+        nmorph: [A[e.height], u.value && "focused"],
         "nmorph-textarea": [e.disabled && "disabled", e.autoSize && "auto-size"]
       })
-    ), d = (t) => {
+    ), f = (t) => {
       const o = window.getComputedStyle(t);
       return parseFloat(o.paddingTop) + parseFloat(o.paddingBottom);
-    }, r = async () => {
+    }, a = async () => {
       if (!e.autoSize) return;
-      await O();
-      const t = a.value;
+      await V();
+      const t = i.value;
       if (!t) return;
       t.style.height = "auto";
-      const o = window.getComputedStyle(t), C = parseFloat(o.lineHeight) || 20, y = e.maxRows ? e.maxRows * C + d(t) : 1 / 0, I = Math.min(t.scrollHeight, y);
-      t.style.height = `${I}px`, t.style.overflowY = t.scrollHeight > y ? "auto" : "hidden";
+      const o = window.getComputedStyle(t), I = parseFloat(o.lineHeight) || 20, y = e.maxRows ? e.maxRows * I + f(t) : 1 / 0, N = Math.min(t.scrollHeight, y);
+      t.style.height = `${N}px`, t.style.overflowY = t.scrollHeight > y ? "auto" : "hidden";
     }, M = (t) => {
       const o = t.target;
-      u(o.value), r();
-    }, H = () => {
-      n("focus"), s.value = !0;
-    }, R = () => {
-      n("blur"), s.value = !1;
-    }, p = () => {
-      a.value?.focus();
-    }, m = () => {
-      a.value?.blur();
-    }, f = () => {
-      a.value?.select();
+      l(o.value), a();
     };
-    T(i, r), V(r), b({ textareaDOMRef: a, focus: p, blur: m, select: f, resizeToContent: r });
-    const c = l(() => Math.max(e.minRows, 1)), F = l(() => Math.max(e.rows, c.value)), N = l(() => ({
+    C(s, a), T(a), x({ textareaDOMRef: i, focus: d, blur: p, select: m, resizeToContent: a });
+    const c = n(() => Math.max(e.minRows, 1)), R = n(() => Math.max(e.rows, c.value)), H = n(() => ({
       "--nmorph-textarea-resize": e.autoSize ? "none" : e.resize,
       "--nmorph-textarea-indentation": e.indentation
-    })), h = { props: e, emit: n, id: q, name: v, autocomplete: S, tabindex: _, modelValue: i, updateModelValue: u, textareaDOMRef: a, focused: s, modifiers: z, getVerticalPadding: d, resizeToContent: r, handleInput: M, handleFocus: H, handleBlur: R, focus: p, blur: m, select: f, minRows: c, rows: F, styles: N };
+    })), h = { props: e, emit: r, id: w, name: q, autocomplete: S, tabindex: v, modelValue: s, updateModelValue: l, textareaDOMRef: i, focused: u, handleFocus: _, handleBlur: z, focus: d, blur: p, select: m, modifiers: F, getVerticalPadding: f, resizeToContent: a, handleInput: M, minRows: c, rows: R, styles: H };
     return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
   }
 });
 export {
-  G as default
+  J as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -1,13 +1,13 @@
 import './NmorphTimePicker.css';
 import b from "./NmorphTimePicker.vue2.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as l, createElementVNode as r, withKeys as m, withModifiers as t, createVNode as d, withCtx as p, toDisplayString as c, createCommentVNode as _, createBlock as f, Fragment as s, renderList as h } from "vue";
+import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as a, createElementVNode as r, withKeys as m, withModifiers as t, createVNode as d, withCtx as p, toDisplayString as c, createCommentVNode as _, createBlock as f, Fragment as s, renderList as h } from "vue";
 /* empty css                      */
 import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], g = {
+const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], H = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, O = ["disabled", "onClick"], H = {
+}, g = ["disabled", "onClick"], O = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
@@ -16,11 +16,11 @@ const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id"
   role: "listbox",
   "aria-label": "Seconds"
 }, V = ["disabled", "onClick"];
-function I(S, a, z, e, B, D) {
+function I(S, l, z, e, B, D) {
   return i(), n(
     "div",
     {
-      class: l(e.modifiers),
+      class: a(e.modifiers),
       style: v(e.styles)
     },
     [
@@ -32,8 +32,8 @@ function I(S, a, z, e, B, D) {
         "aria-controls": `${e.id}-dropdown`,
         tabindex: e.props.disabled ? -1 : e.tabindex,
         onClick: e.toggleOpen,
-        onFocus: e.focusHandler,
-        onBlur: e.blurHandler,
+        onFocus: l[0] || (l[0] = (...o) => e.focusHandler && e.focusHandler(...o)),
+        onBlur: l[1] || (l[1] = (...o) => e.blurHandler && e.blurHandler(...o)),
         onKeydown: [
           m(t(e.toggleOpen, ["prevent"]), ["space"]),
           m(t(e.toggleOpen, ["prevent"]), ["enter"]),
@@ -98,41 +98,41 @@ function I(S, a, z, e, B, D) {
         default: p(() => [
           r("div", {
             id: `${e.id}-dropdown`,
-            class: l(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+            class: a(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
           }, [
-            r("div", g, [
+            r("div", H, [
               (i(!0), n(
                 s,
                 null,
                 h(e.hourOptions, (o) => (i(), n("button", {
                   key: o.value,
                   type: "button",
-                  class: l(["nmorph-time-picker__option", [
+                  class: a(["nmorph-time-picker__option", [
                     e.optionHeightModifiers,
                     { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }
                   ]]),
                   disabled: o.disabled,
                   onClick: (k) => e.selectUnit("hour", o.value)
-                }, c(o.label), 11, O))),
+                }, c(o.label), 11, g))),
                 128
                 /* KEYED_FRAGMENT */
               ))
             ]),
-            a[1] || (a[1] = r(
+            l[3] || (l[3] = r(
               "div",
               { class: "nmorph-time-picker__separator" },
               ":",
               -1
               /* CACHED */
             )),
-            r("div", H, [
+            r("div", O, [
               (i(!0), n(
                 s,
                 null,
                 h(e.minuteOptions, (o) => (i(), n("button", {
                   key: o.value,
                   type: "button",
-                  class: l(["nmorph-time-picker__option", [
+                  class: a(["nmorph-time-picker__option", [
                     e.optionHeightModifiers,
                     { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }
                   ]]),
@@ -147,7 +147,7 @@ function I(S, a, z, e, B, D) {
               s,
               { key: 0 },
               [
-                a[0] || (a[0] = r(
+                l[2] || (l[2] = r(
                   "div",
                   { class: "nmorph-time-picker__separator" },
                   ":",
@@ -161,7 +161,7 @@ function I(S, a, z, e, B, D) {
                     h(e.secondOptions, (o) => (i(), n("button", {
                       key: o.value,
                       type: "button",
-                      class: l(["nmorph-time-picker__option", [
+                      class: a(["nmorph-time-picker__option", [
                         e.optionHeightModifiers,
                         { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }
                       ]]),

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue2.js

@@ -1,15 +1,16 @@
 import './NmorphTimePicker.css';
-import { defineComponent as te, ref as y, computed as n, watch as oe } from "vue";
-import { NmorphComponentHeight as O } from "../../../types/index.js";
+import { defineComponent as te, ref as _, computed as n, watch as oe } from "vue";
 import { useI18n as re } from "vue-i18n";
-import { useModifiers as H } from "../../../utils/create-modifiers.js";
-import { toCssSize as ne } from "../../../utils/common.js";
-import { useFormItemInput as le, useFormItemModel as ue } from "../nmorph-form/use-form-item-input.js";
-import se from "../../../assets/icons/clock.svg.js";
-import ae from "../../../assets/icons/circle-close.svg.js";
-import ie from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import de from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const Ne = /* @__PURE__ */ te({
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ne } from "../../../utils/common.js";
+import { useFocusableInput as ue } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as le, useFormItemModel as se } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as B } from "../../../types/common.types.js";
+import ae from "../../../assets/icons/clock.svg.js";
+import ie from "../../../assets/icons/circle-close.svg.js";
+import de from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ce from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const Ie = /* @__PURE__ */ te({
   __name: "NmorphTimePicker",
   props: {
     modelValue: { type: [String, null], required: !1, default: null },
@@ -31,87 +32,93 @@ const Ne = /* @__PURE__ */ te({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(M, { expose: k, emit: B }) {
-    const t = M, m = B, { t: I } = re(), { id: P, name: $, autocomplete: z, tabindex: D } = le(t), { modelValue: s, updateModelValue: p } = ue(
+  setup(H, { expose: M, emit: k }) {
+    const t = H, m = k, { t: I } = re(), { id: F, name: P, autocomplete: $, tabindex: z } = le(t), { modelValue: s, updateModelValue: p } = se(
       t,
       (e) => m("update:model-value", e),
       null
-    ), a = y(!1), f = y(!1), x = y(null), c = (e) => String(e).padStart(2, "0"), h = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
+    ), a = _(!1), {
+      elementRef: T,
+      focused: w,
+      handleFocus: D,
+      handleBlur: R
+    } = ue({
+      onFocus: () => m("focus"),
+      onBlur: () => m("blur")
+    }), c = (e) => String(e).padStart(2, "0"), f = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
       if (!e) return null;
       const o = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
       if (!o) return null;
-      const r = Number(o[1]), g = Number(o[2]), d = Number(o[3] || 0);
-      return r > 23 || g > 59 || d > 59 ? null : { hour: r, minute: g, second: d };
-    }, N = (e) => {
+      const r = Number(o[1]), v = Number(o[2]), d = Number(o[3] || 0);
+      return r > 23 || v > 59 || d > 59 ? null : { hour: r, minute: v, second: d };
+    }, g = (e) => {
       const o = `${c(e.hour)}:${c(e.minute)}`;
       return t.showSeconds ? `${o}:${c(e.second)}` : o;
-    }, v = (e) => e.hour * 3600 + e.minute * 60 + e.second, q = n(() => i(t.minTime)), T = n(() => i(t.maxTime)), C = n(() => i(s.value)), u = y(C.value || { hour: 0, minute: 0, second: 0 }), _ = n(() => t.placeholder || I("pickATime"));
+    }, h = (e) => e.hour * 3600 + e.minute * 60 + e.second, y = n(() => i(t.minTime)), N = n(() => i(t.maxTime)), x = n(() => i(s.value)), l = _(x.value || { hour: 0, minute: 0, second: 0 }), C = n(() => t.placeholder || I("pickATime"));
     oe(s, (e) => {
       const o = i(e);
-      o && (u.value = o);
+      o && (l.value = o);
     });
-    const S = (e) => {
-      const o = v(e);
-      return !!(q.value && o < v(q.value) || T.value && o > v(T.value));
-    }, b = (e, o, r) => {
-      const g = h(r), d = /* @__PURE__ */ new Set();
-      for (let l = 0; l <= o; l += g) d.add(l);
-      return d.add(u.value[e]), Array.from(d).filter((l) => l >= 0 && l <= o).sort((l, w) => l - w).map((l) => {
-        const w = { ...u.value, [e]: l };
+    const b = (e) => {
+      const o = h(e);
+      return !!(y.value && o < h(y.value) || N.value && o > h(N.value));
+    }, S = (e, o, r) => {
+      const v = f(r), d = /* @__PURE__ */ new Set();
+      for (let u = 0; u <= o; u += v) d.add(u);
+      return d.add(l.value[e]), Array.from(d).filter((u) => u >= 0 && u <= o).sort((u, q) => u - q).map((u) => {
+        const q = { ...l.value, [e]: u };
         return {
-          label: c(l),
-          value: l,
-          disabled: S(w)
+          label: c(u),
+          value: u,
+          disabled: b(q)
         };
       });
-    }, F = n(() => b("hour", 23, t.hourStep)), A = n(() => b("minute", 59, t.minuteStep)), R = n(() => b("second", 59, t.secondStep)), U = (e, o) => {
-      const r = { ...u.value, [e]: o };
-      S(r) || (u.value = r, p(N(r)));
-    }, j = () => {
-      p(null), a.value = !1;
-    }, E = () => {
-      a.value = !1;
+    }, A = n(() => S("hour", 23, t.hourStep)), U = n(() => S("minute", 59, t.minuteStep)), j = n(() => S("second", 59, t.secondStep)), E = (e, o) => {
+      const r = { ...l.value, [e]: o };
+      b(r) || (l.value = r, p(g(r)));
     }, G = () => {
-      t.disabled || (a.value = !a.value);
+      p(null), a.value = !1;
     }, J = () => {
-      f.value = !0, m("focus");
+      a.value = !1;
     }, K = () => {
-      f.value = !1, m("blur");
+      t.disabled || (a.value = !a.value);
     }, L = (e) => {
       const o = e.target, r = i(o.value);
-      !r || S(r) || (u.value = r, p(N(r)));
-    }, Q = n(() => s.value || _.value), W = n(
-      () => t.showSeconds ? h(t.secondStep) : h(t.minuteStep) * 60
+      !r || b(r) || (l.value = r, p(g(r)));
+    }, Q = n(() => s.value || C.value), W = n(
+      () => t.showSeconds ? f(t.secondStep) : f(t.minuteStep) * 60
     ), X = n(() => t.clearable && !!s.value && !t.disabled), Y = n(
-      () => H({
-        nmorph: [O[t.height]],
+      () => O({
+        nmorph: [B[t.height]],
         "nmorph-time-picker": [
           t.disabled && "disabled",
           a.value && "open",
-          f.value && "focus",
+          w.value && "focus",
           !s.value && "placeholder"
         ]
       })
     ), Z = n(
-      () => H({
-        nmorph: [O[t.height]]
+      () => O({
+        nmorph: [B[t.height]]
       })
-    ), ee = n(() => ({
-      ...t.width !== void 0 && { "--width": ne(t.width) }
-    }));
-    k({ inputDOMRef: x });
-    const V = { props: t, emit: m, t: I, id: P, name: $, autocomplete: z, tabindex: D, modelValue: s, updateModelValue: p, open: a, focused: f, inputDOMRef: x, pad: c, normalizeStep: h, parseTime: i, formatTime: N, timeToSeconds: v, minTimeParts: q, maxTimeParts: T, modelTimeParts: C, pickerValue: u, placeholderText: _, isOutsideRange: S, getUnitOptions: b, hourOptions: F, minuteOptions: A, secondOptions: R, selectUnit: U, clearHandler: j, closeHandler: E, toggleOpen: G, focusHandler: J, blurHandler: K, nativeInputHandler: L, displayValue: Q, inputStep: W, showClearButton: X, modifiers: Y, optionHeightModifiers: Z, styles: ee, get NmorphDropdown() {
-      return de;
+    ), ee = n(
+      () => ne({
+        "--width": t.width
+      })
+    );
+    M({ inputDOMRef: T });
+    const V = { props: t, emit: m, t: I, id: F, name: P, autocomplete: $, tabindex: z, modelValue: s, updateModelValue: p, open: a, inputDOMRef: T, focused: w, focusHandler: D, blurHandler: R, pad: c, normalizeStep: f, parseTime: i, formatTime: g, timeToSeconds: h, minTimeParts: y, maxTimeParts: N, modelTimeParts: x, pickerValue: l, placeholderText: C, isOutsideRange: b, getUnitOptions: S, hourOptions: A, minuteOptions: U, secondOptions: j, selectUnit: E, clearHandler: G, closeHandler: J, toggleOpen: K, nativeInputHandler: L, displayValue: Q, inputStep: W, showClearButton: X, modifiers: Y, optionHeightModifiers: Z, styles: ee, get NmorphDropdown() {
+      return ce;
     }, get NmorphIcon() {
-      return ie;
+      return de;
     }, get NmorphIconCircleClose() {
-      return ae;
+      return ie;
     }, get NmorphIconClock() {
-      return se;
+      return ae;
     } };
     return Object.defineProperty(V, "__isScriptSetup", { enumerable: !1, value: !0 }), V;
   }
 });
 export {
-  Ne as default
+  Ie as default
 };

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphDropdown.css';
-import { defineComponent as w, ref as q, toRef as t, computed as l, watch as v } from "vue";
-import { useModifiers as b } from "../../../utils/create-modifiers.js";
-import { toCssSize as d } from "../../../utils/common.js";
-import { usePlacement as x } from "../../../hooks/use-placement.js";
+import { defineComponent as y, ref as v, toRef as t, computed as i, watch as w } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { toCssSize as b, createCssSizeVariables as x } from "../../../utils/common.js";
+import { usePlacement as S } from "../../../hooks/use-placement.js";
 import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const B = /* @__PURE__ */ w({
+const B = /* @__PURE__ */ y({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
@@ -26,44 +26,46 @@ const B = /* @__PURE__ */ w({
     hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
-  setup(p, { expose: f, emit: m }) {
-    f();
-    const e = p, r = m, i = q(null), { placementCoords: o, placementReady: n, adjustPlacement: a } = x({
+  setup(u, { expose: p, emit: f }) {
+    p();
+    const e = u, r = f, l = v(null), { placementCoords: o, placementReady: d, adjustPlacement: a } = S({
       initialPlacement: t(e, "placement"),
-      contentDOMElement: i,
+      contentDOMElement: l,
       relativeElement: t(e, "relativeElement"),
       yOffset: t(e, "yOffset"),
       xOffset: t(e, "xOffset"),
       enabled: t(e, "open")
-    }), c = l(
-      () => b({
+    }), m = i(
+      () => q({
         "nmorph-dropdown": [!e.open && "closed", e.hideShadow && "hide-shadow"]
       })
-    ), s = l(
-      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : d(e.width)
-    ), h = l(() => ({
-      "--nmorph-dropdown-width": s.value,
-      "--nmorph-dropdown-min-width": d(e.minWidth) || "auto",
-      "--nmorph-dropdown-max-width": d(e.maxWidth) || "none",
+    ), n = i(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : b(e.width)
+    ), c = i(() => ({
+      "--nmorph-dropdown-width": n.value,
+      ...x({
+        "--nmorph-dropdown-min-width": e.minWidth === void 0 ? "auto" : e.minWidth,
+        "--nmorph-dropdown-max-width": e.maxWidth === void 0 ? "none" : e.maxWidth
+      }),
       left: o.value.x,
       top: o.value.y,
-      visibility: e.open && n.value ? "visible" : "hidden"
+      visibility: e.open && d.value ? "visible" : "hidden"
     }));
-    v(
+    w(
       () => e.open,
-      (y) => {
-        y && a();
+      (h) => {
+        h && a();
       },
       { flush: "post" }
     );
-    const u = { props: e, emit: r, dropdownDOMRef: i, placementCoords: o, placementReady: n, adjustPlacement: a, modifiers: c, width: s, dropdownStyle: h, outsideClickHandler: () => {
+    const s = { props: e, emit: r, dropdownDOMRef: l, placementCoords: o, placementReady: d, adjustPlacement: a, modifiers: m, width: n, dropdownStyle: c, outsideClickHandler: () => {
       r("on-outside-click");
     }, escapeHandler: () => {
       r("on-escape-keydown");
     }, get NmorphOverlay() {
       return O;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {