maz-ui 4.0.0-alpha.5 → 4.0.0-beta.0

package/dist/chunks/MazPickerCalendarMonth.hQBSVkc9.js

@@ -0,0 +1,255 @@
+import { defineComponent, computed, createElementBlock, openBlock, Fragment, renderList, toDisplayString, useCssVars, ref, watch, createVNode, TransitionGroup, withCtx, normalizeClass, createBlock, createElementVNode } from "vue";
+import dayjs from "dayjs";
+import { g as getDaysOfWeek, a as getDaysInMonth, b as getFirstDayOfMonth, c as isRangeValue, i as isSameDate, d as isValidDate, e as isSameDay } from "./MazDatePicker.CT5yJhSN.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
+import { d as debounce } from "./debounce.Brzkn9pm.js";
+import MazBtn from "../components/MazBtn.js";
+import '../assets/MazPickerCalendarMonth.zkrPVHDv.css';const _hoisted_1 = { class: "maz-picker-calendar-days" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "MazPickerCalendarDays",
+  props: {
+    locale: { type: String, required: !0 },
+    firstDayOfWeek: { type: Number, required: !0 }
+  },
+  setup(__props) {
+    const props = __props, days = computed(() => getDaysOfWeek(props.locale, props.firstDayOfWeek));
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
+      (openBlock(!0), createElementBlock(Fragment, null, renderList(days.value, (label) => (openBlock(), createElementBlock("span", { key: label }, toDisplayString(label), 1))), 128))
+    ]));
+  }
+}), MazDatePickerCalendarDays = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-491de61c"]]), _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "MazPickerCalendarGrid",
+  props: {
+    modelValue: {
+      type: [String, Object],
+      default: void 0
+    },
+    calendarDate: { type: String, required: !0 },
+    hasTime: { type: Boolean, required: !0 },
+    locale: { type: String, required: !0 },
+    firstDayOfWeek: { type: Number, required: !0 },
+    color: { type: String, required: !0 },
+    minDate: { type: String, default: void 0 },
+    maxDate: { type: String, default: void 0 },
+    disabledWeekly: { type: Array, required: !0 },
+    disabledDates: { type: Array, required: !0 },
+    hoverredDay: { type: Object, default: void 0 },
+    disabled: { type: Boolean, required: !0 },
+    range: { type: Boolean, required: !0 }
+  },
+  emits: ["update:model-value", "update:hoverred-day"],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "0022af95": hoverColor.value,
+      14174568: hoverTextColor.value
+    }));
+    const props = __props, emits = __emit, MazDatePickerGrid = ref(), transitionName = ref("maz-slidenext"), calendarDateArray = computed(() => [props.calendarDate]), hoverColor = computed(() => `hsl(var(--maz-${props.color}) / 20%)`), hoverTextColor = computed(() => `hsl(var(--maz-${props.color}-foreground))`), modelValue = computed({
+      get: () => props.modelValue,
+      set: (value) => emits("update:model-value", value)
+    }), monthDays = computed(
+      () => Array.from({ length: getDaysInMonth(props.calendarDate) }, (_v, i) => i + 1).map((day) => ({
+        label: day,
+        date: dayjs(props.calendarDate).set("date", day)
+      }))
+    ), emptyDaysCount = computed(() => (getFirstDayOfMonth(props.calendarDate) - props.firstDayOfWeek + 7) % 7);
+    function setHoverredDay(day) {
+      const value = props.modelValue;
+      !value || !isRangeValue(value) || (value.start && !value.end && day && day.isAfter(value.start) ? emits("update:hoverred-day", day) : emits("update:hoverred-day"));
+    }
+    function isBetweenHoverred(day) {
+      const value = props.modelValue;
+      return !value || !isRangeValue(value) || !value.start || !props.hoverredDay ? void 0 : dayjs(day).isBetween(value.start, props.hoverredDay, "date", "()") ? 3 : void 0;
+    }
+    function isLastDayHoverred(day) {
+      if (props.hoverredDay)
+        return dayjs(day).isSame(props.hoverredDay);
+    }
+    function isFirstDay(day) {
+      return props.modelValue && props.modelValue && typeof props.modelValue == "object" && props.modelValue?.start ? isSameDate(day, props.modelValue.start, "date") : !1;
+    }
+    function isLastDay(day) {
+      return props.modelValue && props.modelValue && typeof props.modelValue == "object" && props.modelValue?.end ? isSameDate(day, props.modelValue.end, "date") : !1;
+    }
+    function getDayButtonColor(date) {
+      const value = props.modelValue;
+      if (typeof value == "object") {
+        const isStartDate = value.start ? isSameDate(date, value.start, "date") : !1, isEndDate = value.end ? isSameDate(date, value.end, "date") : !1, isBetweenDates = checkIsBetween(date);
+        return isStartDate || isEndDate || isBetweenDates ? props.color : "transparent";
+      } else
+        return checkIsSameDate(date) ? props.color : "transparent";
+    }
+    function isSelectedOrBetween(day) {
+      if (props.modelValue && typeof props.modelValue == "object") {
+        if (props.modelValue.start && isSameDate(day, props.modelValue.start, "date"))
+          return 1;
+        if (props.modelValue.end) {
+          if (isSameDate(day, props.modelValue.end, "date"))
+            return 1;
+          if (checkIsBetween(day))
+            return 2;
+        }
+      } else if (checkIsSameDate(day))
+        return 1;
+      return 0;
+    }
+    function selectDay(value) {
+      props.range && setHoverredDay();
+      const valueFormatted = value.format();
+      if (typeof modelValue.value == "object") {
+        let values = modelValue.value;
+        values.start && values.end && (values = {
+          start: void 0,
+          end: void 0
+        });
+        const isBeforeStartDate = dayjs(valueFormatted).isBefore(values.start, "date");
+        modelValue.value = !values.start || isBeforeStartDate ? {
+          start: valueFormatted,
+          end: void 0
+        } : {
+          start: values.start,
+          end: valueFormatted
+        };
+      } else
+        modelValue.value = valueFormatted;
+    }
+    function checkIsSameDate(day) {
+      const value = props.modelValue;
+      return !value || !isValidDate(value) ? !1 : isSameDate(day, value, "date");
+    }
+    function checkIsBetween(day) {
+      const value = props.modelValue;
+      return !isRangeValue(value) || !value.start || !value.end ? !1 : dayjs(day).isBetween(value.start, value.end, "date", "()");
+    }
+    function isSmallerMinDate(day) {
+      return props.minDate ? dayjs(day).isBefore(props.minDate, "date") : !1;
+    }
+    function isDisabledWeekly(day) {
+      return props.disabledWeekly?.length ? props.disabledWeekly.some((disabledDay) => isSameDay(day, disabledDay)) : !1;
+    }
+    function isDisabledDate(day) {
+      return props.disabledDates?.length ? props.disabledDates.some((disabledDay) => isSameDate(day, disabledDay, "date")) : !1;
+    }
+    function isBiggerMaxDate(day) {
+      return props.maxDate ? dayjs(day).isAfter(props.maxDate, "date") : !1;
+    }
+    const removeContainerHeight = debounce(() => {
+      MazDatePickerGrid.value && (MazDatePickerGrid.value.style.minHeight = "");
+    }, 400);
+    function setContainerHeight() {
+      MazDatePickerGrid.value && (MazDatePickerGrid.value.style.minHeight = `${MazDatePickerGrid.value?.clientHeight || 176}px`, removeContainerHeight());
+    }
+    return watch(
+      () => props.calendarDate,
+      (calendarDate, oldCalendarValue) => {
+        transitionName.value = dayjs(calendarDate).isAfter(oldCalendarValue, "date") ? "maz-slidenext" : "maz-slideprev", setContainerHeight();
+      }
+    ), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      ref_key: "MazDatePickerGrid",
+      ref: MazDatePickerGrid,
+      class: "maz-picker-calendar-grid"
+    }, [
+      createVNode(TransitionGroup, { name: transitionName.value }, {
+        default: withCtx(() => [
+          (openBlock(!0), createElementBlock(Fragment, null, renderList([calendarDateArray.value], (dateArray, dateIndex) => (openBlock(), createElementBlock("div", {
+            key: `${dateArray[dateIndex]}`,
+            class: normalizeClass(["maz-picker-calendar-grid__container", { "--is-range": __props.range }])
+          }, [
+            (openBlock(!0), createElementBlock(Fragment, null, renderList(emptyDaysCount.value, (first) => (openBlock(), createElementBlock("div", { key: first }))), 128)),
+            (openBlock(!0), createElementBlock(Fragment, null, renderList(monthDays.value, ({ label, date }, i) => (openBlock(), createBlock(MazBtn, {
+              key: i,
+              size: "mini",
+              color: getDayButtonColor(date),
+              type: "button",
+              disabled: __props.disabled || isSmallerMinDate(date) || isBiggerMaxDate(date) || isDisabledWeekly(date) || isDisabledDate(date),
+              class: normalizeClass({
+                "--is-first": isFirstDay(date) && isSelectedOrBetween(date) === 1,
+                "--is-last": isLastDay(date) && isSelectedOrBetween(date) === 1,
+                "--is-last-hoverred": isLastDayHoverred(date),
+                "--is-selected": isSelectedOrBetween(date) === 1,
+                "--is-between": isSelectedOrBetween(date) === 2,
+                "--is-between-hoverred": __props.range ? isBetweenHoverred(date) === 3 : void 0
+              }),
+              onClick: ($event) => selectDay(date),
+              onMouseover: ($event) => __props.range ? setHoverredDay(date) : void 0,
+              onMouseleave: _cache[0] || (_cache[0] = ($event) => __props.range ? setHoverredDay() : void 0),
+              onFocus: ($event) => __props.range ? setHoverredDay(date) : void 0,
+              onBlur: _cache[1] || (_cache[1] = ($event) => __props.range ? setHoverredDay() : void 0)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", null, toDisplayString(label), 1)
+              ]),
+              _: 2
+            }, 1032, ["color", "disabled", "class", "onClick", "onMouseover", "onFocus"]))), 128))
+          ], 2))), 128))
+        ]),
+        _: 1
+      }, 8, ["name"])
+    ], 512));
+  }
+}), MazDatePickerCalendarGrid = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f2c2da11"]]), _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazPickerCalendarMonth",
+  props: {
+    modelValue: {
+      type: [String, Object],
+      default: void 0
+    },
+    color: { type: String, required: !0 },
+    locale: { type: String, required: !0 },
+    hasTime: { type: Boolean, required: !0 },
+    firstDayOfWeek: { type: Number, required: !0 },
+    calendarDate: { type: String, required: !0 },
+    offsetMonth: { type: Number, default: 0 },
+    minDate: { type: String, default: void 0 },
+    maxDate: { type: String, default: void 0 },
+    disabledWeekly: { type: Array, required: !0 },
+    disabledDates: { type: Array, required: !0 },
+    hoverredDay: { type: Object, default: void 0 },
+    disabled: { type: Boolean, required: !0 },
+    range: { type: Boolean, required: !0 }
+  },
+  emits: ["update:model-value", "update:calendar-date", "update:hoverred-day"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, emits = __emit, modelValue = computed({
+      get: () => props.modelValue,
+      set: (value) => emits("update:model-value", value)
+    }), hoverredDay = computed({
+      get: () => props.hoverredDay,
+      set: (value) => emits("update:hoverred-day", value)
+    });
+    function getCalendarDateWithOffset(offset) {
+      return dayjs(props.calendarDate).add(offset, "month").format();
+    }
+    const calendarDateWithOffset = computed({
+      get: () => getCalendarDateWithOffset(props.offsetMonth),
+      set: (calendarDate) => emits("update:calendar-date", calendarDate)
+    });
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["maz-picker-calendar-month", { "--has-padding": !__props.range }])
+    }, [
+      createVNode(MazDatePickerCalendarDays, {
+        locale: __props.locale,
+        "first-day-of-week": __props.firstDayOfWeek,
+        class: "maz-picker-calendar-month__days"
+      }, null, 8, ["locale", "first-day-of-week"]),
+      createVNode(MazDatePickerCalendarGrid, {
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        "hoverred-day": hoverredDay.value,
+        "onUpdate:hoverredDay": _cache[1] || (_cache[1] = ($event) => hoverredDay.value = $event),
+        locale: __props.locale,
+        color: __props.color,
+        "has-time": __props.hasTime,
+        "calendar-date": calendarDateWithOffset.value,
+        "first-day-of-week": __props.firstDayOfWeek,
+        "min-date": __props.minDate,
+        "max-date": __props.maxDate,
+        "disabled-weekly": __props.disabledWeekly,
+        "disabled-dates": __props.disabledDates,
+        disabled: __props.disabled,
+        range: __props.range
+      }, null, 8, ["modelValue", "hoverred-day", "locale", "color", "has-time", "calendar-date", "first-day-of-week", "min-date", "max-date", "disabled-weekly", "disabled-dates", "disabled", "range"])
+    ], 2));
+  }
+}), MazPickerCalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c87b47d1"]]);
+export {
+  MazPickerCalendarMonth as default
+};

