This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,327 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var index$1 = require('../../../scrollbar/index.js');
var index$2 = require('../../../icon/index.js');
var iconsVue = require('@element-plus/icons-vue');
var constants = require('../constants.js');
var utils = require('../utils.js');
var basicTimeSpinner = require('../props/basic-time-spinner.js');
var useTimePicker = require('../composables/use-time-picker.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
var index$3 = require('../../../../directives/repeat-click/index.js');
var event = require('../../../../constants/event.js');
var index = require('../../../../hooks/use-namespace/index.js');
var style = require('../../../../utils/dom/style.js');
var types = require('../../../../utils/types.js');
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "basic-time-spinner",
props: basicTimeSpinner.basicTimeSpinnerProps,
emits: [event.CHANGE_EVENT, "select-range", "set-option"],
setup(__props, { emit }) {
const props = __props;
const pickerBase = vue.inject(constants.PICKER_BASE_INJECTION_KEY);
const { isRange, format } = pickerBase.props;
const ns = index.useNamespace("time");
const { getHoursList, getMinutesList, getSecondsList } = useTimePicker.getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds);
let isScrolling = false;
const currentScrollbar = vue.ref();
const listHoursRef = vue.ref();
const listMinutesRef = vue.ref();
const listSecondsRef = vue.ref();
const listRefsMap = {
hours: listHoursRef,
minutes: listMinutesRef,
seconds: listSecondsRef
};
const spinnerItems = vue.computed(() => {
return props.showSeconds ? constants.timeUnits : constants.timeUnits.slice(0, 2);
});
const timePartials = vue.computed(() => {
const { spinnerDate } = props;
const hours = spinnerDate.hour();
const minutes = spinnerDate.minute();
const seconds = spinnerDate.second();
return { hours, minutes, seconds };
});
const timeList = vue.computed(() => {
const { hours, minutes } = vue.unref(timePartials);
const { role, spinnerDate } = props;
const compare = !isRange ? spinnerDate : void 0;
return {
hours: getHoursList(role, compare),
minutes: getMinutesList(hours, role, compare),
seconds: getSecondsList(hours, minutes, role, compare)
};
});
const arrowControlTimeList = vue.computed(() => {
const { hours, minutes, seconds } = vue.unref(timePartials);
return {
hours: utils.buildTimeList(hours, 23),
minutes: utils.buildTimeList(minutes, 59),
seconds: utils.buildTimeList(seconds, 59)
};
});
const debouncedResetScroll = lodashUnified.debounce((type) => {
isScrolling = false;
adjustCurrentSpinner(type);
}, 200);
const getAmPmFlag = (hour) => {
const shouldShowAmPm = !!props.amPmMode;
if (!shouldShowAmPm)
return "";
const isCapital = props.amPmMode === "A";
let content = hour < 12 ? " am" : " pm";
if (isCapital)
content = content.toUpperCase();
return content;
};
const emitSelectRange = (type) => {
let range = [0, 0];
const actualFormat = format || constants.DEFAULT_FORMATS_TIME;
const hourIndex = actualFormat.indexOf("HH");
const minuteIndex = actualFormat.indexOf("mm");
const secondIndex = actualFormat.indexOf("ss");
switch (type) {
case "hours":
if (hourIndex !== -1) {
range = [hourIndex, hourIndex + 2];
}
break;
case "minutes":
if (minuteIndex !== -1) {
range = [minuteIndex, minuteIndex + 2];
}
break;
case "seconds":
if (secondIndex !== -1) {
range = [secondIndex, secondIndex + 2];
}
break;
}
const [left, right] = range;
emit("select-range", left, right);
currentScrollbar.value = type;
};
const adjustCurrentSpinner = (type) => {
adjustSpinner(type, vue.unref(timePartials)[type]);
};
const adjustSpinners = () => {
adjustCurrentSpinner("hours");
adjustCurrentSpinner("minutes");
adjustCurrentSpinner("seconds");
};
const getScrollbarElement = (el) => el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`);
const adjustSpinner = (type, value) => {
if (props.arrowControl)
return;
const scrollbar = vue.unref(listRefsMap[type]);
if (scrollbar && scrollbar.$el) {
getScrollbarElement(scrollbar.$el).scrollTop = Math.max(0, value * typeItemHeight(type));
}
};
const typeItemHeight = (type) => {
const scrollbar = vue.unref(listRefsMap[type]);
const listItem = scrollbar == null ? void 0 : scrollbar.$el.querySelector("li");
if (listItem) {
return Number.parseFloat(style.getStyle(listItem, "height")) || 0;
}
return 0;
};
const onIncrement = () => {
scrollDown(1);
};
const onDecrement = () => {
scrollDown(-1);
};
const scrollDown = (step) => {
if (!currentScrollbar.value) {
emitSelectRange("hours");
}
const label = currentScrollbar.value;
const now = vue.unref(timePartials)[label];
const total = currentScrollbar.value === "hours" ? 24 : 60;
const next = findNextUnDisabled(label, now, step, total);
modifyDateField(label, next);
adjustSpinner(label, next);
vue.nextTick(() => emitSelectRange(label));
};
const findNextUnDisabled = (type, now, step, total) => {
let next = (now + step + total) % total;
const list = vue.unref(timeList)[type];
while (list[next] && next !== now) {
next = (next + step + total) % total;
}
return next;
};
const modifyDateField = (type, value) => {
const list = vue.unref(timeList)[type];
const isDisabled = list[value];
if (isDisabled)
return;
const { hours, minutes, seconds } = vue.unref(timePartials);
let changeTo;
switch (type) {
case "hours":
changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds);
break;
case "minutes":
changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds);
break;
case "seconds":
changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value);
break;
}
emit(event.CHANGE_EVENT, changeTo);
};
const handleClick = (type, { value, disabled }) => {
if (!disabled) {
modifyDateField(type, value);
emitSelectRange(type);
adjustSpinner(type, value);
}
};
const handleScroll = (type) => {
const scrollbar = vue.unref(listRefsMap[type]);
if (!scrollbar)
return;
isScrolling = true;
debouncedResetScroll(type);
const value = Math.min(Math.round((getScrollbarElement(scrollbar.$el).scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), type === "hours" ? 23 : 59);
modifyDateField(type, value);
};
const scrollBarHeight = (type) => {
return vue.unref(listRefsMap[type]).$el.offsetHeight;
};
const bindScrollEvent = () => {
const bindFunction = (type) => {
const scrollbar = vue.unref(listRefsMap[type]);
if (scrollbar && scrollbar.$el) {
getScrollbarElement(scrollbar.$el).onscroll = () => {
handleScroll(type);
};
}
};
bindFunction("hours");
bindFunction("minutes");
bindFunction("seconds");
};
vue.onMounted(() => {
vue.nextTick(() => {
!props.arrowControl && bindScrollEvent();
adjustSpinners();
if (props.role === "start")
emitSelectRange("hours");
});
});
const setRef = (scrollbar, type) => {
listRefsMap[type].value = scrollbar != null ? scrollbar : void 0;
};
emit("set-option", [`${props.role}_scrollDown`, scrollDown]);
emit("set-option", [`${props.role}_emitSelectRange`, emitSelectRange]);
vue.watch(() => props.spinnerDate, () => {
if (isScrolling)
return;
adjustSpinners();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b("spinner"), { "has-seconds": _ctx.showSeconds }])
}, [
!_ctx.arrowControl ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(vue.unref(spinnerItems), (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.ElScrollbar), {
key: item,
ref_for: true,
ref: (scrollbar) => setRef(scrollbar, item),
class: vue.normalizeClass(vue.unref(ns).be("spinner", "wrapper")),
"wrap-style": "max-height: inherit;",
"view-class": vue.unref(ns).be("spinner", "list"),
noresize: "",
tag: "ul",
onMouseenter: ($event) => emitSelectRange(item),
onMousemove: ($event) => adjustCurrentSpinner(item)
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(timeList)[item], (disabled, key) => {
return vue.openBlock(), vue.createElementBlock("li", {
key,
class: vue.normalizeClass([
vue.unref(ns).be("spinner", "item"),
vue.unref(ns).is("active", key === vue.unref(timePartials)[item]),
vue.unref(ns).is("disabled", disabled)
]),
onClick: ($event) => handleClick(item, { value: key, disabled })
}, [
item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + vue.toDisplayString(getAmPmFlag(key)), 1)
], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createTextVNode(vue.toDisplayString(("0" + key).slice(-2)), 1)
], 64))
], 10, ["onClick"]);
}), 128))
]),
_: 2
}, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]);
}), 128)) : vue.createCommentVNode("v-if", true),
_ctx.arrowControl ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(vue.unref(spinnerItems), (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item,
class: vue.normalizeClass([vue.unref(ns).be("spinner", "wrapper"), vue.unref(ns).is("arrow")]),
onMouseenter: ($event) => emitSelectRange(item)
}, [
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$2.ElIcon), {
class: vue.normalizeClass(["arrow-up", vue.unref(ns).be("spinner", "arrow")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.ArrowUp))
]),
_: 1
}, 8, ["class"])), [
[vue.unref(index$3.vRepeatClick), onDecrement]
]),
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$2.ElIcon), {
class: vue.normalizeClass(["arrow-down", vue.unref(ns).be("spinner", "arrow")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.ArrowDown))
]),
_: 1
}, 8, ["class"])), [
[vue.unref(index$3.vRepeatClick), onIncrement]
]),
vue.createElementVNode("ul", {
class: vue.normalizeClass(vue.unref(ns).be("spinner", "list"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(arrowControlTimeList)[item], (time, key) => {
return vue.openBlock(), vue.createElementBlock("li", {
key,
class: vue.normalizeClass([
vue.unref(ns).be("spinner", "item"),
vue.unref(ns).is("active", time === vue.unref(timePartials)[item]),
vue.unref(ns).is("disabled", vue.unref(timeList)[item][time])
])
}, [
vue.unref(types.isNumber)(time) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + vue.toDisplayString(getAmPmFlag(time)), 1)
], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createTextVNode(vue.toDisplayString(("0" + time).slice(-2)), 1)
], 64))
], 64)) : vue.createCommentVNode("v-if", true)
], 2);
}), 128))
], 2)
], 42, ["onMouseenter"]);
}), 128)) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var TimeSpinner = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "basic-time-spinner.vue"]]);
exports["default"] = TimeSpinner;
//# sourceMappingURL=basic-time-spinner.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,82 @@
declare const _default: import("vue").DefineComponent<{
readonly disabledHours: {
readonly type: import("vue").PropType<import("element-plus").GetDisabledHours>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabledMinutes: {
readonly type: import("vue").PropType<import("element-plus").GetDisabledMinutes>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabledSeconds: {
readonly type: import("vue").PropType<import("element-plus").GetDisabledSeconds>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly role: {
readonly type: import("vue").PropType<string>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly spinnerDate: {
readonly type: import("vue").PropType<import("dayjs").Dayjs>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showSeconds: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly arrowControl: BooleanConstructor;
readonly amPmMode: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "" | "a" | "A") | (() => "" | "a" | "A") | ((new (...args: any[]) => "" | "a" | "A") | (() => "" | "a" | "A"))[], unknown, unknown, "", boolean>;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
change: (...args: any[]) => void;
"select-range": (...args: any[]) => void;
"set-option": (...args: any[]) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly disabledHours: {
readonly type: import("vue").PropType<import("element-plus").GetDisabledHours>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabledMinutes: {
readonly type: import("vue").PropType<import("element-plus").GetDisabledMinutes>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabledSeconds: {
readonly type: import("vue").PropType<import("element-plus").GetDisabledSeconds>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly role: {
readonly type: import("vue").PropType<string>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly spinnerDate: {
readonly type: import("vue").PropType<import("dayjs").Dayjs>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showSeconds: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly arrowControl: BooleanConstructor;
readonly amPmMode: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "" | "a" | "A") | (() => "" | "a" | "A") | ((new (...args: any[]) => "" | "a" | "A") | (() => "" | "a" | "A"))[], unknown, unknown, "", boolean>;
}>> & {
onChange?: ((...args: any[]) => any) | undefined;
"onSelect-range"?: ((...args: any[]) => any) | undefined;
"onSet-option"?: ((...args: any[]) => any) | undefined;
}, {
readonly arrowControl: boolean;
readonly showSeconds: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly amPmMode: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "" | "a" | "A") | (() => "" | "a" | "A") | ((new (...args: any[]) => "" | "a" | "A") | (() => "" | "a" | "A"))[], unknown, unknown>;
}>;
export default _default;

View File

@@ -0,0 +1,193 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var dayjs = require('dayjs');
var constants = require('../constants.js');
var panelTimePicker = require('../props/panel-time-picker.js');
var useTimePanel = require('../composables/use-time-panel.js');
var useTimePicker = require('../composables/use-time-picker.js');
var basicTimeSpinner = require('./basic-time-spinner.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../../hooks/use-namespace/index.js');
var index$1 = require('../../../../hooks/use-locale/index.js');
var types = require('../../../../utils/types.js');
var aria = require('../../../../constants/aria.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "panel-time-pick",
props: panelTimePicker.panelTimePickerProps,
emits: ["pick", "select-range", "set-picker-option"],
setup(__props, { emit }) {
const props = __props;
const pickerBase = vue.inject(constants.PICKER_BASE_INJECTION_KEY);
const {
arrowControl,
disabledHours,
disabledMinutes,
disabledSeconds,
defaultValue
} = pickerBase.props;
const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = useTimePicker.buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);
const ns = index.useNamespace("time");
const { t, lang } = index$1.useLocale();
const selectionRange = vue.ref([0, 2]);
const oldValue = useTimePicker.useOldValue(props);
const transitionName = vue.computed(() => {
return types.isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
});
const showSeconds = vue.computed(() => {
return props.format.includes("ss");
});
const amPmMode = vue.computed(() => {
if (props.format.includes("A"))
return "A";
if (props.format.includes("a"))
return "a";
return "";
});
const isValidValue = (_date) => {
const parsedDate = dayjs__default["default"](_date).locale(lang.value);
const result = getRangeAvailableTime(parsedDate);
return parsedDate.isSame(result);
};
const handleCancel = () => {
emit("pick", oldValue.value, false);
};
const handleConfirm = (visible = false, first = false) => {
if (first)
return;
emit("pick", props.parsedValue, visible);
};
const handleChange = (_date) => {
if (!props.visible) {
return;
}
const result = getRangeAvailableTime(_date).millisecond(0);
emit("pick", result, true);
};
const setSelectionRange = (start, end) => {
emit("select-range", start, end);
selectionRange.value = [start, end];
};
const changeSelectionRange = (step) => {
const actualFormat = props.format;
const hourIndex = actualFormat.indexOf("HH");
const minuteIndex = actualFormat.indexOf("mm");
const secondIndex = actualFormat.indexOf("ss");
const list = [];
const mapping = [];
if (hourIndex !== -1) {
list.push(hourIndex);
mapping.push("hours");
}
if (minuteIndex !== -1) {
list.push(minuteIndex);
mapping.push("minutes");
}
if (secondIndex !== -1 && showSeconds.value) {
list.push(secondIndex);
mapping.push("seconds");
}
const index = list.indexOf(selectionRange.value[0]);
const next = (index + step + list.length) % list.length;
timePickerOptions["start_emitSelectRange"](mapping[next]);
};
const handleKeydown = (event) => {
const code = event.code;
const { left, right, up, down } = aria.EVENT_CODE;
if ([left, right].includes(code)) {
const step = code === left ? -1 : 1;
changeSelectionRange(step);
event.preventDefault();
return;
}
if ([up, down].includes(code)) {
const step = code === up ? -1 : 1;
timePickerOptions["start_scrollDown"](step);
event.preventDefault();
return;
}
};
const { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel.useTimePanel({
getAvailableHours,
getAvailableMinutes,
getAvailableSeconds
});
const getRangeAvailableTime = (date) => {
return getAvailableTime(date, props.datetimeRole || "", true);
};
const parseUserInput = (value) => {
if (!value)
return null;
return dayjs__default["default"](value, props.format).locale(lang.value);
};
const formatToString = (value) => {
if (!value)
return null;
return value.format(props.format);
};
const getDefaultValue = () => {
return dayjs__default["default"](defaultValue).locale(lang.value);
};
emit("set-picker-option", ["isValidValue", isValidValue]);
emit("set-picker-option", ["formatToString", formatToString]);
emit("set-picker-option", ["parseUserInput", parseUserInput]);
emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, { name: vue.unref(transitionName) }, {
default: vue.withCtx(() => [
_ctx.actualVisible || _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).b("panel"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).be("panel", "content"), { "has-seconds": vue.unref(showSeconds) }])
}, [
vue.createVNode(basicTimeSpinner["default"], {
ref: "spinner",
role: _ctx.datetimeRole || "start",
"arrow-control": vue.unref(arrowControl),
"show-seconds": vue.unref(showSeconds),
"am-pm-mode": vue.unref(amPmMode),
"spinner-date": _ctx.parsedValue,
"disabled-hours": vue.unref(disabledHours),
"disabled-minutes": vue.unref(disabledMinutes),
"disabled-seconds": vue.unref(disabledSeconds),
onChange: handleChange,
onSetOption: vue.unref(onSetOption),
onSelectRange: setSelectionRange
}, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).be("panel", "footer"))
}, [
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ns).be("panel", "btn"), "cancel"]),
onClick: handleCancel
}, vue.toDisplayString(vue.unref(t)("el.datepicker.cancel")), 3),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ns).be("panel", "btn"), "confirm"]),
onClick: ($event) => handleConfirm()
}, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 11, ["onClick"])
], 2)
], 2)) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["name"]);
};
}
});
var TimePickPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "panel-time-pick.vue"]]);
exports["default"] = TimePickPanel;
//# sourceMappingURL=panel-time-pick.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,37 @@
import dayjs from 'dayjs';
declare const _default: import("vue").DefineComponent<{
readonly datetimeRole: StringConstructor;
readonly parsedValue: {
readonly type: import("vue").PropType<dayjs.Dayjs>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly visible: BooleanConstructor;
readonly actualVisible: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly format: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"select-range": (...args: any[]) => void;
pick: (...args: any[]) => void;
"set-picker-option": (...args: any[]) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly datetimeRole: StringConstructor;
readonly parsedValue: {
readonly type: import("vue").PropType<dayjs.Dayjs>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly visible: BooleanConstructor;
readonly actualVisible: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly format: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
}>> & {
onPick?: ((...args: any[]) => any) | undefined;
"onSelect-range"?: ((...args: any[]) => any) | undefined;
"onSet-picker-option"?: ((...args: any[]) => any) | undefined;
}, {
readonly visible: boolean;
readonly format: string;
readonly actualVisible: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
}>;
export default _default;

View File

@@ -0,0 +1,297 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var dayjs = require('dayjs');
var lodashUnified = require('lodash-unified');
var constants = require('../constants.js');
var panelTimeRange = require('../props/panel-time-range.js');
var useTimePanel = require('../composables/use-time-panel.js');
var useTimePicker = require('../composables/use-time-picker.js');
var basicTimeSpinner = require('./basic-time-spinner.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../../hooks/use-locale/index.js');
var index$1 = require('../../../../hooks/use-namespace/index.js');
var shared = require('@vue/shared');
var aria = require('../../../../constants/aria.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "panel-time-range",
props: panelTimeRange.panelTimeRangeProps,
emits: ["pick", "select-range", "set-picker-option"],
setup(__props, { emit }) {
const props = __props;
const makeSelectRange = (start, end) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
};
const { t, lang } = index.useLocale();
const nsTime = index$1.useNamespace("time");
const nsPicker = index$1.useNamespace("picker");
const pickerBase = vue.inject(constants.PICKER_BASE_INJECTION_KEY);
const {
arrowControl,
disabledHours,
disabledMinutes,
disabledSeconds,
defaultValue
} = pickerBase.props;
const startContainerKls = vue.computed(() => [
nsTime.be("range-picker", "body"),
nsTime.be("panel", "content"),
nsTime.is("arrow", arrowControl),
showSeconds.value ? "has-seconds" : ""
]);
const endContainerKls = vue.computed(() => [
nsTime.be("range-picker", "body"),
nsTime.be("panel", "content"),
nsTime.is("arrow", arrowControl),
showSeconds.value ? "has-seconds" : ""
]);
const startTime = vue.computed(() => props.parsedValue[0]);
const endTime = vue.computed(() => props.parsedValue[1]);
const oldValue = useTimePicker.useOldValue(props);
const handleCancel = () => {
emit("pick", oldValue.value, false);
};
const showSeconds = vue.computed(() => {
return props.format.includes("ss");
});
const amPmMode = vue.computed(() => {
if (props.format.includes("A"))
return "A";
if (props.format.includes("a"))
return "a";
return "";
});
const handleConfirm = (visible = false) => {
emit("pick", [startTime.value, endTime.value], visible);
};
const handleMinChange = (date) => {
handleChange(date.millisecond(0), endTime.value);
};
const handleMaxChange = (date) => {
handleChange(startTime.value, date.millisecond(0));
};
const isValidValue = (_date) => {
const parsedDate = _date.map((_) => dayjs__default["default"](_).locale(lang.value));
const result = getRangeAvailableTime(parsedDate);
return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1]);
};
const handleChange = (start, end) => {
if (!props.visible) {
return;
}
emit("pick", [start, end], true);
};
const btnConfirmDisabled = vue.computed(() => {
return startTime.value > endTime.value;
});
const selectionRange = vue.ref([0, 2]);
const setMinSelectionRange = (start, end) => {
emit("select-range", start, end, "min");
selectionRange.value = [start, end];
};
const offset = vue.computed(() => showSeconds.value ? 11 : 8);
const setMaxSelectionRange = (start, end) => {
emit("select-range", start, end, "max");
const _offset = vue.unref(offset);
selectionRange.value = [start + _offset, end + _offset];
};
const changeSelectionRange = (step) => {
const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];
const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []);
const index = list.indexOf(selectionRange.value[0]);
const next = (index + step + list.length) % list.length;
const half = list.length / 2;
if (next < half) {
timePickerOptions["start_emitSelectRange"](mapping[next]);
} else {
timePickerOptions["end_emitSelectRange"](mapping[next - half]);
}
};
const handleKeydown = (event) => {
const code = event.code;
const { left, right, up, down } = aria.EVENT_CODE;
if ([left, right].includes(code)) {
const step = code === left ? -1 : 1;
changeSelectionRange(step);
event.preventDefault();
return;
}
if ([up, down].includes(code)) {
const step = code === up ? -1 : 1;
const role = selectionRange.value[0] < offset.value ? "start" : "end";
timePickerOptions[`${role}_scrollDown`](step);
event.preventDefault();
return;
}
};
const disabledHours_ = (role, compare) => {
const defaultDisable = disabledHours ? disabledHours(role) : [];
const isStart = role === "start";
const compareDate = compare || (isStart ? endTime.value : startTime.value);
const compareHour = compareDate.hour();
const nextDisable = isStart ? makeSelectRange(compareHour + 1, 23) : makeSelectRange(0, compareHour - 1);
return lodashUnified.union(defaultDisable, nextDisable);
};
const disabledMinutes_ = (hour, role, compare) => {
const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : [];
const isStart = role === "start";
const compareDate = compare || (isStart ? endTime.value : startTime.value);
const compareHour = compareDate.hour();
if (hour !== compareHour) {
return defaultDisable;
}
const compareMinute = compareDate.minute();
const nextDisable = isStart ? makeSelectRange(compareMinute + 1, 59) : makeSelectRange(0, compareMinute - 1);
return lodashUnified.union(defaultDisable, nextDisable);
};
const disabledSeconds_ = (hour, minute, role, compare) => {
const defaultDisable = disabledSeconds ? disabledSeconds(hour, minute, role) : [];
const isStart = role === "start";
const compareDate = compare || (isStart ? endTime.value : startTime.value);
const compareHour = compareDate.hour();
const compareMinute = compareDate.minute();
if (hour !== compareHour || minute !== compareMinute) {
return defaultDisable;
}
const compareSecond = compareDate.second();
const nextDisable = isStart ? makeSelectRange(compareSecond + 1, 59) : makeSelectRange(0, compareSecond - 1);
return lodashUnified.union(defaultDisable, nextDisable);
};
const getRangeAvailableTime = ([start, end]) => {
return [
getAvailableTime(start, "start", true, end),
getAvailableTime(end, "end", false, start)
];
};
const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = useTimePicker.buildAvailableTimeSlotGetter(disabledHours_, disabledMinutes_, disabledSeconds_);
const {
timePickerOptions,
getAvailableTime,
onSetOption
} = useTimePanel.useTimePanel({
getAvailableHours,
getAvailableMinutes,
getAvailableSeconds
});
const parseUserInput = (days) => {
if (!days)
return null;
if (shared.isArray(days)) {
return days.map((d) => dayjs__default["default"](d, props.format).locale(lang.value));
}
return dayjs__default["default"](days, props.format).locale(lang.value);
};
const formatToString = (days) => {
if (!days)
return null;
if (shared.isArray(days)) {
return days.map((d) => d.format(props.format));
}
return days.format(props.format);
};
const getDefaultValue = () => {
if (shared.isArray(defaultValue)) {
return defaultValue.map((d) => dayjs__default["default"](d).locale(lang.value));
}
const defaultDay = dayjs__default["default"](defaultValue).locale(lang.value);
return [defaultDay, defaultDay.add(60, "m")];
};
emit("set-picker-option", ["formatToString", formatToString]);
emit("set-picker-option", ["parseUserInput", parseUserInput]);
emit("set-picker-option", ["isValidValue", isValidValue]);
emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
return (_ctx, _cache) => {
return _ctx.actualVisible ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([vue.unref(nsTime).b("range-picker"), vue.unref(nsPicker).b("panel")])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "content"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "cell"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "header"))
}, vue.toDisplayString(vue.unref(t)("el.datepicker.startTime")), 3),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(startContainerKls))
}, [
vue.createVNode(basicTimeSpinner["default"], {
ref: "minSpinner",
role: "start",
"show-seconds": vue.unref(showSeconds),
"am-pm-mode": vue.unref(amPmMode),
"arrow-control": vue.unref(arrowControl),
"spinner-date": vue.unref(startTime),
"disabled-hours": disabledHours_,
"disabled-minutes": disabledMinutes_,
"disabled-seconds": disabledSeconds_,
onChange: handleMinChange,
onSetOption: vue.unref(onSetOption),
onSelectRange: setMinSelectionRange
}, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"])
], 2)
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "cell"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "header"))
}, vue.toDisplayString(vue.unref(t)("el.datepicker.endTime")), 3),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(endContainerKls))
}, [
vue.createVNode(basicTimeSpinner["default"], {
ref: "maxSpinner",
role: "end",
"show-seconds": vue.unref(showSeconds),
"am-pm-mode": vue.unref(amPmMode),
"arrow-control": vue.unref(arrowControl),
"spinner-date": vue.unref(endTime),
"disabled-hours": disabledHours_,
"disabled-minutes": disabledMinutes_,
"disabled-seconds": disabledSeconds_,
onChange: handleMaxChange,
onSetOption: vue.unref(onSetOption),
onSelectRange: setMaxSelectionRange
}, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"])
], 2)
], 2)
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("panel", "footer"))
}, [
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "cancel"]),
onClick: ($event) => handleCancel()
}, vue.toDisplayString(vue.unref(t)("el.datepicker.cancel")), 11, ["onClick"]),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "confirm"]),
disabled: vue.unref(btnConfirmDisabled),
onClick: ($event) => handleConfirm()
}, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 11, ["disabled", "onClick"])
], 2)
], 2)) : vue.createCommentVNode("v-if", true);
};
}
});
var TimeRangePanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "panel-time-range.vue"]]);
exports["default"] = TimeRangePanel;
//# sourceMappingURL=panel-time-range.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,35 @@
import dayjs from 'dayjs';
declare const _default: import("vue").DefineComponent<{
readonly parsedValue: {
readonly type: import("vue").PropType<[dayjs.Dayjs, dayjs.Dayjs]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly visible: BooleanConstructor;
readonly actualVisible: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly format: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"select-range": (...args: any[]) => void;
pick: (...args: any[]) => void;
"set-picker-option": (...args: any[]) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly parsedValue: {
readonly type: import("vue").PropType<[dayjs.Dayjs, dayjs.Dayjs]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly visible: BooleanConstructor;
readonly actualVisible: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly format: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
}>> & {
onPick?: ((...args: any[]) => any) | undefined;
"onSelect-range"?: ((...args: any[]) => any) | undefined;
"onSet-picker-option"?: ((...args: any[]) => any) | undefined;
}, {
readonly visible: boolean;
readonly format: string;
readonly actualVisible: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
}>;
export default _default;