@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

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

@@ -1,247 +1,192 @@
 import './NmorphTimePicker.css';
-import { defineComponent as he, ref as j, computed as a, watch as ve, openBlock as s, createElementBlock as u, normalizeStyle as fe, normalizeClass as f, createElementVNode as d, withKeys as F, withModifiers as k, unref as l, createVNode as x, withCtx as H, toDisplayString as w, createCommentVNode as K, createBlock as _e, Fragment as y, renderList as P } from "vue";
-import { useI18n as be } from "vue-i18n";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as ke } from "../../../utils/common.js";
-import { useFocusableInput as xe } from "../../../hooks/use-focusable-input.js";
-import { useFormItemInput as we, useFormItemModel as ye } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as G } from "../../../types/common.types.js";
-import J from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import Se from "../../../assets/icons/clock.svg.js";
-import Ce from "../../../assets/icons/circle-close.svg.js";
-import ge from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-/* empty css                                                   */
-const Te = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], Ve = ["id", "name", "autocomplete", "step", "value", "disabled"], $e = { class: "nmorph-time-picker__selected-value" }, Be = ["id"], Ie = {
+import b from "./NmorphTimePicker.vue2.js";
+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"], H = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, Ne = ["disabled", "onClick"], Oe = {
+}, g = ["disabled", "onClick"], O = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
-}, Me = ["disabled", "onClick"], ze = {
+}, N = ["disabled", "onClick"], M = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Seconds"
-}, Fe = ["disabled", "onClick"], Qe = /* @__PURE__ */ he({
-  __name: "NmorphTimePicker",
-  props: {
-    modelValue: { default: null },
-    placeholder: { default: "" },
-    hourStep: { default: 1 },
-    minuteStep: { default: 5 },
-    secondStep: { default: 1 },
-    showSeconds: { type: Boolean, default: !1 },
-    minTime: { default: "" },
-    maxTime: { default: "" },
-    clearable: { type: Boolean, default: !0 },
-    zIndex: { default: void 0 },
-    width: { default: void 0 },
-    id: {},
-    name: {},
-    autocomplete: {},
-    height: { default: "basic" },
-    disabled: { type: Boolean, default: !1 },
-    tabindex: {}
-  },
-  emits: ["update:model-value", "focus", "blur"],
-  setup(Q, { expose: W, emit: X }) {
-    const n = Q, S = X, { t: Y } = be(), { id: C, name: R, autocomplete: Z, tabindex: ee } = we(n), { modelValue: p, updateModelValue: g } = ye(
-      n,
-      (t) => S("update:model-value", t),
-      null
-    ), c = j(!1), {
-      elementRef: _,
-      focused: te,
-      handleFocus: D,
-      handleBlur: E
-    } = xe({
-      onFocus: () => S("focus"),
-      onBlur: () => S("blur")
-    }), b = (t) => String(t).padStart(2, "0"), T = (t) => Math.max(1, Math.floor(Number.isFinite(t) ? t : 1)), v = (t) => {
-      if (!t) return null;
-      const o = t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
-      if (!o) return null;
-      const e = Number(o[1]), m = Number(o[2]), h = Number(o[3] || 0);
-      return e > 23 || m > 59 || h > 59 ? null : { hour: e, minute: m, second: h };
-    }, A = (t) => {
-      const o = `${b(t.hour)}:${b(t.minute)}`;
-      return n.showSeconds ? `${o}:${b(t.second)}` : o;
-    }, V = (t) => t.hour * 3600 + t.minute * 60 + t.second, U = a(() => v(n.minTime)), L = a(() => v(n.maxTime)), oe = a(() => v(p.value)), r = j(oe.value || { hour: 0, minute: 0, second: 0 }), ne = a(() => n.placeholder || Y("pickATime"));
-    ve(p, (t) => {
-      const o = v(t);
-      o && (r.value = o);
-    });
-    const $ = (t) => {
-      const o = V(t);
-      return !!(U.value && o < V(U.value) || L.value && o > V(L.value));
-    }, B = (t, o, e) => {
-      const m = T(e), h = /* @__PURE__ */ new Set();
-      for (let i = 0; i <= o; i += m) h.add(i);
-      return h.add(r.value[t]), Array.from(h).filter((i) => i >= 0 && i <= o).sort((i, z) => i - z).map((i) => {
-        const z = { ...r.value, [t]: i };
-        return {
-          label: b(i),
-          value: i,
-          disabled: $(z)
-        };
-      });
-    }, le = a(() => B("hour", 23, n.hourStep)), ae = a(() => B("minute", 59, n.minuteStep)), ie = a(() => B("second", 59, n.secondStep)), I = (t, o) => {
-      const e = { ...r.value, [t]: o };
-      $(e) || (r.value = e, g(A(e)));
-    }, se = () => {
-      g(null), c.value = !1;
-    }, N = () => {
-      c.value = !1;
-    }, O = () => {
-      n.disabled || (c.value = !c.value);
-    }, re = (t) => {
-      const o = t.target, e = v(o.value);
-      !e || $(e) || (r.value = e, g(A(e)));
-    }, ue = a(() => p.value || ne.value), de = a(
-      () => n.showSeconds ? T(n.secondStep) : T(n.minuteStep) * 60
-    ), ce = a(() => n.clearable && !!p.value && !n.disabled), me = a(
-      () => q({
-        nmorph: [G[n.height]],
-        "nmorph-time-picker": [
-          n.disabled && "disabled",
-          c.value && "open",
-          te.value && "focus",
-          !p.value && "placeholder"
-        ]
-      })
-    ), M = a(
-      () => q({
-        nmorph: [G[n.height]]
-      })
-    ), pe = a(
-      () => ke({
-        "--width": n.width
-      })
-    );
-    return W({ inputDOMRef: _ }), (t, o) => (s(), u("div", {
-      class: f(me.value),
-      style: fe(pe.value)
-    }, [
-      d("div", {
-        ref_key: "inputDOMRef",
-        ref: _,
+}, V = ["disabled", "onClick"];
+function I(S, l, z, e, B, D) {
+  return i(), n(
+    "div",
+    {
+      class: a(e.modifiers),
+      style: v(e.styles)
+    },
+    [
+      r("div", {
+        ref: "inputDOMRef",
         class: "nmorph-time-picker__input",
         role: "combobox",
-        "aria-expanded": c.value,
-        "aria-controls": `${l(C)}-dropdown`,
-        tabindex: n.disabled ? -1 : l(ee),
-        onClick: O,
-        onFocus: o[0] || (o[0] = //@ts-ignore
-        (...e) => l(D) && l(D)(...e)),
-        onBlur: o[1] || (o[1] = //@ts-ignore
-        (...e) => l(E) && l(E)(...e)),
+        "aria-expanded": e.open,
+        "aria-controls": `${e.id}-dropdown`,
+        tabindex: e.props.disabled ? -1 : e.tabindex,
+        onClick: e.toggleOpen,
+        onFocus: l[0] || (l[0] = (...o) => e.focusHandler && e.focusHandler(...o)),
+        onBlur: l[1] || (l[1] = (...o) => e.blurHandler && e.blurHandler(...o)),
         onKeydown: [
-          F(k(O, ["prevent"]), ["space"]),
-          F(k(O, ["prevent"]), ["enter"]),
-          F(k(N, ["prevent"]), ["escape"])
+          m(t(e.toggleOpen, ["prevent"]), ["space"]),
+          m(t(e.toggleOpen, ["prevent"]), ["enter"]),
+          m(t(e.closeHandler, ["prevent"]), ["escape"])
         ]
       }, [
-        d("input", {
-          id: l(C),
+        r("input", {
+          id: e.id,
           class: "nmorph-time-picker__native",
-          name: l(R),
-          autocomplete: l(Z),
+          name: e.name,
+          autocomplete: e.autocomplete,
           type: "time",
-          step: de.value,
-          value: l(p) || "",
-          disabled: n.disabled,
-          onInput: re
-        }, null, 40, Ve),
-        x(l(J), { class: "nmorph-time-picker__clock-icon" }, {
-          default: H(() => [
-            x(l(Se))
+          step: e.inputStep,
+          value: e.modelValue || "",
+          disabled: e.props.disabled,
+          onInput: e.nativeInputHandler
+        }, null, 40, w),
+        d(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
+          default: p(() => [
+            d(e.NmorphIconClock)
           ]),
           _: 1
+          /* STABLE */
         }),
-        d("div", $e, w(ue.value), 1),
-        ce.value ? (s(), u("button", {
+        r(
+          "div",
+          x,
+          c(e.displayValue),
+          1
+          /* TEXT */
+        ),
+        e.showClearButton ? (i(), n("button", {
           key: 0,
           class: "nmorph-time-picker__clear",
           type: "button",
           "aria-label": "Clear time",
-          onClick: k(se, ["stop"])
+          onClick: t(e.clearHandler, ["stop"])
         }, [
-          x(l(J), {
+          d(e.NmorphIcon, {
             width: "14px",
             height: "14px"
           }, {
-            default: H(() => [
-              x(l(Ce))
+            default: p(() => [
+              d(e.NmorphIconCircleClose)
             ]),
             _: 1
+            /* STABLE */
           })
-        ])) : K("", !0)
-      ], 40, Te),
-      l(_) && !n.disabled ? (s(), _e(l(ge), {
+        ])) : _("v-if", !0)
+      ], 40, y),
+      e.inputDOMRef && !e.props.disabled ? (i(), f(e.NmorphDropdown, {
         key: 0,
-        open: c.value,
-        "relative-element": l(_),
-        width: n.showSeconds ? 216 : 152,
+        open: e.open,
+        "relative-element": e.inputDOMRef,
+        width: e.props.showSeconds ? 216 : 152,
         "fill-width": !1,
-        "z-index": n.zIndex,
-        "aria-label": l(R),
-        onOnOutsideClick: N,
-        onOnEscapeKeydown: N
+        "z-index": e.props.zIndex,
+        "aria-label": e.name,
+        onOnOutsideClick: e.closeHandler,
+        onOnEscapeKeydown: e.closeHandler
       }, {
-        default: H(() => [
-          d("div", {
-            id: `${l(C)}-dropdown`,
-            class: f(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": n.showSeconds }])
+        default: p(() => [
+          r("div", {
+            id: `${e.id}-dropdown`,
+            class: a(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
           }, [
-            d("div", Ie, [
-              (s(!0), u(y, null, P(le.value, (e) => (s(), u("button", {
-                key: e.value,
-                type: "button",
-                class: f(["nmorph-time-picker__option", [
-                  M.value,
-                  { "nmorph-time-picker__option--active": e.value === r.value.hour }
-                ]]),
-                disabled: e.disabled,
-                onClick: (m) => I("hour", e.value)
-              }, w(e.label), 11, Ne))), 128))
-            ]),
-            o[3] || (o[3] = d("div", { class: "nmorph-time-picker__separator" }, ":", -1)),
-            d("div", Oe, [
-              (s(!0), u(y, null, P(ae.value, (e) => (s(), u("button", {
-                key: e.value,
-                type: "button",
-                class: f(["nmorph-time-picker__option", [
-                  M.value,
-                  { "nmorph-time-picker__option--active": e.value === r.value.minute }
-                ]]),
-                disabled: e.disabled,
-                onClick: (m) => I("minute", e.value)
-              }, w(e.label), 11, Me))), 128))
+            r("div", H, [
+              (i(!0), n(
+                s,
+                null,
+                h(e.hourOptions, (o) => (i(), n("button", {
+                  key: o.value,
+                  type: "button",
+                  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, g))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
             ]),
-            n.showSeconds ? (s(), u(y, { key: 0 }, [
-              o[2] || (o[2] = d("div", { class: "nmorph-time-picker__separator" }, ":", -1)),
-              d("div", ze, [
-                (s(!0), u(y, null, P(ie.value, (e) => (s(), u("button", {
-                  key: e.value,
+            l[3] || (l[3] = r(
+              "div",
+              { class: "nmorph-time-picker__separator" },
+              ":",
+              -1
+              /* CACHED */
+            )),
+            r("div", O, [
+              (i(!0), n(
+                s,
+                null,
+                h(e.minuteOptions, (o) => (i(), n("button", {
+                  key: o.value,
                   type: "button",
-                  class: f(["nmorph-time-picker__option", [
-                    M.value,
-                    { "nmorph-time-picker__option--active": e.value === r.value.second }
+                  class: a(["nmorph-time-picker__option", [
+                    e.optionHeightModifiers,
+                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }
                   ]]),
-                  disabled: e.disabled,
-                  onClick: (m) => I("second", e.value)
-                }, w(e.label), 11, Fe))), 128))
-              ])
-            ], 64)) : K("", !0)
-          ], 10, Be)
+                  disabled: o.disabled,
+                  onClick: (k) => e.selectUnit("minute", o.value)
+                }, c(o.label), 11, N))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            e.props.showSeconds ? (i(), n(
+              s,
+              { key: 0 },
+              [
+                l[2] || (l[2] = r(
+                  "div",
+                  { class: "nmorph-time-picker__separator" },
+                  ":",
+                  -1
+                  /* CACHED */
+                )),
+                r("div", M, [
+                  (i(!0), n(
+                    s,
+                    null,
+                    h(e.secondOptions, (o) => (i(), n("button", {
+                      key: o.value,
+                      type: "button",
+                      class: a(["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)
+                    }, c(o.label), 11, V))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ])
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )) : _("v-if", !0)
+          ], 10, C)
         ]),
         _: 1
-      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : K("", !0)
-    ], 6));
-  }
-});
+        /* STABLE */
+      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : _("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const F = /* @__PURE__ */ u(b, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
 export {
-  Qe as default
+  F as default
 };

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

@@ -0,0 +1,124 @@
+import './NmorphTimePicker.css';
+import { defineComponent as te, ref as _, computed as n, watch as oe } from "vue";
+import { useI18n as re } from "vue-i18n";
+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 },
+    placeholder: { type: String, required: !1, default: "" },
+    hourStep: { type: Number, required: !1, default: 1 },
+    minuteStep: { type: Number, required: !1, default: 5 },
+    secondStep: { type: Number, required: !1, default: 1 },
+    showSeconds: { type: Boolean, required: !1, default: !1 },
+    minTime: { type: String, required: !1, default: "" },
+    maxTime: { type: String, required: !1, default: "" },
+    clearable: { type: Boolean, required: !1, default: !0 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value", "focus", "blur"],
+  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 = _(!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]), 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;
+    }, 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 && (l.value = o);
+    });
+    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(u),
+          value: u,
+          disabled: b(q)
+        };
+      });
+    }, 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 = () => {
+      p(null), a.value = !1;
+    }, J = () => {
+      a.value = !1;
+    }, K = () => {
+      t.disabled || (a.value = !a.value);
+    }, L = (e) => {
+      const o = e.target, r = i(o.value);
+      !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(
+      () => O({
+        nmorph: [B[t.height]],
+        "nmorph-time-picker": [
+          t.disabled && "disabled",
+          a.value && "open",
+          w.value && "focus",
+          !s.value && "placeholder"
+        ]
+      })
+    ), Z = n(
+      () => O({
+        nmorph: [B[t.height]]
+      })
+    ), 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 de;
+    }, get NmorphIconCircleClose() {
+      return ie;
+    }, get NmorphIconClock() {
+      return ae;
+    } };
+    return Object.defineProperty(V, "__isScriptSetup", { enumerable: !1, value: !0 }), V;
+  }
+});
+export {
+  Ie as default
+};