maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
260 lines (259 loc) • 13.2 kB
JavaScript
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, b as getDaysInMonth, c as getFirstDayOfMonth, d as isRangeValue, i as isSameDate, e as isValidDate, h as isSameDay } from "./MazDatePicker.DmPXmc_M.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.CdpSHmMr.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))
]));
}
}), MazPickerCalendarDays = /* @__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 },
inline: { type: Boolean, required: !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) => ({
v241fbd37: hoverColor.value,
v9c9e9bec: 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",
block: __props.inline,
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", "block", "disabled", "class", "onClick", "onMouseover", "onFocus"]))), 128))
], 2))), 128))
]),
_: 1
}, 8, ["name"])
], 512));
}
}), MazPickerCalendarGrid = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-edea74ac"]]), _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 },
inline: { type: Boolean, 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(MazPickerCalendarDays, {
locale: __props.locale,
"first-day-of-week": __props.firstDayOfWeek,
class: "maz-picker-calendar-month__days"
}, null, 8, ["locale", "first-day-of-week"]),
createVNode(MazPickerCalendarGrid, {
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,
inline: __props.inline,
"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", "inline", "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-9df44a4d"]]);
export {
MazPickerCalendarMonth as default
};