maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
91 lines (90 loc) • 3.57 kB
JavaScript
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 "./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/MazPickerCalendarSwitcher.ByAVjy00.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-e52cabdb"]]);
export {
MazPickerCalendarSwitcher as default
};