package/dist/chunks/MazPickerCalendarSwitcher.Cp2ux3E4.js

@@ -0,0 +1,90 @@
+import { defineComponent, computed, createElementBlock, openBlock, createVNode, withCtx, unref, createTextVNode, toDisplayString } from "vue";
+import { MazChevronLeft } from "@maz-ui/icons";
+import { c as capitalize } from "./capitalize.BF6CDS_4.js";
+import { f as formatDate } from "./formatDate.DZ_OzdnV.js";
+import dayjs from "dayjs";
+import MazBtn from "../components/MazBtn.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazPickerCalendarSwitcher.uni8vJJv.css';const _hoisted_1 = { class: "m-date-picker-calendar-switcher" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazPickerCalendarSwitcher",
+  props: {
+    calendarDate: { type: String, default: void 0 },
+    locale: { type: String, required: !0 },
+    double: { type: Boolean, required: !0 }
+  },
+  emits: [
+    "previous",
+    "next",
+    "open-month-switcher",
+    "open-year-switcher",
+    "update:calendar-date"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props, emits = __emit, calendarDate2 = computed(() => dayjs(props.calendarDate)), monthLabel = computed(() => props.double ? `${capitalize(
+      formatDate(calendarDate2.value.format(), props.locale, { month: "short" }) ?? calendarDate2.value.format()
+    )} - ${capitalize(
+      formatDate(calendarDate2.value.add(1, "month").format(), props.locale, {
+        month: "short"
+      }) ?? calendarDate2.value.add(1, "month").format()
+    )}` : capitalize(formatDate(calendarDate2.value.format(), props.locale, { month: "short" }) ?? calendarDate2.value.format())), yearLabel = computed(
+      () => formatDate(calendarDate2.value.format(), props.locale, { year: "numeric" })
+    );
+    function previousMonth() {
+      emits("update:calendar-date", dayjs(props.calendarDate).subtract(1, "month").format());
+    }
+    function nextMonth() {
+      emits("update:calendar-date", dayjs(props.calendarDate).add(1, "month").format());
+    }
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
+      createVNode(MazBtn, {
+        size: "xs",
+        color: "transparent",
+        type: "button",
+        onClick: previousMonth
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(MazChevronLeft), { class: "maz-text-lg" })
+        ]),
+        _: 1
+      }),
+      createVNode(MazBtn, {
+        size: "sm",
+        color: "transparent",
+        type: "button",
+        class: "m-date-picker-calendar-switcher__date",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("open-month-switcher", $event))
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(monthLabel.value), 1)
+        ]),
+        _: 1
+      }),
+      createVNode(MazBtn, {
+        size: "sm",
+        color: "transparent",
+        type: "button",
+        class: "m-date-picker-calendar-switcher__date",
+        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("open-year-switcher", $event))
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(yearLabel.value), 1)
+        ]),
+        _: 1
+      }),
+      createVNode(MazBtn, {
+        size: "xs",
+        color: "transparent",
+        type: "button",
+        onClick: nextMonth
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(MazChevronLeft), { class: "maz-rotate-180 maz-text-lg" })
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), MazPickerCalendarSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c7d0ecb2"]]);
+export {
+  MazPickerCalendarSwitcher as default
+};

