@opensig/opendesign
Version:
352 lines (351 loc) • 15.2 kB
JavaScript
import { defineComponent, ref, inject, computed, provide, createBlock, openBlock, unref, withCtx, createVNode, normalizeClass, createElementVNode, createCommentVNode, createElementBlock, Fragment, renderSlot, createTextVNode, toDisplayString, nextTick } from "vue";
import { until } from "@vueuse/core";
import { OPopup } from "../../popup/index.mjs";
import ClientOnly from "../../_components/client-only.mjs";
import { OButton } from "../../button/index.mjs";
import { OLink } from "../../link/index.mjs";
import { ODivider } from "../../divider/index.mjs";
import { useI18n } from "../../locale/index.mjs";
import { timePickerInjectKey } from "../../time-picker/provide.mjs";
import { useTimeRangeConstraints, isTimeBefore, isTimeAfter } from "../../time-picker/use-time-range-constraints.mjs";
import _sfc_main$2 from "../../time-picker/components/TimeColumns.vue.mjs";
import { datePickerInjectKey } from "../provide.mjs";
import { parseValue } from "../utils.mjs";
import _sfc_main$1 from "./DateRangePanelContent.vue.mjs";
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__ */ defineComponent({
__name: "DateTimeRangePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["change", "confirm"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const visible = ref(false);
const datePickerCtx = inject(datePickerInjectKey);
const ctx = datePickerCtx;
const { size, transition, popupPosition, popupWrapper } = datePickerCtx;
const { t } = useI18n();
const timeFormat = 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 ?? ref(1);
const minuteStep = ctx.minuteStep ?? ref(1);
const secondStep = ctx.secondStep ?? ref(1);
provide(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 ?? ref(void 0),
disabledMinutes: ctx.disabledMinutes ?? ref(void 0),
disabledSeconds: ctx.disabledSeconds ?? ref(void 0),
minTime: computed(() => {
var _a, _b, _c;
return ((_a = ctx.minTime) == null ? void 0 : _a.value) ?? (((_b = datePickerCtx.minDate) == null ? void 0 : _b.value) ? (_c = parseValue(datePickerCtx.minDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
}),
maxTime: computed(() => {
var _a, _b, _c;
return ((_a = ctx.maxTime) == null ? void 0 : _a.value) ?? (((_b = datePickerCtx.maxDate) == null ? void 0 : _b.value) ? (_c = parseValue(datePickerCtx.maxDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
})
});
const isTimeView = ref(false);
const currentView = ref("date");
const isMainPanel = computed(() => {
if (isTimeView.value) return false;
return currentView.value === "date";
});
const hasBothDates = ref(false);
const popupRef = ref();
const contentRef = ref();
const startColumnsRef = ref();
const endColumnsRef = ref();
const startTime = ref("00:00:00");
const endTime = ref("23:59:59");
const cachedStartDate = ref();
const cachedEndDate = ref();
const isSameDay = 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({
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 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) {
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 && 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 && 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;
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 openBlock(), createBlock(unref(ClientOnly), null, {
default: withCtx(() => [
createVNode(unref(OPopup), {
visible: visible.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
class: normalizeClass(["o-date-panel", `o-date-panel-${unref(size)}`, "o-time-panel", `o-time-panel-${unref(size)}`, "o-date-range-panel", "o-datetime-range-panel"]),
"hide-close": "",
target: props.target,
transition: unref(transition),
position: unref(popupPosition),
wrapper: unref(popupWrapper),
trigger: "none",
offset: 4,
"adjust-min-width": false,
"adjust-width": false
}, {
default: withCtx(() => [
createElementVNode(
"div",
{
ref_key: "popupRef",
ref: popupRef
},
[
createCommentVNode(" Date view "),
!isTimeView.value ? (openBlock(), createBlock(_sfc_main$1, {
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"])) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createCommentVNode(" Time view "),
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createVNode(_sfc_main$2, {
ref_key: "startColumnsRef",
ref: startColumnsRef,
"max-time": unref(sameDayMaxStart),
onChange: handleTimeStartChange
}, null, 8, ["max-time"])
]),
createElementVNode("div", _hoisted_3, [
createVNode(_sfc_main$2, {
ref_key: "endColumnsRef",
ref: endColumnsRef,
"min-time": unref(sameDayMinEnd),
onChange: handleTimeEndChange
}, null, 8, ["min-time"])
])
])
],
64
/* STABLE_FRAGMENT */
)),
currentView.value === "date" ? (openBlock(), createElementBlock(
Fragment,
{ key: 2 },
[
createVNode(unref(ODivider), { class: "o-date-panel-divider" }),
createElementVNode("div", _hoisted_4, [
createElementVNode(
"span",
{
class: normalizeClass(["o-date-panel-shortcut", { hidden: !isMainPanel.value }])
},
[
renderSlot(_ctx.$slots, "shortcut", {
setValue: setValueFromShortcut,
emitChange: () => emits("change", getMergedStart(), getMergedEnd())
})
],
2
/* CLASS */
),
createElementVNode("span", null, [
createVNode(unref(OLink), {
color: "primary",
"hover-underline": false,
disabled: !hasBothDates.value,
onClick: toggleView
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(!isTimeView.value ? unref(t)("datePicker.selectTime") : unref(t)("datePicker.selectDate")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"]),
createVNode(unref(OButton), {
round: "pill",
disabled: !hasBothDates.value,
onClick: handleConfirm
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"])
])
])
],
64
/* STABLE_FRAGMENT */
)) : createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
]),
_: 3
/* FORWARDED */
});
};
}
});
export {
_sfc_main as default
};