@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

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

@@ -1,42 +1,64 @@
 import './NmorphCheckboxGroup.css';
-import t from "./NmorphCheckboxGroup.vue2.js";
-import { openBlock as r, createElementBlock as l, normalizeClass as a, createElementVNode as d, Fragment as n, renderList as m, createBlock as h, renderSlot as p } from "vue";
-/* empty css                         */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const b = { class: "nmorph-checkbox-group__wrapper" }, u = { class: "nmorph-checkbox-group__content" };
-function f(s, g, c, e, k, x) {
-  return r(), l(
-    "div",
-    {
-      class: a(e.modifiers)
-    },
-    [
-      d("div", b, [
-        d("div", u, [
-          (r(!0), l(
-            n,
-            null,
-            m(c.options, (o, i) => (r(), h(e.NmorphCheckbox, {
-              id: o.id,
-              key: i,
-              label: o.label,
-              "model-value": o.modelValue,
-              disabled: o.disabled || e.props.disabled,
-              design: e.props.design,
-              height: o.height || e.props.height
-            }, null, 8, ["id", "label", "model-value", "disabled", "design", "height"]))),
-            128
-            /* KEYED_FRAGMENT */
-          )),
-          p(s.$slots, "default")
+import { defineComponent as _, ref as k, watch as x, computed as n, provide as a, openBlock as d, createElementBlock as s, normalizeClass as V, createElementVNode as c, Fragment as B, renderList as w, createBlock as C, unref as M, renderSlot as y } from "vue";
+import { useModifiers as E } from "../../../utils/create-modifiers.js";
+import { useFormItemModel as F } from "../nmorph-form/use-form-item-input.js";
+import N from "../nmorph-checkbox/NmorphCheckbox.vue.js";
+/* empty css                                     */
+const $ = { class: "nmorph-checkbox-group__wrapper" }, z = { class: "nmorph-checkbox-group__content" }, j = /* @__PURE__ */ _({
+  __name: "NmorphCheckboxGroup",
+  props: {
+    modelValue: { default: () => [] },
+    options: { default: () => [] },
+    design: { default: "button" },
+    direction: { default: "row" },
+    height: { default: "thin" },
+    id: {},
+    name: {},
+    autocomplete: {},
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value"],
+  setup(i, { emit: m }) {
+    const l = i, h = m, { modelValue: r, updateModelValue: p } = F(
+      l,
+      (e) => h("update:model-value", e),
+      []
+    ), t = k([...r.value]);
+    x(
+      r,
+      (e) => {
+        t.value = [...e];
+      },
+      { deep: !0 }
+    );
+    const f = (e) => {
+      t.value = t.value.includes(e) ? t.value.filter((u) => u !== e) : [...t.value, e], p(t.value);
+    }, g = n(
+      () => E({
+        "nmorph-checkbox-group": [l.design, l.direction]
+      })
+    ), v = n(() => l.height);
+    return a("checkbox-group-selected-value", t), a("change-checkbox-value-handler", f), a("checkbox-group-height", v), (e, u) => (d(), s("div", {
+      class: V(g.value)
+    }, [
+      c("div", $, [
+        c("div", z, [
+          (d(!0), s(B, null, w(i.options, (o, b) => (d(), C(M(N), {
+            id: o.id,
+            key: b,
+            label: o.label,
+            "model-value": o.modelValue,
+            disabled: o.disabled || l.disabled,
+            design: l.design,
+            height: o.height || l.height
+          }, null, 8, ["id", "label", "model-value", "disabled", "design", "height"]))), 128)),
+          y(e.$slots, "default")
         ])
       ])
-    ],
-    2
-    /* CLASS */
-  );
-}
-const y = /* @__PURE__ */ _(t, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue"]]);
+    ], 2));
+  }
+});
 export {
-  y as default
+  j as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphCheckboxGroup.css';
+import o from "./NmorphCheckboxGroup.vue.js";
+/* empty css                         */
+export {
+  o as default
+};

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

@@ -1,57 +1,106 @@
 import './NmorphColorPicker.css';
-import a from "./NmorphColorPicker.vue2.js";
-import { openBlock as l, createElementBlock as i, normalizeClass as c, createElementVNode as n, normalizeStyle as t, toDisplayString as d, createCommentVNode as s } from "vue";
-/* empty css                       */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = { class: "nmorph-color-picker__content" }, _ = ["id", "name", "tabindex", "value", "disabled"], h = {
+import { defineComponent as O, ref as P, watch as j, onMounted as A, computed as C, openBlock as M, createElementBlock as $, normalizeClass as T, createElementVNode as v, unref as s, normalizeStyle as U, toDisplayString as q, createCommentVNode as G } from "vue";
+import { useModifiers as J } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as K } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as Q, useFormItemModel as W } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as X } from "../../../types/common.types.js";
+const Y = { class: "nmorph-color-picker__content" }, Z = ["id", "name", "tabindex", "value", "disabled"], ee = {
   key: 0,
   class: "nmorph-color-picker__value"
-};
-function u(f, r, k, o, v, b) {
-  return l(), i(
-    "div",
-    {
-      class: c(o.modifiers)
-    },
-    [
-      n("div", p, [
-        n("input", {
-          id: o.id,
-          ref: "inputDOMRef",
-          name: o.name,
-          tabindex: o.tabindex,
+}, le = /* @__PURE__ */ O({
+  __name: "NmorphColorPicker",
+  props: {
+    modelValue: { default: "" },
+    showValue: { type: Boolean, default: !1 },
+    displayFormat: { default: "hex" },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value", "focus", "blur"],
+  setup(k, { expose: V, emit: x }) {
+    const r = k, m = x, { id: F, name: I, tabindex: B } = Q(r), { modelValue: p, updateModelValue: w } = W(
+      r,
+      (t) => m("update:model-value", t),
+      ""
+    ), c = (t, o = "#000000") => {
+      const e = t?.trim() || "";
+      return /^#[\da-f]{6}$/i.test(e) ? e.toLowerCase() : /^#[\da-f]{3}$/i.test(e) ? `#${e.slice(1).split("").map((n) => `${n}${n}`).join("").toLowerCase()}` : o;
+    }, {
+      elementRef: f,
+      focused: R,
+      handleFocus: b,
+      handleBlur: _
+    } = K({
+      onFocus: () => m("focus"),
+      onBlur: () => m("blur")
+    }), g = () => {
+      if (typeof document > "u") return "#006cb6";
+      const t = f.value || document.documentElement, o = getComputedStyle(t).getPropertyValue("--nmorph-accent-color").trim();
+      return c(o, "#006cb6");
+    }, a = P(c(p.value));
+    j(p, (t) => {
+      a.value = t ? c(t) : g();
+    });
+    const N = (t) => {
+      const o = t.target, e = c(o.value);
+      a.value = e, w(e);
+    }, y = (t) => [
+      parseInt(t.slice(1, 3), 16),
+      parseInt(t.slice(3, 5), 16),
+      parseInt(t.slice(5, 7), 16)
+    ], z = (t) => {
+      const [o, e, n] = y(t);
+      return `rgb(${o}, ${e}, ${n})`;
+    }, D = (t) => {
+      const [o, e, n] = y(t).map((L) => L / 255), l = Math.max(o, e, n), u = Math.min(o, e, n), h = (l + u) / 2;
+      if (l === u)
+        return `hsl(0, 0%, ${Math.round(h * 100)}%)`;
+      const i = l - u, H = h > 0.5 ? i / (2 - l - u) : i / (l + u);
+      let d = 0;
+      return l === o ? d = (e - n) / i + (e < n ? 6 : 0) : l === e ? d = (n - o) / i + 2 : d = (o - e) / i + 4, `hsl(${Math.round(d * 60)}, ${Math.round(H * 100)}%, ${Math.round(h * 100)}%)`;
+    };
+    A(() => {
+      p.value || (a.value = g());
+    }), V({ inputDOMRef: f });
+    const E = C(
+      () => J({
+        nmorph: [X[r.height], R.value && "focused"],
+        "nmorph-color-picker": [r.disabled && "disabled", r.displayFormat]
+      })
+    ), S = C(() => r.displayFormat === "rgb" ? z(a.value) : r.displayFormat === "hsl" ? D(a.value) : a.value.toUpperCase());
+    return (t, o) => (M(), $("div", {
+      class: T(E.value)
+    }, [
+      v("div", Y, [
+        v("input", {
+          id: s(F),
+          ref_key: "inputDOMRef",
+          ref: f,
+          name: s(I),
+          tabindex: s(B),
           class: "nmorph-color-picker__native nmorph-native-input",
           type: "color",
-          value: o.currentValue,
-          disabled: o.props.disabled,
-          onInput: o.handleInput,
-          onFocus: r[0] || (r[0] = (...e) => o.handleFocus && o.handleFocus(...e)),
-          onBlur: r[1] || (r[1] = (...e) => o.handleBlur && o.handleBlur(...e))
-        }, null, 40, _),
-        n(
-          "div",
-          {
-            class: "nmorph-color-picker__swatch",
-            style: t({ background: o.currentValue })
-          },
-          null,
-          4
-          /* STYLE */
-        ),
-        o.props.showValue ? (l(), i(
-          "span",
-          h,
-          d(o.displayValue),
-          1
-          /* TEXT */
-        )) : s("v-if", !0)
+          value: a.value,
+          disabled: r.disabled,
+          onInput: N,
+          onFocus: o[0] || (o[0] = //@ts-ignore
+          (...e) => s(b) && s(b)(...e)),
+          onBlur: o[1] || (o[1] = //@ts-ignore
+          (...e) => s(_) && s(_)(...e))
+        }, null, 40, Z),
+        v("div", {
+          class: "nmorph-color-picker__swatch",
+          style: U({ background: a.value })
+        }, null, 4),
+        r.showValue ? (M(), $("span", ee, q(S.value), 1)) : G("", !0)
       ])
-    ],
-    2
-    /* CLASS */
-  );
-}
-const C = /* @__PURE__ */ m(a, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-color-picker/NmorphColorPicker.vue"]]);
+    ], 2));
+  }
+});
 export {
-  C as default
+  le as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphColorPicker.css';
+import o from "./NmorphColorPicker.vue.js";
+/* empty css                       */
+export {
+  o as default
+};

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

@@ -1,89 +1,154 @@
 import './NmorphDatePicker.css';
-import p from "./NmorphDatePicker.vue2.js";
-import { openBlock as n, createElementBlock as m, normalizeStyle as _, normalizeClass as t, createElementVNode as o, withKeys as s, withModifiers as a, createVNode as r, withCtx as i, toDisplayString as h, createBlock as l, createCommentVNode as c } from "vue";
-/* empty css                      */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const k = { class: "nmorph-date-picker__date-wrapper" }, v = ["id", "name", "autocomplete", "onKeydown"], y = { class: "nmorph-date-picker__selected-value" }, w = { class: "nmorph-date-picker__clear-button-wrapper" }, D = { class: "nmorph-date-picker__content" };
-function u(C, N, d, e, x, B) {
-  return n(), m(
-    "div",
-    {
-      class: t(e.modifiers),
-      style: _(e.styles)
-    },
-    [
-      o("div", k, [
-        o(
-          "div",
-          {
-            ref: "nmorphInputDOMRef",
-            class: t(["nmorph-date-picker__input", { "nmorph-date-picker__input--open": e.open }]),
-            onClick: e.toggleOpen
-          },
-          [
-            o("input", {
-              id: e.id,
-              name: e.name,
-              autocomplete: e.autocomplete,
-              type: "date",
-              onFocus: a(e.focusHandler, ["prevent"]),
-              onBlur: e.blurHandler,
-              onKeydown: s(a(() => {
-              }, ["prevent"]), ["space"])
-            }, null, 40, v),
-            r(e.NmorphIcon, { class: "nmorph-date-picker__calendar-icon" }, {
-              default: i(() => [
-                r(e.NmorphIconCalendar)
-              ]),
-              _: 1
-              /* STABLE */
-            }),
-            o(
-              "div",
-              y,
-              h(e.displayValue),
-              1
-              /* TEXT */
-            ),
-            o("div", w, [
-              e.showClearButton ? (n(), l(e.NmorphClearButton, {
-                key: 0,
-                onClear: e.clearHandler
-              })) : c("v-if", !0)
-            ])
-          ],
-          2
-          /* CLASS */
-        ),
-        o("div", D, [
-          e.nmorphInputDOMRef ? (n(), l(e.NmorphDropdown, {
+import { defineComponent as E, computed as n, ref as i, watch as L, openBlock as s, createElementBlock as j, normalizeStyle as P, normalizeClass as _, createElementVNode as o, withKeys as T, withModifiers as y, unref as l, createVNode as c, withCtx as k, toDisplayString as U, createBlock as w, createCommentVNode as g } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as G } from "../../../utils/common.js";
+import J from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
+import Q from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
+import { useI18n as W } from "vue-i18n";
+import { useFormItemInput as X, useFormItemModel as Y } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as Z } from "../../../types/common.types.js";
+import { formatDate as C } from "../../data/nmorph-calendar/utils.js";
+import ee from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import te from "../../../assets/icons/calendar.svg.js";
+import ae from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+/* empty css                                                   */
+const oe = { class: "nmorph-date-picker__date-wrapper" }, le = ["id", "name", "autocomplete", "onKeydown"], re = { class: "nmorph-date-picker__selected-value" }, ne = { class: "nmorph-date-picker__clear-button-wrapper" }, ie = { class: "nmorph-date-picker__content" }, Ce = /* @__PURE__ */ E({
+  __name: "NmorphDatePicker",
+  props: {
+    placeholder: { default: "" },
+    modelValue: { default: null },
+    type: { default: "date" },
+    textSeparator: { default: "-" },
+    initialDate: { default: () => /* @__PURE__ */ new Date() },
+    zIndex: { default: void 0 },
+    dateLocale: { default: void 0 },
+    dateFormatOptions: { default: void 0 },
+    dateFormat: { default: "" },
+    dateFormatter: { type: Function, default: void 0 },
+    valueSeparator: { default: ", " },
+    rangeSeparator: { default: " - " },
+    width: { default: void 0 },
+    calendarCellHeight: { default: void 0 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value"],
+  setup(p, { emit: D }) {
+    const { t: x } = W(), e = p, { id: F, name: S, autocomplete: I } = X(e), m = n(() => e.placeholder ? e.placeholder : x("pickADate")), V = D, { modelValue: f, updateModelValue: v } = Y(
+      e,
+      (a) => V("update:model-value", a),
+      null
+    ), t = i(f.value), d = i(!1), b = () => {
+      d.value = !0;
+    }, H = () => {
+      d.value = !1;
+    }, O = n(
+      () => q({
+        nmorph: [Z[e.height]],
+        "nmorph-date-picker": [e.disabled && "disabled", e.type, d.value && "focus"]
+      })
+    ), z = n(
+      () => G({
+        "--width": e.width,
+        "--date-picker-calendar-cell-height": e.calendarCellHeight
+      })
+    ), r = i(!1), u = i(null), A = () => {
+      r.value = !1;
+    }, B = () => {
+      r.value = !r.value;
+    }, M = n(() => {
+      if (!t.value) return m.value;
+      const a = {
+        locale: e.dateLocale,
+        options: e.dateFormatOptions,
+        format: e.dateFormat,
+        formatter: e.dateFormatter
+      };
+      if (Array.isArray(t.value)) {
+        if (t.value.length === 0) return m.value;
+        const h = C(t.value, a), R = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
+        return h.join(R);
+      } else
+        return C(t.value, a);
+    }), N = () => {
+      const a = Array.isArray(t.value) ? [] : null;
+      t.value = a, v(t.value);
+    }, $ = (a) => {
+      t.value = a, v(t.value);
+    };
+    L(
+      f,
+      (a) => {
+        t.value = a;
+      },
+      { deep: !0 }
+    );
+    const K = n(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value);
+    return (a, h) => (s(), j("div", {
+      class: _(O.value),
+      style: P(z.value)
+    }, [
+      o("div", oe, [
+        o("div", {
+          ref_key: "nmorphInputDOMRef",
+          ref: u,
+          class: _(["nmorph-date-picker__input", { "nmorph-date-picker__input--open": r.value }]),
+          onClick: B
+        }, [
+          o("input", {
+            id: l(F),
+            name: l(S),
+            autocomplete: l(I),
+            type: "date",
+            onFocus: y(b, ["prevent"]),
+            onBlur: H,
+            onKeydown: T(y(() => {
+            }, ["prevent"]), ["space"])
+          }, null, 40, le),
+          c(l(ee), { class: "nmorph-date-picker__calendar-icon" }, {
+            default: k(() => [
+              c(l(te))
+            ]),
+            _: 1
+          }),
+          o("div", re, U(M.value), 1),
+          o("div", ne, [
+            K.value ? (s(), w(J, {
+              key: 0,
+              onClear: N
+            })) : g("", !0)
+          ])
+        ], 2),
+        o("div", ie, [
+          u.value ? (s(), w(l(ae), {
             key: 0,
             "fill-width": !1,
             width: 324,
-            open: e.open,
-            "relative-element": e.nmorphInputDOMRef,
-            "z-index": e.props.zIndex,
-            onOnOutsideClick: e.closeHandler
+            open: r.value,
+            "relative-element": u.value,
+            "z-index": e.zIndex,
+            onOnOutsideClick: A
           }, {
-            default: i(() => [
-              r(e.NmorphDatePickerContent, {
-                "selected-values": e.selectedDate,
-                "initial-date": e.props.initialDate,
-                type: d.type,
-                onUpdateSelectedValue: e.updateSelectedDateHandler
+            default: k(() => [
+              c(Q, {
+                "selected-values": t.value,
+                "initial-date": e.initialDate,
+                type: p.type,
+                onUpdateSelectedValue: $
               }, null, 8, ["selected-values", "initial-date", "type"])
             ]),
             _: 1
-            /* STABLE */
-          }, 8, ["open", "relative-element", "z-index"])) : c("v-if", !0)
+          }, 8, ["open", "relative-element", "z-index"])) : g("", !0)
         ])
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const V = /* @__PURE__ */ f(p, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/NmorphDatePicker.vue"]]);
+    ], 6));
+  }
+});
 export {
-  V as default
+  Ce as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphDatePicker.css';
+import o from "./NmorphDatePicker.vue.js";
+/* empty css                      */
+export {
+  o as default
+};

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-clear-button/NmorphClearButton.vue.js

@@ -1,28 +1,31 @@
-import t from "./NmorphClearButton.vue2.js";
-import { openBlock as n, createElementBlock as i, normalizeClass as m, createVNode as e, withModifiers as c, withCtx as p } from "vue";
-import a from "../../../../../_virtual/_plugin-vue_export-helper.js";
-function l(s, r, f, o, d, _) {
-  return n(), i(
-    "div",
-    {
-      class: m(o.modifiers)
-    },
-    [
-      e(o.NmorphIcon, {
-        onClick: r[0] || (r[0] = c((h) => o.emit("clear"), ["stop"]))
+import { defineComponent as n, computed as s, openBlock as p, createElementBlock as a, normalizeClass as c, createVNode as o, unref as t, withModifiers as l, withCtx as f } from "vue";
+import { useModifiers as u } from "../../../../../utils/create-modifiers.js";
+import d from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                            */
+import _ from "../../../../../assets/icons/error.svg.js";
+const E = /* @__PURE__ */ n({
+  __name: "NmorphClearButton",
+  emits: ["clear"],
+  setup(C, { emit: r }) {
+    const i = r, m = s(
+      () => u({
+        "nmorph-input-clear-button": []
+      })
+    );
+    return (h, e) => (p(), a("div", {
+      class: c(m.value)
+    }, [
+      o(t(d), {
+        onClick: e[0] || (e[0] = l((k) => i("clear"), ["stop"]))
       }, {
-        default: p(() => [
-          e(o.NmorphIconError)
+        default: f(() => [
+          o(t(_))
         ]),
         _: 1
-        /* STABLE */
       })
-    ],
-    2
-    /* CLASS */
-  );
-}
-const N = /* @__PURE__ */ a(t, [["render", l], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-clear-button/NmorphClearButton.vue"]]);
+    ], 2));
+  }
+});
 export {
-  N as default
+  E as default
 };

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-clear-button/NmorphClearButton.vue2.js

@@ -1,24 +1,4 @@
-import { defineComponent as n, computed as p } from "vue";
-import { useModifiers as i } from "../../../../../utils/create-modifiers.js";
-import s from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import u from "../../../../../assets/icons/error.svg.js";
-const l = /* @__PURE__ */ n({
-  __name: "NmorphClearButton",
-  emits: ["clear"],
-  setup(c, { expose: e, emit: o }) {
-    e();
-    const t = o, m = p(
-      () => i({
-        "nmorph-input-clear-button": []
-      })
-    ), r = { emit: t, modifiers: m, get NmorphIcon() {
-      return s;
-    }, get NmorphIconError() {
-      return u;
-    } };
-    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
-  }
-});
+import f from "./NmorphClearButton.vue.js";
 export {
-  l as default
+  f as default
 };