@opensig/opendesign
Version:
485 lines (484 loc) • 21.9 kB
JavaScript
;
const vue = require("vue");
const dayjs = require("dayjs");
const index = require("../../divider/index.js");
const provide = require("../provide.js");
const utils = require("../utils.js");
const useCalendar = require("../use-calendar.js");
const DatePanelHeader_vue_vue_type_script_setup_true_lang = require("./DatePanelHeader.vue.js");
const DatePanelCalendar_vue_vue_type_script_setup_true_lang = require("./DatePanelCalendar.vue.js");
const DatePanelMonth_vue_vue_type_script_setup_true_lang = require("./DatePanelMonth.vue.js");
const DatePanelYear_vue_vue_type_script_setup_true_lang = require("./DatePanelYear.vue.js");
const _hoisted_1 = { class: "o-date-range-panel-body" };
const _hoisted_2 = {
key: 0,
class: "o-date-range-panel-side"
};
const _hoisted_3 = { class: "o-date-panel-content" };
const _hoisted_4 = { class: "o-date-range-panel-side" };
const _hoisted_5 = { class: "o-date-panel-content" };
const _hoisted_6 = { class: "o-date-range-panel-side" };
const _hoisted_7 = { class: "o-date-panel-content" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "DateRangePanelContent",
props: {
"currentView": { required: true },
"currentViewModifiers": {}
},
emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:currentView"]),
setup(__props, { expose: __expose, emit: __emit }) {
const emits = __emit;
const datePickerCtx = vue.inject(provide.datePickerInjectKey);
const { mode: effectiveMode, disabledDate, disabledMonth, disabledYear, minDate, maxDate } = datePickerCtx;
const getOffsetRight = (base) => {
if (effectiveMode.value === "year") return base.add(utils.YEAR_VIEW_STEP, "year");
if (effectiveMode.value === "month") return base.add(1, "year");
return base.add(1, "month");
};
const dayStartOfWeek = vue.computed(() => {
var _a;
return ((_a = datePickerCtx.dayStartOfWeek) == null ? void 0 : _a.value) ?? 1;
});
const parsedMinDate = vue.computed(() => {
const v = minDate == null ? void 0 : minDate.value;
return v ? utils.parseValue(v) : null;
});
const parsedMaxDate = vue.computed(() => {
const v = maxDate == null ? void 0 : maxDate.value;
return v ? utils.parseValue(v) : null;
});
const anchorDate = vue.ref(null);
const rangeStart = vue.ref(null);
const rangeEnd = vue.ref(null);
const hoverDate = vue.ref(null);
const selecting = vue.ref("start");
const currentView = vue.useModel(__props, "currentView");
const activeSelectSide = vue.ref("left");
const isNavView = vue.computed(() => {
if (effectiveMode.value === "year") return false;
if (effectiveMode.value === "month") return currentView.value === "year";
return currentView.value !== "date";
});
const leftYear = vue.ref(0);
const leftMonth = vue.ref(0);
const { rows: leftCalRows, weekDayHeaders } = useCalendar.useCalendar({
displayYear: leftYear,
displayMonth: leftMonth,
selectedDate: vue.computed(() => [anchorDate.value ?? rangeStart.value, rangeEnd.value]),
dayStartOfWeek,
disabledDate,
minDate: parsedMinDate,
maxDate: parsedMaxDate,
rangeStart,
rangeEnd,
anchorDate,
hoverDate
});
const rightYear = vue.ref(0);
const rightMonth = vue.ref(0);
const navYear = vue.computed({
get: () => activeSelectSide.value === "left" ? leftYear.value : rightYear.value,
set: (v) => {
if (activeSelectSide.value === "left") leftYear.value = v;
else rightYear.value = v;
}
});
const navMonth = vue.computed({
get: () => activeSelectSide.value === "left" ? leftMonth.value : rightMonth.value,
set: (v) => {
if (activeSelectSide.value === "left") leftMonth.value = v;
else rightMonth.value = v;
}
});
let isInitializing = false;
const alignRightToLeft = (newLY, newLM) => {
if (newLY > rightYear.value || newLY === rightYear.value && newLM >= rightMonth.value) {
rightYear.value = newLY;
rightMonth.value = newLM + 1;
if (rightMonth.value > 11) {
rightYear.value += 1;
rightMonth.value = 0;
}
}
};
const alignLeftToRight = (newRY, newRM) => {
if (newRY < leftYear.value || newRY === leftYear.value && newRM <= leftMonth.value) {
leftYear.value = newRY;
leftMonth.value = newRM - 1;
if (leftMonth.value < 0) {
leftYear.value -= 1;
leftMonth.value = 11;
}
}
};
vue.watch(
[leftYear, leftMonth],
([newLY, newLM]) => {
if (isInitializing) return;
if (effectiveMode.value === "year") {
rightYear.value = newLY + utils.YEAR_VIEW_STEP;
} else if (effectiveMode.value === "month") {
if (newLY >= rightYear.value) rightYear.value = newLY + 1;
} else {
alignRightToLeft(newLY, newLM);
}
},
{ flush: "sync" }
);
vue.watch(
[rightYear, rightMonth],
([newRY, newRM]) => {
if (isInitializing) return;
if (effectiveMode.value === "year") {
leftYear.value = newRY - utils.YEAR_VIEW_STEP;
} else if (effectiveMode.value === "month") {
if (newRY <= leftYear.value) leftYear.value = newRY - 1;
} else {
alignLeftToRight(newRY, newRM);
}
},
{ flush: "sync" }
);
const { rows: rightCalRows } = useCalendar.useCalendar({
displayYear: rightYear,
displayMonth: rightMonth,
selectedDate: vue.computed(() => [anchorDate.value ?? rangeStart.value, rangeEnd.value]),
dayStartOfWeek,
disabledDate,
minDate: parsedMinDate,
maxDate: parsedMaxDate,
rangeStart,
rangeEnd,
anchorDate,
hoverDate
});
const getValue = () => {
var _a, _b;
return {
start: (_a = rangeStart.value) == null ? void 0 : _a.valueOf(),
end: (_b = rangeEnd.value) == null ? void 0 : _b.valueOf()
};
};
const toDayjs = (val) => val ? dayjs(val) : null;
const setRangeBothEnds = (start, end) => {
const startDate = dayjs(start);
leftYear.value = startDate.year();
leftMonth.value = startDate.month();
const endDate = dayjs(end);
const compareUnit = effectiveMode.value === "month" ? "year" : "month";
const sameUnit = startDate.isSame(endDate, compareUnit);
if (sameUnit) {
const offsetRight = getOffsetRight(startDate);
rightYear.value = offsetRight.year();
rightMonth.value = offsetRight.month();
} else {
rightYear.value = endDate.year();
rightMonth.value = endDate.month();
}
};
const setSingleEdge = (edgeVal) => {
const edgeDate = dayjs(edgeVal);
leftYear.value = edgeDate.year();
leftMonth.value = edgeDate.month();
rightYear.value = getOffsetRight(edgeDate).year();
rightMonth.value = getOffsetRight(edgeDate).month();
};
const setEmptyRange = () => {
leftYear.value = dayjs().year();
leftMonth.value = dayjs().month();
rightYear.value = getOffsetRight(dayjs()).year();
rightMonth.value = getOffsetRight(dayjs()).month();
};
const setValue = (start, end) => {
var _a;
rangeStart.value = toDayjs(start);
rangeEnd.value = toDayjs(end);
if (effectiveMode.value === "year") {
leftYear.value = ((_a = rangeStart.value) == null ? void 0 : _a.year()) ?? dayjs().year();
return;
}
if (start && end) {
setRangeBothEnds(start, end);
return;
}
if ([start, end].filter((v) => v).length === 1) {
setSingleEdge(start || end);
return;
}
setEmptyRange();
};
const init = (start, end) => {
selecting.value = "start";
anchorDate.value = null;
hoverDate.value = null;
currentView.value = effectiveMode.value === "datetime" ? "date" : effectiveMode.value;
setValue(start ?? void 0, end ?? void 0);
};
const modeUnitMap = { year: "year", month: "month" };
const finishSelection = (anchor, second) => {
const compareUnit = modeUnitMap[effectiveMode.value] ?? "day";
if (anchor.isAfter(second, compareUnit)) {
rangeStart.value = second;
rangeEnd.value = anchor;
} else {
rangeStart.value = anchor;
rangeEnd.value = second;
}
anchorDate.value = null;
selecting.value = "start";
const { start: s, end: e } = getValue();
emits("change", s, e);
};
const handleSelectDate = (date) => {
if (selecting.value === "start" || !anchorDate.value) {
anchorDate.value = date;
rangeStart.value = null;
rangeEnd.value = null;
hoverDate.value = null;
selecting.value = "end";
} else {
finishSelection(anchorDate.value, date);
hoverDate.value = null;
}
};
const handleHover = (date) => {
if (selecting.value === "end") hoverDate.value = date;
};
const handleLeave = () => {
if (selecting.value === "end") hoverDate.value = null;
};
const handleSelectMonth = (month, isRight = false) => {
const year = isRight ? rightYear.value : leftYear.value;
if (effectiveMode.value === "month") {
const date = dayjs().year(year).month(month).date(1).startOf("day");
if (selecting.value === "start" || !anchorDate.value) {
anchorDate.value = date;
rangeStart.value = null;
rangeEnd.value = null;
selecting.value = "end";
} else {
finishSelection(anchorDate.value, date);
}
} else {
if (activeSelectSide.value === "right") {
rightMonth.value = month;
} else {
leftMonth.value = month;
}
currentView.value = "date";
}
};
const handleSelectYear = (year) => {
if (effectiveMode.value === "year") {
const date = dayjs().year(year).month(0).date(1).startOf("day");
if (selecting.value === "start" || !anchorDate.value) {
anchorDate.value = date;
rangeStart.value = null;
rangeEnd.value = null;
selecting.value = "end";
} else {
finishSelection(anchorDate.value, date);
}
} else if (effectiveMode.value === "month") {
if (activeSelectSide.value === "right") {
rightYear.value = year;
} else {
leftYear.value = year;
}
currentView.value = "month";
} else {
if (activeSelectSide.value === "right") {
rightYear.value = year;
} else {
leftYear.value = year;
}
currentView.value = "date";
}
};
vue.onMounted(() => {
isInitializing = true;
leftYear.value = dayjs().year();
leftMonth.value = dayjs().month();
rightYear.value = getOffsetRight(dayjs()).year();
rightMonth.value = getOffsetRight(dayjs()).month();
isInitializing = false;
});
__expose({
getValue,
setValue,
init
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.createCommentVNode(" Mobile & Desktop: dual calendar "),
vue.createElementVNode("div", _hoisted_1, [
vue.createCommentVNode(" 导航视图（二级单点选择）：只渲染触发侧的单个面板，无范围高亮 "),
isNavView.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.createVNode(DatePanelHeader_vue_vue_type_script_setup_true_lang, {
year: navYear.value,
"onUpdate:year": _cache[0] || (_cache[0] = ($event) => navYear.value = $event),
month: navMonth.value,
"onUpdate:month": _cache[1] || (_cache[1] = ($event) => navMonth.value = $event),
"current-view": currentView.value,
"onUpdate:currentView": _cache[2] || (_cache[2] = ($event) => currentView.value = $event),
onClickYear: () => {
},
onClickMonth: () => {
}
}, null, 8, ["year", "month", "current-view"]),
vue.createVNode(vue.unref(index.ODivider), { class: "o-date-panel-divider" }),
currentView.value === "month" ? (vue.openBlock(), vue.createBlock(DatePanelMonth_vue_vue_type_script_setup_true_lang, {
key: 0,
year: navYear.value,
"selected-date": null,
"disabled-month": vue.unref(disabledMonth),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": null,
"range-end": null,
"hover-month": null,
onSelect: _cache[3] || (_cache[3] = (m) => handleSelectMonth(m, activeSelectSide.value === "right")),
onHover: () => {
}
}, null, 8, ["year", "disabled-month", "min-date", "max-date"])) : (vue.openBlock(), vue.createBlock(DatePanelYear_vue_vue_type_script_setup_true_lang, {
key: 1,
year: navYear.value,
"selected-date": null,
"disabled-year": vue.unref(disabledYear),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": null,
"range-end": null,
"hover-year": null,
"hide-out-of-decade": false,
onSelect: handleSelectYear,
onHover: () => {
}
}, null, 8, ["year", "disabled-year", "min-date", "max-date"]))
])
])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" 主范围选择视图：双面板 + 范围高亮 "),
vue.createCommentVNode(" Left panel "),
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode("div", _hoisted_5, [
vue.createVNode(DatePanelHeader_vue_vue_type_script_setup_true_lang, {
year: leftYear.value,
"onUpdate:year": _cache[4] || (_cache[4] = ($event) => leftYear.value = $event),
month: leftMonth.value,
"onUpdate:month": _cache[5] || (_cache[5] = ($event) => leftMonth.value = $event),
"current-view": currentView.value,
"onUpdate:currentView": _cache[6] || (_cache[6] = ($event) => currentView.value = $event),
"hide-right-nav": vue.unref(effectiveMode) === "year",
onClickYear: _cache[7] || (_cache[7] = ($event) => activeSelectSide.value = "left"),
onClickMonth: _cache[8] || (_cache[8] = ($event) => activeSelectSide.value = "left")
}, null, 8, ["year", "month", "current-view", "hide-right-nav"]),
vue.createVNode(vue.unref(index.ODivider), { class: "o-date-panel-divider" }),
currentView.value === "date" ? (vue.openBlock(), vue.createBlock(DatePanelCalendar_vue_vue_type_script_setup_true_lang, {
key: 0,
rows: vue.unref(leftCalRows),
"week-day-headers": vue.unref(weekDayHeaders),
onSelect: handleSelectDate,
onHover: handleHover,
onLeave: handleLeave
}, null, 8, ["rows", "week-day-headers"])) : currentView.value === "month" ? (vue.openBlock(), vue.createBlock(DatePanelMonth_vue_vue_type_script_setup_true_lang, {
key: 1,
year: leftYear.value,
"selected-date": null,
"disabled-month": vue.unref(disabledMonth),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": rangeStart.value,
"range-end": rangeEnd.value,
"anchor-month": selecting.value === "end" ? anchorDate.value : null,
"hover-month": selecting.value === "end" ? hoverDate.value : null,
onSelect: _cache[9] || (_cache[9] = (m) => handleSelectMonth(m, false)),
onHover: handleHover
}, null, 8, ["year", "disabled-month", "min-date", "max-date", "range-start", "range-end", "anchor-month", "hover-month"])) : (vue.openBlock(), vue.createBlock(DatePanelYear_vue_vue_type_script_setup_true_lang, {
key: 2,
year: leftYear.value,
"selected-date": null,
"disabled-year": vue.unref(disabledYear),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": rangeStart.value,
"range-end": rangeEnd.value,
"anchor-year": selecting.value === "end" ? anchorDate.value : null,
"hover-year": selecting.value === "end" ? hoverDate.value : null,
"hide-out-of-decade": vue.unref(effectiveMode) === "year",
onSelect: handleSelectYear,
onHover: handleHover
}, null, 8, ["year", "disabled-year", "min-date", "max-date", "range-start", "range-end", "anchor-year", "hover-year", "hide-out-of-decade"]))
])
]),
vue.createCommentVNode(" Right panel "),
vue.createElementVNode("div", _hoisted_6, [
vue.createElementVNode("div", _hoisted_7, [
vue.createVNode(DatePanelHeader_vue_vue_type_script_setup_true_lang, {
year: rightYear.value,
"onUpdate:year": _cache[10] || (_cache[10] = ($event) => rightYear.value = $event),
month: rightMonth.value,
"onUpdate:month": _cache[11] || (_cache[11] = ($event) => rightMonth.value = $event),
"current-view": currentView.value,
"onUpdate:currentView": _cache[12] || (_cache[12] = ($event) => currentView.value = $event),
"hide-left-nav": vue.unref(effectiveMode) === "year",
onClickYear: _cache[13] || (_cache[13] = ($event) => activeSelectSide.value = "right"),
onClickMonth: _cache[14] || (_cache[14] = ($event) => activeSelectSide.value = "right")
}, null, 8, ["year", "month", "current-view", "hide-left-nav"]),
vue.createVNode(vue.unref(index.ODivider), { class: "o-date-panel-divider" }),
currentView.value === "date" ? (vue.openBlock(), vue.createBlock(DatePanelCalendar_vue_vue_type_script_setup_true_lang, {
key: 0,
rows: vue.unref(rightCalRows),
"week-day-headers": vue.unref(weekDayHeaders),
onSelect: handleSelectDate,
onHover: handleHover,
onLeave: handleLeave
}, null, 8, ["rows", "week-day-headers"])) : currentView.value === "month" ? (vue.openBlock(), vue.createBlock(DatePanelMonth_vue_vue_type_script_setup_true_lang, {
key: 1,
year: rightYear.value,
"selected-date": null,
"disabled-month": vue.unref(disabledMonth),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": rangeStart.value,
"range-end": rangeEnd.value,
"anchor-month": selecting.value === "end" ? anchorDate.value : null,
"hover-month": selecting.value === "end" ? hoverDate.value : null,
onSelect: _cache[15] || (_cache[15] = (m) => handleSelectMonth(m, true)),
onHover: handleHover
}, null, 8, ["year", "disabled-month", "min-date", "max-date", "range-start", "range-end", "anchor-month", "hover-month"])) : (vue.openBlock(), vue.createBlock(DatePanelYear_vue_vue_type_script_setup_true_lang, {
key: 2,
year: rightYear.value,
"selected-date": null,
"disabled-year": vue.unref(disabledYear),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": rangeStart.value,
"range-end": rangeEnd.value,
"anchor-year": selecting.value === "end" ? anchorDate.value : null,
"hover-year": selecting.value === "end" ? hoverDate.value : null,
"hide-out-of-decade": vue.unref(effectiveMode) === "year",
onSelect: handleSelectYear,
onHover: handleHover
}, null, 8, ["year", "disabled-year", "min-date", "max-date", "range-start", "range-end", "anchor-year", "hover-year", "hide-out-of-decade"]))
])
])
],
64
/* STABLE_FRAGMENT */
))
])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
);
};
}
});
module.exports = _sfc_main;