@opensig/opendesign
Version:
101 lines (100 loc) • 4.16 kB
JavaScript
;
const vue = require("vue");
const dayjs = require("dayjs");
const index = require("../../locale/index.js");
const index$1 = require("../../button/index.js");
const utils = require("../utils.js");
const provide = require("../provide.js");
const _hoisted_1 = { class: "o-date-panel-months" };
const _hoisted_2 = ["onClick", "onMouseenter"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "DatePanelMonth",
props: {
year: {},
selectedDate: {},
disabledMonth: { type: Function },
minDate: {},
maxDate: {},
rangeStart: {},
rangeEnd: {},
anchorMonth: {},
hoverMonth: {}
},
emits: ["select", "hover"],
setup(__props, { emit: __emit }) {
function computeMonthCellBase({ index: index2, year, selectedDate, todayDate }) {
const isSelected = selectedDate ? selectedDate.year() === year && selectedDate.month() === index2 : false;
const isCurrent = todayDate ? todayDate.year() === year && todayDate.month() === index2 : false;
return { isSelected, isCurrent };
}
const props = __props;
const emits = __emit;
const datePickerCtx = vue.inject(provide.datePickerInjectKey);
const { t } = index.useI18n();
const today = vue.ref(null);
vue.onMounted(() => {
today.value = dayjs();
});
const months = vue.computed(() => {
const todayVal = today.value;
return Array.from({ length: 12 }, (_, i) => {
const { isSelected, isCurrent } = computeMonthCellBase({ index: i, year: props.year, selectedDate: props.selectedDate, todayDate: todayVal });
const isDisabled = utils.isMonthDisabled(props.year, i, { disabledMonth: props.disabledMonth, minDate: props.minDate ?? null, maxDate: props.maxDate ?? null });
const cellDate = dayjs().year(props.year).month(i).startOf("month");
const { isRangeStart, isRangeEnd, isInRange } = utils.computeRangeState({
cell: cellDate,
unit: "month",
rangeStart: props.rangeStart ? props.rangeStart.startOf("month") : null,
rangeEnd: props.rangeEnd ? props.rangeEnd.startOf("month") : null,
anchorDate: props.anchorMonth ? props.anchorMonth.startOf("month") : null,
hoverDate: props.hoverMonth ? props.hoverMonth.startOf("month") : null
});
return { index: i, isSelected, isCurrent, isDisabled, isRangeStart, isRangeEnd, isInRange };
});
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(months.value, (m) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
key: m.index,
class: vue.normalizeClass(["o-date-panel-cell", {
"is-selected": m.isSelected,
"is-disabled": m.isDisabled,
"is-current": m.isCurrent,
"is-range-start": m.isRangeStart,
"is-range-end": m.isRangeEnd,
"is-in-range": m.isInRange
}]),
onClick: ($event) => !m.isDisabled && emits("select", m.index),
onMouseenter: ($event) => !m.isDisabled && emits("hover", vue.unref(dayjs)().year(props.year).month(m.index))
}, [
vue.createVNode(vue.unref(index$1.OButton), {
round: (_a = vue.unref(datePickerCtx).round) == null ? void 0 : _a.value,
variant: "solid",
class: "o-date-panel-btn",
disabled: m.isDisabled
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)(`datePicker.monthsShort.${m.index}`)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["round", "disabled"])
], 42, _hoisted_2);
}),
128
/* KEYED_FRAGMENT */
))
]);
};
}
});
module.exports = _sfc_main;