@nmorph/nmorph-ui-kit 2.2.37 → 2.2.38

package/dist/components/data/nmorph-card/NmorphCard.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphCard.css';
-import { defineComponent as n, useSlots as p, computed as d } from "vue";
-import { NmorphShadowType as l } from "../../../types/index.js";
-import { useModifiers as u } from "../../../utils/create-modifiers.js";
-import { toCssSize as f } from "../../../utils/common.js";
-const S = /* @__PURE__ */ n({
+import { defineComponent as p, useSlots as l, computed as o } from "vue";
+import { NmorphShadowType as u } from "../../../types/index.js";
+import { useModifiers as f } from "../../../utils/create-modifiers.js";
+import { toCssSize as m } from "../../../utils/common.js";
+const S = /* @__PURE__ */ p({
   __name: "NmorphCard",
   props: {
     shadowType: { type: null, required: !1, default: "outset" },
@@ -13,19 +13,22 @@ const S = /* @__PURE__ */ n({
     fill: { type: Boolean, required: !1, default: !0 },
     tag: { type: String, required: !1, default: "div" }
   },
-  setup(o, { expose: t }) {
-    t();
-    const e = o, i = p(), a = d(
-      () => u({
-        nmorph: [l[e.shadowType]],
+  setup(t, { expose: i }) {
+    i();
+    const e = t, a = l(), n = o(
+      () => f({
+        nmorph: [u[e.shadowType]],
         "nmorph-card": [e.shadowType, e.fill ? "fill" : "fit-content"]
       })
-    ), s = d(() => ({
-      ...e.shadowType === "combined" && {
-        "--nmorph-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
-      },
-      ...e.cardPadding !== void 0 && { "--card-padding": f(e.cardPadding) }
-    })), r = { props: e, slots: i, modifiers: a, styles: s };
+    ), s = o(() => {
+      const d = e.cardPadding !== void 0 ? m(e.cardPadding) : void 0;
+      return {
+        ...e.shadowType === "combined" && {
+          "--nmorph-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
+        },
+        ...d !== void 0 && { "--card-padding": d, padding: d }
+      };
+    }), r = { props: e, slots: a, modifiers: n, styles: s };
     return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
 });

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

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

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.css

@@ -1 +1 @@
-.nmorph-checkbox{--size: var(--height);display:inline-flex;align-items:center;vertical-align:middle;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;justify-content:center;align-items:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.nmorph-checkbox input:focus-visible{outline:2px solid var(--nmorph-accent-color);opacity:1;scale:.95}.nmorph-checkbox .nmorph-checkbox__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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)}.nmorph-checkbox .nmorph-checkbox__label,.nmorph-checkbox .nmorph-checkbox__fake span{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-checkbox .nmorph-checkbox__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{line-height:.8}.nmorph-checkbox.nmorph-checkbox--button .nmorph-checkbox__fake{position:relative;display:flex;justify-content:center;align-items:center;width:auto;min-width:var(--size);height:var(--size);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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-checkbox.nmorph--extra-thin-component .nmorph-checkbox__label,.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__fake span{font-size:var(--font-size-tiny);line-height:var(--line-height-line)}.nmorph-checkbox.nmorph--extra-thin-component.nmorph-checkbox--button .nmorph-checkbox__fake{padding:var(--indentation-02)}.nmorph-checkbox.nmorph-checkbox--checked .nmorph-checkbox__fake{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)}.nmorph-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-checkbox{--size: var(--height);--nmorph-selection-control-font-size: var(--font-size-small);--nmorph-selection-control-line-height: var(--line-height-regular);--nmorph-selection-control-inline-padding: var(--indentation-03);display:inline-flex;align-items:center;vertical-align:middle;cursor:pointer}.nmorph-checkbox.nmorph{height:auto;min-height:var(--size)}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;justify-content:center;align-items:center;min-height:var(--size)}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.nmorph-checkbox input:focus-visible{outline:2px solid var(--nmorph-accent-color);opacity:1;scale:.95}.nmorph-checkbox .nmorph-checkbox__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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)}.nmorph-checkbox .nmorph-checkbox__label,.nmorph-checkbox .nmorph-checkbox__fake span{font-weight:400;font-size:var(--nmorph-selection-control-font-size);line-height:var(--nmorph-selection-control-line-height)}.nmorph-checkbox .nmorph-checkbox__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{line-height:.8}.nmorph-checkbox.nmorph-checkbox--button .nmorph-checkbox__fake{position:relative;display:flex;justify-content:center;align-items:center;width:auto;min-width:var(--size);height:var(--size);padding:var(--nmorph-selection-control-inline-padding);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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-checkbox.nmorph--extra-thin-component{--nmorph-selection-control-font-size: var(--font-size-tiny);--nmorph-selection-control-line-height: var(--line-height-line);--nmorph-selection-control-inline-padding: var(--indentation-02)}.nmorph-checkbox.nmorph--thin-component{--nmorph-selection-control-font-size: var(--font-size-extra-small)}.nmorph-checkbox.nmorph--basic-component{--nmorph-selection-control-font-size: var(--font-size-small)}.nmorph-checkbox.nmorph--thick-component{--nmorph-selection-control-font-size: var(--font-size-base)}.nmorph-checkbox.nmorph-checkbox--checked .nmorph-checkbox__fake{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)}.nmorph-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}

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

@@ -1,8 +1,9 @@
 import './NmorphCheckbox.css';
-import { defineComponent as y, inject as u, watch as k, ref as i, computed as r } from "vue";
-import { useModifiers as x } from "../../../utils/create-modifiers.js";
-import { NmorphSelectionControlHeight as S } from "../../../types/index.js";
-const j = /* @__PURE__ */ y({
+import { defineComponent as x, inject as i, watch as S, ref as n, computed as d } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { NmorphSelectionControlHeight as V } from "../../../types/index.js";
+import { useFormItemModel as C } from "../nmorph-form/use-form-item-input.js";
+const H = /* @__PURE__ */ x({
   __name: "NmorphCheckbox",
   props: {
     id: { type: String, required: !1, default: "" },
@@ -13,43 +14,44 @@ const j = /* @__PURE__ */ y({
     height: { type: null, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(f, { expose: m, emit: v }) {
-    const l = u(
+  setup(g, { expose: b, emit: _ }) {
+    const o = i(
       "checkbox-group-selected-value",
       void 0
-    ), a = u(
+    ), u = i(
       "change-checkbox-value-handler",
       void 0
-    ), n = u("checkbox-group-height", void 0), e = f;
-    k(
-      () => e.modelValue,
-      (_) => {
-        t.value = _;
-      }
+    ), s = i("checkbox-group-height", void 0), e = g, c = _, { modelValue: l, updateModelValue: p } = C(
+      e,
+      (r) => c("update:model-value", r),
+      !1
     );
-    const d = i(null);
-    m({ inputDOMRef: d });
-    const o = l !== void 0, t = o ? i(l.value) : i(e.modelValue), s = r(() => o ? l.value.includes(e.id) : e.modelValue), c = r(() => e.height || n?.value || "thin"), p = v, g = () => {
+    S(l, (r) => {
+      t.value = r;
+    });
+    const f = n(null);
+    b({ inputDOMRef: f });
+    const a = o !== void 0, t = a ? n(o.value) : n(l.value), h = d(() => a ? o.value.includes(e.id) : l.value), m = d(() => e.height || s?.value || "thin"), y = () => {
       if (!e.disabled) {
-        if (!o) {
-          t.value = !t.value, p("update:model-value", t.value);
+        if (!a) {
+          t.value = !t.value, p(t.value);
           return;
         }
-        a && Array.isArray(t.value) && a(e.id, t.value);
+        u && Array.isArray(t.value) && u(e.id, t.value);
       }
-    }, b = r(
-      () => x({
-        nmorph: [S[c.value]],
+    }, k = d(
+      () => q({
+        nmorph: [V[m.value]],
         "nmorph-checkbox": [
-          s.value && "checked",
+          h.value && "checked",
           e.disabled && "disabled",
           e.design === "button" && "button"
         ]
       })
-    ), h = { groupSelectedValue: l, changeValue: a, groupHeight: n, props: e, inputDOMRef: d, hasGroup: o, initialValue: t, checked: s, height: c, emit: p, handleChange: g, modifiers: b };
-    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
+    ), v = { groupSelectedValue: o, changeValue: u, groupHeight: s, props: e, emit: c, modelValue: l, updateModelValue: p, inputDOMRef: f, hasGroup: a, initialValue: t, checked: h, height: m, handleChange: y, modifiers: k };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  j as default
+  H as default
 };

package/dist/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue2.js

@@ -1,11 +1,12 @@
 import './NmorphCheckboxGroup.css';
-import { defineComponent as m, ref as h, watch as g, computed as d, provide as o } from "vue";
-import { useModifiers as b } from "../../../utils/create-modifiers.js";
-import y from "../nmorph-checkbox/NmorphCheckbox.vue.js";
-const _ = /* @__PURE__ */ m({
+import { defineComponent as g, ref as b, watch as v, computed as p, provide as u } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import { useFormItemModel as q } from "../nmorph-form/use-form-item-input.js";
+import x from "../nmorph-checkbox/NmorphCheckbox.vue.js";
+const N = /* @__PURE__ */ g({
   __name: "NmorphCheckboxGroup",
   props: {
-    modelValue: { type: Array, required: !0, default: () => [] },
+    modelValue: { type: Array, required: !1, default: () => [] },
     options: { type: Array, required: !1, default: () => [] },
     design: { type: String, required: !1, default: "button" },
     direction: { type: null, required: !1, default: "row" },
@@ -17,30 +18,34 @@ const _ = /* @__PURE__ */ m({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(n, { expose: p, emit: s }) {
-    p();
-    const r = n, e = h([...r.modelValue]);
-    g(
-      () => r.modelValue,
+  setup(s, { expose: c, emit: f }) {
+    c();
+    const r = s, a = f, { modelValue: o, updateModelValue: l } = q(
+      r,
+      (t) => a("update:model-value", t),
+      []
+    ), e = b([...o.value]);
+    v(
+      o,
       (t) => {
         e.value = [...t];
       },
       { deep: !0 }
     );
-    const u = s, a = (t) => {
-      e.value = e.value.includes(t) ? e.value.filter((f) => f !== t) : [...e.value, t], u("update:model-value", e.value);
-    }, c = d(
-      () => b({
+    const i = (t) => {
+      e.value = e.value.includes(t) ? e.value.filter((h) => h !== t) : [...e.value, t], l(e.value);
+    }, m = p(
+      () => y({
         "nmorph-checkbox-group": [r.design, r.direction]
       })
-    ), l = d(() => r.height);
-    o("checkbox-group-selected-value", e), o("change-checkbox-value-handler", a), o("checkbox-group-height", l);
-    const i = { props: r, initialValue: e, emit: u, changeHandler: a, modifiers: c, height: l, get NmorphCheckbox() {
-      return y;
+    ), d = p(() => r.height);
+    u("checkbox-group-selected-value", e), u("change-checkbox-value-handler", i), u("checkbox-group-height", d);
+    const n = { props: r, emit: a, modelValue: o, updateModelValue: l, initialValue: e, changeHandler: i, modifiers: m, height: d, get NmorphCheckbox() {
+      return x;
     } };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {
-  _ as default
+  N as default
 };

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

@@ -1,9 +1,9 @@
 import './NmorphColorPicker.css';
-import { defineComponent as R, ref as h, watch as j, onMounted as k, computed as C } from "vue";
-import { NmorphComponentHeight as B } from "../../../types/index.js";
-import { useModifiers as H } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as L } from "../nmorph-form/use-form-item-input.js";
-const E = /* @__PURE__ */ R({
+import { defineComponent as k, ref as g, watch as B, onMounted as H, computed as _ } from "vue";
+import { NmorphComponentHeight as L } from "../../../types/index.js";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as z, useFormItemModel as A } from "../nmorph-form/use-form-item-input.js";
+const G = /* @__PURE__ */ k({
   __name: "NmorphColorPicker",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -17,51 +17,52 @@ const E = /* @__PURE__ */ R({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(_, { expose: q, emit: M }) {
-    const o = _, g = M, { id: V, name: S, tabindex: x } = L(o), s = (e, r = "#000000") => {
+  setup(q, { expose: S, emit: V }) {
+    const n = q, b = V, { id: x, name: I, tabindex: F } = z(n), { modelValue: d, updateModelValue: y } = A(
+      n,
+      (e) => b("update:model-value", e),
+      ""
+    ), l = (e, r = "#000000") => {
       const t = e?.trim() || "";
-      return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((n) => `${n}${n}`).join("").toLowerCase()}` : r;
-    }, c = h(null), m = () => {
+      return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((o) => `${o}${o}`).join("").toLowerCase()}` : r;
+    }, p = g(null), m = () => {
       if (typeof document > "u") return "#006cb6";
-      const e = c.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
-      return s(r, "#006cb6");
-    }, a = h(s(o.modelValue)), b = h(!1);
-    j(
-      () => o.modelValue,
-      (e) => {
-        a.value = e ? s(e) : m();
-      }
-    );
-    const I = (e) => {
-      const r = e.target, t = s(r.value);
-      a.value = t, g("update:model-value", t);
-    }, p = (e) => [
+      const e = p.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
+      return l(r, "#006cb6");
+    }, a = g(l(d.value)), v = g(!1);
+    B(d, (e) => {
+      a.value = e ? l(e) : m();
+    });
+    const w = (e) => {
+      const r = e.target, t = l(r.value);
+      a.value = t, y(t);
+    }, f = (e) => [
       parseInt(e.slice(1, 3), 16),
       parseInt(e.slice(3, 5), 16),
       parseInt(e.slice(5, 7), 16)
-    ], y = (e) => {
-      const [r, t, n] = p(e);
-      return `rgb(${r}, ${t}, ${n})`;
-    }, v = (e) => {
-      const [r, t, n] = p(e).map((P) => P / 255), l = Math.max(r, t, n), u = Math.min(r, t, n), f = (l + u) / 2;
-      if (l === u)
-        return `hsl(0, 0%, ${Math.round(f * 100)}%)`;
-      const i = l - u, N = f > 0.5 ? i / (2 - l - u) : i / (l + u);
-      let d = 0;
-      return l === r ? d = (t - n) / i + (t < n ? 6 : 0) : l === t ? d = (n - r) / i + 2 : d = (r - t) / i + 4, `hsl(${Math.round(d * 60)}, ${Math.round(N * 100)}%, ${Math.round(f * 100)}%)`;
+    ], $ = (e) => {
+      const [r, t, o] = f(e);
+      return `rgb(${r}, ${t}, ${o})`;
+    }, M = (e) => {
+      const [r, t, o] = f(e).map((j) => j / 255), s = Math.max(r, t, o), u = Math.min(r, t, o), h = (s + u) / 2;
+      if (s === u)
+        return `hsl(0, 0%, ${Math.round(h * 100)}%)`;
+      const i = s - u, R = h > 0.5 ? i / (2 - s - u) : i / (s + u);
+      let c = 0;
+      return s === r ? c = (t - o) / i + (t < o ? 6 : 0) : s === t ? c = (o - r) / i + 2 : c = (r - t) / i + 4, `hsl(${Math.round(c * 60)}, ${Math.round(R * 100)}%, ${Math.round(h * 100)}%)`;
     };
-    k(() => {
-      o.modelValue || (a.value = m());
-    }), q({ inputDOMRef: c });
-    const F = C(
-      () => H({
-        nmorph: [B[o.height], b.value && "focused"],
-        "nmorph-color-picker": [o.disabled && "disabled", o.displayFormat]
+    H(() => {
+      d.value || (a.value = m());
+    }), S({ inputDOMRef: p });
+    const N = _(
+      () => O({
+        nmorph: [L[n.height], v.value && "focused"],
+        "nmorph-color-picker": [n.disabled && "disabled", n.displayFormat]
       })
-    ), w = C(() => o.displayFormat === "rgb" ? y(a.value) : o.displayFormat === "hsl" ? v(a.value) : a.value.toUpperCase()), $ = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: a, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: v, modifiers: F, displayValue: w };
-    return Object.defineProperty($, "__isScriptSetup", { enumerable: !1, value: !0 }), $;
+    ), P = _(() => n.displayFormat === "rgb" ? $(a.value) : n.displayFormat === "hsl" ? M(a.value) : a.value.toUpperCase()), C = { props: n, emit: b, id: x, name: I, tabindex: F, modelValue: d, updateModelValue: y, normalizeColor: l, inputDOMRef: p, resolveAccentColor: m, currentValue: a, focused: v, handleInput: w, hexToRgb: f, formatRgb: $, formatHsl: M, modifiers: N, displayValue: P };
+    return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
   }
 });
 export {
-  E as default
+  G as default
 };

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

@@ -1,21 +1,21 @@
 import './NmorphDatePicker.css';
-import { defineComponent as O, computed as a, ref as u } from "vue";
-import { useModifiers as k } from "../../../utils/create-modifiers.js";
-import { toCssSize as s } from "../../../utils/common.js";
-import { NmorphComponentHeight as B } from "../../../types/index.js";
-import P from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
-import V from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
-import { useI18n as j } from "vue-i18n";
-import { useFormItemInput as z } from "../nmorph-form/use-form-item-input.js";
-import { formatDate as f } from "../../data/nmorph-calendar/utils.js";
-import L from "../../../assets/icons/calendar.svg.js";
-import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import R from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const ee = /* @__PURE__ */ O({
+import { defineComponent as B, computed as a, ref as u, watch as M } from "vue";
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { toCssSize as m } from "../../../utils/common.js";
+import { NmorphComponentHeight as P } from "../../../types/index.js";
+import j from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
+import z from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
+import { useI18n as L } from "vue-i18n";
+import { useFormItemInput as R, useFormItemModel as T } from "../nmorph-form/use-form-item-input.js";
+import { formatDate as c } from "../../data/nmorph-calendar/utils.js";
+import E from "../../../assets/icons/calendar.svg.js";
+import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import J from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const le = /* @__PURE__ */ B({
   __name: "NmorphDatePicker",
   props: {
     placeholder: { type: String, required: !1, default: "" },
-    modelValue: { type: [Date, Array, null], required: !0, default: null },
+    modelValue: { type: [Date, Array, null], required: !1, default: null },
     type: { type: null, required: !1, default: "date" },
     textSeparator: { type: String, required: !1, default: "-" },
     initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
@@ -36,25 +36,29 @@ const ee = /* @__PURE__ */ O({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(m, { expose: c, emit: v }) {
-    c();
-    const { t: i } = j(), e = m, { id: y, name: h, autocomplete: g } = z(e), n = a(() => e.placeholder ? e.placeholder : i("pickADate")), t = u(e.modelValue), d = v, l = u(!1), q = () => {
+  setup(v, { expose: h, emit: y }) {
+    h();
+    const { t: p } = L(), e = v, { id: g, name: q, autocomplete: S } = R(e), n = a(() => e.placeholder ? e.placeholder : p("pickADate")), s = y, { modelValue: d, updateModelValue: i } = T(
+      e,
+      (r) => s("update:model-value", r),
+      null
+    ), t = u(d.value), l = u(!1), N = () => {
       l.value = !0;
-    }, S = () => {
+    }, D = () => {
       l.value = !1;
-    }, N = a(
-      () => k({
-        nmorph: [B[e.height]],
+    }, b = a(
+      () => V({
+        nmorph: [P[e.height]],
         "nmorph-date-picker": [e.disabled && "disabled", e.type, l.value && "focus"]
       })
-    ), D = a(() => ({
-      ...e.width !== void 0 && { "--width": s(e.width) },
+    ), C = a(() => ({
+      ...e.width !== void 0 && { "--width": m(e.width) },
       ...e.calendarCellHeight !== void 0 && {
-        "--date-picker-calendar-cell-height": s(e.calendarCellHeight)
+        "--date-picker-calendar-cell-height": m(e.calendarCellHeight)
       }
-    })), o = u(!1), b = u(null), C = () => {
+    })), o = u(!1), I = u(null), _ = () => {
       o.value = !1;
-    }, _ = () => {
+    }, w = () => {
       o.value = !o.value;
     }, A = a(() => {
       if (!t.value) return n.value;
@@ -66,25 +70,33 @@ const ee = /* @__PURE__ */ O({
       };
       if (Array.isArray(t.value)) {
         if (t.value.length === 0) return n.value;
-        const F = f(t.value, r), x = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
-        return F.join(x);
+        const O = c(t.value, r), k = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
+        return O.join(k);
       } else
-        return f(t.value, r);
-    }), H = () => {
+        return c(t.value, r);
+    }), F = () => {
       const r = Array.isArray(t.value) ? [] : null;
-      t.value = r, d("update:model-value", t.value);
-    }, I = (r) => {
-      t.value = r, d("update:model-value", t.value);
-    }, w = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), p = { t: i, props: e, id: y, name: h, autocomplete: g, placeholderText: n, selectedDate: t, emit: d, focus: l, focusHandler: q, blurHandler: S, modifiers: N, styles: D, open: o, nmorphInputDOMRef: b, closeHandler: C, toggleOpen: _, displayValue: A, clearHandler: H, updateSelectedDateHandler: I, showClearButton: w, get NmorphDropdown() {
-      return R;
+      t.value = r, i(t.value);
+    }, H = (r) => {
+      t.value = r, i(t.value);
+    };
+    M(
+      d,
+      (r) => {
+        t.value = r;
+      },
+      { deep: !0 }
+    );
+    const x = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), f = { t: p, props: e, id: g, name: q, autocomplete: S, placeholderText: n, emit: s, modelValue: d, updateModelValue: i, selectedDate: t, focus: l, focusHandler: N, blurHandler: D, modifiers: b, styles: C, open: o, nmorphInputDOMRef: I, closeHandler: _, toggleOpen: w, displayValue: A, clearHandler: F, updateSelectedDateHandler: H, showClearButton: x, get NmorphDropdown() {
+      return J;
     }, get NmorphIcon() {
-      return M;
+      return G;
     }, get NmorphIconCalendar() {
-      return L;
-    }, NmorphClearButton: P, NmorphDatePickerContent: V };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+      return E;
+    }, NmorphClearButton: j, NmorphDatePickerContent: z };
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {
-  ee as default
+  le as default
 };