@nmorph/nmorph-ui-kit 2.2.10 → 2.2.13

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

@@ -1,31 +1,31 @@
 import './NmorphAutocomplete.css';
-import m from "./NmorphAutocomplete.vue2.js";
-import { openBlock as o, createElementBlock as l, normalizeClass as p, createElementVNode as n, createVNode as t, createBlock as s, withCtx as c, renderSlot as d, Fragment as h, renderList as _, createTextVNode as f, toDisplayString as u, createCommentVNode as v } from "vue";
+import v from "./NmorphAutocomplete.vue2.js";
+import { openBlock as l, createElementBlock as t, normalizeClass as f, createElementVNode as r, createVNode as i, createBlock as k, withCtx as d, renderSlot as n, normalizeStyle as c, Fragment as p, renderList as s, createTextVNode as h, toDisplayString as _, createCommentVNode as y } from "vue";
 /* empty css                        */
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-autocomplete__input-content" }, b = {
+import g from "../../../_virtual/_plugin-vue_export-helper.js";
+const x = { class: "nmorph-autocomplete__input-content" }, H = {
   ref: "nmorphAutocompleteDOMRef",
   class: "nmorph-autocomplete__input"
-}, g = {
+}, N = {
   key: 0,
   class: "nmorph-autocomplete__loading"
-}, x = {
-  key: 1,
+}, b = ["onClick"], C = {
+  key: 2,
   class: "nmorph-autocomplete__list"
-}, y = ["onClick"];
-function V(a, C, z, e, A, D) {
-  return o(), l(
+}, S = ["onClick"];
+function V(a, m, z, e, L, A) {
+  return l(), t(
     "div",
     {
-      class: p(e.modifiers)
+      class: f(e.modifiers)
     },
     [
-      n("div", N, [
-        n(
+      r("div", x, [
+        r(
           "div",
-          b,
+          H,
           [
-            t(e.NmorphTextInput, {
+            i(e.NmorphTextInput, {
               id: e.props.id,
               name: e.props.name,
               autocomplete: e.props.autocomplete,
@@ -42,7 +42,7 @@ function V(a, C, z, e, A, D) {
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphAutocompleteDOMRef ? (o(), s(e.NmorphDropdown, {
+      e.nmorphAutocompleteDOMRef ? (l(), k(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.nmorphAutocompleteDOMRef,
@@ -50,34 +50,90 @@ function V(a, C, z, e, A, D) {
         "z-index": e.props.zIndex,
         onOnOutsideClick: e.closeHandler
       }, {
-        default: c(() => [
-          e.loader ? (o(), l("div", g, [
-            d(a.$slots, "loader", {}, () => [
-              t(e.NmorphIcon, { size: "large" }, {
-                default: c(() => [
-                  t(e.NmorphIconLoader)
+        default: d(() => [
+          e.loader ? (l(), t("div", N, [
+            n(a.$slots, "loader", {}, () => [
+              i(e.NmorphIcon, { size: "large" }, {
+                default: d(() => [
+                  i(e.NmorphIconLoader)
                 ]),
                 _: 1
                 /* STABLE */
               })
             ])
-          ])) : (o(), l("div", x, [
-            (o(!0), l(
-              h,
+          ])) : e.virtualEnabled ? (l(), t(
+            "div",
+            {
+              key: 1,
+              ref: e.virtualList.containerRef,
+              class: "nmorph-autocomplete__list nmorph-autocomplete__list--virtual",
+              style: c({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
+              onScroll: m[0] || (m[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
+            },
+            [
+              r(
+                "div",
+                {
+                  class: "nmorph-autocomplete__virtual-spacer",
+                  style: c(e.virtualSpacerStyle)
+                },
+                [
+                  r(
+                    "div",
+                    {
+                      class: "nmorph-autocomplete__virtual-content",
+                      style: c(e.virtualContentStyle)
+                    },
+                    [
+                      (l(!0), t(
+                        p,
+                        null,
+                        s(e.virtualItems, (o) => (l(), t("div", {
+                          key: o.index,
+                          class: "nmorph-autocomplete__list-item",
+                          onClick: () => e.clickHandler(o.item)
+                        }, [
+                          n(a.$slots, "default", {
+                            scope: o.item
+                          }, () => [
+                            h(
+                              _(o.item.value),
+                              1
+                              /* TEXT */
+                            )
+                          ])
+                        ], 8, b))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ],
+                4
+                /* STYLE */
+              )
+            ],
+            36
+            /* STYLE, NEED_HYDRATION */
+          )) : (l(), t("div", C, [
+            (l(!0), t(
+              p,
               null,
-              _(e.filteredList, (r, i) => (o(), l("div", {
-                key: i,
+              s(e.filteredList, (o, u) => (l(), t("div", {
+                key: u,
                 class: "nmorph-autocomplete__list-item",
-                onClick: () => e.clickHandler(r)
+                onClick: () => e.clickHandler(o)
               }, [
-                d(a.$slots, "default", { scope: r }, () => [
-                  f(
-                    u(r.value),
+                n(a.$slots, "default", { scope: o }, () => [
+                  h(
+                    _(o.value),
                     1
                     /* TEXT */
                   )
                 ])
-              ], 8, y))),
+              ], 8, S))),
               128
               /* KEYED_FRAGMENT */
             ))
@@ -85,13 +141,13 @@ function V(a, C, z, e, A, D) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "z-index"])) : v("v-if", !0)
+      }, 8, ["open", "relative-element", "z-index"])) : y("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const L = /* @__PURE__ */ k(m, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
+const B = /* @__PURE__ */ g(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
 export {
-  L as default
+  B as default
 };

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

@@ -1,11 +1,12 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as N, ref as a, computed as p, watch as i } from "vue";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-import S from "../../../assets/icons/loader.svg.js";
-import I from "../nmorph-text-input/NmorphTextInput.vue.js";
-import w from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const D = /* @__PURE__ */ N({
+import { defineComponent as k, ref as n, computed as r, watch as p, nextTick as O } from "vue";
+import { useModifiers as T } from "../../../utils/create-modifiers.js";
+import { useVirtualList as M } from "../../../hooks/use-virtual-list.js";
+import V from "../nmorph-text-input/NmorphTextInput.vue.js";
+import A from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import D from "../../../assets/icons/loader.svg.js";
+const E = /* @__PURE__ */ k({
   __name: "NmorphAutocomplete",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -14,6 +15,10 @@ const D = /* @__PURE__ */ N({
     list: { type: Array, required: !0, default: () => [] },
     actionCallback: { type: Function, required: !1, default: void 0 },
     zIndex: { type: Number, required: !1 },
+    virtual: { type: Boolean, required: !1, default: !1 },
+    virtualItemHeight: { type: Number, required: !1, default: 34 },
+    virtualMaxHeight: { type: [Number, String], required: !1, default: 240 },
+    virtualOverscan: { type: Number, required: !1, default: 5 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -22,44 +27,52 @@ const D = /* @__PURE__ */ N({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "select"],
-  setup(d, { expose: c, emit: m }) {
-    c();
-    const o = d, t = a(o.modelValue), u = m, f = p(
-      () => _({
+  setup(h, { expose: g, emit: y }) {
+    g();
+    const t = h, a = n(t.modelValue), s = y, b = r(
+      () => T({
         "nmorph-autocomplete": []
       })
-    ), h = (e) => {
-      t.value = e, u("update:model-value", t.value);
-    }, r = a(!1), v = a(null), y = () => {
-      r.value = !1;
-    }, n = p(() => o.list.filter((e) => Object.keys(e).some((q) => String(e[q]).toLowerCase().includes(t.value.toLowerCase()))));
-    i(n, (e) => {
-      r.value = e.length > 0;
+    ), q = (e) => {
+      a.value = e, s("update:model-value", a.value);
+    }, l = n(!1), x = n(null), N = () => {
+      l.value = !1;
+    }, u = r(() => t.list.filter((e) => Object.keys(e).some((L) => String(e[L]).toLowerCase().includes(a.value.toLowerCase())))), c = r(() => t.virtual && u.value.length > 0), d = r(() => t.virtualItemHeight), f = r(() => t.virtualOverscan), o = M(u, {
+      enabled: c,
+      itemHeight: d,
+      overscan: f
+    }), I = r(() => o.virtualItems.value), S = r(() => ({
+      height: `${o.totalHeight.value}px`
+    })), H = r(() => ({
+      transform: `translateY(${o.offsetTop.value}px)`
+    })), m = (e) => typeof e == "number" ? `${e}px` : e, _ = r(() => m(t.virtualMaxHeight));
+    p(u, async (e) => {
+      l.value = e.length > 0, await O(), o.scrollToIndex(0), o.refresh();
     });
-    const g = (e) => {
-      u("select", e), t.value = e.value, setTimeout(() => {
-        r.value = !1;
+    const C = (e) => {
+      s("select", e), a.value = e.value, setTimeout(() => {
+        l.value = !1;
       });
-    }, b = () => {
-      r.value = n.value.length > 0;
-    }, l = a(!1);
-    i(t, async (e) => {
-      e !== "" && o.actionCallback && (l.value = !0, await o.actionCallback(), l.value = !1);
-    }), i(l, (e) => {
-      e && (r.value = !0);
+    }, w = () => {
+      l.value = u.value.length > 0;
+    }, i = n(!1);
+    p(a, async (e) => {
+      e !== "" && t.actionCallback && (i.value = !0, await t.actionCallback(), i.value = !1);
+    }), p(i, (e) => {
+      e && (l.value = !0);
     });
-    const s = { props: o, initialValue: t, emit: u, modifiers: f, updateValueHandler: h, open: r, nmorphAutocompleteDOMRef: v, closeHandler: y, filteredList: n, clickHandler: g, focusHandler: b, loader: l, get NmorphIcon() {
-      return x;
+    const v = { props: t, initialValue: a, emit: s, modifiers: b, updateValueHandler: q, open: l, nmorphAutocompleteDOMRef: x, closeHandler: N, filteredList: u, virtualEnabled: c, virtualItemHeight: d, virtualOverscan: f, virtualList: o, virtualItems: I, virtualSpacerStyle: S, virtualContentStyle: H, getCssSize: m, virtualMaxHeight: _, clickHandler: C, focusHandler: w, loader: i, get NmorphIcon() {
+      return B;
     }, get NmorphDropdown() {
-      return w;
+      return A;
     }, get NmorphTextInput() {
-      return I;
+      return V;
     }, get NmorphIconLoader() {
-      return S;
+      return D;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  D as default
+  E as default
 };

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

@@ -1 +1 @@
-.nmorph-checkbox{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-checkbox input:focus-visible{opacity:1;scale:.95;outline:2px solid var(--nmorph-accent-color)}.nmorph-checkbox .nmorph-checkbox__fake{border-radius:var(--default-border-radius);width:100%;height:100%;position:absolute;top:0;left:0;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__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{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);position:absolute;top:50%;left:50%;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;align-items:center;height:var(--size);padding:var(--indentation-03);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-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);display:inline-flex;align-items:center;vertical-align:middle;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-checkbox input:focus-visible{opacity:1;scale:.95;outline:2px solid var(--nmorph-accent-color)}.nmorph-checkbox .nmorph-checkbox__fake{border-radius:var(--default-border-radius);width:100%;height:100%;position:absolute;top:0;left:0;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__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{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);position:absolute;top:50%;left:50%;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;align-items:center;justify-content:center;width:auto;min-width:var(--size);height:var(--size);padding:var(--indentation-03);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-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}

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

@@ -1,6 +1,6 @@
 import './NmorphCheckbox.css';
-import i from "./NmorphCheckbox.vue2.js";
-import { openBlock as o, createElementBlock as c, normalizeClass as a, createElementVNode as n, createCommentVNode as s, toDisplayString as d, renderSlot as h } from "vue";
+import h from "./NmorphCheckbox.vue2.js";
+import { openBlock as o, createElementBlock as c, normalizeClass as i, createElementVNode as n, createCommentVNode as l, toDisplayString as a, renderSlot as r } from "vue";
 /* empty css                    */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
 const _ = {
@@ -25,11 +25,11 @@ const _ = {
   key: 1,
   class: "nmorph-checkbox__fake"
 };
-function C(l, r, g, e, N, D) {
+function C(s, d, g, e, N, D) {
   return o(), c(
     "label",
     {
-      class: a(e.modifiers)
+      class: i(e.modifiers)
     },
     [
       e.props.design === "checkbox" ? (o(), c("div", _, [
@@ -42,27 +42,27 @@ function C(l, r, g, e, N, D) {
             class: "nmorph-native-input",
             onChange: e.handleChange
           }, null, 40, k),
-          r[0] || (r[0] = n(
+          d[0] || (d[0] = n(
             "div",
             { class: "nmorph-checkbox__fake" },
             null,
             -1
             /* HOISTED */
           )),
-          e.checked ? (o(), c("div", b)) : s("v-if", !0)
+          e.checked ? (o(), c("div", b)) : l("v-if", !0)
         ]),
         e.props.label ? (o(), c("div", m, [
           n(
             "span",
             null,
-            d(e.props.label),
+            a(e.props.label),
             1
             /* TEXT */
           )
         ])) : (o(), c("div", f, [
-          h(l.$slots, "default")
+          r(s.$slots, "default")
         ]))
-      ])) : s("v-if", !0),
+      ])) : l("v-if", !0),
       e.props.design === "button" ? (o(), c("div", x, [
         n("input", {
           ref: "inputDOMRef",
@@ -75,20 +75,22 @@ function C(l, r, g, e, N, D) {
           n(
             "span",
             null,
-            d(e.props.label),
+            a(e.props.label),
             1
             /* TEXT */
           )
         ])) : (o(), c("div", u, [
-          h(l.$slots, "label")
+          r(s.$slots, "label", {}, () => [
+            r(s.$slots, "default")
+          ])
         ]))
-      ])) : s("v-if", !0)
+      ])) : l("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const R = /* @__PURE__ */ t(i, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox/NmorphCheckbox.vue"]]);
+const R = /* @__PURE__ */ t(h, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox/NmorphCheckbox.vue"]]);
 export {
   R as default
 };

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

@@ -1,7 +1,7 @@
 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 { NmorphComponentHeight as V } from "../../../types/index.js";
+import { NmorphSelectionControlHeight as S } from "../../../types/index.js";
 const $ = /* @__PURE__ */ y({
   __name: "NmorphCheckbox",
   props: {
@@ -9,7 +9,7 @@ const $ = /* @__PURE__ */ y({
     disabled: { type: Boolean, required: !1, default: !1 },
     modelValue: { type: Boolean, required: !1, default: !1 },
     label: { type: String, required: !1, default: "" },
-    design: { type: String, required: !1, default: "checkbox" },
+    design: { type: String, required: !1, default: "button" },
     height: { type: null, required: !1 }
   },
   emits: ["update:model-value"],
@@ -20,16 +20,16 @@ const $ = /* @__PURE__ */ y({
     ), a = u(
       "change-checkbox-value-handler",
       void 0
-    ), d = u("checkbox-group-height", void 0), e = f;
+    ), n = u("checkbox-group-height", void 0), e = f;
     k(
       () => e.modelValue,
       (_) => {
         t.value = _;
       }
     );
-    const n = i(null);
-    m({ inputDOMRef: n });
-    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 || d?.value || "thin"), p = v, g = () => {
+    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 = () => {
       if (!e.disabled) {
         if (!o) {
           t.value = !t.value, p("update:model-value", t.value);
@@ -39,14 +39,14 @@ const $ = /* @__PURE__ */ y({
       }
     }, b = r(
       () => x({
-        nmorph: [V[c.value]],
+        nmorph: [S[c.value]],
         "nmorph-checkbox": [
           `${s.value && "checked"}`,
           `${e.disabled && "disabled"}`,
           `${e.design === "button" && "button"}`
         ]
       })
-    ), h = { groupSelectedValue: l, changeValue: a, groupHeight: d, props: e, inputDOMRef: n, hasGroup: o, initialValue: t, checked: s, height: c, emit: p, handleChange: g, modifiers: b };
+    ), 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;
   }
 });

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

@@ -1,38 +1,46 @@
 import './NmorphCheckboxGroup.css';
-import { defineComponent as m, ref as h, computed as d, provide as o } from "vue";
-import { useModifiers as g } from "../../../utils/create-modifiers.js";
-import b from "../nmorph-checkbox/NmorphCheckbox.vue.js";
-const q = /* @__PURE__ */ m({
+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({
   __name: "NmorphCheckboxGroup",
   props: {
     modelValue: { type: Array, required: !0, default: () => [] },
     options: { type: Array, required: !1, default: () => [] },
-    design: { type: String, required: !1, default: "checkbox" },
+    design: { type: String, required: !1, default: "button" },
     direction: { type: null, required: !1, default: "row" },
+    height: { type: null, required: !1, default: "thin" },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "thin" },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
   setup(n, { expose: p, emit: s }) {
     p();
-    const r = n, e = h(r.modelValue), u = s, l = (t) => {
-      e.value.includes(t) ? e.value = e.value.filter((f) => f !== t) : e.value.push(t), u("update:model-value", e.value);
+    const r = n, e = h([...r.modelValue]);
+    g(
+      () => r.modelValue,
+      (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(
-      () => g({
+      () => b({
         "nmorph-checkbox-group": [r.design, r.direction]
       })
-    ), a = d(() => r.height);
-    o("checkbox-group-selected-value", e), o("change-checkbox-value-handler", l), o("checkbox-group-height", a);
-    const i = { props: r, initialValue: e, emit: u, changeHandler: l, modifiers: c, height: a, get NmorphCheckbox() {
-      return b;
+    ), 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;
     } };
     return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  q as default
+  _ as default
 };

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

@@ -20,44 +20,45 @@ const E = /* @__PURE__ */ R({
   setup(_, { expose: q, emit: M }) {
     const o = _, g = M, { id: V, name: S, tabindex: x } = L(o), s = (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((a) => `${a}${a}`).join("").toLowerCase()}` : r;
+      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 = () => {
+      if (typeof document > "u") return "#006cb6";
       const e = c.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
       return s(r, "#006cb6");
-    }, n = h(s(o.modelValue)), b = h(!1);
+    }, a = h(s(o.modelValue)), b = h(!1);
     j(
       () => o.modelValue,
       (e) => {
-        n.value = e ? s(e) : m();
+        a.value = e ? s(e) : m();
       }
     );
     const I = (e) => {
       const r = e.target, t = s(r.value);
-      n.value = t, g("update:model-value", t);
+      a.value = t, g("update:model-value", t);
     }, p = (e) => [
       parseInt(e.slice(1, 3), 16),
       parseInt(e.slice(3, 5), 16),
       parseInt(e.slice(5, 7), 16)
     ], y = (e) => {
-      const [r, t, a] = p(e);
-      return `rgb(${r}, ${t}, ${a})`;
+      const [r, t, n] = p(e);
+      return `rgb(${r}, ${t}, ${n})`;
     }, $ = (e) => {
-      const [r, t, a] = p(e).map((P) => P / 255), l = Math.max(r, t, a), u = Math.min(r, t, a), f = (l + u) / 2;
+      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 - a) / i + (t < a ? 6 : 0) : l === t ? d = (a - r) / i + 2 : d = (r - t) / i + 4, `hsl(${Math.round(d * 60)}, ${Math.round(N * 100)}%, ${Math.round(f * 100)}%)`;
+      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)}%)`;
     };
     k(() => {
-      o.modelValue || (n.value = m());
+      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]
       })
-    ), w = C(() => o.displayFormat === "rgb" ? y(n.value) : o.displayFormat === "hsl" ? $(n.value) : n.value.toUpperCase()), v = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: n, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: $, modifiers: F, displayValue: w };
+    ), w = C(() => o.displayFormat === "rgb" ? y(a.value) : o.displayFormat === "hsl" ? $(a.value) : a.value.toUpperCase()), v = { 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: $, modifiers: F, displayValue: w };
     return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });

package/dist/components/form/nmorph-radio/NmorphRadio.css

@@ -1 +1 @@
-.nmorph-radio{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-radio span{margin-top:2px}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{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-radio .nmorph-radio__fake{border-radius:var(--border-radius-circular);width:100%;height:100%;position:absolute;top:0;left:0;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-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-radio .nmorph-radio__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{position:relative;display:flex;align-items:center;justify-content:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;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-radio.nmorph-radio--checked .nmorph-radio__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-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-radio{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-radio span{margin-top:2px}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{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-radio .nmorph-radio__fake{border-radius:var(--border-radius-circular);width:100%;height:100%;position:absolute;top:0;left:0;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-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-radio .nmorph-radio__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{position:relative;display:flex;align-items:center;justify-content:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;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-radio.nmorph--extra-thin-component .nmorph-radio__fake span,.nmorph-radio.nmorph--extra-thin-component .nmorph-radio__label{font-size:var(--font-size-tiny);line-height:var(--line-height-line)}.nmorph-radio.nmorph--extra-thin-component.nmorph-radio--button .nmorph-radio__fake{padding:var(--indentation-02)}.nmorph-radio.nmorph-radio--checked .nmorph-radio__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-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}