element-plus
Version:
A Component Library for Vue 3
235 lines (228 loc) • 8.79 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var dayjs = require('dayjs');
require('../../../../constants/index.js');
require('../../../../hooks/index.js');
require('../../../../utils/index.js');
var basicTimeSpinner = require('./basic-time-spinner.js');
var useTimePicker = require('./useTimePicker.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 = vue.defineComponent({
components: {
TimeSpinner: basicTimeSpinner["default"]
},
props: {
visible: Boolean,
actualVisible: {
type: Boolean,
default: void 0
},
datetimeRole: {
type: String
},
parsedValue: {
type: [Object, String]
},
format: {
type: String,
default: ""
}
},
emits: ["pick", "select-range", "set-picker-option"],
setup(props, ctx) {
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 = () => {
ctx.emit("pick", oldValue.value, false);
};
const handleConfirm = (visible = false, first = false) => {
if (first)
return;
ctx.emit("pick", props.parsedValue, visible);
};
const handleChange = (_date) => {
if (!props.visible) {
return;
}
const result = getRangeAvailableTime(_date).millisecond(0);
ctx.emit("pick", result, true);
};
const setSelectionRange = (start, end) => {
ctx.emit("select-range", start, end);
selectionRange.value = [start, end];
};
const changeSelectionRange = (step) => {
const list = [0, 3].concat(showSeconds.value ? [6] : []);
const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["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;
if (code === aria.EVENT_CODE.left || code === aria.EVENT_CODE.right) {
const step = code === aria.EVENT_CODE.left ? -1 : 1;
changeSelectionRange(step);
event.preventDefault();
return;
}
if (code === aria.EVENT_CODE.up || code === aria.EVENT_CODE.down) {
const step = code === aria.EVENT_CODE.up ? -1 : 1;
timePickerOptions["start_scrollDown"](step);
event.preventDefault();
return;
}
};
const getRangeAvailableTime = (date) => {
const availableMap = {
hour: getAvailableHours,
minute: getAvailableMinutes,
second: getAvailableSeconds
};
let result = date;
["hour", "minute", "second"].forEach((_) => {
if (availableMap[_]) {
let availableArr;
const method = availableMap[_];
if (_ === "minute") {
availableArr = method(result.hour(), props.datetimeRole);
} else if (_ === "second") {
availableArr = method(result.hour(), result.minute(), props.datetimeRole);
} else {
availableArr = method(props.datetimeRole);
}
if (availableArr && availableArr.length && !availableArr.includes(result[_]())) {
result = result[_](availableArr[0]);
}
}
});
return result;
};
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);
};
ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
ctx.emit("set-picker-option", ["formatToString", formatToString]);
ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
ctx.emit("set-picker-option", ["handleKeydown", handleKeydown]);
ctx.emit("set-picker-option", [
"getRangeAvailableTime",
getRangeAvailableTime
]);
ctx.emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
const timePickerOptions = {};
const onSetOption = (e) => {
timePickerOptions[e[0]] = e[1];
};
const pickerBase = vue.inject("EP_PICKER_BASE");
const {
arrowControl,
disabledHours,
disabledMinutes,
disabledSeconds,
defaultValue
} = pickerBase.props;
const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = useTimePicker.getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds);
return {
ns,
transitionName,
arrowControl,
onSetOption,
t,
handleConfirm,
handleChange,
setSelectionRange,
amPmMode,
showSeconds,
handleCancel,
disabledHours,
disabledMinutes,
disabledSeconds
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_time_spinner = vue.resolveComponent("time-spinner");
return vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, {
default: vue.withCtx(() => [
_ctx.actualVisible || _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.ns.b("panel"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([_ctx.ns.be("panel", "content"), { "has-seconds": _ctx.showSeconds }])
}, [
vue.createVNode(_component_time_spinner, {
ref: "spinner",
role: _ctx.datetimeRole || "start",
"arrow-control": _ctx.arrowControl,
"show-seconds": _ctx.showSeconds,
"am-pm-mode": _ctx.amPmMode,
"spinner-date": _ctx.parsedValue,
"disabled-hours": _ctx.disabledHours,
"disabled-minutes": _ctx.disabledMinutes,
"disabled-seconds": _ctx.disabledSeconds,
onChange: _ctx.handleChange,
onSetOption: _ctx.onSetOption,
onSelectRange: _ctx.setSelectionRange
}, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onChange", "onSetOption", "onSelectRange"])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.be("panel", "footer"))
}, [
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([_ctx.ns.be("panel", "btn"), "cancel"]),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
}, vue.toDisplayString(_ctx.t("el.datepicker.cancel")), 3),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([_ctx.ns.be("panel", "btn"), "confirm"]),
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleConfirm())
}, vue.toDisplayString(_ctx.t("el.datepicker.confirm")), 3)
], 2)
], 2)) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["name"]);
}
var TimePickPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"]]);
exports["default"] = TimePickPanel;
//# sourceMappingURL=panel-time-pick.js.map