@opensig/opendesign
Version:
263 lines (262 loc) • 10.3 kB
JavaScript
;
const vue = require("vue");
const core = require("@vueuse/core");
const dayjs = require("dayjs");
const index$1 = require("../../popup/index.js");
const clientOnly = require("../../_components/client-only.js");
const index$3 = require("../../button/index.js");
const index$2 = require("../../divider/index.js");
const index = require("../../locale/index.js");
const types = require("../types.js");
const provide = require("../provide.js");
const useTimeRangeConstraints = require("../use-time-range-constraints.js");
const useTimePickerOptions = require("../use-time-picker-options.js");
const findNearestTime = require("../find-nearest-time.js");
const TimeColumns_vue_vue_type_script_setup_true_lang = require("./TimeColumns.vue.js");
const _hoisted_1 = { class: "o-time-range-panel-body" };
const _hoisted_2 = { class: "o-time-range-panel-side o-time-panel-content" };
const _hoisted_3 = { class: "o-time-range-panel-side o-time-panel-content" };
const _hoisted_4 = { class: "o-time-panel-footer" };
const _hoisted_5 = { class: "o-time-panel-shortcut" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "TimeRangePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["change", "confirm"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const timePickerCtx = vue.inject(provide.timePickerInjectKey);
const {
size,
transition,
popupPosition,
popupWrapper,
format,
hourStep,
minuteStep,
secondStep,
minTime,
maxTime,
disabledHours,
disabledMinutes,
disabledSeconds
} = timePickerCtx;
const defaultOptions = useTimePickerOptions.useTimePickerOptions({
hourStep,
minuteStep,
secondStep,
disabledHours,
disabledMinutes,
disabledSeconds,
minTime,
maxTime,
selectedHour: vue.ref(null),
selectedMinute: vue.ref(null)
});
const { t } = index.useI18n();
const visible = vue.ref(false);
const startTime = vue.ref();
const endTime = vue.ref();
const startColumnsRef = vue.ref();
const endColumnsRef = vue.ref();
const popupRef = vue.ref();
const hasBothTimes = vue.computed(() => !!startTime.value && !!endTime.value);
const { maxStartTime, minEndTime } = useTimeRangeConstraints.useTimeRangeConstraints({
startTime,
endTime,
format,
hourStep,
minuteStep,
secondStep
});
const computeDefaultEnd = (startStr) => {
const startDayjs = dayjs(types.TIME_PREFIX + startStr);
const endTarget = startDayjs.add(1, "hour");
return findNearestTime.findNearestTime({
hourOptions: defaultOptions.hourOptions.value,
minuteOptions: defaultOptions.minuteOptions.value,
secondOptions: defaultOptions.secondOptions.value,
minTime: startStr,
maxTime: vue.toValue(maxTime),
disabledHours: vue.toValue(disabledHours),
disabledMinutes: vue.toValue(disabledMinutes),
disabledSeconds: vue.toValue(disabledSeconds),
target: { hour: endTarget.hour(), minute: endTarget.minute(), second: endTarget.second() },
format: format.value
});
};
const open = async (start, end) => {
var _a, _b, _c, _d;
if (visible.value) return;
visible.value = true;
if (!start && !end) {
const now = dayjs();
const defaultStart = findNearestTime.findNearestTime({
hourOptions: defaultOptions.hourOptions.value,
minuteOptions: defaultOptions.minuteOptions.value,
secondOptions: defaultOptions.secondOptions.value,
minTime: vue.toValue(minTime),
maxTime: vue.toValue(maxTime),
disabledHours: vue.toValue(disabledHours),
disabledMinutes: vue.toValue(disabledMinutes),
disabledSeconds: vue.toValue(disabledSeconds),
target: { hour: now.hour(), minute: now.minute(), second: now.second() },
format: format.value
});
startTime.value = defaultStart;
endTime.value = defaultStart ? computeDefaultEnd(defaultStart) : void 0;
} else {
startTime.value = start;
endTime.value = end;
}
await core.until(startColumnsRef).toBeTruthy();
await vue.nextTick();
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(startTime.value);
(_b = startColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(false);
(_c = endColumnsRef.value) == null ? void 0 : _c.setValue(endTime.value);
(_d = endColumnsRef.value) == null ? void 0 : _d.scrollAllToSelected(false);
};
const close = () => {
visible.value = false;
};
const handleStartChange = (val) => {
var _a, _b;
startTime.value = val;
if (endTime.value && minEndTime.value && useTimeRangeConstraints.isTimeBefore(endTime.value, minEndTime.value)) {
endTime.value = minEndTime.value;
(_a = endColumnsRef.value) == null ? void 0 : _a.setValue(endTime.value);
(_b = endColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
emits("change", startTime.value, endTime.value);
};
const handleEndChange = (val) => {
var _a, _b;
endTime.value = val;
if (startTime.value && maxStartTime.value && useTimeRangeConstraints.isTimeAfter(startTime.value, maxStartTime.value)) {
startTime.value = maxStartTime.value;
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(startTime.value);
(_b = startColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
emits("change", startTime.value, endTime.value);
};
const handleConfirm = () => {
emits("confirm", startTime.value, endTime.value);
close();
};
const shortcutSetValue = (start, end) => {
var _a, _b, _c, _d;
if (start !== void 0) {
startTime.value = start;
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(start);
(_b = startColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
if (end !== void 0) {
endTime.value = end;
(_c = endColumnsRef.value) == null ? void 0 : _c.setValue(end);
(_d = endColumnsRef.value) == null ? void 0 : _d.scrollAllToSelected(true);
}
};
const shortcutEmitChange = () => emits("change", startTime.value, endTime.value);
const setStartValue = (val) => {
var _a;
startTime.value = val;
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(val);
};
const setEndValue = (val) => {
var _a;
endTime.value = val;
(_a = endColumnsRef.value) == null ? void 0 : _a.setValue(val);
};
__expose({
getPopupEl: () => popupRef.value,
open,
close,
setStartValue,
setEndValue
});
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[0] || (_cache[0] = ($event) => visible.value = $event),
class: vue.normalizeClass(["o-time-panel", `o-time-panel-${vue.unref(size)}`, "o-time-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.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(maxStartTime),
onChange: handleStartChange
}, 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(minEndTime),
onChange: handleEndChange
}, null, 8, ["min-time"])
])
]),
vue.createVNode(vue.unref(index$2.ODivider), { class: "o-time-panel-divider" }),
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode("span", _hoisted_5, [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue: shortcutSetValue,
emitChange: shortcutEmitChange
})
]),
vue.createVNode(vue.unref(index$3.OButton), {
round: "pill",
disabled: !hasBothTimes.value,
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"])
])
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
]),
_: 3
/* FORWARDED */
});
};
}
});
module.exports = _sfc_main;