@opensig/opendesign
Version:
351 lines (350 loc) • 15.6 kB
JavaScript
;
const vue = require("vue");
const core = require("@vueuse/core");
const index$1 = require("../../popup/index.js");
const clientOnly = require("../../_components/client-only.js");
const index$4 = require("../../button/index.js");
const index$3 = require("../../link/index.js");
const index$2 = require("../../divider/index.js");
const index = require("../../locale/index.js");
const provide$1 = require("../../time-picker/provide.js");
const useTimeRangeConstraints = require("../../time-picker/use-time-range-constraints.js");
const TimeColumns_vue_vue_type_script_setup_true_lang = require("../../time-picker/components/TimeColumns.vue.js");
const provide = require("../provide.js");
const utils = require("../utils.js");
const DateRangePanelContent_vue_vue_type_script_setup_true_lang = require("./DateRangePanelContent.vue.js");
const _hoisted_1 = { class: "o-date-range-panel-body" };
const _hoisted_2 = { class: "o-date-range-panel-side o-time-panel-content" };
const _hoisted_3 = { class: "o-date-range-panel-side o-time-panel-content" };
const _hoisted_4 = { class: "o-date-panel-footer" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "DateTimeRangePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["change", "confirm"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const visible = vue.ref(false);
const datePickerCtx = vue.inject(provide.datePickerInjectKey);
const ctx = datePickerCtx;
const { size, transition, popupPosition, popupWrapper } = datePickerCtx;
const { t } = index.useI18n();
const timeFormat = vue.computed(() => {
var _a;
const fmt = ((_a = datePickerCtx.format) == null ? void 0 : _a.value) ?? "YYYY-MM-DD HH:mm:ss";
const match = fmt.match(/HH:mm(?::ss)?/);
return match ? match[0] : "HH:mm:ss";
});
const hourStep = ctx.hourStep ?? vue.ref(1);
const minuteStep = ctx.minuteStep ?? vue.ref(1);
const secondStep = ctx.secondStep ?? vue.ref(1);
vue.provide(provide$1.timePickerInjectKey, {
disabled: datePickerCtx.disabled,
readonly: datePickerCtx.readonly,
size: datePickerCtx.size,
round: datePickerCtx.round,
noResponsive: datePickerCtx.noResponsive,
popupPosition,
popupWrapper,
transition: datePickerCtx.transition,
format: timeFormat,
hourStep,
minuteStep,
secondStep,
disabledHours: ctx.disabledHours ?? vue.ref(void 0),
disabledMinutes: ctx.disabledMinutes ?? vue.ref(void 0),
disabledSeconds: ctx.disabledSeconds ?? vue.ref(void 0),
minTime: vue.computed(() => {
var _a, _b, _c;
return ((_a = ctx.minTime) == null ? void 0 : _a.value) ?? (((_b = datePickerCtx.minDate) == null ? void 0 : _b.value) ? (_c = utils.parseValue(datePickerCtx.minDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
}),
maxTime: vue.computed(() => {
var _a, _b, _c;
return ((_a = ctx.maxTime) == null ? void 0 : _a.value) ?? (((_b = datePickerCtx.maxDate) == null ? void 0 : _b.value) ? (_c = utils.parseValue(datePickerCtx.maxDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
})
});
const isTimeView = vue.ref(false);
const currentView = vue.ref("date");
const isMainPanel = vue.computed(() => {
if (isTimeView.value) return false;
return currentView.value === "date";
});
const hasBothDates = vue.ref(false);
const popupRef = vue.ref();
const contentRef = vue.ref();
const startColumnsRef = vue.ref();
const endColumnsRef = vue.ref();
const startTime = vue.ref("00:00:00");
const endTime = vue.ref("23:59:59");
const cachedStartDate = vue.ref();
const cachedEndDate = vue.ref();
const isSameDay = vue.computed(() => {
if (!cachedStartDate.value || !cachedEndDate.value) return false;
const s = new Date(cachedStartDate.value);
const e = new Date(cachedEndDate.value);
return s.getFullYear() === e.getFullYear() && s.getMonth() === e.getMonth() && s.getDate() === e.getDate();
});
const { maxStartTime: sameDayMaxStart, minEndTime: sameDayMinEnd } = useTimeRangeConstraints.useTimeRangeConstraints({
startTime,
endTime,
format: timeFormat,
hourStep,
minuteStep,
secondStep,
enabled: isSameDay
});
const getMergedStart = () => {
var _a, _b;
const dateTs = ((_a = contentRef.value) == null ? void 0 : _a.getValue().start) ?? cachedStartDate.value;
if (!dateTs) return void 0;
const timeStr = ((_b = startColumnsRef.value) == null ? void 0 : _b.getValue()) ?? startTime.value;
const [h = 0, m = 0, s = 0] = timeStr.split(":").map(Number);
return new Date(dateTs).setHours(h, m, s, 0);
};
const getMergedEnd = () => {
var _a, _b;
const dateTs = ((_a = contentRef.value) == null ? void 0 : _a.getValue().end) ?? cachedEndDate.value;
if (!dateTs) return void 0;
const timeStr = ((_b = endColumnsRef.value) == null ? void 0 : _b.getValue()) ?? endTime.value;
const [h = 23, m = 59, s = 59] = timeStr.split(":").map(Number);
return new Date(dateTs).setHours(h, m, s, 999);
};
const initTimeFromTs = (ts, fallback) => {
if (!ts) return fallback;
const d = new Date(ts);
return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}:${String(d.getSeconds()).padStart(2, "0")}`;
};
const open = async (start, end) => {
if (visible.value) return;
visible.value = true;
isTimeView.value = false;
hasBothDates.value = start !== void 0 && end !== void 0;
cachedStartDate.value = start;
cachedEndDate.value = end;
await core.until(contentRef).toBeTruthy();
contentRef.value.init(start, end);
startTime.value = initTimeFromTs(start, "00:00:00");
endTime.value = initTimeFromTs(end, "23:59:59");
};
const close = () => {
visible.value = false;
};
const setValueFromShortcut = (start, end) => {
var _a;
(_a = contentRef.value) == null ? void 0 : _a.setValue(start, end);
hasBothDates.value = start !== void 0 && end !== void 0;
cachedStartDate.value = start;
cachedEndDate.value = end;
startTime.value = initTimeFromTs(start, "00:00:00");
endTime.value = initTimeFromTs(end, "23:59:59");
if (isTimeView.value) {
vue.nextTick(() => {
var _a2, _b;
(_a2 = startColumnsRef.value) == null ? void 0 : _a2.setValue(startTime.value);
(_b = endColumnsRef.value) == null ? void 0 : _b.setValue(endTime.value);
});
}
};
const handleDateChange = (start, end) => {
hasBothDates.value = start !== void 0 && end !== void 0;
cachedStartDate.value = start;
cachedEndDate.value = end;
if (hasBothDates.value) {
emits("change", getMergedStart(), getMergedEnd());
}
};
const handleTimeStartChange = (val) => {
var _a, _b;
if (!val) return;
startTime.value = val;
if (endTime.value && sameDayMinEnd.value && useTimeRangeConstraints.isTimeBefore(endTime.value, sameDayMinEnd.value)) {
endTime.value = sameDayMinEnd.value;
(_a = endColumnsRef.value) == null ? void 0 : _a.setValue(endTime.value);
(_b = endColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
};
const handleTimeEndChange = (val) => {
var _a, _b;
if (!val) return;
endTime.value = val;
if (startTime.value && sameDayMaxStart.value && useTimeRangeConstraints.isTimeAfter(startTime.value, sameDayMaxStart.value)) {
startTime.value = sameDayMaxStart.value;
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(startTime.value);
(_b = startColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
};
const handleConfirm = () => {
emits("confirm", getMergedStart(), getMergedEnd());
close();
};
const handleSwitchToTime = () => {
var _a, _b;
cachedStartDate.value = ((_a = contentRef.value) == null ? void 0 : _a.getValue().start) ?? cachedStartDate.value;
cachedEndDate.value = ((_b = contentRef.value) == null ? void 0 : _b.getValue().end) ?? cachedEndDate.value;
isTimeView.value = true;
vue.nextTick(() => {
var _a2, _b2, _c, _d;
(_a2 = startColumnsRef.value) == null ? void 0 : _a2.setValue(startTime.value);
(_b2 = startColumnsRef.value) == null ? void 0 : _b2.scrollAllToSelected(false);
(_c = endColumnsRef.value) == null ? void 0 : _c.setValue(endTime.value);
(_d = endColumnsRef.value) == null ? void 0 : _d.scrollAllToSelected(false);
});
};
const handleSwitchToDate = () => {
var _a, _b;
const sv = (_a = startColumnsRef.value) == null ? void 0 : _a.getValue();
if (sv) startTime.value = sv;
const ev = (_b = endColumnsRef.value) == null ? void 0 : _b.getValue();
if (ev) endTime.value = ev;
isTimeView.value = false;
};
const toggleView = () => {
if (!isTimeView.value) {
handleSwitchToTime();
} else {
handleSwitchToDate();
}
};
__expose({
getPopupEl: () => popupRef.value,
open,
close,
setValue: setValueFromShortcut
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(clientOnly), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(index$1.OPopup), {
visible: visible.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
class: vue.normalizeClass(["o-date-panel", `o-date-panel-${vue.unref(size)}`, "o-time-panel", `o-time-panel-${vue.unref(size)}`, "o-date-range-panel", "o-datetime-range-panel"]),
"hide-close": "",
target: props.target,
transition: vue.unref(transition),
position: vue.unref(popupPosition),
wrapper: vue.unref(popupWrapper),
trigger: "none",
offset: 4,
"adjust-min-width": false,
"adjust-width": false
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "popupRef",
ref: popupRef
},
[
vue.createCommentVNode(" Date view "),
!isTimeView.value ? (vue.openBlock(), vue.createBlock(DateRangePanelContent_vue_vue_type_script_setup_true_lang, {
key: 0,
ref_key: "contentRef",
ref: contentRef,
"current-view": currentView.value,
"onUpdate:currentView": _cache[0] || (_cache[0] = ($event) => currentView.value = $event),
onChange: handleDateChange
}, null, 8, ["current-view"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" Time view "),
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createVNode(TimeColumns_vue_vue_type_script_setup_true_lang, {
ref_key: "startColumnsRef",
ref: startColumnsRef,
"max-time": vue.unref(sameDayMaxStart),
onChange: handleTimeStartChange
}, null, 8, ["max-time"])
]),
vue.createElementVNode("div", _hoisted_3, [
vue.createVNode(TimeColumns_vue_vue_type_script_setup_true_lang, {
ref_key: "endColumnsRef",
ref: endColumnsRef,
"min-time": vue.unref(sameDayMinEnd),
onChange: handleTimeEndChange
}, null, 8, ["min-time"])
])
])
],
64
/* STABLE_FRAGMENT */
)),
currentView.value === "date" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createVNode(vue.unref(index$2.ODivider), { class: "o-date-panel-divider" }),
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode(
"span",
{
class: vue.normalizeClass(["o-date-panel-shortcut", { hidden: !isMainPanel.value }])
},
[
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue: setValueFromShortcut,
emitChange: () => emits("change", getMergedStart(), getMergedEnd())
})
],
2
/* CLASS */
),
vue.createElementVNode("span", null, [
vue.createVNode(vue.unref(index$3.OLink), {
color: "primary",
"hover-underline": false,
disabled: !hasBothDates.value,
onClick: toggleView
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(!isTimeView.value ? vue.unref(t)("datePicker.selectTime") : vue.unref(t)("datePicker.selectDate")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"]),
vue.createVNode(vue.unref(index$4.OButton), {
round: "pill",
disabled: !hasBothDates.value,
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"])
])
])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
]),
_: 3
/* FORWARDED */
});
};
}
});
module.exports = _sfc_main;