@nmorph/nmorph-ui-kit 2.2.19 → 2.2.21

package/dist/components/form/nmorph-select/NmorphSelect.vue2.js

@@ -1,17 +1,17 @@
 import './NmorphSelect.css';
-import { defineComponent as ne, computed as a, ref as d, watch as f, nextTick as L, onMounted as ue, onUnmounted as oe, provide as R } from "vue";
-import { NmorphComponentHeight as ie } from "../../../types/index.js";
-import { useModifiers as se } from "../../../utils/create-modifiers.js";
-import { useI18n as de } from "vue-i18n";
-import { useFormItemInput as ve } from "../nmorph-form/use-form-item-input.js";
-import { useVirtualList as ce } from "../../../hooks/use-virtual-list.js";
-import fe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import pe from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-import me from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import he from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-import ge from "../../../assets/icons/chevron-down.svg.js";
-import ye from "../../../assets/icons/loader.svg.js";
-const Ce = /* @__PURE__ */ ne({
+import { defineComponent as ue, computed as a, ref as d, watch as f, nextTick as L, onMounted as oe, onUnmounted as ie, provide as R } from "vue";
+import { NmorphComponentHeight as se } from "../../../types/index.js";
+import { useModifiers as de } from "../../../utils/create-modifiers.js";
+import { useI18n as ve } from "vue-i18n";
+import { useFormItemInput as ce } from "../nmorph-form/use-form-item-input.js";
+import { useVirtualList as fe } from "../../../hooks/use-virtual-list.js";
+import pe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import me from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import he from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ge from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import ye from "../../../assets/icons/chevron-down.svg.js";
+import He from "../../../assets/icons/loader.svg.js";
+const Pe = /* @__PURE__ */ ue({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -29,6 +29,7 @@ const Ce = /* @__PURE__ */ ne({
     virtualMaxHeight: { type: [Number, String], required: !1, default: 240 },
     virtualOverscan: { type: Number, required: !1, default: 5 },
     virtualDynamicHeight: { type: Boolean, required: !1, default: !1 },
+    width: { type: [Number, String], required: !1, default: void 0 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -39,14 +40,14 @@ const Ce = /* @__PURE__ */ ne({
   emits: ["update:model-value"],
   setup(T, { expose: C, emit: P }) {
     C();
-    const { t: M } = de(), l = T, $ = a(
+    const { t: M } = ve(), l = T, $ = a(
       () => l.noElementPlaceholder ? l.noElementPlaceholder : M("noElementPlaceholder")
-    ), m = P, t = d(l.modelValue), r = d(l.open), v = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = d(!0), { id: y, name: k, autocomplete: W, tabindex: U } = ve(l), H = (e) => {
+    ), m = P, t = d(l.modelValue), r = d(l.open), v = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = d(!0), { id: y, name: k, autocomplete: W, tabindex: U } = ce(l), H = (e) => {
       if (!v.value) {
         if (r.value = !1, typeof t.value == "string" && (!l.valueRequired && t.value === e ? t.value = "" : t.value = e, m("update:model-value", t.value)), Array.isArray(t.value)) {
-          const n = t.value.includes(e), S = t.value.length === 1 && n;
-          if (l.valueRequired && S) return;
-          n ? t.value = t.value.filter((re) => re !== e) : t.value = [...t.value, e];
+          const n = t.value.includes(e), w = t.value.length === 1 && n;
+          if (l.valueRequired && w) return;
+          n ? t.value = t.value.filter((ne) => ne !== e) : t.value = [...t.value, e];
         }
         m("update:model-value", t.value);
       }
@@ -55,8 +56,8 @@ const Ce = /* @__PURE__ */ ne({
     }, F = () => {
       p.value = !1;
     }, j = a(
-      () => se({
-        nmorph: [ie[l.height]],
+      () => de({
+        nmorph: [se[l.height]],
         "nmorph-select": [
           `${l.disabled && "disabled"}`,
           `${l.modelValue ? "on" : "off"}`,
@@ -68,7 +69,9 @@ const Ce = /* @__PURE__ */ ne({
           `${p.value && "focus"}`
         ]
       })
-    ), Y = () => {
+    ), b = (e) => typeof e == "number" ? `${e}px` : e, Y = a(() => ({
+      ...l.width !== void 0 && { "--base-width": b(l.width) }
+    })), G = () => {
       v.value || (r.value = !r.value);
     };
     f(
@@ -78,7 +81,7 @@ const Ce = /* @__PURE__ */ ne({
       },
       { immediate: !0 }
     );
-    const b = () => {
+    const q = () => {
       r.value = !1;
     };
     f(
@@ -87,24 +90,24 @@ const Ce = /* @__PURE__ */ ne({
         e && (r.value = !1);
       }
     );
-    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), q = d(null), x = d([]), I = a(() => l.options), c = a(() => l.virtual && I.value.length > 0), w = a(() => ({
+    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), x = d(null), I = d([]), N = a(() => l.options), c = a(() => l.virtual && N.value.length > 0), D = a(() => ({
       basic: 30,
       thick: 38,
       thin: 22
-    })[l.height || "basic"]), D = a(() => l.virtualItemHeight || w.value), A = a(() => l.virtualOverscan), E = a(() => l.virtualDynamicHeight), s = ce(I, {
+    })[l.height || "basic"]), A = a(() => l.virtualItemHeight || D.value), E = a(() => l.virtualOverscan), V = a(() => l.virtualDynamicHeight), s = fe(N, {
       enabled: c,
-      itemHeight: D,
-      overscan: A,
-      dynamic: E
-    }), G = a(() => s.virtualItems.value), J = a(() => ({
+      itemHeight: A,
+      overscan: E,
+      dynamic: V
+    }), J = a(() => s.virtualItems.value), K = a(() => ({
       height: `${s.totalHeight.value}px`
-    })), K = a(() => ({
+    })), Q = a(() => ({
       transform: `translateY(${s.offsetTop.value}px)`
-    })), V = (e) => typeof e == "number" ? `${e}px` : e, Q = a(() => V(l.virtualMaxHeight)), O = () => {
-      i.value.length > 0 || !q.value || (x.value = Array.from(q.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
+    })), X = a(() => b(l.virtualMaxHeight)), O = () => {
+      i.value.length > 0 || !x.value || (I.value = Array.from(x.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
     }, o = a(
-      () => i.value.length > 0 ? i.value.map((e) => e.value) : x.value
-    ), X = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = d(0), N = a(() => o.value[u.value] || ""), Z = a(() => `${y.value}-listbox`), ee = (e) => `${y.value}-option-${e.replace(/\s+/g, "-")}`;
+      () => i.value.length > 0 ? i.value.map((e) => e.value) : I.value
+    ), Z = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = d(0), S = a(() => o.value[u.value] || ""), ee = a(() => `${y.value}-listbox`), te = (e) => `${y.value}-option-${e.replace(/\s+/g, "-")}`;
     f(u, (e) => {
       r.value && c.value && s.scrollToIndex(e);
     }), f(
@@ -121,26 +124,26 @@ const Ce = /* @__PURE__ */ ne({
         }
         s.refresh(), c.value && s.scrollToIndex(u.value);
       }
-    }), ue(async () => {
-      await L(), O(), document.addEventListener("click", b);
-    }), oe(() => {
-      document.removeEventListener("click", b);
+    }), oe(async () => {
+      await L(), O(), document.addEventListener("click", q);
+    }), ie(() => {
+      document.removeEventListener("click", q);
     });
-    const te = a(() => typeof t.value == "string" ? t.value === "" ? $.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), le = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
+    const le = a(() => typeof t.value == "string" ? t.value === "" ? $.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), ae = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
     R("select-selected-value", t), R("select-change-selected-value", H);
-    const _ = d(null), ae = a(
+    const _ = d(null), re = a(
       () => h.value ? `${_.value?.clientWidth || 0}px` : void 0
-    ), B = { t: M, props: l, computedNoElementPlaceholder: $, emit: m, initialValue: t, open: r, disabledInput: v, autoOptionsWidth: h, selectedLineOutset: g, id: y, name: k, autocomplete: W, tabindex: U, changeHandler: H, focus: p, focusHandler: z, blurHandler: F, modifiers: j, clickHandler: Y, closeHandler: b, optionsMap: i, optionsDOMRef: q, slotDomOptions: x, renderedOptions: I, virtualEnabled: c, defaultOptionHeight: w, virtualItemHeight: D, virtualOverscan: A, virtualDynamicHeight: E, virtualList: s, virtualOptions: G, virtualSpacerStyle: J, virtualContentStyle: K, getCssSize: V, virtualMaxHeight: Q, refreshDomOptions: O, domOptions: o, nativeOptions: X, currentIndex: u, currentFocusedEl: N, listboxId: Z, getOptionId: ee, selectedValueTitle: te, tags: le, nmorphSelectDOMRef: _, optionsMinWidth: ae, spaceHandler: () => {
+    ), B = { t: M, props: l, computedNoElementPlaceholder: $, emit: m, initialValue: t, open: r, disabledInput: v, autoOptionsWidth: h, selectedLineOutset: g, id: y, name: k, autocomplete: W, tabindex: U, changeHandler: H, focus: p, focusHandler: z, blurHandler: F, modifiers: j, getCssSize: b, styles: Y, clickHandler: G, closeHandler: q, optionsMap: i, optionsDOMRef: x, slotDomOptions: I, renderedOptions: N, virtualEnabled: c, defaultOptionHeight: D, virtualItemHeight: A, virtualOverscan: E, virtualDynamicHeight: V, virtualList: s, virtualOptions: J, virtualSpacerStyle: K, virtualContentStyle: Q, virtualMaxHeight: X, refreshDomOptions: O, domOptions: o, nativeOptions: Z, currentIndex: u, currentFocusedEl: S, listboxId: ee, getOptionId: te, selectedValueTitle: le, tags: ae, nmorphSelectDOMRef: _, optionsMinWidth: re, spaceHandler: () => {
       v.value || (r.value = !r.value);
     }, arrowDownHandler: () => {
       v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value + 1) % o.value.length);
     }, arrowUpHandler: () => {
       v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value - 1 + o.value.length) % o.value.length);
     }, enterHandler: () => {
-      r.value && N.value && H(N.value);
+      r.value && S.value && H(S.value);
     }, setVirtualOptionRef: (e, n) => {
-      const S = e instanceof Element ? e : e?.$el;
-      s.measureElement(n, S);
+      const w = e instanceof Element ? e : e?.$el;
+      s.measureElement(n, w);
     }, escapeHandler: () => {
       r.value = !1;
     }, homeHandler: () => {
@@ -148,21 +151,21 @@ const Ce = /* @__PURE__ */ ne({
     }, endHandler: () => {
       u.value = Math.max(o.value.length - 1, 0);
     }, get NmorphTagItem() {
-      return he;
+      return ge;
     }, get NmorphIcon() {
-      return me;
+      return he;
     }, get NmorphSelectOption() {
-      return pe;
+      return me;
     }, get NmorphDropdown() {
-      return fe;
+      return pe;
     }, get NmorphIconLoader() {
-      return ye;
+      return He;
     }, get NmorphIconChevronDown() {
-      return ge;
+      return ye;
     } };
     return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
   }
 });
 export {
-  Ce as default
+  Pe as default
 };

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue.js

@@ -1,41 +1,42 @@
 import './NmorphSelectOption.css';
-import t from "./NmorphSelectOption.vue2.js";
-import { openBlock as o, createElementBlock as l, normalizeClass as n, createElementVNode as r, toDisplayString as a, renderSlot as i, createBlock as s, withCtx as d, createVNode as p, createCommentVNode as m } from "vue";
+import c from "./NmorphSelectOption.vue2.js";
+import { openBlock as o, createElementBlock as l, normalizeStyle as n, normalizeClass as a, createElementVNode as r, toDisplayString as i, renderSlot as s, createBlock as d, withCtx as m, createVNode as p, createCommentVNode as _ } from "vue";
 /* empty css                        */
-import _ from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const h = ["value", "aria-selected", "aria-disabled"], f = { class: "nmorph-select-option__content" };
-function k(c, v, N, e, b, u) {
+import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const f = ["value", "aria-selected", "aria-disabled"], k = { class: "nmorph-select-option__content" };
+function v(t, N, b, e, y, S) {
   return o(), l("div", {
-    class: n(e.modifiers),
+    class: a(e.modifiers),
+    style: n(e.styles),
     value: e.props.value,
     role: "option",
     "aria-selected": e.checked,
     "aria-disabled": e.props.disabled,
     onClick: e.clickHandler
   }, [
-    r("div", f, [
+    r("div", k, [
       r(
         "span",
         null,
-        a(e.props.label),
+        i(e.props.label),
         1
         /* TEXT */
       ),
-      i(c.$slots, "default")
+      s(t.$slots, "default")
     ]),
-    e.checked ? (o(), s(e.NmorphIcon, {
+    e.checked ? (o(), d(e.NmorphIcon, {
       key: 0,
       class: "nmorph-select-option__checked"
     }, {
-      default: d(() => [
+      default: m(() => [
         p(e.NmorphIconSuccess)
       ]),
       _: 1
       /* STABLE */
-    })) : m("v-if", !0)
-  ], 10, h);
+    })) : _("v-if", !0)
+  ], 14, f);
 }
-const B = /* @__PURE__ */ _(t, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue"]]);
+const V = /* @__PURE__ */ h(c, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue"]]);
 export {
-  B as default
+  V as default
 };

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue2.js

@@ -1,15 +1,17 @@
 import './NmorphSelectOption.css';
-import { defineComponent as m, inject as u, computed as s } from "vue";
-import { NmorphComponentHeight as h } from "../../../../../types/index.js";
+import { defineComponent as h, inject as i, computed as o } from "vue";
+import { NmorphComponentHeight as v } from "../../../../../types/index.js";
 import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
-import v from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import y from "../../../../../assets/icons/success.svg.js";
-const I = /* @__PURE__ */ m({
+import y from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import S from "../../../../../assets/icons/success.svg.js";
+const C = /* @__PURE__ */ h({
   __name: "NmorphSelectOption",
   props: {
     value: { type: String, required: !0 },
     label: { type: String, required: !0, default: "" },
     focused: { type: Boolean, required: !1, default: !1 },
+    hoverBackground: { type: String, required: !1, default: void 0 },
+    hoverColor: { type: String, required: !1, default: void 0 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -18,13 +20,13 @@ const I = /* @__PURE__ */ m({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["change-value"],
-  setup(i, { expose: n, emit: c }) {
-    n();
-    const t = u("select-selected-value"), r = u("select-change-selected-value"), e = i, l = c, d = () => {
-      e.disabled || (l("change-value", e.value), r && r(e.value));
-    }, a = s(() => typeof t?.value == "string" ? t.value === e.value : Array.isArray(t?.value) ? t.value.some((f) => f === e.value) : !1), p = s(
+  setup(n, { expose: s, emit: c }) {
+    s();
+    const r = i("select-selected-value"), t = i("select-change-selected-value"), e = n, l = c, d = () => {
+      e.disabled || (l("change-value", e.value), t && t(e.value));
+    }, a = o(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((m) => m === e.value) : !1), p = o(
       () => g({
-        nmorph: [h[e.height]],
+        nmorph: [v[e.height]],
         "nmorph-select-option": [
           `${e.disabled && "disabled"}`,
           `${e.label && "with-label"}`,
@@ -32,14 +34,17 @@ const I = /* @__PURE__ */ m({
           `${e.focused && "focused"}`
         ]
       })
-    ), o = { selectSelectedValue: t, selectChangeSelectedValue: r, props: e, emit: l, clickHandler: d, checked: a, modifiers: p, get NmorphIcon() {
-      return v;
-    }, get NmorphIconSuccess() {
+    ), f = o(() => ({
+      ...e.hoverBackground !== void 0 && { "--hover-bg": e.hoverBackground },
+      ...e.hoverColor !== void 0 && { "--hover-color": e.hoverColor }
+    })), u = { selectSelectedValue: r, selectChangeSelectedValue: t, props: e, emit: l, clickHandler: d, checked: a, modifiers: p, styles: f, get NmorphIcon() {
       return y;
+    }, get NmorphIconSuccess() {
+      return S;
     } };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
   }
 });
 export {
-  I as default
+  C as default
 };

package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue.js

@@ -1,26 +1,27 @@
 import './NmorphSelectButton.css';
 import n from "./NmorphSelectButton.vue2.js";
-import { openBlock as t, createElementBlock as o, normalizeClass as s, Fragment as c, renderList as m, createBlock as i, withCtx as d, createTextVNode as u, toDisplayString as f, renderSlot as p } from "vue";
+import { openBlock as r, createElementBlock as l, normalizeStyle as s, normalizeClass as m, Fragment as c, renderList as i, createBlock as d, withCtx as u, createTextVNode as f, toDisplayString as p, renderSlot as _ } from "vue";
 /* empty css                        */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-function b(l, h, a, r, v, B) {
-  return t(), o(
+import b from "../../../_virtual/_plugin-vue_export-helper.js";
+function h(o, v, a, t, y, B) {
+  return r(), l(
     "div",
     {
-      class: s(r.modifiers)
+      class: m(t.modifiers),
+      style: s(t.styles)
     },
     [
-      (t(!0), o(
+      (r(!0), l(
         c,
         null,
-        m(a.options, (e) => (t(), i(r.NmorphSelectButtonItem, {
+        i(a.options, (e) => (r(), d(t.NmorphSelectButtonItem, {
           key: e.value,
           value: e.value,
           disabled: e.disabled
         }, {
-          default: d(() => [
-            u(
-              f(e.label),
+          default: u(() => [
+            f(
+              p(e.label),
               1
               /* TEXT */
             )
@@ -31,13 +32,13 @@ function b(l, h, a, r, v, B) {
         128
         /* KEYED_FRAGMENT */
       )),
-      p(l.$slots, "default")
+      _(o.$slots, "default")
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const y = /* @__PURE__ */ _(n, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select-button/NmorphSelectButton.vue"]]);
+const g = /* @__PURE__ */ b(n, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select-button/NmorphSelectButton.vue"]]);
 export {
-  y as default
+  g as default
 };

package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue2.js

@@ -1,13 +1,16 @@
 import './NmorphSelectButton.css';
-import { defineComponent as p, ref as f, watch as m, computed as c, provide as i } from "vue";
-import { useModifiers as b } from "../../../utils/create-modifiers.js";
-import h from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
-const q = /* @__PURE__ */ p({
+import { defineComponent as c, ref as S, watch as g, computed as o, provide as n } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import b from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
+const _ = /* @__PURE__ */ c({
   __name: "NmorphSelectButton",
   props: {
     modelValue: { type: String, required: !1, default: "" },
     options: { type: Array, required: !1, default: () => [] },
     fill: { type: Boolean, required: !1, default: !1 },
+    trackPadding: { type: [Number, String], required: !1, default: void 0 },
+    itemSize: { type: [Number, String], required: !1, default: void 0 },
+    itemFontSize: { type: String, required: !1, default: void 0 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -16,29 +19,33 @@ const q = /* @__PURE__ */ p({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(u, { expose: d, emit: n }) {
-    d();
-    const e = u, r = n, t = f(e.modelValue);
-    m(
+  setup(u, { expose: s, emit: m }) {
+    s();
+    const e = u, l = m, i = S(e.modelValue);
+    g(
       () => e.modelValue,
-      (l) => {
-        t.value = l;
+      (t) => {
+        i.value = t;
       }
     );
-    const s = c(
-      () => b({
+    const f = o(
+      () => y({
         "nmorph-select-button": [`${e.disabled && "disabled"}`, `${e.fill && "fill"}`, e.height]
       })
-    ), a = (l) => {
-      e.disabled || (t.value = l, r("update:model-value", l));
+    ), r = (t) => typeof t == "number" ? `${t}px` : t, p = o(() => ({
+      ...e.trackPadding !== void 0 && { "--track-padding": r(e.trackPadding) },
+      ...e.itemSize !== void 0 && { "--item-size": r(e.itemSize) },
+      ...e.itemFontSize !== void 0 && { "--item-font-size": e.itemFontSize }
+    })), a = (t) => {
+      e.disabled || (i.value = t, l("update:model-value", t));
     };
-    i("select-button-selected-value", t), i("select-button-change-handler", a);
-    const o = { props: e, emit: r, initialValue: t, modifiers: s, changeHandler: a, get NmorphSelectButtonItem() {
-      return h;
+    n("select-button-selected-value", i), n("select-button-change-handler", a);
+    const d = { props: e, emit: l, initialValue: i, modifiers: f, getCssSize: r, styles: p, changeHandler: a, get NmorphSelectButtonItem() {
+      return b;
     } };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {
-  q as default
+  _ as default
 };

package/dist/components/form/nmorph-slider/NmorphSlider.vue.js

@@ -4,12 +4,12 @@ import { openBlock as n, createElementBlock as l, normalizeStyle as r, normalize
 /* empty css                  */
 import s from "../../../_virtual/_plugin-vue_export-helper.js";
 const m = { class: "nmorph-slider__content" }, c = { class: "nmorph-slider__input-wrapper" }, p = ["id", "name", "tabindex", "value", "min", "max", "step", "disabled"];
-function h(_, b, f, o, v, x) {
+function _(h, f, b, o, v, x) {
   return n(), l(
     "div",
     {
       class: i(o.modifiers),
-      style: r({ "--nmorph-slider-thumb-width": o.thumbWidthCss })
+      style: r(o.styles)
     },
     [
       e("div", m, [
@@ -67,7 +67,7 @@ function h(_, b, f, o, v, x) {
     /* CLASS, STYLE */
   );
 }
-const N = /* @__PURE__ */ s(t, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-slider/NmorphSlider.vue"]]);
+const P = /* @__PURE__ */ s(t, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-slider/NmorphSlider.vue"]]);
 export {
-  N as default
+  P as default
 };

package/dist/components/form/nmorph-slider/NmorphSlider.vue2.js

@@ -1,16 +1,20 @@
 import './NmorphSlider.css';
-import { defineComponent as U, computed as I, ref as o, watch as L, onMounted as k, onUnmounted as A } from "vue";
-import { useModifiers as G } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as J } from "../nmorph-form/use-form-item-input.js";
-import K from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
-const m = 50, re = /* @__PURE__ */ U({
+import { defineComponent as k, computed as m, ref as o, watch as I, onMounted as A, onUnmounted as G } from "vue";
+import { useModifiers as J } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as K } from "../nmorph-form/use-form-item-input.js";
+import Q from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
+const se = /* @__PURE__ */ k({
   __name: "NmorphSlider",
   props: {
     modelValue: { type: Number, required: !1, default: 0 },
     max: { type: Number, required: !1, default: 100 },
     min: { type: Number, required: !1, default: 0 },
     step: { type: Number, required: !1, default: 1 },
+    fill: { type: Boolean, required: !1, default: !0 },
     showTooltip: { type: Boolean, required: !1, default: !0 },
+    thumbWidth: { type: Number, required: !1, default: 50 },
+    sliderHeight: { type: [Number, String], required: !1, default: void 0 },
+    valueFixedContainerHeight: { type: [Number, String], required: !1, default: void 0 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -18,66 +22,72 @@ const m = 50, re = /* @__PURE__ */ U({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(M, { expose: T, emit: W }) {
-    T();
-    const e = M, { id: q, name: _, tabindex: N } = J(e), S = I(
-      () => G({
+  setup(H, { expose: L, emit: M }) {
+    L();
+    const e = H, { id: N, name: T, tabindex: S } = K(e), _ = m(
+      () => J({
         nmorph: [],
         "nmorph-slider": [`${e.disabled && "disabled"}`]
       })
-    ), H = `${m}px`, c = o(e.showTooltip), w = W, n = o(e.modelValue), p = o(null);
-    L(n, () => {
-      w("update:model-value", n.value);
-    }), L(
+    ), g = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), x = M, n = o(e.modelValue), c = o(null);
+    I(n, () => {
+      x("update:model-value", n.value);
+    }), I(
       () => e.modelValue,
       (t) => {
         n.value = t;
       }
     );
-    const x = o(null), O = I(() => {
-      const t = s.value - s.value, r = e.max - e.min + t, l = (n.value - e.min) / r * 100, u = p.value?.clientWidth || 0, d = m / u * 100, $ = d / 2;
-      let D = l - $;
-      const y = `${Math.max(0, Math.min(100 - d, D))}%`, g = u / 100, F = m / 2 / g, E = (x.value?.tooltipBody.clientWidth ?? 24) / 2 / g, X = E === 1 / 0 ? 1.714 : E, j = `${parseFloat(y) + F - X}%`;
+    const y = o(null), C = m(() => {
+      const t = s.value - s.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = c.value?.clientWidth || 0, d = e.thumbWidth / a * 100, R = d / 2;
+      let D = u - R;
+      const W = `${Math.max(0, Math.min(100 - d, D))}%`, q = a / 100, X = e.thumbWidth / 2 / q, E = (y.value?.tooltipBody.clientWidth ?? 24) / 2 / q, j = E === 1 / 0 ? 1.714 : E, U = `${parseFloat(W) + X - j}%`;
       return {
-        thumb: y,
-        tooltip: j
+        thumb: W,
+        tooltip: U
       };
     }), s = o(0), f = o(0), h = () => {
       s.value = window.innerWidth, f.value = window.innerHeight;
     };
-    k(() => {
+    A(() => {
       typeof window < "u" && (s.value = window.innerWidth, f.value = window.innerHeight, window.addEventListener("resize", h));
-    }), A(() => {
-      typeof window < "u" && (document.removeEventListener("pointermove", a), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", h));
+    }), G(() => {
+      typeof window < "u" && (document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", h));
     });
     const v = (t) => {
       b.value = !1;
-      const r = p.value?.getBoundingClientRect();
-      let l = 0;
+      const r = c.value?.getBoundingClientRect();
+      let u = 0;
       if (r) {
-        const u = t - r.left, d = r.width;
-        l = Math.max(0, Math.min(1, u / d)), n.value = e.min + l * (e.max - e.min);
+        const a = t - r.left, d = r.width;
+        u = Math.max(0, Math.min(1, a / d)), n.value = e.min + u * (e.max - e.min);
       }
       n.value = Math.round(n.value / e.step) * e.step, n.value = Math.max(e.min, Math.min(e.max, n.value));
-    }, a = (t) => {
+    }, l = (t) => {
       t.preventDefault(), v(t.clientX);
     }, i = () => {
-      document.removeEventListener("pointermove", a), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
-    }, V = (t) => {
-      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), v(t.clientX), document.addEventListener("pointermove", a), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
-    }, z = o(null), C = () => {
-      e.showTooltip && (c.value = !0);
-    }, B = () => {
-      e.showTooltip && (c.value = !1);
-    }, R = (t) => {
+      document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
+    }, z = (t) => {
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), v(t.clientX), document.addEventListener("pointermove", l), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
+    }, F = o(null), O = () => {
+      e.showTooltip && (p.value = !0);
+    }, V = () => {
+      e.showTooltip && (p.value = !1);
+    }, B = (t) => {
       const r = t.target;
       n.value = Number(r.value);
-    }, b = o(!0), P = { props: e, id: q, name: _, tabindex: N, modifiers: S, thumbWidth: m, thumbWidthCss: H, tooltipVisible: c, emit: w, thumbValue: n, sliderContainer: p, tooltipRootRef: x, thumbXPercentPosition: O, windowWidth: s, windowHeight: f, resizeWindowHandler: h, updateThumbValue: v, pointerMove: a, pointerUp: i, pointerDownHandler: V, sliderFirst: z, handleMouseEnter: C, handleMouseLeave: B, nativeInputHandler: R, transitionEnabled: b, get NmorphTooltip() {
-      return K;
+    }, b = o(!0), w = (t) => typeof t == "number" ? `${t}px` : t, $ = m(() => ({
+      "--nmorph-slider-thumb-width": g.value,
+      ...e.sliderHeight !== void 0 && { "--slider-height": w(e.sliderHeight) },
+      ...e.valueFixedContainerHeight !== void 0 && {
+        "--value-fixed-container-height": w(e.valueFixedContainerHeight)
+      }
+    })), P = { props: e, id: N, name: T, tabindex: S, modifiers: _, thumbWidthCss: g, tooltipVisible: p, emit: x, thumbValue: n, sliderContainer: c, tooltipRootRef: y, thumbXPercentPosition: C, windowWidth: s, windowHeight: f, resizeWindowHandler: h, updateThumbValue: v, pointerMove: l, pointerUp: i, pointerDownHandler: z, sliderFirst: F, handleMouseEnter: O, handleMouseLeave: V, nativeInputHandler: B, transitionEnabled: b, getCssSize: w, styles: $, get NmorphTooltip() {
+      return Q;
     } };
     return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
   }
 });
 export {
-  re as default
+  se as default
 };

package/dist/components/form/nmorph-switch/NmorphSwitch.css

@@ -1 +1 @@
-.nmorph-switch{--height: 20px;--offset: 3px;--thumb-height: 14px;width:40px;height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);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-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;justify-content:flex-end;align-items:center;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);display:flex;justify-content:center;align-items:center;width:var(--thumb-height);height:var(--thumb-height);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);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);transition:left ease-in-out var(--transition-02)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - 16px);box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}
+.nmorph-switch{--width: 40px;--height: 20px;--offset: 3px;--thumb-height: 14px;width:var(--width);height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);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-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;justify-content:flex-end;align-items:center;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);display:flex;justify-content:center;align-items:center;width:var(--thumb-height);height:var(--thumb-height);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);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);transition:left ease-in-out var(--transition-02)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - var(--thumb-height) - var(--offset));box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}