maz-ui/dist/chunks/MazPickerMonthSwitcher.Dq39gYn0.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createVNode, withModifiers, withCtx, unref, normalizeClass, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
import { MazXMark } from "@maz-ui/icons";
import { c as capitalize } from "./capitalize.BF6CDS_4.js";
import { f as formatDate, i as isSameDate } from "./MazDatePicker.DmPXmc_M.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/MazPickerMonthSwitcher.BJGGy53r.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(MazXMark), { 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-32e302a1"]]);
export {
  MazPickerMonthSwitcher as default
};