@nmorph/nmorph-ui-kit 2.2.58 → 3.0.0

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

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

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.css

@@ -1 +1 @@
-.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;gap:var(--indentation-03);align-items:center;width:fit-content;max-width:100%;height:var(--height);padding:0 var(--default-indentation-input);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-color-picker .nmorph-color-picker__native{position:absolute;width:100%;height:100%;cursor:pointer;opacity:0;inset:0}.nmorph-color-picker .nmorph-color-picker__swatch{flex:0 0 auto;width:calc(var(--height) - var(--indentation-03));height:calc(var(--height) - var(--indentation-03));border-radius:var(--default-border-radius);box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f}.nmorph-color-picker .nmorph-color-picker__value{flex:0 0 7ch;width:7ch;min-width:7ch;overflow:hidden;font-weight:400;font-size:var(--font-size-small);font-family:monospace;line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis;user-select:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--thin-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--thick-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-base);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{background:var(--nmorph-accent-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-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}
+.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;gap:var(--indentation-03);align-items:center;width:fit-content;max-width:100%;height:var(--nmorph-private-control-height);padding:0 var(--default-indentation-input);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-color-picker .nmorph-color-picker__native{position:absolute;width:100%;height:100%;cursor:pointer;opacity:0;inset:0}.nmorph-color-picker .nmorph-color-picker__swatch{flex:0 0 auto;width:calc(var(--nmorph-private-control-height) - var(--indentation-03));height:calc(var(--nmorph-private-control-height) - var(--indentation-03));border-radius:var(--default-border-radius);box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f}.nmorph-color-picker .nmorph-color-picker__value{flex:0 0 7ch;width:7ch;min-width:7ch;overflow:hidden;font-weight:var(--nmorph-private-control-font-weight);font-size:var(--nmorph-private-control-font-size);font-family:var(--font-family-mono);line-height:var(--nmorph-private-control-line-height);white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y));user-select:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{background:var(--nmorph-accent-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-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}

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

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

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.css

@@ -1 +1 @@
-.nmorph-date-picker{--width: 200px;--date-picker-calendar-cell-height: 42px;position:relative;width:var(--width)}.nmorph-date-picker .nmorph-date-picker__date-wrapper,.nmorph-date-picker .nmorph-date-picker__date-range-wrapper{height:100%}.nmorph-date-picker .nmorph-date-picker__input{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-date-picker .nmorph-date-picker__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-date-picker .nmorph-date-picker__input--open{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-date-picker .nmorph-date-picker__calendar-icon{margin-right:2px}.nmorph-date-picker .nmorph-date-picker__clear-button-wrapper{width:14px;height:14px;margin-right:1px}.nmorph-date-picker .nmorph-dropdown{padding:var(--indentation-03)}.nmorph-date-picker input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}.nmorph-date-picker .nmorph-calendar{--table-data-cell-height: var(--date-picker-calendar-cell-height)}.nmorph-date-picker.nmorph-date-picker--daterange{--width: 250px}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-dropdown{display:flex;justify-content:space-between}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__value-separator{padding:0 var(--indentation-03)}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__selected-value{display:flex}.nmorph-date-picker.nmorph-date-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-date-picker.nmorph-date-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-date-picker.nmorph-date-picker--disabled .nmorph-date-picker__date-wrapper{pointer-events:none}
+.nmorph-date-picker{--nmorph-private-date-picker-width: 200px;--nmorph-private-date-picker-range-width: 250px;--nmorph-private-date-picker-calendar-cell-height: 42px;position:relative;width:var(--nmorph-private-date-picker-width)}.nmorph-date-picker .nmorph-date-picker__date-wrapper,.nmorph-date-picker .nmorph-date-picker__date-range-wrapper{height:100%}.nmorph-date-picker .nmorph-date-picker__input{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-date-picker .nmorph-date-picker__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-date-picker .nmorph-date-picker__input--open{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-date-picker .nmorph-date-picker__calendar-icon{margin-right:2px}.nmorph-date-picker .nmorph-date-picker__clear-button-wrapper{width:14px;height:14px;margin-right:1px}.nmorph-date-picker .nmorph-dropdown{padding:var(--indentation-03)}.nmorph-date-picker input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}.nmorph-date-picker .nmorph-calendar{--nmorph-private-calendar-cell-height: var(--nmorph-private-date-picker-calendar-cell-height)}.nmorph-date-picker.nmorph-date-picker--daterange{--nmorph-private-date-picker-width: var(--nmorph-private-date-picker-range-width)}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-dropdown{display:flex;justify-content:space-between}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__value-separator{padding:0 var(--indentation-03)}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__selected-value{display:flex}.nmorph-date-picker.nmorph-date-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-date-picker.nmorph-date-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-date-picker.nmorph-date-picker--disabled .nmorph-date-picker__date-wrapper{pointer-events:none}

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

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

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.vue.js

@@ -1,114 +1,100 @@
 import './NmorphDatePickerHeader.css';
 import i from "./NmorphDatePickerHeader.vue2.js";
-import { openBlock as d, createElementBlock as l, normalizeClass as m, createElementVNode as a, createVNode as r, withCtx as n } from "vue";
+import { openBlock as d, createElementBlock as h, createElementVNode as a, createVNode as o, withCtx as n } from "vue";
 /* empty css                            */
-import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const p = { class: "nmorph-date-picker-header__left-side" }, c = { class: "nmorph-date-picker-header__center-side" }, s = { class: "nmorph-date-picker-header__right-side" };
-function _(f, t, k, e, v, N) {
-  return d(), l(
-    "div",
-    {
-      class: m(e.modifiers)
-    },
-    [
-      a("div", p, [
-        r(e.NmorphButton, {
-          class: "nmorph-date-picker-header__action-btn",
-          tabindex: -1,
-          "style-type": "transparent",
-          onClick: t[0] || (t[0] = (o) => e.emit("prev-year"))
-        }, {
-          default: n(() => [
-            r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-double-left" }, {
-              default: n(() => [
-                r(e.NmorphIconChevronDoubleDown)
-              ]),
-              _: 1
-              /* STABLE */
-            })
-          ]),
-          _: 1
-          /* STABLE */
-        }),
-        r(e.NmorphButton, {
-          class: "nmorph-date-picker-header__action-btn",
-          tabindex: -1,
-          "style-type": "transparent",
-          onClick: t[1] || (t[1] = (o) => e.emit("prev-month"))
-        }, {
-          default: n(() => [
-            r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-left" }, {
-              default: n(() => [
-                r(e.NmorphIconChevronDown)
-              ]),
-              _: 1
-              /* STABLE */
-            })
-          ]),
-          _: 1
-          /* STABLE */
-        })
-      ]),
-      a("div", c, [
-        r(e.NmorphButton, {
-          text: e.props.year,
-          tabindex: -1,
-          "style-type": "transparent",
-          fill: "",
-          onClick: t[2] || (t[2] = (o) => e.emit("change-year"))
-        }, null, 8, ["text"]),
-        r(e.NmorphButton, {
-          text: e.getMonthName(e.props.month),
-          tabindex: -1,
-          "style-type": "transparent",
-          fill: "",
-          onClick: t[3] || (t[3] = (o) => e.emit("change-month"))
-        }, null, 8, ["text"])
-      ]),
-      a("div", s, [
-        r(e.NmorphButton, {
-          class: "nmorph-date-picker-header__action-btn",
-          tabindex: -1,
-          "style-type": "transparent",
-          onClick: t[4] || (t[4] = (o) => e.emit("next-month"))
-        }, {
-          default: n(() => [
-            r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-right" }, {
-              default: n(() => [
-                r(e.NmorphIconChevronDown)
-              ]),
-              _: 1
-              /* STABLE */
-            })
-          ]),
-          _: 1
-          /* STABLE */
-        }),
-        r(e.NmorphButton, {
-          class: "nmorph-date-picker-header__action-btn",
-          tabindex: -1,
-          "style-type": "transparent",
-          onClick: t[5] || (t[5] = (o) => e.emit("next-year"))
-        }, {
-          default: n(() => [
-            r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-double-right" }, {
-              default: n(() => [
-                r(e.NmorphIconChevronDoubleDown)
-              ]),
-              _: 1
-              /* STABLE */
-            })
-          ]),
-          _: 1
-          /* STABLE */
-        })
-      ])
-    ],
-    2
-    /* CLASS */
-  );
+import m from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const c = { class: "nmorph-date-picker-header" }, l = { class: "nmorph-date-picker-header__left-side" }, p = { class: "nmorph-date-picker-header__center-side" }, _ = { class: "nmorph-date-picker-header__right-side" };
+function s(k, r, f, e, v, N) {
+  return d(), h("div", c, [
+    a("div", l, [
+      o(e.NmorphButton, {
+        class: "nmorph-date-picker-header__action-btn",
+        tabindex: -1,
+        onClick: r[0] || (r[0] = (t) => e.emit("prev-year"))
+      }, {
+        default: n(() => [
+          o(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-double-left" }, {
+            default: n(() => [
+              o(e.NmorphIconChevronDoubleDown)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      }),
+      o(e.NmorphButton, {
+        class: "nmorph-date-picker-header__action-btn",
+        tabindex: -1,
+        onClick: r[1] || (r[1] = (t) => e.emit("prev-month"))
+      }, {
+        default: n(() => [
+          o(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-left" }, {
+            default: n(() => [
+              o(e.NmorphIconChevronDown)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      })
+    ]),
+    a("div", p, [
+      o(e.NmorphButton, {
+        text: e.props.year,
+        tabindex: -1,
+        fill: "",
+        onClick: r[2] || (r[2] = (t) => e.emit("change-year"))
+      }, null, 8, ["text"]),
+      o(e.NmorphButton, {
+        text: e.getMonthName(e.props.month),
+        tabindex: -1,
+        fill: "",
+        onClick: r[3] || (r[3] = (t) => e.emit("change-month"))
+      }, null, 8, ["text"])
+    ]),
+    a("div", _, [
+      o(e.NmorphButton, {
+        class: "nmorph-date-picker-header__action-btn",
+        tabindex: -1,
+        onClick: r[4] || (r[4] = (t) => e.emit("next-month"))
+      }, {
+        default: n(() => [
+          o(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-right" }, {
+            default: n(() => [
+              o(e.NmorphIconChevronDown)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      }),
+      o(e.NmorphButton, {
+        class: "nmorph-date-picker-header__action-btn",
+        tabindex: -1,
+        onClick: r[5] || (r[5] = (t) => e.emit("next-year"))
+      }, {
+        default: n(() => [
+          o(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-double-right" }, {
+            default: n(() => [
+              o(e.NmorphIconChevronDoubleDown)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      })
+    ])
+  ]);
 }
-const B = /* @__PURE__ */ h(i, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.vue"]]);
+const D = /* @__PURE__ */ m(i, [["render", s], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.vue"]]);
 export {
-  B as default
+  D as default
 };

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.vue2.js

@@ -1,12 +1,11 @@
 import './NmorphDatePickerHeader.css';
-import { defineComponent as u, computed as h } from "vue";
-import { useModifiers as i } from "../../../../../utils/create-modifiers.js";
-import a from "../../../../../assets/icons/chevron-double-down.svg.js";
-import c from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import s from "../../../../basic/nmorph-button/NmorphButton.vue.js";
-import { getMonthName as f } from "../../../../data/nmorph-calendar/utils.js";
-import N from "../../../../../assets/icons/chevron-down.svg.js";
-const l = /* @__PURE__ */ u({
+import { defineComponent as n } from "vue";
+import m from "../../../../../assets/icons/chevron-double-down.svg.js";
+import p from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import u from "../../../../basic/nmorph-button/NmorphButton.vue.js";
+import { getMonthName as h } from "../../../../data/nmorph-calendar/utils.js";
+import i from "../../../../../assets/icons/chevron-down.svg.js";
+const v = /* @__PURE__ */ n({
   __name: "NmorphDatePickerHeader",
   props: {
     year: { type: Number, required: !0 },
@@ -15,24 +14,20 @@ const l = /* @__PURE__ */ u({
   emits: ["prev-month", "next-month", "prev-year", "next-year", "change-year", "change-month"],
   setup(r, { expose: o, emit: t }) {
     o();
-    const n = r, m = t, p = h(
-      () => i({
-        "nmorph-date-picker-header": []
-      })
-    ), e = { props: n, emit: m, modifiers: p, get NmorphButton() {
-      return s;
+    const e = { props: r, emit: t, get NmorphButton() {
+      return u;
     }, get NmorphIcon() {
-      return c;
+      return p;
     }, get NmorphIconChevronDoubleDown() {
-      return a;
+      return m;
     }, get NmorphIconChevronDown() {
-      return N;
+      return i;
     }, get getMonthName() {
-      return f;
+      return h;
     } };
     return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
   }
 });
 export {
-  l as default
+  v as default
 };