@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

package/dist/components/data/nmorph-badge/NmorphBadge.vue.js

@@ -1,114 +1,148 @@
 import './NmorphBadge.css';
-import c from "./NmorphBadge.vue2.js";
-import { openBlock as o, createElementBlock as a, normalizeStyle as r, normalizeClass as i, renderSlot as d, createCommentVNode as s, createElementVNode as n, createTextVNode as t, toDisplayString as y, Fragment as m } from "vue";
-/* empty css                 */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = { class: "nmorph-badge__content" }, b = {
+import { defineComponent as H, computed as a, ref as c, onMounted as O, watch as D, openBlock as n, createElementBlock as r, normalizeStyle as d, normalizeClass as b, renderSlot as v, createCommentVNode as p, createElementVNode as y, createTextVNode as m, toDisplayString as h, Fragment as X, nextTick as Y } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as w, createCssVariables as R } from "../../../utils/common.js";
+const E = { class: "nmorph-badge__content" }, W = {
   key: 0,
   class: "nmorph-badge__dot"
-}, g = {
+}, j = {
   key: 1,
   class: "nmorph-badge__content"
-};
-function h(l, v, p, e, k, T) {
-  return !e.props.disabled && (!e.isTagType || e.shouldShowBadge) ? (o(), a(
-    "div",
-    {
+}, J = /* @__PURE__ */ H({
+  __name: "NmorphBadge",
+  props: {
+    value: { default: void 0 },
+    max: { default: 99 },
+    type: { default: "default" },
+    ribbonCorner: { default: "top-right" },
+    ribbonTilt: { type: Boolean, default: !0 },
+    isDot: { type: Boolean, default: !1 },
+    isTag: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    hideOnFalsyValue: { type: Boolean, default: !1 },
+    color: { default: "var(--nmorph-accent-color)" },
+    size: { default: "base" },
+    ribbonSize: { default: void 0 },
+    ribbonRadius: { default: void 0 },
+    offsetY: { default: 0 },
+    offsetX: { default: 0 },
+    zIndex: { default: 1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(S) {
+    const e = S, i = a(() => e.type !== "default" ? e.type : e.isDot ? "dot" : e.isTag ? "tag" : "default"), _ = a(() => i.value === "dot"), o = a(() => i.value === "tag"), l = a(() => i.value === "ribbon"), $ = a(
+      () => g({
+        "nmorph-badge": [
+          e.hidden && "hidden",
+          o.value && "tag",
+          l.value && "ribbon",
+          l.value && `ribbon-${e.ribbonCorner}`,
+          e.size
+        ]
+      })
+    ), x = a(
+      () => g({
+        "nmorph-badge__container": [
+          e.hidden && "hidden",
+          o.value && "tag",
+          l.value && "ribbon",
+          l.value && `ribbon-${e.ribbonCorner}`
+        ]
+      })
+    ), I = a(
+      () => g({
+        "nmorph-badge__ribbon-corner": [e.ribbonCorner, !e.ribbonTilt && "flat"]
+      })
+    ), s = a(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), F = a(() => e.hideOnFalsyValue && !e.value), f = a(() => (_.value || e.value !== void 0) && !F.value), z = a(() => {
+      const t = `${(V?.value / 2 + e.offsetX) * -1}px`, T = `${(B?.value / 2 + e.offsetY) * -1}px`;
+      return {
+        x: t,
+        y: T
+      };
+    }), k = a(() => o.value || l.value ? {
+      zIndex: e.zIndex
+    } : {
+      right: z.value.x,
+      top: z.value.y,
+      zIndex: e.zIndex
+    }), u = c(null), V = c(0), B = c(0), M = a(() => ({
+      ...R({
+        "--nmorph-badge-color": e.color
+      }),
+      ...w({
+        "--nmorph-badge-ribbon-offset-x": e.offsetX !== 0 && e.offsetX,
+        "--nmorph-badge-ribbon-offset-y": e.offsetY !== 0 && e.offsetY,
+        "--nmorph-badge-ribbon-height": e.ribbonSize,
+        "--nmorph-badge-ribbon-radius": e.ribbonRadius
+      })
+    })), C = async () => {
+      await Y(), !(!u.value || o.value || l.value) && (V.value = u.value.clientWidth, B.value = u.value.clientHeight);
+    }, N = a(() => ({
+      zIndex: e.zIndex
+    }));
+    return O(C), D(
+      () => [
+        e.value,
+        e.max,
+        i.value,
+        e.ribbonCorner,
+        e.ribbonTilt,
+        e.size,
+        e.hideOnFalsyValue
+      ],
+      C
+    ), (t, T) => !e.disabled && (!o.value || f.value) ? (n(), r("div", {
       key: 0,
-      class: i(e.modifiers),
-      style: r(e.styles)
-    },
-    [
-      e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 0 }),
-      e.shouldShowBadge && e.isRibbon ? (o(), a(
-        "div",
-        {
-          key: 1,
-          class: "nmorph-badge__ribbon-frame",
-          style: r(e.ribbonFrameStyle)
-        },
-        [
-          n(
-            "div",
-            {
-              class: i(e.ribbonCornerModifiers)
-            },
-            [
-              n(
-                "div",
-                {
-                  ref: "badge",
-                  class: i(e.containerModifiers),
-                  style: r(e.containerStyle)
-                },
-                [
-                  n("div", _, [
-                    d(l.$slots, "value", {
-                      value: e.props.value,
-                      displayValue: e.displayValue
-                    }, () => [
-                      t(
-                        y(e.displayValue),
-                        1
-                        /* TEXT */
-                      )
-                    ])
-                  ])
-                ],
-                6
-                /* CLASS, STYLE */
-              )
-            ],
-            2
-            /* CLASS */
-          )
-        ],
-        4
-        /* STYLE */
-      )) : e.shouldShowBadge ? (o(), a(
-        "div",
-        {
-          key: 2,
-          ref: "badge",
-          class: i(e.containerModifiers),
-          style: r(e.containerStyle)
-        },
-        [
-          e.isDotType ? (o(), a("div", b)) : (o(), a("div", g, [
-            e.isTagType ? (o(), a(
-              m,
-              { key: 0 },
-              [
-                t(
-                  y(e.displayValue),
-                  1
-                  /* TEXT */
-                )
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : d(l.$slots, "value", {
-              key: 1,
-              value: e.props.value,
-              displayValue: e.displayValue
-            }, () => [
-              t(
-                y(e.displayValue),
-                1
-                /* TEXT */
-              )
+      class: b($.value),
+      style: d(M.value)
+    }, [
+      o.value ? p("", !0) : v(t.$slots, "default", { key: 0 }),
+      f.value && l.value ? (n(), r("div", {
+        key: 1,
+        class: "nmorph-badge__ribbon-frame",
+        style: d(N.value)
+      }, [
+        y("div", {
+          class: b(I.value)
+        }, [
+          y("div", {
+            ref_key: "badge",
+            ref: u,
+            class: b(x.value),
+            style: d(k.value)
+          }, [
+            y("div", E, [
+              v(t.$slots, "value", {
+                value: e.value,
+                displayValue: s.value
+              }, () => [
+                m(h(s.value), 1)
+              ])
             ])
-          ]))
-        ],
-        6
-        /* CLASS, STYLE */
-      )) : s("v-if", !0)
-    ],
-    6
-    /* CLASS, STYLE */
-  )) : e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 1 });
-}
-const w = /* @__PURE__ */ f(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
+          ], 6)
+        ], 2)
+      ], 4)) : f.value ? (n(), r("div", {
+        key: 2,
+        ref_key: "badge",
+        ref: u,
+        class: b(x.value),
+        style: d(k.value)
+      }, [
+        _.value ? (n(), r("div", W)) : (n(), r("div", j, [
+          o.value ? (n(), r(X, { key: 0 }, [
+            m(h(s.value), 1)
+          ], 64)) : v(t.$slots, "value", {
+            key: 1,
+            value: e.value,
+            displayValue: s.value
+          }, () => [
+            m(h(s.value), 1)
+          ])
+        ]))
+      ], 6)) : p("", !0)
+    ], 6)) : o.value ? p("", !0) : v(t.$slots, "default", { key: 1 });
+  }
+});
 export {
-  w as default
+  J as default
 };

package/dist/components/data/nmorph-badge/NmorphBadge.vue3.js

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

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue.js

@@ -1,106 +1,196 @@
 import './NmorphCalendar.css';
-import f from "./NmorphCalendar.vue2.js";
-import { openBlock as o, createElementBlock as r, normalizeStyle as k, normalizeClass as i, renderSlot as n, createVNode as s, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as C, createTextVNode as _, toDisplayString as m } from "vue";
-/* empty css                    */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const T = ["data-date", "onClick"];
-function B(d, M, p, a, w, x) {
-  return o(), r(
-    "div",
-    {
-      class: i(a.modifiers),
-      style: k(a.styles)
-    },
-    [
-      n(d.$slots, "header", {}, () => [
-        s(a.NmorphCalendarHeader, {
-          year: a.initialDate.getFullYear(),
-          month: a.initialDate.getMonth(),
-          "show-previous-month-button": a.showHeaderButtons.showPreviousMonthButton,
-          "show-today-button": a.showHeaderButtons.showTodayButton,
-          "show-next-month-button": a.showHeaderButtons.showNextMonthButton,
-          onClickNextMonth: a.setNextMonth,
-          onClickPreviousMonth: a.setPreviousMonth,
-          onClickToday: a.setTodayMonth
+import { defineComponent as Z, ref as b, onMounted as j, reactive as q, watch as D, computed as h, openBlock as p, createElementBlock as M, normalizeStyle as G, normalizeClass as C, renderSlot as w, createVNode as $, unref as f, withCtx as x, Fragment as V, renderList as E, createBlock as P, createElementVNode as J, createTextVNode as K, toDisplayString as Q } from "vue";
+import { useModifiers as X } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as N } from "../../../utils/common.js";
+import ee from "./inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue.js";
+/* empty css                                                                  */
+import { useCalendarTexts as te } from "./hooks/use-calendar-texts.js";
+import { hasAnyRangeDateInPrevMonth as ae, hasAnyRangeDateInNextMonth as ne, isTodayInMonthRange as oe, resetTimeToZero as v, getMonthDaysByWeek as re } from "./utils.js";
+import le from "../nmorph-table/NmorphTable.vue.js";
+/* empty css                               */
+import se from "../nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue.js";
+import ie from "../nmorph-table/components/nmorph-table-cell/NmorphTableCell.vue.js";
+const ue = ["data-date", "onClick"], xe = /* @__PURE__ */ Z({
+  __name: "NmorphCalendar",
+  props: {
+    markToday: { type: Boolean, default: !0 },
+    initialDate: { default: () => /* @__PURE__ */ new Date() },
+    range: { default: void 0 },
+    type: { default: "date" },
+    modelValue: { default: () => /* @__PURE__ */ new Date() },
+    cellHeight: { default: void 0 }
+  },
+  emits: ["update:model-value", "update-initial-date"],
+  setup(I, { emit: R }) {
+    const n = I, d = R, { days: _ } = te(), A = () => {
+      r.value = O.value;
+    }, z = () => {
+      r.value = /* @__PURE__ */ new Date();
+    }, S = () => {
+      r.value = L.value;
+    }, u = () => {
+      throw new Error("model value and type prop not matched");
+    }, T = (e) => {
+      if (e === null) return null;
+      if (n.type === "date") {
+        if (e instanceof Date)
+          return v(e);
+        u();
+      }
+      const s = Array.isArray(e) && e.every((t) => t instanceof Date);
+      if (n.type === "dates") {
+        if (s)
+          return e.map((t) => v(t));
+        u();
+      }
+      if (n.type === "daterange") {
+        if (s)
+          return e.map((t) => v(t)).slice(0, 2);
+        u();
+      }
+    }, H = (e) => {
+      if (a.value === null) return;
+      const { monthType: s, hidden: t } = e;
+      if (t) return;
+      s === "next" && S(), s === "previous" && A();
+      const { date: o } = e;
+      if (n.type === "date" && (a.value = o, d("update:model-value", a.value)), n.type === "dates") {
+        if (!Array.isArray(a.value)) return u();
+        const l = o.toDateString(), g = a.value.map((Y) => Y.toDateString()).indexOf(l);
+        g !== -1 ? a.value.splice(g, 1) : a.value.push(o), d("update:model-value", a.value);
+      }
+      if (n.type === "daterange") {
+        if (!Array.isArray(a.value)) return u();
+        a.value.length === 0 ? a.value.push(o) : a.value.length === 1 ? o < a.value[0] ? a.value = [o, a.value[0]] : a.value.push(o) : a.value = [o], d("update:model-value", a.value.slice(0, 2));
+      }
+    }, F = (e, s) => {
+      const [t, o] = s;
+      return s.length === 1 ? e.toDateString() === t.toDateString() : t && o ? e >= v(t) && e <= v(o) : !1;
+    }, k = (e) => {
+      if (a.value === null) return !1;
+      if (n.type === "date")
+        return Array.isArray(a.value) ? u() : a.value.toDateString() === e.toDateString();
+      if (n.type === "dates")
+        return Array.isArray(a.value) ? !!a.value.find((t) => t.toDateString() === e.toDateString()) : u();
+      if (n.type === "daterange")
+        return Array.isArray(a.value) ? F(e, a.value) : u();
+    }, r = b(n.initialDate), a = b(T(n.modelValue));
+    j(() => {
+      d("update:model-value", a.value);
+    });
+    let y = q([]);
+    const B = () => {
+      y = [], re(r, n.range).forEach((s) => {
+        const t = {};
+        s.forEach((o, l) => {
+          const c = _[l];
+          t[c] = o;
+        }), y.push(t);
+      });
+    };
+    D(
+      () => n.initialDate,
+      (e) => {
+        r.value = e;
+      },
+      {
+        deep: !0
+      }
+    ), D(r, () => {
+      B(), d("update-initial-date", r.value);
+    }), D(
+      () => n.modelValue,
+      (e) => {
+        a.value = T(e);
+      }
+    );
+    const O = h(() => new Date(r.value.setMonth(r.value.getMonth() - 1))), L = h(() => new Date(r.value.setMonth(r.value.getMonth() + 1))), m = h(() => {
+      const { range: e } = n, s = e ? ae(r.value, e[0]) : !0, t = e ? ne(r.value, e[1]) : !0, o = oe(e);
+      return {
+        showPreviousMonthButton: s,
+        showNextMonthButton: t,
+        showTodayButton: o
+      };
+    }), U = h(
+      () => X({
+        "nmorph-calendar": []
+      })
+    ), W = h(
+      () => N({
+        "--table-data-cell-height": n.cellHeight
+      })
+    ), i = (e) => e;
+    return B(), (e, s) => (p(), M("div", {
+      class: C(U.value),
+      style: G(W.value)
+    }, [
+      w(e.$slots, "header", {}, () => [
+        $(ee, {
+          year: r.value.getFullYear(),
+          month: r.value.getMonth(),
+          "show-previous-month-button": m.value.showPreviousMonthButton,
+          "show-today-button": m.value.showTodayButton,
+          "show-next-month-button": m.value.showNextMonthButton,
+          onClickNextMonth: S,
+          onClickPreviousMonth: A,
+          onClickToday: z
         }, null, 8, ["year", "month", "show-previous-month-button", "show-today-button", "show-next-month-button"])
       ]),
-      n(d.$slots, "content", {}, () => [
-        s(a.NmorphTable, {
-          data: a.calendar,
+      w(e.$slots, "content", {}, () => [
+        $(f(le), {
+          data: f(y),
           bordered: "",
           "row-hover": !1
         }, {
-          default: l(() => [
-            (o(!0), r(
-              c,
-              null,
-              y(a.days, (t) => (o(), D(a.NmorphTableColumn, {
-                key: `${t}`,
-                prop: t,
-                label: t.toUpperCase()
-              }, {
-                default: l(({ scope: b }) => [
-                  (o(!0), r(
-                    c,
-                    null,
-                    y(b.rows, (e, h) => (o(), D(a.NmorphTableCell, {
-                      key: h,
-                      row: h
-                    }, {
-                      default: l(() => [
-                        C("div", {
-                          "data-date": `${a.dateData(e[t]).date}`,
-                          class: i([
-                            "nmorph-calendar-date",
-                            `nmorph-calendar-date--${a.dateData(e[t]).monthType}`,
-                            {
-                              "nmorph-calendar-date--today": a.dateData(e[t]).isToday && !a.dateData(e[t]).hidden && a.props.markToday
-                            },
-                            { "nmorph-calendar-date--hidden": a.dateData(e[t]).hidden },
-                            {
-                              "nmorph-calendar-date--selected": a.isValueSelected(a.dateData(e[t]).date)
-                            }
-                          ]),
-                          onClick: (S) => a.clickDate(a.dateData(e[t]))
-                        }, [
-                          n(d.$slots, "date-cell", {
-                            scope: {
-                              ...a.dateData(e[t]),
-                              selected: a.isValueSelected(a.dateData(e[t]).date)
-                            }
-                          }, () => [
-                            _(
-                              m(a.dateData(e[t]).hidden ? "-" : a.dateData(e[t]).value),
-                              1
-                              /* TEXT */
-                            )
-                          ])
-                        ], 10, T)
+          default: x(() => [
+            (p(!0), M(V, null, E(f(_), (t) => (p(), P(f(se), {
+              key: `${t}`,
+              prop: t,
+              label: t.toUpperCase()
+            }, {
+              default: x(({ scope: o }) => [
+                (p(!0), M(V, null, E(o.rows, (l, c) => (p(), P(f(ie), {
+                  key: c,
+                  row: c
+                }, {
+                  default: x(() => [
+                    J("div", {
+                      "data-date": `${i(l[t]).date}`,
+                      class: C([
+                        "nmorph-calendar-date",
+                        `nmorph-calendar-date--${i(l[t]).monthType}`,
+                        {
+                          "nmorph-calendar-date--today": i(l[t]).isToday && !i(l[t]).hidden && n.markToday
+                        },
+                        { "nmorph-calendar-date--hidden": i(l[t]).hidden },
+                        {
+                          "nmorph-calendar-date--selected": k(i(l[t]).date)
+                        }
                       ]),
-                      _: 2
-                      /* DYNAMIC */
-                    }, 1032, ["row"]))),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ]),
-                _: 2
-                /* DYNAMIC */
-              }, 1032, ["prop", "label"]))),
-              128
-              /* KEYED_FRAGMENT */
-            ))
+                      onClick: (g) => H(i(l[t]))
+                    }, [
+                      w(e.$slots, "date-cell", {
+                        scope: {
+                          ...i(l[t]),
+                          selected: k(i(l[t]).date)
+                        }
+                      }, () => [
+                        K(Q(i(l[t]).hidden ? "-" : i(l[t]).value), 1)
+                      ])
+                    ], 10, ue)
+                  ]),
+                  _: 2
+                }, 1032, ["row"]))), 128))
+              ]),
+              _: 2
+            }, 1032, ["prop", "label"]))), 128))
           ]),
           _: 3
-          /* FORWARDED */
         }, 8, ["data"])
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const z = /* @__PURE__ */ v(f, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
+    ], 6));
+  }
+});
 export {
-  z as default
+  xe as default
 };

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue3.js

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