maz-ui 3.22.3 → 3.23.0

package/components/chunks/MazPickerHeader-31a3619b.mjs

@@ -0,0 +1,186 @@
+import "../assets/MazPickerHeader.css";
+import { defineComponent as q, computed as l, ref as z, watch as D, openBlock as r, createElementBlock as o, normalizeClass as k, createVNode as d, TransitionGroup as c, withCtx as p, Fragment as y, renderList as f, toDisplayString as _, createCommentVNode as g } from "vue";
+import { a as i, c as v, d as Z, _ as j } from "./MazPicker-c85774e5.mjs";
+const B = {
+  key: 0,
+  class: "m-picker-header__date"
+}, w = /* @__PURE__ */ q({
+  __name: "MazPickerHeader",
+  props: {
+    modelValue: {
+      type: [String, Object],
+      default: void 0
+    },
+    color: { type: String, required: !0 },
+    locale: { type: String, required: !0 },
+    noShortcuts: { type: Boolean, required: !0 },
+    double: { type: Boolean, required: !0 },
+    hasDate: { type: Boolean, required: !0 },
+    hasTime: { type: Boolean, required: !0 },
+    formatterOptions: {
+      type: Object,
+      required: !0
+    },
+    calendarDate: { type: String, required: !0 }
+  },
+  setup(s) {
+    const e = s, h = l(
+      () => {
+        var t;
+        return typeof e.modelValue == "string" ? e.modelValue : (t = e.modelValue) == null ? void 0 : t.start;
+      }
+    ), m = z("maz-slidevnext"), O = l(() => e.modelValue && typeof e.modelValue == "object" ? `${e.modelValue.start ? i(e.modelValue.start, e.locale, {
+      year: "numeric",
+      timeZone: e.formatterOptions.timeZone
+    }) : "..."} - ${e.modelValue.end ? i(e.modelValue.end, e.locale, {
+      year: "numeric",
+      timeZone: e.formatterOptions.timeZone
+    }) : "..."}` : typeof e.modelValue == "string" ? i(e.modelValue, e.locale, {
+      year: "numeric",
+      timeZone: e.formatterOptions.timeZone
+    }) : "-"), S = l(() => e.hasDate ? [O.value] : void 0), $ = l(() => {
+      if (e.modelValue && typeof e.modelValue == "object" && (e.modelValue.start || e.modelValue.end)) {
+        const t = e.noShortcuts && !e.double ? "short" : "long";
+        return `${e.modelValue.start ? v(
+          i(e.modelValue.start, e.locale, {
+            weekday: t,
+            month: t,
+            day: "numeric",
+            timeZone: e.formatterOptions.timeZone
+          })
+        ) : "..."} - ${e.modelValue.end ? v(
+          i(e.modelValue.end, e.locale, {
+            weekday: t,
+            month: t,
+            day: "numeric",
+            timeZone: e.formatterOptions.timeZone
+          })
+        ) : "..."}`;
+      } else if (typeof e.modelValue == "string")
+        return v(
+          i(e.modelValue, e.locale, {
+            weekday: "long",
+            month: "long",
+            day: "numeric",
+            timeZone: e.formatterOptions.timeZone
+          })
+        );
+      return "-";
+    }), x = l(() => e.hasDate ? [$.value] : void 0), b = l(() => h.value ? i(h.value, e.locale, {
+      timeStyle: "short",
+      timeZone: e.formatterOptions.timeZone,
+      hour12: e.formatterOptions.hour12
+    }) : void 0), V = l(() => e.hasTime ? [b.value] : void 0);
+    return D(
+      () => e.modelValue,
+      (t, u) => {
+        const a = typeof t == "object" ? t.start : t, n = typeof u == "object" ? u.start : u;
+        m.value = Z(a).isAfter(n, "date") || Z(a).isSame(n, "date") ? "maz-slidevnext" : "maz-slidevprev";
+      }
+    ), (t, u) => (r(), o(
+      "div",
+      {
+        class: k(["m-picker-header", [`--${s.color}`]])
+      },
+      [
+        s.hasDate ? (r(), o("div", B, [
+          d(c, {
+            name: m.value,
+            tag: "div",
+            class: "m-picker-header__year-transition"
+          }, {
+            default: p(() => [
+              (r(!0), o(
+                y,
+                null,
+                f(S.value, (a, n) => (r(), o(
+                  "span",
+                  {
+                    key: `${a}-${n}`,
+                    class: "m-picker-header__year-text"
+                  },
+                  _(a),
+                  1
+                  /* TEXT */
+                ))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["name"]),
+          d(c, {
+            name: m.value,
+            tag: "div",
+            class: "m-picker-header__date-transition"
+          }, {
+            default: p(() => [
+              (r(!0), o(
+                y,
+                null,
+                f(x.value, (a, n) => (r(), o(
+                  "span",
+                  {
+                    key: `${a}-${n}`,
+                    class: "m-picker-header__date-text"
+                  },
+                  _(a),
+                  1
+                  /* TEXT */
+                ))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["name"])
+        ])) : g("v-if", !0),
+        V.value ? (r(), o(
+          "div",
+          {
+            key: 1,
+            class: k(["m-picker-header__time", { "--has-date": s.hasDate }])
+          },
+          [
+            d(c, {
+              name: m.value,
+              tag: "div",
+              class: "m-picker-header__time-transition"
+            }, {
+              default: p(() => [
+                (r(!0), o(
+                  y,
+                  null,
+                  f(V.value, (a, n) => (r(), o(
+                    "span",
+                    {
+                      key: `${a}-${n}`,
+                      class: "m-picker-header__time-text"
+                    },
+                    _(a),
+                    1
+                    /* TEXT */
+                  ))),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["name"])
+          ],
+          2
+          /* CLASS */
+        )) : g("v-if", !0)
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+const N = /* @__PURE__ */ j(w, [["__scopeId", "data-v-fcf07ce1"]]);
+export {
+  N as default
+};

package/components/chunks/MazPickerMonthSwitcher-aaa759b9.mjs

@@ -0,0 +1,97 @@
+import "../assets/MazPickerMonthSwitcher.css";
+import { defineComponent as g, computed as v, openBlock as n, createElementBlock as d, createElementVNode as m, createVNode as u, withModifiers as p, withCtx as h, unref as s, normalizeClass as _, Fragment as M, renderList as w, createBlock as x, createTextVNode as S, toDisplayString as D } from "vue";
+import { d as C, c as l, a as c, i as f, _ as B } from "./MazPicker-c85774e5.mjs";
+import k from "./MazBtn-ba27c61d.mjs";
+import { X as q } from "./x-mark-7761acf4.mjs";
+const $ = { class: "maz-picker-month-switcher" }, N = { class: "maz-picker-month-switcher__header" }, P = /* @__PURE__ */ g({
+  __name: "MazPickerMonthSwitcher",
+  props: {
+    calendarDate: { type: String, required: !0 },
+    color: { type: String, required: !0 },
+    locale: { type: String, required: !0 },
+    double: { type: Boolean, required: !0 }
+  },
+  emits: ["update:calendar-date", "close"],
+  setup(r, { emit: z }) {
+    const a = r, i = z, y = v(() => Array.from({ length: 12 }, (o, e) => e).map((o) => {
+      const e = C(a.calendarDate).set("month", o);
+      return a.double ? {
+        label: `${l(
+          c(e.format(), a.locale, {
+            month: "short"
+          })
+        )} - ${l(
+          c(e.add(1, "month").format(), a.locale, {
+            month: "short"
+          })
+        )}`,
+        date: e
+      } : {
+        label: l(
+          c(e.format(), a.locale, {
+            month: "long"
+          })
+        ),
+        date: e
+      };
+    })), b = (o) => {
+      i("update:calendar-date", o.format()), i("close");
+    };
+    return (o, e) => (n(), d("div", $, [
+      m("div", N, [
+        u(k, {
+          size: "xs",
+          color: "transparent",
+          type: "button",
+          onClick: e[0] || (e[0] = p((t) => o.$emit("close", t), ["stop"]))
+        }, {
+          default: h(() => [
+            u(s(q), { class: "maz-text-lg" })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      m(
+        "div",
+        {
+          class: _(["maz-picker-month-switcher__main", { "--has-double": r.double }])
+        },
+        [
+          (n(!0), d(
+            M,
+            null,
+            w(y.value, (t) => (n(), x(k, {
+              key: t.label,
+              size: a.double ? "sm" : "xs",
+              class: _({
+                "--is-selected": s(f)(t.date, r.calendarDate, "month")
+              }),
+              color: s(f)(t.date, r.calendarDate, "month") ? r.color : "transparent",
+              type: "button",
+              onClick: p((V) => b(t.date), ["stop"])
+            }, {
+              default: h(() => [
+                S(
+                  D(t.label),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["size", "class", "color", "onClick"]))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        2
+        /* CLASS */
+      )
+    ]));
+  }
+});
+const F = /* @__PURE__ */ B(P, [["__scopeId", "data-v-0730e711"]]);
+export {
+  F as default
+};

package/components/chunks/MazPickerShortcuts-d0623e2d.mjs

@@ -0,0 +1,74 @@
+import "../assets/MazPickerShortcuts.css";
+import { defineComponent as _, ref as h, watch as i, openBlock as l, createElementBlock as n, Fragment as v, renderList as f, createBlock as y, normalizeClass as k, withModifiers as S, withCtx as b, createTextVNode as z, toDisplayString as g } from "vue";
+import x from "./MazBtn-ba27c61d.mjs";
+import { _ as B } from "./MazPicker-c85774e5.mjs";
+const C = { class: "maz-picker-shortcuts" }, M = /* @__PURE__ */ _({
+  __name: "MazPickerShortcuts",
+  props: {
+    color: { type: String, required: !0 },
+    modelValue: {
+      type: [String, Object],
+      default: void 0
+    },
+    shortcuts: {
+      type: Array,
+      required: !0
+    },
+    double: { type: Boolean, required: !0 },
+    shortcut: { type: String, default: void 0 },
+    disabled: { type: Boolean, required: !0 }
+  },
+  emits: ["update:model-value"],
+  setup(c, { emit: d }) {
+    const r = c, p = d, s = h(r.shortcut), u = (o, e) => {
+      s.value = e, p("update:model-value", o);
+    };
+    return i(
+      () => r.modelValue,
+      (o) => {
+        const e = o;
+        e != null && e.end || (s.value = void 0);
+      }
+    ), i(
+      () => r.shortcut,
+      (o) => {
+        const e = r.shortcuts.find(({ identifier: t }) => o === t);
+        if (e) {
+          const { value: t, identifier: a } = e;
+          u(t, a);
+        }
+      },
+      { immediate: !0 }
+    ), (o, e) => (l(), n("div", C, [
+      (l(!0), n(
+        v,
+        null,
+        f(c.shortcuts, ({ identifier: t, label: a, value: m }) => (l(), y(x, {
+          key: t,
+          type: "button",
+          size: "sm",
+          disabled: c.disabled,
+          color: t === s.value ? r.color : "transparent",
+          class: k({ "--is-selected": t === s.value }),
+          onClick: S((q) => u(m, t), ["stop"])
+        }, {
+          default: b(() => [
+            z(
+              g(a),
+              1
+              /* TEXT */
+            )
+          ]),
+          _: 2
+          /* DYNAMIC */
+        }, 1032, ["disabled", "color", "class", "onClick"]))),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]));
+  }
+});
+const A = /* @__PURE__ */ B(M, [["__scopeId", "data-v-e013a34a"]]);
+export {
+  A as default
+};

package/components/chunks/MazPickerTime-de9cfc63.mjs

@@ -0,0 +1,219 @@
+import "../assets/MazPickerTime.css";
+import { defineComponent as W, ref as x, computed as n, watch as B, nextTick as _, openBlock as d, createElementBlock as y, normalizeClass as g, Fragment as M, renderList as w, createElementVNode as b, normalizeStyle as S, createBlock as E, withModifiers as G, withCtx as J, createTextVNode as K, toDisplayString as Q } from "vue";
+import { d as i, f as P, s as R, _ as U } from "./MazPicker-c85774e5.mjs";
+import X from "./MazBtn-ba27c61d.mjs";
+const Y = { class: "m-picker-time__column__items" }, Z = /* @__PURE__ */ W({
+  __name: "MazPickerTime",
+  props: {
+    modelValue: {
+      type: [String, Object],
+      default: void 0
+    },
+    calendarDate: { type: String, required: !0 },
+    formatterOptions: {
+      type: Object,
+      required: !0
+    },
+    locale: { type: String, required: !0 },
+    color: { type: String, required: !0 },
+    isOpen: { type: Boolean, required: !0 },
+    hasDate: { type: Boolean, required: !0 },
+    minuteInterval: { type: Number, required: !0 },
+    disabledHours: { type: Array, default: void 0 },
+    format: { type: String, required: !0 },
+    isHour12: { type: Boolean, required: !0 },
+    minDate: { type: String, default: void 0 },
+    maxDate: { type: String, default: void 0 },
+    disabled: { type: Boolean, required: !0 }
+  },
+  emits: ["update:model-value"],
+  setup(v, { emit: T }) {
+    const a = v, $ = (e) => {
+      if (!a.disabledHours)
+        return e;
+      const t = Array.from({ length: 24 }, (u, s) => s).filter(
+        (u) => {
+          var s;
+          return !((s = a.disabledHours) != null && s.includes(u));
+        }
+      ), r = P(t, e);
+      return r !== e && q("hour", i(o.value).set("hour", r)), r;
+    }, z = T, l = x(), c = x(), p = n(() => typeof o.value == "string" ? $(i(o.value).get("hour")) : void 0), A = n(
+      () => typeof o.value == "string" ? P(
+        H.value.map(({ value: e }) => e.get("minute")),
+        i(o.value).get("minute")
+      ) : void 0
+    ), C = (e) => {
+      if (a.isHour12) {
+        const r = h.value === "pm" ? e + 12 : e;
+        return r === 12 ? 0 : r === 24 ? 12 : r;
+      } else
+        return e;
+    }, N = n(() => Array.from({ length: a.isHour12 ? 12 : 24 }, (e, t) => t).map((e) => {
+      const t = e + (a.isHour12 ? 1 : 0), r = C(t), u = i(o.value).set("hour", r), s = I(r) || (a.minDate && o.value ? i(a.minDate).isAfter(u, "hour") : !1) || (a.maxDate && o.value ? i(a.maxDate).isBefore(u, "hour") : !1);
+      return {
+        label: `${t < 10 ? "0" : ""}${t}`,
+        value: i(o.value).set("hour", r),
+        isDisabled: s
+      };
+    })), H = n(() => {
+      const e = Math.floor(60 / a.minuteInterval) - 0;
+      return Array.from({ length: e }, (t, r) => r * a.minuteInterval).map((t) => {
+        const r = i(o.value).set("minute", t), u = (a.minDate && o.value ? i(a.minDate).isAfter(r, "minute") : !1) || (a.maxDate && o.value ? i(a.maxDate).isBefore(r, "minute") : !1);
+        return {
+          label: `${t < 10 ? "0" : ""}${t}`,
+          value: r,
+          isDisabled: u
+        };
+      });
+    }), h = n(() => typeof p.value == "number" ? p.value >= 12 ? "pm" : "am" : void 0), V = n(
+      () => a.isHour12 ? [
+        { label: "AM", value: "am" },
+        { label: "PM", value: "pm" }
+      ] : []
+    ), j = n(() => {
+      const e = [
+        {
+          identifier: "hour",
+          values: N.value
+        },
+        {
+          identifier: "minute",
+          values: H.value
+        }
+      ];
+      return a.isHour12 && e.push({
+        identifier: "ampm",
+        values: V.value
+      }), e;
+    }), o = n({
+      get: () => a.modelValue,
+      set: (e) => {
+        z("update:model-value", e);
+      }
+    });
+    B(
+      () => a.isOpen,
+      async (e) => {
+        var t;
+        if (e) {
+          if (await _(), l.value) {
+            const r = l.value.querySelector(
+              ".m-picker-time__column .m-btn"
+            ), u = r == null ? void 0 : r.offsetHeight, m = ((t = l.value) == null ? void 0 : t.offsetHeight) / 2 - u / 2;
+            c.value = m / 16;
+          }
+          k(!1);
+        }
+      },
+      { immediate: !0 }
+    ), B(
+      () => a.modelValue,
+      async (e, t) => {
+        e !== t && (await _(), k(!0));
+      },
+      { immediate: !0 }
+    );
+    const k = (e) => {
+      f("hour", e), f("minute", e), a.isHour12 && f("ampm", e);
+    }, I = (e) => (a.disabledHours && a.disabledHours.includes(e)) ?? !1, D = (e, t) => t === "am" || t === "pm" ? h.value === t : e === "hour" ? p.value === t.get(e) : e === "minute" ? A.value === t.get(e) : !1, f = async (e, t = !0) => {
+      if (l.value) {
+        const r = l.value.querySelector(`.m-picker-time__column__${e}`), u = l.value.querySelector(
+          `.m-picker-time__column__${e} .--is-selected`
+        );
+        c.value && r && u && l.value && (await _(), R(r, u, c.value * 16, t));
+      }
+    }, q = async (e, t) => {
+      const r = i(o.value);
+      if (e === "hour" && typeof t == "object" && (o.value = r.set("hour", t.get("hour")).format()), e === "minute" && typeof t == "object") {
+        const u = r.set("minute", t.get("minute"));
+        o.value = u.format();
+      }
+      if (e === "ampm" && (h.value !== t || !p.value) && (t === "am" && (o.value = r.set("hour", r.get("hour")).subtract(12, "hour").format()), t === "pm")) {
+        const u = r.get("hour"), s = u + 12 > 12 && u + 12 < 24 ? u + 12 : u === 0 ? 12 : u;
+        o.value = r.set("hour", s).format();
+      }
+      await _(), f(e);
+    };
+    return (e, t) => (d(), y(
+      "div",
+      {
+        ref_key: "MazPickerTime",
+        ref: l,
+        class: g(["m-picker-time", { "--has-date": v.hasDate }])
+      },
+      [
+        (d(!0), y(
+          M,
+          null,
+          w(j.value, ({ values: r, identifier: u }, s) => (d(), y(
+            "div",
+            {
+              key: s,
+              class: g(["m-picker-time__column", [`m-picker-time__column__${u}`]])
+            },
+            [
+              b(
+                "div",
+                {
+                  style: S({ height: `${c.value}rem` }),
+                  class: "m-picker-time__column__divider"
+                },
+                null,
+                4
+                /* STYLE */
+              ),
+              b("div", Y, [
+                (d(!0), y(
+                  M,
+                  null,
+                  w(r, ({ value: m, label: O, isDisabled: L }, F) => (d(), E(X, {
+                    key: F,
+                    size: "xs",
+                    color: D(u, m) ? v.color : "transparent",
+                    class: g({ "--is-selected": D(u, m) }),
+                    disabled: L || v.disabled,
+                    type: "button",
+                    onClick: G((ee) => q(u, m), ["stop"])
+                  }, {
+                    default: J(() => [
+                      K(
+                        Q(O),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["color", "class", "disabled", "onClick"]))),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              b(
+                "div",
+                {
+                  style: S({ height: `${c.value}rem` }),
+                  class: "m-picker-time__column__divider"
+                },
+                null,
+                4
+                /* STYLE */
+              )
+            ],
+            2
+            /* CLASS */
+          ))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+const oe = /* @__PURE__ */ U(Z, [["__scopeId", "data-v-3b0c1ed8"]]);
+export {
+  oe as default
+};

package/components/chunks/MazPickerYearSwitcher-746c84fc.mjs

@@ -0,0 +1,106 @@
+import "../assets/MazPickerYearSwitcher.css";
+import { defineComponent as g, ref as b, computed as w, openBlock as m, createElementBlock as f, createElementVNode as u, createVNode as o, withModifiers as l, withCtx as i, unref as s, Fragment as S, renderList as Y, createBlock as D, normalizeClass as M, createTextVNode as B, toDisplayString as q } from "vue";
+import { d as c, a as I, i as y, _ as N } from "./MazPicker-c85774e5.mjs";
+import d from "./MazBtn-ba27c61d.mjs";
+import { X as P } from "./x-mark-7761acf4.mjs";
+import { C as v } from "./MazPickerCalendar-f5bbea58.mjs";
+const V = { class: "maz-picker-year-switcher" }, E = { class: "maz-picker-year-switcher__header" }, L = { class: "maz-flex maz-space-x-2" }, T = { class: "maz-picker-year-switcher__main" }, X = /* @__PURE__ */ g({
+  __name: "MazPickerYearSwitcher",
+  props: {
+    color: { type: String, required: !0 },
+    locale: { type: String, required: !0 },
+    calendarDate: { type: String, required: !0 }
+  },
+  emits: ["update:calendar-date", "close"],
+  setup(n, { emit: z }) {
+    const p = n, _ = z, t = b(p.calendarDate), k = w(() => Array.from({ length: 15 }, (a, r) => r - 7).map((a) => {
+      const r = c(t.value).get("year"), e = c(t.value).set("year", r + a);
+      return {
+        label: I(e.format(), p.locale, {
+          year: "numeric"
+        }),
+        date: e
+      };
+    })), h = (a) => {
+      _("update:calendar-date", c(a).format()), _("close");
+    }, x = () => {
+      t.value = c(t.value).subtract(7, "year").format();
+    }, C = () => {
+      t.value = c(t.value).add(7, "year").format();
+    };
+    return (a, r) => (m(), f("div", V, [
+      u("div", E, [
+        u("div", L, [
+          o(d, {
+            size: "xs",
+            color: "transparent",
+            type: "button",
+            onClick: l(x, ["stop"])
+          }, {
+            default: i(() => [
+              o(s(v), { class: "maz-text-lg" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["onClick"]),
+          o(d, {
+            size: "xs",
+            color: "transparent",
+            type: "button",
+            onClick: l(C, ["stop"])
+          }, {
+            default: i(() => [
+              o(s(v), { class: "maz-rotate-180 maz-text-lg" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["onClick"])
+        ]),
+        o(d, {
+          size: "xs",
+          color: "transparent",
+          type: "button",
+          onClick: r[0] || (r[0] = l((e) => a.$emit("close", e), ["stop"]))
+        }, {
+          default: i(() => [
+            o(s(P), { class: "maz-text-lg" })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      u("div", T, [
+        (m(!0), f(
+          S,
+          null,
+          Y(k.value, (e) => (m(), D(d, {
+            key: e.label,
+            size: "sm",
+            type: "button",
+            class: M({
+              "--is-selected": s(y)(e.date, n.calendarDate, "year")
+            }),
+            color: s(y)(e.date, n.calendarDate, "year") ? n.color : "transparent",
+            onClick: l(($) => h(e.date), ["stop"])
+          }, {
+            default: i(() => [
+              B(
+                q(e.label),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["class", "color", "onClick"]))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ])
+    ]));
+  }
+});
+const K = /* @__PURE__ */ N(X, [["__scopeId", "data-v-698468b9"]]);
+export {
+  K as default
+};