@nmorph/nmorph-ui-kit 2.2.34 → 2.2.35

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

@@ -1,17 +1,17 @@
 import './NmorphSelect.css';
-import { defineComponent as ue, computed as a, ref as d, watch as f, nextTick as L, onMounted as oe, onUnmounted as ie, provide as R } from "vue";
-import { NmorphComponentHeight as se } from "../../../types/index.js";
-import { useModifiers as de } from "../../../utils/create-modifiers.js";
-import { useI18n as ve } from "vue-i18n";
-import { useFormItemInput as ce } from "../nmorph-form/use-form-item-input.js";
-import { useVirtualList as fe } from "../../../hooks/use-virtual-list.js";
-import pe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import me from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-import he from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ge from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-import ye from "../../../assets/icons/chevron-down.svg.js";
-import He from "../../../assets/icons/loader.svg.js";
-const Pe = /* @__PURE__ */ ue({
+import { defineComponent as ue, computed as a, ref as d, watch as f, nextTick as R, onMounted as oe, onUnmounted as ie, provide as M, toRef as se } from "vue";
+import { NmorphComponentHeight as de } from "../../../types/index.js";
+import { useModifiers as ve } from "../../../utils/create-modifiers.js";
+import { useI18n as ce } from "vue-i18n";
+import { useFormItemInput as fe } from "../nmorph-form/use-form-item-input.js";
+import { useVirtualList as pe } from "../../../hooks/use-virtual-list.js";
+import me from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import he from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import ge from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ye from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import He from "../../../assets/icons/chevron-down.svg.js";
+import be from "../../../assets/icons/loader.svg.js";
+const ke = /* @__PURE__ */ ue({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -40,37 +40,37 @@ const Pe = /* @__PURE__ */ ue({
   emits: ["update:model-value"],
   setup(T, { expose: C, emit: P }) {
     C();
-    const { t: M } = ve(), l = T, $ = a(
-      () => l.noElementPlaceholder ? l.noElementPlaceholder : M("noElementPlaceholder")
-    ), m = P, t = d(l.modelValue), r = d(l.open), v = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = d(!0), { id: y, name: k, autocomplete: W, tabindex: U } = ce(l), H = (e) => {
+    const { t: $ } = ce(), t = T, D = a(
+      () => t.noElementPlaceholder ? t.noElementPlaceholder : $("noElementPlaceholder")
+    ), m = P, l = d(t.modelValue), r = d(t.open), v = a(() => t.disabled || t.loading), h = a(() => t.optionsWidth === "auto"), g = d(!0), { id: y, name: k, autocomplete: W, tabindex: U } = fe(t), H = (e) => {
       if (!v.value) {
-        if (r.value = !1, typeof t.value == "string" && (!l.valueRequired && t.value === e ? t.value = "" : t.value = e, m("update:model-value", t.value)), Array.isArray(t.value)) {
-          const n = t.value.includes(e), w = t.value.length === 1 && n;
-          if (l.valueRequired && w) return;
-          n ? t.value = t.value.filter((ne) => ne !== e) : t.value = [...t.value, e];
+        if (r.value = !1, typeof l.value == "string" && (!t.valueRequired && l.value === e ? l.value = "" : l.value = e, m("update:model-value", l.value)), Array.isArray(l.value)) {
+          const n = l.value.includes(e), w = l.value.length === 1 && n;
+          if (t.valueRequired && w) return;
+          n ? l.value = l.value.filter((ne) => ne !== e) : l.value = [...l.value, e];
         }
-        m("update:model-value", t.value);
+        m("update:model-value", l.value);
       }
     }, p = d(!1), z = () => {
       p.value = !0;
     }, F = () => {
       p.value = !1;
     }, j = a(
-      () => de({
-        nmorph: [se[l.height]],
+      () => ve({
+        nmorph: [de[t.height]],
         "nmorph-select": [
-          `${l.disabled && "disabled"}`,
-          `${l.modelValue ? "on" : "off"}`,
-          `${l.loading && "loading"}`,
+          `${t.disabled && "disabled"}`,
+          `${t.modelValue ? "on" : "off"}`,
+          `${t.loading && "loading"}`,
           `${r.value && !v.value && "open"}`,
-          `${l.fill && "fill"}`,
+          `${t.fill && "fill"}`,
           `${h.value && "options-auto-width"}`,
           `${g.value ? "selected-line-outset" : "selected-line-inset"}`,
           `${p.value && "focus"}`
         ]
       })
     ), b = (e) => typeof e == "number" ? `${e}px` : e, Y = a(() => ({
-      ...l.width !== void 0 && { "--base-width": b(l.width) }
+      ...t.width !== void 0 && { "--base-width": b(t.width) }
     })), G = () => {
       v.value || (r.value = !r.value);
     };
@@ -85,29 +85,29 @@ const Pe = /* @__PURE__ */ ue({
       r.value = !1;
     };
     f(
-      () => l.loading,
+      () => t.loading,
       (e) => {
         e && (r.value = !1);
       }
     );
-    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), x = d(null), I = d([]), N = a(() => l.options), c = a(() => l.virtual && N.value.length > 0), D = a(() => ({
+    const i = a(() => t.options.length > 0 ? t.options : t.optionsMap), x = d(null), I = d([]), N = a(() => t.options), c = a(() => t.virtual && N.value.length > 0), A = a(() => ({
       basic: 30,
       thick: 38,
       thin: 22
-    })[l.height || "basic"]), A = a(() => l.virtualItemHeight || D.value), E = a(() => l.virtualOverscan), V = a(() => l.virtualDynamicHeight), s = fe(N, {
+    })[t.height || "basic"]), E = a(() => t.virtualItemHeight || A.value), V = a(() => t.virtualOverscan), _ = a(() => t.virtualDynamicHeight), s = pe(N, {
       enabled: c,
-      itemHeight: A,
-      overscan: E,
-      dynamic: V
+      itemHeight: E,
+      overscan: V,
+      dynamic: _
     }), J = a(() => s.virtualItems.value), K = a(() => ({
       height: `${s.totalHeight.value}px`
     })), Q = a(() => ({
       transform: `translateY(${s.offsetTop.value}px)`
-    })), X = a(() => b(l.virtualMaxHeight)), O = () => {
+    })), X = a(() => b(t.virtualMaxHeight)), O = () => {
       i.value.length > 0 || !x.value || (I.value = Array.from(x.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
     }, o = a(
       () => i.value.length > 0 ? i.value.map((e) => e.value) : I.value
-    ), Z = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = d(0), S = a(() => o.value[u.value] || ""), ee = a(() => `${y.value}-listbox`), te = (e) => `${y.value}-option-${e.replace(/\s+/g, "-")}`;
+    ), Z = a(() => c.value ? Array.isArray(l.value) ? l.value : l.value ? [l.value] : [] : o.value), u = d(0), S = a(() => o.value[u.value] || ""), ee = a(() => `${y.value}-listbox`), te = (e) => `${y.value}-option-${e.replace(/\s+/g, "-")}`;
     f(u, (e) => {
       r.value && c.value && s.scrollToIndex(e);
     }), f(
@@ -118,22 +118,22 @@ const Pe = /* @__PURE__ */ ue({
       { immediate: !0 }
     ), f(r, async (e) => {
       if (e) {
-        if (await L(), O(), typeof t.value == "string") {
-          const n = o.value.indexOf(t.value);
+        if (await R(), O(), typeof l.value == "string") {
+          const n = o.value.indexOf(l.value);
           n !== -1 && (u.value = n);
         }
         s.refresh(), c.value && s.scrollToIndex(u.value);
       }
     }), oe(async () => {
-      await L(), O(), document.addEventListener("click", q);
+      await R(), O(), document.addEventListener("click", q);
     }), ie(() => {
       document.removeEventListener("click", q);
     });
-    const le = a(() => typeof t.value == "string" ? t.value === "" ? $.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), ae = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
-    R("select-selected-value", t), R("select-change-selected-value", H);
-    const _ = d(null), re = a(
-      () => h.value ? `${_.value?.clientWidth || 0}px` : void 0
-    ), B = { t: M, props: l, computedNoElementPlaceholder: $, emit: m, initialValue: t, open: r, disabledInput: v, autoOptionsWidth: h, selectedLineOutset: g, id: y, name: k, autocomplete: W, tabindex: U, changeHandler: H, focus: p, focusHandler: z, blurHandler: F, modifiers: j, getCssSize: b, styles: Y, clickHandler: G, closeHandler: q, optionsMap: i, optionsDOMRef: x, slotDomOptions: I, renderedOptions: N, virtualEnabled: c, defaultOptionHeight: D, virtualItemHeight: A, virtualOverscan: E, virtualDynamicHeight: V, virtualList: s, virtualOptions: J, virtualSpacerStyle: K, virtualContentStyle: Q, virtualMaxHeight: X, refreshDomOptions: O, domOptions: o, nativeOptions: Z, currentIndex: u, currentFocusedEl: S, listboxId: ee, getOptionId: te, selectedValueTitle: le, tags: ae, nmorphSelectDOMRef: _, optionsMinWidth: re, spaceHandler: () => {
+    const le = a(() => typeof l.value == "string" ? l.value === "" ? D.value : i.value.find((e) => e.value === l.value)?.label : i.value.find((e) => e.value === l.value)?.label), ae = a(() => i.value.length > 0 ? i.value.filter((n) => l.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(l.value) ? l.value.map((n) => ({ text: n, value: n })) : [{ text: l.value, value: l.value }]);
+    M("select-selected-value", l), M("select-change-selected-value", H), M("select-height", se(t, "height"));
+    const B = d(null), re = a(
+      () => h.value ? `${B.value?.clientWidth || 0}px` : void 0
+    ), L = { t: $, props: t, computedNoElementPlaceholder: D, emit: m, initialValue: l, open: r, disabledInput: v, autoOptionsWidth: h, selectedLineOutset: g, id: y, name: k, autocomplete: W, tabindex: U, changeHandler: H, focus: p, focusHandler: z, blurHandler: F, modifiers: j, getCssSize: b, styles: Y, clickHandler: G, closeHandler: q, optionsMap: i, optionsDOMRef: x, slotDomOptions: I, renderedOptions: N, virtualEnabled: c, defaultOptionHeight: A, virtualItemHeight: E, virtualOverscan: V, virtualDynamicHeight: _, virtualList: s, virtualOptions: J, virtualSpacerStyle: K, virtualContentStyle: Q, virtualMaxHeight: X, refreshDomOptions: O, domOptions: o, nativeOptions: Z, currentIndex: u, currentFocusedEl: S, listboxId: ee, getOptionId: te, selectedValueTitle: le, tags: ae, nmorphSelectDOMRef: B, optionsMinWidth: re, spaceHandler: () => {
       v.value || (r.value = !r.value);
     }, arrowDownHandler: () => {
       v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value + 1) % o.value.length);
@@ -151,21 +151,21 @@ const Pe = /* @__PURE__ */ ue({
     }, endHandler: () => {
       u.value = Math.max(o.value.length - 1, 0);
     }, get NmorphTagItem() {
-      return ge;
+      return ye;
     }, get NmorphIcon() {
-      return he;
+      return ge;
     }, get NmorphSelectOption() {
-      return me;
+      return he;
     }, get NmorphDropdown() {
-      return pe;
+      return me;
     }, get NmorphIconLoader() {
-      return He;
+      return be;
     }, get NmorphIconChevronDown() {
-      return ye;
+      return He;
     } };
-    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
+    return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
   }
 });
 export {
-  Pe as default
+  ke as default
 };

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

@@ -1,10 +1,10 @@
 import './NmorphSelectOption.css';
-import { defineComponent as h, inject as i, computed as o } from "vue";
-import { NmorphComponentHeight as v } from "../../../../../types/index.js";
-import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
-import y from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import S from "../../../../../assets/icons/success.svg.js";
-const C = /* @__PURE__ */ h({
+import { defineComponent as g, inject as l, computed as t } from "vue";
+import { NmorphComponentHeight as y } from "../../../../../types/index.js";
+import { useModifiers as S } from "../../../../../utils/create-modifiers.js";
+import b from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import q from "../../../../../assets/icons/success.svg.js";
+const I = /* @__PURE__ */ g({
   __name: "NmorphSelectOption",
   props: {
     value: { type: String, required: !0 },
@@ -15,36 +15,39 @@ const C = /* @__PURE__ */ h({
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "basic" },
+    height: { type: null, required: !1 },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["change-value"],
-  setup(n, { expose: s, emit: c }) {
-    s();
-    const r = i("select-selected-value"), t = i("select-change-selected-value"), e = n, l = c, d = () => {
-      e.disabled || (l("change-value", e.value), t && t(e.value));
-    }, a = o(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((m) => m === e.value) : !1), p = o(
-      () => g({
-        nmorph: [v[e.height]],
+  setup(c, { expose: d, emit: p }) {
+    d();
+    const r = l("select-selected-value"), o = l("select-change-selected-value"), a = l(
+      "select-height",
+      void 0
+    ), e = c, i = p, f = () => {
+      e.disabled || (i("change-value", e.value), o && o(e.value));
+    }, u = t(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((v) => v === e.value) : !1), s = t(() => e.height || a?.value || "basic"), h = t(
+      () => S({
+        nmorph: [y[s.value]],
         "nmorph-select-option": [
           `${e.disabled && "disabled"}`,
           `${e.label && "with-label"}`,
-          `${a.value && "checked"}`,
+          `${u.value && "checked"}`,
           `${e.focused && "focused"}`
         ]
       })
-    ), f = o(() => ({
+    ), m = t(() => ({
       ...e.hoverBackground !== void 0 && { "--hover-bg": e.hoverBackground },
       ...e.hoverColor !== void 0 && { "--hover-color": e.hoverColor }
-    })), u = { selectSelectedValue: r, selectChangeSelectedValue: t, props: e, emit: l, clickHandler: d, checked: a, modifiers: p, styles: f, get NmorphIcon() {
-      return y;
+    })), n = { selectSelectedValue: r, selectChangeSelectedValue: o, selectHeight: a, props: e, emit: i, clickHandler: f, checked: u, height: s, modifiers: h, styles: m, get NmorphIcon() {
+      return b;
     }, get NmorphIconSuccess() {
-      return S;
+      return q;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {
-  C as default
+  I as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.css

@@ -1 +1 @@
-.nmorph-time-picker{--width: 160px;position:relative;width:var(--width);height:var(--height)}.nmorph-time-picker .nmorph-time-picker__input{display:flex;align-items:center;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto;margin-right:6px}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);gap:4px;padding:8px}.nmorph-time-picker .nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr) auto minmax(48px,1fr)}.nmorph-time-picker .nmorph-time-picker__column{display:grid;max-height:220px;overflow-y:auto}.nmorph-time-picker .nmorph-time-picker__separator{display:flex;justify-content:center;align-items:center;color:var(--nmorph-semi-contrast-text-color);font-weight:700}.nmorph-time-picker .nmorph-time-picker__option{min-height:28px;padding:0 8px;color:var(--nmorph-text-color);background:transparent;border:0;border-radius:4px;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__option:hover,.nmorph-time-picker .nmorph-time-picker__option--active{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-time-picker .nmorph-time-picker__option:disabled{cursor:not-allowed;opacity:.35}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}
+.nmorph-time-picker{--width: 160px;position:relative;width:var(--width);height:var(--height)}.nmorph-time-picker .nmorph-time-picker__input{display:flex;align-items:center;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto;margin-right:6px}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);gap:4px;padding:8px}.nmorph-time-picker .nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr) auto minmax(48px,1fr)}.nmorph-time-picker .nmorph-time-picker__column{display:grid;max-height:220px;overflow-y:auto}.nmorph-time-picker .nmorph-time-picker__separator{display:flex;justify-content:center;align-items:center;color:var(--nmorph-semi-contrast-text-color);font-weight:700}.nmorph-time-picker .nmorph-time-picker__option{padding:0 8px;color:var(--nmorph-text-color);background:transparent;border:0;border-radius:4px;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__option:hover,.nmorph-time-picker .nmorph-time-picker__option--active{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-time-picker .nmorph-time-picker__option:disabled{cursor:not-allowed;opacity:.35}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}

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

@@ -1,30 +1,30 @@
 import './NmorphTimePicker.css';
 import b from "./NmorphTimePicker.vue2.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as r, createElementVNode as l, withKeys as m, withModifiers as t, createVNode as c, withCtx as p, toDisplayString as d, createCommentVNode as _, createBlock as u, Fragment as s, renderList as h } from "vue";
+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";
 /* empty css                      */
-import f 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"], O = {
+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 = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, N = ["disabled", "onClick"], g = {
+}, O = ["disabled", "onClick"], H = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
-}, H = ["disabled", "onClick"], V = {
+}, N = ["disabled", "onClick"], M = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Seconds"
-}, I = ["disabled", "onClick"];
-function S(z, a, B, e, D, M) {
+}, V = ["disabled", "onClick"];
+function I(S, a, z, e, B, D) {
   return i(), n(
     "div",
     {
-      class: r(e.modifiers),
+      class: l(e.modifiers),
       style: v(e.styles)
     },
     [
-      l("div", {
+      r("div", {
         ref: "inputDOMRef",
         class: "nmorph-time-picker__input",
         role: "combobox",
@@ -40,7 +40,7 @@ function S(z, a, B, e, D, M) {
           m(t(e.closeHandler, ["prevent"]), ["escape"])
         ]
       }, [
-        l("input", {
+        r("input", {
           id: e.id,
           class: "nmorph-time-picker__native",
           name: e.name,
@@ -51,17 +51,17 @@ function S(z, a, B, e, D, M) {
           disabled: e.props.disabled,
           onInput: e.nativeInputHandler
         }, null, 40, w),
-        c(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
+        d(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
           default: p(() => [
-            c(e.NmorphIconClock)
+            d(e.NmorphIconClock)
           ]),
           _: 1
           /* STABLE */
         }),
-        l(
+        r(
           "div",
           x,
-          d(e.displayValue),
+          c(e.displayValue),
           1
           /* TEXT */
         ),
@@ -72,19 +72,19 @@ function S(z, a, B, e, D, M) {
           "aria-label": "Clear time",
           onClick: t(e.clearHandler, ["stop"])
         }, [
-          c(e.NmorphIcon, {
+          d(e.NmorphIcon, {
             width: "14px",
             height: "14px"
           }, {
             default: p(() => [
-              c(e.NmorphIconCircleClose)
+              d(e.NmorphIconCircleClose)
             ]),
             _: 1
             /* STABLE */
           })
         ])) : _("v-if", !0)
       ], 40, y),
-      e.inputDOMRef && !e.props.disabled ? (i(), u(e.NmorphDropdown, {
+      e.inputDOMRef && !e.props.disabled ? (i(), f(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.inputDOMRef,
@@ -96,43 +96,49 @@ function S(z, a, B, e, D, M) {
         onOnEscapeKeydown: e.closeHandler
       }, {
         default: p(() => [
-          l("div", {
+          r("div", {
             id: `${e.id}-dropdown`,
-            class: r(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+            class: l(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
           }, [
-            l("div", O, [
+            r("div", g, [
               (i(!0), n(
                 s,
                 null,
                 h(e.hourOptions, (o) => (i(), n("button", {
                   key: o.value,
                   type: "button",
-                  class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }]),
+                  class: l(["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)
-                }, d(o.label), 11, N))),
+                }, c(o.label), 11, O))),
                 128
                 /* KEYED_FRAGMENT */
               ))
             ]),
-            a[1] || (a[1] = l(
+            a[1] || (a[1] = r(
               "div",
               { class: "nmorph-time-picker__separator" },
               ":",
               -1
               /* CACHED */
             )),
-            l("div", g, [
+            r("div", H, [
               (i(!0), n(
                 s,
                 null,
                 h(e.minuteOptions, (o) => (i(), n("button", {
                   key: o.value,
                   type: "button",
-                  class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }]),
+                  class: l(["nmorph-time-picker__option", [
+                    e.optionHeightModifiers,
+                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }
+                  ]]),
                   disabled: o.disabled,
                   onClick: (k) => e.selectUnit("minute", o.value)
-                }, d(o.label), 11, H))),
+                }, c(o.label), 11, N))),
                 128
                 /* KEYED_FRAGMENT */
               ))
@@ -141,24 +147,27 @@ function S(z, a, B, e, D, M) {
               s,
               { key: 0 },
               [
-                a[0] || (a[0] = l(
+                a[0] || (a[0] = r(
                   "div",
                   { class: "nmorph-time-picker__separator" },
                   ":",
                   -1
                   /* CACHED */
                 )),
-                l("div", V, [
+                r("div", M, [
                   (i(!0), n(
                     s,
                     null,
                     h(e.secondOptions, (o) => (i(), n("button", {
                       key: o.value,
                       type: "button",
-                      class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }]),
+                      class: l(["nmorph-time-picker__option", [
+                        e.optionHeightModifiers,
+                        { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }
+                      ]]),
                       disabled: o.disabled,
                       onClick: (k) => e.selectUnit("second", o.value)
-                    }, d(o.label), 11, I))),
+                    }, c(o.label), 11, V))),
                     128
                     /* KEYED_FRAGMENT */
                   ))
@@ -177,7 +186,7 @@ function S(z, a, B, e, D, M) {
     /* CLASS, STYLE */
   );
 }
-const F = /* @__PURE__ */ f(b, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
+const F = /* @__PURE__ */ u(b, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
 export {
   F as default
 };

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

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