package/dist/chunks/MazPickerContainer.DnfB3Dqg.js

@@ -0,0 +1,117 @@
+import { defineComponent, defineAsyncComponent, ref, computed, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, createElementVNode, unref } from "vue";
+import dayjs from "dayjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazPickerContainer.k3DGjyHC.css';const _hoisted_1 = { class: "m-date-picker-container__wrapper" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazPickerContainer",
+  props: {
+    modelValue: {},
+    calendarDate: {},
+    color: {},
+    locale: {},
+    hideHeader: { type: Boolean },
+    firstDayOfWeek: {},
+    double: { type: Boolean },
+    hasDate: { type: Boolean },
+    minDate: {},
+    maxDate: {},
+    inline: { type: Boolean },
+    shortcuts: { type: [Array, Boolean] },
+    shortcut: {},
+    hasTime: { type: Boolean },
+    format: {},
+    isHour12: { type: Boolean },
+    formatterOptions: {},
+    minuteInterval: {},
+    disabled: { type: Boolean },
+    disabledWeekly: {},
+    disabledHours: {},
+    disabledDates: {},
+    range: { type: Boolean }
+  },
+  emits: ["update:model-value", "update:calendar-date", "close"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit, MazPickerCalendar = defineAsyncComponent(() => import("./MazPickerCalendar.RS6ZMdDK.js")), MazPickerHeader = defineAsyncComponent(() => import("./MazPickerHeader.Dlz2yJ1D.js")), MazPickerTime = defineAsyncComponent(() => import("./MazPickerTime.EuWWNfid.js")), lastTimeValue = ref(typeof __props.modelValue == "string" && __props.hasTime ? dayjs(__props.modelValue).format("HH:mm") : "00:00");
+    function saveLastTimeValue(value) {
+      lastTimeValue.value = dayjs(value).format("HH:mm"), emits("update:model-value", value);
+    }
+    function emitDateValue(value) {
+      if (__props.hasTime) {
+        const date = dayjs(value).format("YYYY-MM-DD"), time = lastTimeValue.value || "00:00", timeEmitted = dayjs(`${date} ${time}`).format(__props.format);
+        emits("update:model-value", timeEmitted);
+      } else
+        emits("update:model-value", value);
+    }
+    const currentDate = computed({
+      get: () => __props.modelValue,
+      set: (value) => {
+        emits("update:model-value", value);
+      }
+    }), currentCalendarDate = computed({
+      get: () => __props.calendarDate,
+      set: (calendarDate) => emits("update:calendar-date", calendarDate)
+    });
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["m-date-picker-container", {
+        "--has-double": _ctx.double,
+        "--is-inline": _ctx.inline,
+        "--has-date": _ctx.hasDate
+      }])
+    }, [
+      _ctx.hideHeader ? createCommentVNode("", !0) : (openBlock(), createBlock(unref(MazPickerHeader), {
+        key: 0,
+        color: _ctx.color,
+        "has-time": _ctx.hasTime,
+        "model-value": _ctx.modelValue,
+        locale: _ctx.locale,
+        "has-date": _ctx.hasDate,
+        "formatter-options": _ctx.formatterOptions,
+        double: _ctx.double,
+        "hide-shortcuts": !_ctx.shortcuts,
+        class: "m-date-picker-container__header"
+      }, null, 8, ["color", "has-time", "model-value", "locale", "has-date", "formatter-options", "double", "hide-shortcuts"])),
+      createElementVNode("div", _hoisted_1, [
+        _ctx.hasDate ? (openBlock(), createBlock(unref(MazPickerCalendar), {
+          key: 0,
+          "calendar-date": currentCalendarDate.value,
+          "onUpdate:calendarDate": _cache[0] || (_cache[0] = ($event) => currentCalendarDate.value = $event),
+          "model-value": currentDate.value,
+          color: _ctx.color,
+          locale: _ctx.locale,
+          "has-time": _ctx.hasTime,
+          double: _ctx.double,
+          "min-date": _ctx.minDate,
+          "max-date": _ctx.maxDate,
+          "first-day-of-week": _ctx.firstDayOfWeek,
+          disabled: _ctx.disabled,
+          "disabled-weekly": _ctx.disabledWeekly,
+          "disabled-dates": _ctx.disabledDates,
+          shortcuts: _ctx.shortcuts,
+          shortcut: _ctx.shortcut,
+          range: _ctx.range,
+          class: "m-date-picker-container__calendar",
+          "onUpdate:modelValue": emitDateValue
+        }, null, 8, ["calendar-date", "model-value", "color", "locale", "has-time", "double", "min-date", "max-date", "first-day-of-week", "disabled", "disabled-weekly", "disabled-dates", "shortcuts", "shortcut", "range"])) : createCommentVNode("", !0),
+        _ctx.hasTime ? (openBlock(), createBlock(unref(MazPickerTime), {
+          key: 1,
+          "model-value": currentDate.value,
+          color: _ctx.color,
+          locale: _ctx.locale,
+          "min-date": _ctx.minDate,
+          "max-date": _ctx.maxDate,
+          "has-date": _ctx.hasDate,
+          format: _ctx.format,
+          disabled: _ctx.disabled,
+          "disabled-hours": _ctx.disabledHours,
+          "minute-interval": _ctx.minuteInterval,
+          "formatter-options": _ctx.formatterOptions,
+          "is-hour12": _ctx.isHour12,
+          class: "m-date-picker-container__time",
+          "onUpdate:modelValue": saveLastTimeValue
+        }, null, 8, ["model-value", "color", "locale", "min-date", "max-date", "has-date", "format", "disabled", "disabled-hours", "minute-interval", "formatter-options", "is-hour12"])) : createCommentVNode("", !0)
+      ])
+    ], 2));
+  }
+}), MazPickerContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ea2849a3"]]);
+export {
+  MazPickerContainer as default
+};

