@nmorph/nmorph-ui-kit 2.2.9 → 2.2.12

package/dist/components/form/nmorph-form/NmorphForm.vue.js

@@ -0,0 +1,23 @@
+import e from "./NmorphForm.vue2.js";
+import { openBlock as t, createElementBlock as m, normalizeClass as n, createElementVNode as s, renderSlot as c } from "vue";
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const l = { class: "nmorph-form__content" };
+function p(o, a, i, r, _, d) {
+  return t(), m(
+    "form",
+    {
+      class: n(r.modifiers)
+    },
+    [
+      s("div", l, [
+        c(o.$slots, "default")
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const k = /* @__PURE__ */ f(e, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-form/NmorphForm.vue"]]);
+export {
+  k as default
+};

package/dist/components/form/nmorph-form/NmorphForm.vue2.js

@@ -0,0 +1,23 @@
+import { defineComponent as i, computed as p, provide as s } from "vue";
+import { useModifiers as d } from "../../../utils/create-modifiers.js";
+import { useFormValidation as n } from "../../../hooks/use-form-validation.js";
+const c = /* @__PURE__ */ i({
+  __name: "NmorphForm",
+  props: {
+    value: { type: Object, required: !0 },
+    validateImmediately: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(t, { expose: a }) {
+    const e = t, m = p(
+      () => d({
+        "nmorph-form": []
+      })
+    ), o = n(e.value, e.validateImmediately);
+    a({ formData: o }), s("form-data", o);
+    const r = { props: e, modifiers: m, formValidationData: o };
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
+  }
+});
+export {
+  c as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.css

@@ -0,0 +1 @@
+.nmorph-form-item{margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-loose)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-text-color)}

package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue.js

@@ -0,0 +1,39 @@
+import './NmorphFormItem.css';
+import n from "./NmorphFormItem.vue2.js";
+import { openBlock as r, createElementBlock as e, normalizeClass as l, toDisplayString as m, createCommentVNode as t, createElementVNode as c, renderSlot as s, createBlock as h, createVNode as d } from "vue";
+/* empty css                    */
+import p from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const f = ["for"], _ = { class: "nmorph-form-item__content" };
+function v(i, N, a, o, g, k) {
+  return r(), e(
+    "div",
+    {
+      class: l(o.modifiers)
+    },
+    [
+      o.props.label ? (r(), e("label", {
+        key: 0,
+        for: o.props.id
+      }, m(o.props.label), 9, f)) : t("v-if", !0),
+      c("div", _, [
+        s(i.$slots, "default"),
+        o.props.showValidationIcon ? (r(), h(o.NmorphValidationIcon, {
+          key: 0,
+          valid: !!o.validationData?.valid,
+          show: o.showStatusIcon
+        }, null, 8, ["valid", "show"])) : t("v-if", !0)
+      ]),
+      d(o.NmorphErrorBox, {
+        errors: o.validationData?.errors,
+        height: o.props.height,
+        "static-height": a.staticErrorBoxSpace
+      }, null, 8, ["errors", "height", "static-height"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const w = /* @__PURE__ */ p(n, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue"]]);
+export {
+  w as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue2.js

@@ -0,0 +1,45 @@
+import './NmorphFormItem.css';
+import { defineComponent as p, inject as s, computed as o, provide as f, toRef as c } from "vue";
+import { useModifiers as h } from "../../../../../utils/create-modifiers.js";
+import v from "./inner-components/nmorph-error-box/NmorphErrorBox.vue.js";
+import _ from "./inner-components/nmorph-validation-icon/NmorphValidationIcon.vue.js";
+import { nmorphFormItemInputDataKey as y } from "../../use-form-item-input.js";
+const B = /* @__PURE__ */ p({
+  __name: "NmorphFormItem",
+  props: {
+    id: { type: String, required: !0 },
+    name: { type: String, required: !1, default: "" },
+    autocomplete: { type: String, required: !1, default: "" },
+    height: { type: null, required: !1, default: "basic" },
+    label: { type: String, required: !1, default: "" },
+    showValidationIcon: { type: Boolean, required: !1, default: !0 },
+    staticErrorBoxSpace: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(n, { expose: d }) {
+    d();
+    const e = n, r = s("form-data"), t = o(() => r?.fields[e.id]), a = o(() => t.value), u = o(
+      () => !!a.value && !!t?.value?.touched && e.showValidationIcon
+    ), i = o(() => a.value && t.value?.touched);
+    f(y, {
+      id: c(e, "id"),
+      name: o(() => e.name || e.id),
+      autocomplete: o(() => e.autocomplete || void 0)
+    });
+    const m = o(
+      () => h({
+        "nmorph-form-item": [
+          `${e.label && "labeled"}`,
+          `${i.value && (t.value?.valid ? "valid" : "invalid")}`
+        ]
+      })
+    ), l = { props: e, formData: r, validationData: t, ableToShowValidation: a, showStatusIcon: u, ableToAddValidationModifiers: i, modifiers: m, get NmorphValidationIcon() {
+      return _;
+    }, get NmorphErrorBox() {
+      return v;
+    } };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+  }
+});
+export {
+  B as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.css

@@ -0,0 +1 @@
+.nmorph-error-box{display:flex;align-items:center;overflow:hidden}.nmorph-error-box .nmorph-error-box__error{margin:var(--indentation-00);margin-left:var(--default-indentation-input);color:var(--nmorph-error-text-color);text-align:left}.nmorph-error-box.nmorph-error-box--empty:not(.nmorph-error-box--static-height){display:none}

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue.js

@@ -0,0 +1,46 @@
+import './NmorphErrorBox.css';
+import t from "./NmorphErrorBox.vue2.js";
+import { openBlock as r, createElementBlock as o, normalizeClass as m, createVNode as i, TransitionGroup as p, withCtx as s, Fragment as a, renderList as c, toDisplayString as l } from "vue";
+/* empty css                    */
+import f from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+function _(d, u, h, e, x, b) {
+  return r(), o(
+    "div",
+    {
+      class: m(e.modifiers)
+    },
+    [
+      i(p, {
+        name: "list",
+        tag: "div"
+      }, {
+        default: s(() => [
+          (r(!0), o(
+            a,
+            null,
+            c(e.currentError, (n) => (r(), o(
+              "p",
+              {
+                key: n,
+                class: "nmorph-error-box__error"
+              },
+              l(n),
+              1
+              /* TEXT */
+            ))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        _: 1
+        /* STABLE */
+      })
+    ],
+    2
+    /* CLASS */
+  );
+}
+const v = /* @__PURE__ */ f(t, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue"]]);
+export {
+  v as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue2.js

@@ -0,0 +1,28 @@
+import './NmorphErrorBox.css';
+import { defineComponent as p, computed as s } from "vue";
+import { NmorphComponentHeight as u } from "../../../../../../../types/index.js";
+import { useModifiers as l } from "../../../../../../../utils/create-modifiers.js";
+const h = /* @__PURE__ */ p({
+  __name: "NmorphErrorBox",
+  props: {
+    height: { type: null, required: !1, default: "basic" },
+    errors: { type: [Array, Object], required: !1, default: () => [] },
+    staticHeight: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(i, { expose: n }) {
+    n();
+    const e = i, t = s(() => {
+      const r = Array.isArray(e.errors) ? e.errors : e.errors.value;
+      return r.length ? [r[r.length - 1]] : [];
+    }), a = s(
+      () => l({
+        nmorph: [u[e.height]],
+        "nmorph-error-box": [`${e.staticHeight && "static-height"}`, `${t.value.length === 0 && "empty"}`]
+      })
+    ), o = { props: e, currentError: t, modifiers: a };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+});
+export {
+  h as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.css

@@ -0,0 +1 @@
+.nmorph-validation-icon{margin-left:var(--indentation-03);width:var(--nmorph-validation-icon-size)}.nmorph-validation-icon.nmorph-validation-icon--valid .nmorph-validation-icon__content{--color: var(--nmorph-success-color)}.nmorph-validation-icon.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--color: var(--nmorph-error-text-color)}

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue.js

@@ -0,0 +1,34 @@
+import './NmorphValidationIcon.css';
+import r from "./NmorphValidationIcon.vue2.js";
+import { openBlock as n, createElementBlock as t, normalizeStyle as a, normalizeClass as c, createBlock as i, withCtx as m, resolveDynamicComponent as l, createCommentVNode as d } from "vue";
+/* empty css                          */
+import s from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+function p(f, h, e, o, _, v) {
+  return n(), t(
+    "div",
+    {
+      class: c(o.modifiers),
+      style: a({ "--nmorph-validation-icon-size": o.validateIconSize })
+    },
+    [
+      e.show ? (n(), i(o.NmorphIcon, {
+        key: 0,
+        class: "nmorph-validation-icon__content",
+        width: o.validateIconSize,
+        height: o.validateIconSize
+      }, {
+        default: m(() => [
+          (n(), i(l(o.validationIcon)))
+        ]),
+        _: 1
+        /* STABLE */
+      })) : d("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const x = /* @__PURE__ */ s(r, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue"]]);
+export {
+  x as default
+};

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue2.js

@@ -0,0 +1,27 @@
+import './NmorphValidationIcon.css';
+import { defineComponent as a, computed as r } from "vue";
+import { useModifiers as c } from "../../../../../../../utils/create-modifiers.js";
+import m from "../../../../../../../assets/icons/success.svg.js";
+import s from "../../../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import d from "../../../../../../../assets/icons/error.svg.js";
+const l = "18px", I = /* @__PURE__ */ a({
+  __name: "NmorphValidationIcon",
+  props: {
+    valid: { type: [Boolean, Object], required: !0 },
+    show: { type: [Boolean, Object], required: !1, default: !0 }
+  },
+  setup(t, { expose: i }) {
+    i();
+    const o = t, n = r(
+      () => c({
+        "nmorph-validation-icon": [o.valid ? "valid" : "invalid"]
+      })
+    ), p = r(() => o.valid ? m : d), e = { props: o, modifiers: n, validationIcon: p, validateIconSize: l, get NmorphIcon() {
+      return s;
+    } };
+    return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
+  }
+});
+export {
+  I as default
+};

package/dist/components/form/nmorph-form/use-form-item-input.js

@@ -0,0 +1,15 @@
+import { inject as i, computed as e } from "vue";
+import { generateUUID as r } from "../../../utils/common.js";
+const d = "nmorph-form-item-input-data", p = (t) => {
+  const o = i(d, void 0), a = r(), n = e(() => t.id || o?.id.value || a), m = e(() => t.name || o?.name.value || n.value), c = e(() => t.autocomplete || o?.autocomplete.value || void 0), u = e(() => t.tabindex ?? 0);
+  return {
+    id: n,
+    name: m,
+    autocomplete: c,
+    tabindex: u
+  };
+};
+export {
+  d as nmorphFormItemInputDataKey,
+  p as useFormItemInput
+};

package/dist/components/form/nmorph-number-input/NmorphNumberInput.css

@@ -0,0 +1 @@
+.nmorph-number-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-number-input .nmorph-number-input__content{display:flex;align-items:center;width:100%}.nmorph-number-input .nmorph-number-input__input-content{display:flex;width:100%;height:var(--height);height:100%;border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-number-input .nmorph-number-input__decrease .nmorph-button__content{border-top-right-radius:0;border-bottom-right-radius:0}.nmorph-number-input .nmorph-number-input__increase .nmorph-button__content{border-top-left-radius:0;border-bottom-left-radius:0}.nmorph-number-input input{width:auto;width:100%;padding:var(--indentation-00) var(--default-indentation-input);text-align:center;border:none;border-top:1px solid var(--nmorph-main-color);border-bottom:1px solid var(--nmorph-main-color);transition:ease-in-out var(--transition-01) background;background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);transition:background 0s;-moz-appearance:textfield}.nmorph-number-input input:focus{background:var(--nmorph-accent-color);outline:none}.nmorph-number-input input::-webkit-inner-spin-button,.nmorph-number-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.nmorph-number-input .nmorph-number-input__action-btns{display:flex;flex-direction:column}.nmorph-number-input.nmorph-number-input--disabled{cursor:not-allowed;opacity:.6}.nmorph-number-input.nmorph-number-input--disabled .nmorph-number-input__input-content{pointer-events:none}.nmorph-number-input.nmorph-number-input--action-btn-position-right input{border-top-left-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease,.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase{display:flex;justify-content:center;width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease .nmorph-button__content{border-radius:0;border-top-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase .nmorph-button__content{border-radius:0;border-bottom-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{--height: var(--nmorph-number-input-right-action-height)}

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue.js

@@ -0,0 +1,140 @@
+import './NmorphNumberInput.css';
+import h from "./NmorphNumberInput.vue2.js";
+import { openBlock as o, createElementBlock as a, normalizeStyle as c, normalizeClass as d, createElementVNode as e, createVNode as i, withCtx as t, createCommentVNode as m } from "vue";
+/* empty css                       */
+import l from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { class: "nmorph-number-input__content" }, s = { class: "nmorph-number-input__input-content" }, b = {
+  key: 0,
+  class: "nmorph-number-input__decrease"
+}, p = ["id", "name", "autocomplete", "tabindex", "value", "min", "max"], f = {
+  key: 1,
+  class: "nmorph-number-input__increase"
+}, B = {
+  key: 2,
+  class: "nmorph-number-input__action-btns"
+}, g = { class: "nmorph-number-input__decrease" }, u = { class: "nmorph-number-input__increase" };
+function I(N, y, r, n, v, x) {
+  return o(), a(
+    "div",
+    {
+      class: d(n.modifiers),
+      style: c({ "--nmorph-number-input-right-action-height": n.rightActionBtnHeight })
+    },
+    [
+      e("div", _, [
+        e("div", s, [
+          r.actionBtnPositionRight ? m("v-if", !0) : (o(), a("div", b, [
+            i(n.NmorphButton, {
+              "style-type": "transparent",
+              disabled: n.minBtnDisabled,
+              height: n.props.height,
+              onClick: n.decreaseHandler
+            }, {
+              default: t(() => [
+                i(n.NmorphIcon, {
+                  width: n.actionBtnIconSize,
+                  height: n.actionBtnIconSize
+                }, {
+                  default: t(() => [
+                    i(n.NmorphIconMinusThin)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["width", "height"])
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["disabled", "height"])
+          ])),
+          e("input", {
+            id: n.id,
+            ref: "inputDOMRef",
+            name: n.name,
+            autocomplete: n.autocomplete,
+            tabindex: n.tabindex,
+            class: "nmorph-native-input",
+            value: n.initialValue,
+            type: "number",
+            min: n.props.min,
+            max: n.props.max,
+            onInput: n.inputHandler
+          }, null, 40, p),
+          r.actionBtnPositionRight ? (o(), a("div", B, [
+            e("div", g, [
+              i(n.NmorphButton, {
+                "style-type": "transparent",
+                disabled: n.minBtnDisabled,
+                onClick: n.decreaseHandler
+              }, {
+                default: t(() => [
+                  i(n.NmorphIcon, {
+                    width: n.actionBtnIconSize,
+                    height: n.actionBtnIconSize
+                  }, {
+                    default: t(() => [
+                      i(n.NmorphIconMinusThin)
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["width", "height"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled"])
+            ]),
+            e("div", u, [
+              i(n.NmorphButton, {
+                "style-type": "transparent",
+                disabled: n.maxBtnDisabled,
+                onClick: n.increaseHandler
+              }, {
+                default: t(() => [
+                  i(n.NmorphIcon, {
+                    width: n.actionBtnIconSize,
+                    height: n.actionBtnIconSize
+                  }, {
+                    default: t(() => [
+                      i(n.NmorphIconPlusThin)
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["width", "height"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled"])
+            ])
+          ])) : (o(), a("div", f, [
+            i(n.NmorphButton, {
+              "style-type": "transparent",
+              disabled: n.maxBtnDisabled,
+              height: n.props.height,
+              onClick: n.increaseHandler
+            }, {
+              default: t(() => [
+                i(n.NmorphIcon, {
+                  width: n.actionBtnIconSize,
+                  height: n.actionBtnIconSize
+                }, {
+                  default: t(() => [
+                    i(n.NmorphIconPlusThin)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["width", "height"])
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["disabled", "height"])
+          ]))
+        ])
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const C = /* @__PURE__ */ l(h, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-number-input/NmorphNumberInput.vue"]]);
+export {
+  C as default
+};

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue2.js

@@ -0,0 +1,79 @@
+import './NmorphNumberInput.css';
+import { defineComponent as S, computed as n, ref as l, watch as P } from "vue";
+import { NmorphComponentHeight as H } from "../../../types/index.js";
+import { useModifiers as M } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as R } from "../nmorph-form/use-form-item-input.js";
+import T from "../../../assets/icons/plus-thin.svg.js";
+import D from "../../../assets/icons/minus-thin.svg.js";
+import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import z from "../../basic/nmorph-button/NmorphButton.vue.js";
+const K = /* @__PURE__ */ S({
+  __name: "NmorphNumberInput",
+  props: {
+    modelValue: { type: Number, required: !1, default: 0 },
+    max: { type: Number, required: !1, default: 1 / 0 },
+    min: { type: Number, required: !1, default: -1 / 0 },
+    step: { type: Number, required: !1, default: 1 },
+    actionBtnPositionRight: { type: Boolean, required: !1, default: !1 },
+    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"],
+  setup(m, { expose: p, emit: s }) {
+    const e = m, { id: d, name: c, autocomplete: f, tabindex: h } = R(e), g = n(
+      () => M({
+        nmorph: [H[e.height]],
+        "nmorph-number-input": [
+          `${e.disabled && "disabled"}`,
+          `${e.actionBtnPositionRight && "action-btn-position-right"}`
+        ]
+      })
+    ), t = l(e.modelValue), b = () => {
+      t.value += e.step;
+    }, x = () => {
+      t.value -= e.step;
+    }, N = n(() => t.value <= e.min), y = n(() => t.value >= e.max), v = n(() => e.height === "thick" ? "16px" : "12px"), o = {
+      thick: {
+        default: "12px",
+        right: "8px"
+      },
+      basic: {
+        default: "10px",
+        right: "7px"
+      },
+      thin: {
+        default: "8px",
+        right: "5px"
+      }
+    }, I = n(() => {
+      const i = e.actionBtnPositionRight ? "right" : "default";
+      return o[e.height][i];
+    }), a = s, q = (i) => {
+      const B = i.target;
+      let _ = Number(B.value);
+      t.value = _;
+    };
+    P(t, (i) => {
+      i > e.max && (t.value = e.max, r.value?.blur()), t.value < e.min && (t.value = e.min, r.value?.blur()), a("update:model-value", i);
+    });
+    const r = l(null);
+    p({ inputDOMRef: r });
+    const u = { props: e, id: d, name: c, autocomplete: f, tabindex: h, modifiers: g, initialValue: t, increaseHandler: b, decreaseHandler: x, minBtnDisabled: N, maxBtnDisabled: y, rightActionBtnHeight: v, iconSizeMap: o, actionBtnIconSize: I, emit: a, inputHandler: q, inputDOMRef: r, get NmorphButton() {
+      return z;
+    }, get NmorphIcon() {
+      return k;
+    }, get NmorphIconMinusThin() {
+      return D;
+    }, get NmorphIconPlusThin() {
+      return T;
+    } };
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+  }
+});
+export {
+  K as default
+};

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.css

@@ -0,0 +1 @@
+.nmorph-otp-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-otp-input .nmorph-otp-input__content{display:flex;gap:var(--indentation-02)}.nmorph-otp-input .nmorph-otp-input__field{flex:0 0 auto;width:44px;min-width:44px}.nmorph-otp-input .nmorph-otp-input__field input{padding:0;text-align:center;text-indent:0;font-variant-numeric:tabular-nums}.nmorph-otp-input.nmorph--thin-component .nmorph-otp-input__field{width:32px;min-width:32px}.nmorph-otp-input.nmorph--thick-component .nmorph-otp-input__field{width:52px;min-width:52px}.nmorph-otp-input.nmorph-otp-input--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue.js

@@ -0,0 +1,71 @@
+import './NmorphOTPInput.css';
+import p from "./NmorphOTPInput.vue2.js";
+import { openBlock as a, createElementBlock as d, normalizeClass as m, createElementVNode as i, Fragment as c, renderList as s, createBlock as f, withModifiers as t, withKeys as r } from "vue";
+/* empty css                    */
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const u = ["name", "value", "disabled"], v = { class: "nmorph-otp-input__content" };
+function _(b, l, H, e, g, y) {
+  return a(), d(
+    "div",
+    {
+      class: m(e.modifiers)
+    },
+    [
+      i("input", {
+        name: e.name,
+        value: e.otpValue.join(""),
+        type: "hidden",
+        disabled: e.props.disabled
+      }, null, 8, u),
+      i("div", v, [
+        (a(!0), d(
+          c,
+          null,
+          s(e.otpValue, (k, o) => (a(), f(e.NmorphTextInput, {
+            id: e.fieldIds[o],
+            key: e.fieldIds[o],
+            ref_for: !0,
+            ref: (n) => e.setInputRef(n, o),
+            class: "nmorph-otp-input__field",
+            "model-value": e.otpValue[o],
+            height: e.props.height,
+            disabled: e.props.disabled,
+            autocomplete: e.resolvedAutocomplete,
+            tabindex: e.getFieldTabindex(o),
+            indentation: "0px",
+            "input-attrs": {
+              name: void 0,
+              maxlength: 1,
+              inputmode: e.inputMode,
+              pattern: e.inputPattern,
+              autocapitalize: e.props.autocapitalize,
+              spellcheck: !1,
+              autofocus: e.props.autofocus && o === 0,
+              "aria-label": `OTP ${o + 1}`
+            },
+            "onUpdate:modelValue": (n) => e.inputHandler(n, o),
+            onKeydown: [
+              l[0] || (l[0] = (n) => e.keydownHandler(n)),
+              r(t((n) => e.deleteKeyHandler(n, o), ["prevent"]), ["delete"]),
+              r(t((n) => e.arrowLeftHandler(o), ["prevent"]), ["left"]),
+              r(t((n) => e.arrowRightHandler(o), ["prevent"]), ["right"]),
+              r(t(e.homeHandler, ["prevent"]), ["home"]),
+              r(t(e.endHandler, ["prevent"]), ["end"])
+            ],
+            onPaste: t((n) => e.pasteHandler(n, o), ["prevent"]),
+            onFocus: (n) => e.focusHandler(o),
+            onBlur: e.blurHandler
+          }, null, 8, ["id", "model-value", "height", "disabled", "autocomplete", "tabindex", "input-attrs", "onUpdate:modelValue", "onKeydown", "onPaste", "onFocus"]))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const T = /* @__PURE__ */ h(p, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-otp-input/NmorphOTPInput.vue"]]);
+export {
+  T as default
+};