@nmorph/nmorph-ui-kit 2.2.37 → 2.2.39

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphTagItem.css';
 import { defineComponent as i, computed as s } from "vue";
 import { useModifiers as u } from "../../../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as a } from "../../../../../types/index.js";
+import { NmorphComponentHeight as a } from "../../../../../types/common.types.js";
 import l from "../../../../../assets/icons/error.svg.js";
 import d from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
 const N = /* @__PURE__ */ i({

package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphVirtualList.css';
-import { defineComponent as K, computed as t } from "vue";
+import { defineComponent as I, computed as t } from "vue";
+import { useVirtualList as K } from "../../../hooks/use-virtual-list.js";
 import { useModifiers as N } from "../../../utils/create-modifiers.js";
-import { toCssSize as p } from "../../../utils/common.js";
-import { useVirtualList as T } from "../../../hooks/use-virtual-list.js";
-const B = /* @__PURE__ */ K({
+import { createCssSizeVariables as T } from "../../../utils/common.js";
+const j = /* @__PURE__ */ I({
   __name: "NmorphVirtualList",
   props: {
     items: { type: Array, required: !1, default: () => [] },
@@ -17,45 +17,47 @@ const B = /* @__PURE__ */ K({
     itemTag: { type: String, required: !1, default: "div" }
   },
   emits: ["on-scroll"],
-  setup(y, { expose: h, emit: g }) {
-    const e = y, n = g, a = t(() => e.items), o = t(() => !e.disabled), l = t(() => e.itemHeight), u = t(() => e.overscan), m = t(() => e.dynamic), r = T(a, {
+  setup(p, { expose: y, emit: h }) {
+    const e = p, a = h, n = t(() => e.items), o = t(() => !e.disabled), l = t(() => e.itemHeight), u = t(() => e.overscan), m = t(() => e.dynamic), r = K(n, {
       enabled: o,
       itemHeight: l,
       overscan: u,
       dynamic: m
-    }), d = r.containerRef, v = t(
+    }), d = r.containerRef, g = t(
       () => N({
         "nmorph-virtual-list": [e.disabled && "disabled", e.dynamic && "dynamic"]
       })
-    ), b = t(() => ({
-      "--nmorph-virtual-list-height": p(e.height),
-      "--nmorph-virtual-list-max-height": p(e.maxHeight),
+    ), v = t(() => ({
+      ...T({
+        "--nmorph-virtual-list-height": e.height,
+        "--nmorph-virtual-list-max-height": e.maxHeight
+      }),
       "--nmorph-virtual-list-item-height": `${e.itemHeight}px`
-    })), S = t(() => ({
+    })), b = t(() => ({
       transform: o.value ? `translateY(${r.offsetTop.value}px)` : void 0
-    })), _ = t(() => ({
+    })), S = t(() => ({
       height: o.value ? `${r.totalHeight.value}px` : void 0
-    })), q = t(() => r.virtualItems.value), x = (i, s) => {
+    })), _ = t(() => r.virtualItems.value), q = (i, s) => {
       if (typeof e.itemKey == "function") return e.itemKey(i, s);
       if (typeof e.itemKey == "string" && i && typeof i == "object") {
         const f = i[e.itemKey];
         return f === void 0 ? s : String(f);
       }
       return s;
-    }, H = (i) => {
-      r.scrollHandler(), n("on-scroll", i);
-    }, I = (i, s) => {
+    }, x = (i) => {
+      r.scrollHandler(), a("on-scroll", i);
+    }, H = (i, s) => {
       r.measureElement(s, i);
     };
-    h({
+    y({
       containerRef: d,
       refresh: r.refresh,
       scrollToIndex: r.scrollToIndex
     });
-    const c = { props: e, emit: n, items: a, enabled: o, itemHeight: l, overscan: u, dynamic: m, virtualList: r, containerRef: d, modifiers: v, styles: b, contentStyle: S, spacerStyle: _, renderedItems: q, getItemKey: x, scrollHandler: H, setItemRef: I };
+    const c = { props: e, emit: a, items: n, enabled: o, itemHeight: l, overscan: u, dynamic: m, virtualList: r, containerRef: d, modifiers: g, styles: v, contentStyle: b, spacerStyle: S, renderedItems: _, getItemKey: q, scrollHandler: x, setItemRef: H };
     return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  B as default
+  j as default
 };

package/dist/components/feedback/nmorph-alert/NmorphAlert.vue2.js

@@ -1,14 +1,15 @@
 import './NmorphAlert.css';
-import { defineComponent as u, computed as l, useSlots as m } from "vue";
+import { defineComponent as m, computed as l, useSlots as u } from "vue";
 import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { NmorphAlertType as o } from "./types.js";
-import g from "../../../assets/icons/circle-close-filled.svg.js";
-import h from "../../../assets/icons/info-filled.svg.js";
-import I from "../../../assets/icons/warn-triangle-filled.svg.js";
-import q from "../../../assets/icons/success-filled.svg.js";
-import N from "../../../assets/icons/cross.svg.js";
-import b from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const x = /* @__PURE__ */ u({
+import { createCssVariables as g } from "../../../utils/common.js";
+import { NmorphAlertType as r } from "./types.js";
+import h from "../../../assets/icons/circle-close-filled.svg.js";
+import I from "../../../assets/icons/info-filled.svg.js";
+import q from "../../../assets/icons/warn-triangle-filled.svg.js";
+import N from "../../../assets/icons/success-filled.svg.js";
+import b from "../../../assets/icons/cross.svg.js";
+import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const M = /* @__PURE__ */ m({
   __name: "NmorphAlert",
   props: {
     id: { type: String, required: !1, default: void 0 },
@@ -24,30 +25,32 @@ const x = /* @__PURE__ */ u({
     backgroundColor: { type: String, required: !1, default: void 0 }
   },
   emits: ["close"],
-  setup(n, { expose: i, emit: s }) {
+  setup(s, { expose: i, emit: n }) {
     i();
-    const e = n, r = s, a = l(
+    const e = s, o = n, a = l(
       () => y({
         "nmorph-alert": [e.type, e.bordered && "bordered", e.fill && "fill"]
       })
-    ), d = l(() => ({
+    ), p = l(() => ({
       "--nmorph-alert-close-align": e.closeIconPosition,
-      ...e.backgroundColor !== void 0 && { "--background-color": e.backgroundColor }
-    })), p = () => {
-      r("close");
-    }, f = {
-      [o.success]: q,
-      [o.warning]: I,
-      [o.info]: h,
-      [o.error]: g
-    }, c = m(), t = { props: e, emit: r, modifiers: a, styles: d, closeHandler: p, iconNameMap: f, slots: c, get NmorphIcon() {
-      return b;
+      ...g({
+        "--background-color": e.backgroundColor
+      })
+    })), f = () => {
+      o("close");
+    }, d = {
+      [r.success]: N,
+      [r.warning]: q,
+      [r.info]: I,
+      [r.error]: h
+    }, c = u(), t = { props: e, emit: o, modifiers: a, styles: p, closeHandler: f, iconNameMap: d, slots: c, get NmorphIcon() {
+      return S;
     }, get NmorphIconCross() {
-      return N;
+      return b;
     } };
     return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  x as default
+  M as default
 };

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphCallout.css';
-import { defineComponent as o, computed as l } from "vue";
-import { toCssSize as t } from "../../../utils/common.js";
-const s = /* @__PURE__ */ o({
+import { defineComponent as n, computed as l } from "vue";
+import { createCssVariables as o, createCssSizeVariables as u } from "../../../utils/common.js";
+const p = /* @__PURE__ */ n({
   __name: "NmorphCallout",
   props: {
     type: { type: String, required: !1, default: "info" },
@@ -15,20 +15,24 @@ const s = /* @__PURE__ */ o({
     titleFontSize: { type: [Number, String], required: !1, default: "var(--font-size-medium)" },
     contentFontSize: { type: [Number, String], required: !1, default: "var(--font-size-extra-small)" }
   },
-  setup(i, { expose: a }) {
+  setup(r, { expose: a }) {
     a();
-    const e = i, n = l(() => ({
-      "--callout-padding": t(e.padding),
-      "--callout-border-radius": t(e.borderRadius),
-      "--callout-accent-width": t(e.accentWidth),
-      "--callout-title-gap": t(e.titleGap),
-      "--callout-title-font-size": t(e.titleFontSize),
-      "--callout-content-font-size": t(e.contentFontSize),
-      ...e.color !== void 0 && { "--callout-color": e.color }
-    })), r = { props: e, styles: n };
-    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
+    const e = r, i = l(() => ({
+      ...u({
+        "--callout-padding": e.padding,
+        "--callout-border-radius": e.borderRadius,
+        "--callout-accent-width": e.accentWidth,
+        "--callout-title-gap": e.titleGap,
+        "--callout-title-font-size": e.titleFontSize,
+        "--callout-content-font-size": e.contentFontSize
+      }),
+      ...o({
+        "--callout-color": e.color
+      })
+    })), t = { props: e, styles: i };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  s as default
+  p as default
 };

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphDrawer.css';
 import { defineComponent as m, useSlots as c, computed as o } from "vue";
 import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { toCssSize as h } from "../../../utils/common.js";
+import { createCssSizeVariables as h } from "../../../utils/common.js";
 import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
 import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import v from "../../../assets/icons/cross.svg.js";
@@ -21,26 +21,28 @@ const w = /* @__PURE__ */ m({
     contentClass: { type: String, required: !1, default: "" }
   },
   emits: ["on-close", "update:model-value"],
-  setup(a, { expose: n, emit: u }) {
+  setup(s, { expose: n, emit: u }) {
     n();
-    const e = a, r = u, t = c(), d = o(
+    const e = s, r = u, t = c(), d = o(
       () => y({
         "nmorph-drawer": [e.placement, e.modelValue && "open"]
       })
-    ), p = o(() => ({
-      "--nmorph-drawer-size": h(e.size)
-    })), l = () => {
+    ), p = o(
+      () => h({
+        "--nmorph-drawer-size": e.size
+      })
+    ), l = () => {
       r("on-close"), r("update:model-value", !1);
     }, i = () => {
       e.closeOnOverlay && l();
-    }, f = o(() => !!(t.header || e.title || e.showClose)), s = { props: e, emit: r, slots: t, modifiers: d, drawerStyle: p, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
+    }, f = o(() => !!(t.header || e.title || e.showClose)), a = { props: e, emit: r, slots: t, modifiers: d, drawerStyle: p, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
       return _;
     }, get NmorphIconCross() {
       return v;
     }, get NmorphOverlay() {
       return q;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphTooltip.css';
-import { defineComponent as y, ref as o, computed as r } from "vue";
-import { useModifiers as w } from "../../../utils/create-modifiers.js";
-import { toCssSize as i } from "../../../utils/common.js";
-import { usePlacement as S } from "../../../hooks/use-placement.js";
-import { useZIndex as _ } from "../../../hooks/use-z-index.js";
-const z = /* @__PURE__ */ y({
+import { defineComponent as x, ref as o, computed as r } from "vue";
+import { usePlacement as y } from "../../../hooks/use-placement.js";
+import { useZIndex as S } from "../../../hooks/use-z-index.js";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as w } from "../../../utils/common.js";
+const z = /* @__PURE__ */ x({
   __name: "NmorphTooltip",
   props: {
     text: { type: String, required: !1, default: "" },
@@ -16,35 +16,37 @@ const z = /* @__PURE__ */ y({
     maxWidth: { type: [Number, String], required: !1, default: void 0 },
     height: { type: [Number, String], required: !1, default: void 0 }
   },
-  setup(p, { expose: m }) {
-    const e = p, t = o(e.forceShow), n = o(null), l = o(null), { placement: d } = S({
+  setup(f, { expose: p }) {
+    const e = f, t = o(e.forceShow), i = o(null), l = o(null), { placement: n } = y({
       initialPlacement: e.position,
-      contentDOMElement: n,
+      contentDOMElement: i,
       relativeElement: l
     }), c = r(
-      () => w({
+      () => _({
         "nmorph-tooltip": [
-          d.value,
+          n.value,
           !!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"
         ]
       })
-    ), h = () => {
+    ), m = () => {
       t.value = !0;
-    }, v = () => {
+    }, h = () => {
       e.forceShow || (t.value = !1);
-    }, a = r(() => e.forceCoordinate ? "100%" : "auto"), u = _(
+    }, a = r(() => e.forceCoordinate ? "100%" : "auto"), s = S(
       () => t.value,
       () => e.zIndex
-    ), x = r(() => ({
+    ), v = r(() => ({
       "--nmorph-tooltip-width": a.value,
-      "--nmorph-tooltip-z-index": u.value,
-      ...e.width !== void 0 && { "--width": i(e.width) },
-      ...e.maxWidth !== void 0 && { "--max-width": i(e.maxWidth) },
-      ...e.height !== void 0 && { "--height": i(e.height) }
-    })), s = o(null);
-    m({ tooltipBody: s });
-    const f = { props: e, showTooltip: t, tooltipDOMRef: n, slotDOMRef: l, placement: d, modifiers: c, handleMouseEnter: h, handleMouseLeave: v, rootWidth: a, zIndex: u, styles: x, tooltipBody: s };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+      "--nmorph-tooltip-z-index": s.value,
+      ...w({
+        "--width": e.width,
+        "--max-width": e.maxWidth,
+        "--height": e.height
+      })
+    })), u = o(null);
+    p({ tooltipBody: u });
+    const d = { props: e, showTooltip: t, tooltipDOMRef: i, slotDOMRef: l, placement: n, modifiers: c, handleMouseEnter: m, handleMouseLeave: h, rootWidth: a, zIndex: s, styles: v, tooltipBody: u };
+    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {

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 { 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 { 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 { useVirtualList as te } from "../../../hooks/use-virtual-list.js";
+import { useFormItemModel as ae } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as le } from "../../../types/common.types.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 } = ae(
+      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 = te(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 = ee(a, () => t.zIndex), G = l(() => ({
+      "--nmorph-autocomplete-input-z-index": C.value + 1
+    })), J = l(
+      () => M({
+        nmorph: [le[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 { useFormItemModel as V } from "../nmorph-form/use-form-item-input.js";
+import { NmorphSelectionControlHeight as C } from "../../../types/common.types.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 } = V(
+      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: [C[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
 };