package/dist/chunks/MazPickerHeader.Dlz2yJ1D.js

@@ -0,0 +1,126 @@
+import { defineComponent, computed, ref, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createVNode, TransitionGroup, withCtx, Fragment, renderList, toDisplayString } from "vue";
+import { c as capitalize } from "./capitalize.BF6CDS_4.js";
+import { f as formatDate } from "./formatDate.DZ_OzdnV.js";
+import dayjs from "dayjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazPickerHeader.ZYCJY5bX.css';const _hoisted_1 = {
+  key: 0,
+  class: "m-date-picker-header__date"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazPickerHeader",
+  props: {
+    modelValue: {},
+    color: {},
+    locale: {},
+    hideShortcuts: { type: Boolean },
+    double: { type: Boolean },
+    hasDate: { type: Boolean },
+    hasTime: { type: Boolean },
+    formatterOptions: {}
+  },
+  setup(__props) {
+    const refDate = computed(
+      () => typeof __props.modelValue == "string" ? __props.modelValue : __props.modelValue?.start
+    ), transitionName = ref("maz-slidevnext"), year = computed(() => __props.modelValue && typeof __props.modelValue == "object" ? `${__props.modelValue.start ? formatDate(__props.modelValue.start, __props.locale, {
+      year: "numeric",
+      timeZone: __props.formatterOptions.timeZone
+    }) : "..."} - ${__props.modelValue.end ? formatDate(__props.modelValue.end, __props.locale, {
+      year: "numeric",
+      timeZone: __props.formatterOptions.timeZone
+    }) : "..."}` : typeof __props.modelValue == "string" ? formatDate(__props.modelValue, __props.locale, {
+      year: "numeric",
+      timeZone: __props.formatterOptions.timeZone
+    }) : "-"), yearArray = computed(() => __props.hasDate ? [year.value] : void 0), dateString = computed(() => {
+      if (__props.modelValue && typeof __props.modelValue == "object" && (__props.modelValue.start || __props.modelValue.end)) {
+        const dateOption = __props.hideShortcuts && !__props.double ? "short" : "long";
+        return `${__props.modelValue.start ? capitalize(
+          formatDate(__props.modelValue.start, __props.locale, {
+            weekday: dateOption,
+            month: dateOption,
+            day: "numeric",
+            timeZone: __props.formatterOptions.timeZone
+          }) ?? __props.modelValue.start
+        ) : "..."} - ${__props.modelValue.end ? capitalize(
+          formatDate(__props.modelValue.end, __props.locale, {
+            weekday: dateOption,
+            month: dateOption,
+            day: "numeric",
+            timeZone: __props.formatterOptions.timeZone
+          }) ?? __props.modelValue.end
+        ) : "..."}`;
+      } else if (typeof __props.modelValue == "string") {
+        const formattedDate = formatDate(__props.modelValue, __props.locale, {
+          weekday: "long",
+          month: "long",
+          day: "numeric",
+          timeZone: __props.formatterOptions.timeZone
+        });
+        return formattedDate ? capitalize(formattedDate) : void 0;
+      }
+      return "-";
+    }), dateStringArray = computed(() => __props.hasDate ? [dateString.value] : void 0), timeValue = computed(() => refDate.value ? formatDate(refDate.value, __props.locale, {
+      timeStyle: "short",
+      timeZone: __props.formatterOptions.timeZone,
+      hour12: __props.formatterOptions.hour12
+    }) : void 0), timeArray = computed(() => __props.hasTime ? [timeValue.value] : void 0);
+    return watch(
+      () => __props.modelValue,
+      (modelValue, oldModelValue) => {
+        const currentValue = typeof modelValue == "object" ? modelValue.start : modelValue, oldValue = typeof oldModelValue == "object" ? oldModelValue.start : oldModelValue;
+        transitionName.value = dayjs(currentValue).isAfter(oldValue, "date") || dayjs(currentValue).isSame(oldValue, "date") ? "maz-slidevnext" : "maz-slidevprev";
+      }
+    ), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["m-date-picker-header", [`--${_ctx.color}`]])
+    }, [
+      _ctx.hasDate ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(TransitionGroup, {
+          name: transitionName.value,
+          tag: "div",
+          class: "m-date-picker-header__year-transition"
+        }, {
+          default: withCtx(() => [
+            (openBlock(!0), createElementBlock(Fragment, null, renderList(yearArray.value, (y, yi) => (openBlock(), createElementBlock("span", {
+              key: `${y}-${yi}`,
+              class: "m-date-picker-header__year-text"
+            }, toDisplayString(y), 1))), 128))
+          ]),
+          _: 1
+        }, 8, ["name"]),
+        createVNode(TransitionGroup, {
+          name: transitionName.value,
+          tag: "div",
+          class: "m-date-picker-header__date-transition"
+        }, {
+          default: withCtx(() => [
+            (openBlock(!0), createElementBlock(Fragment, null, renderList(dateStringArray.value, (d, di) => (openBlock(), createElementBlock("span", {
+              key: `${d}-${di}`,
+              class: "m-date-picker-header__date-text"
+            }, toDisplayString(d), 1))), 128))
+          ]),
+          _: 1
+        }, 8, ["name"])
+      ])) : createCommentVNode("", !0),
+      timeArray.value ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(["m-date-picker-header__time", { "--has-date": _ctx.hasDate }])
+      }, [
+        createVNode(TransitionGroup, {
+          name: transitionName.value,
+          tag: "div",
+          class: "m-date-picker-header__time-transition"
+        }, {
+          default: withCtx(() => [
+            (openBlock(!0), createElementBlock(Fragment, null, renderList(timeArray.value, (t, ti) => (openBlock(), createElementBlock("span", {
+              key: `${t}-${ti}`,
+              class: "m-date-picker-header__time-text"
+            }, toDisplayString(t), 1))), 128))
+          ]),
+          _: 1
+        }, 8, ["name"])
+      ], 2)) : createCommentVNode("", !0)
+    ], 2));
+  }
+}), MazPickerHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-759a859b"]]);
+export {
+  MazPickerHeader as default
+};

package/dist/chunks/MazPickerMonthSwitcher.BpfCGGxQ.js

@@ -0,0 +1,82 @@
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createVNode, withModifiers, withCtx, unref, normalizeClass, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
+import { X as XMark } from "./x-mark.CTalOvvY.js";
+import { c as capitalize } from "./capitalize.BF6CDS_4.js";
+import { f as formatDate } from "./formatDate.DZ_OzdnV.js";
+import dayjs from "dayjs";
+import MazBtn from "../components/MazBtn.js";
+import { i as isSameDate } from "./MazDatePicker.CT5yJhSN.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazPickerMonthSwitcher.168v7Hs1.css';const _hoisted_1 = { class: "maz-picker-month-switcher" }, _hoisted_2 = { class: "maz-picker-month-switcher__header" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __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(__props, { emit: __emit }) {
+    const props = __props, emits = __emit, months = computed(() => Array.from({ length: 12 }, (_v, i) => i).map((monthNumber) => {
+      const monthDate = dayjs(props.calendarDate).set("month", monthNumber);
+      return props.double ? {
+        label: `${capitalize(
+          formatDate(monthDate.format(), props.locale, {
+            month: "short"
+          }) ?? monthDate.add(1, "month").format()
+        )} - ${capitalize(
+          formatDate(monthDate.add(1, "month").format(), props.locale, {
+            month: "short"
+          }) ?? monthDate.add(1, "month").format()
+        )}`,
+        date: monthDate
+      } : {
+        label: capitalize(
+          formatDate(monthDate.format(), props.locale, {
+            month: "long"
+          }) ?? monthDate.format()
+        ),
+        date: monthDate
+      };
+    }));
+    function selectMonth(date) {
+      emits("update:calendar-date", date.format()), emits("close");
+    }
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
+      createElementVNode("div", _hoisted_2, [
+        createVNode(MazBtn, {
+          size: "xs",
+          color: "transparent",
+          type: "button",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("close", $event), ["stop"]))
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(XMark), { class: "maz-text-lg" })
+          ]),
+          _: 1
+        })
+      ]),
+      createElementVNode("div", {
+        class: normalizeClass(["maz-picker-month-switcher__main", { "--has-double": __props.double }])
+      }, [
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(months.value, (month) => (openBlock(), createBlock(MazBtn, {
+          key: month.label,
+          size: props.double ? "sm" : "xs",
+          class: normalizeClass({
+            "--is-selected": unref(isSameDate)(month.date, __props.calendarDate, "month")
+          }),
+          color: unref(isSameDate)(month.date, __props.calendarDate, "month") ? __props.color : "transparent",
+          type: "button",
+          onClick: withModifiers(($event) => selectMonth(month.date), ["stop"])
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(month.label), 1)
+          ]),
+          _: 2
+        }, 1032, ["size", "class", "color", "onClick"]))), 128))
+      ], 2)
+    ]));
+  }
+}), MazPickerMonthSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f5e01456"]]);
+export {
+  MazPickerMonthSwitcher as default
+};