| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588 |
- 'use strict';
- Object.defineProperty(exports, '__esModule', { value: true });
- var vue = require('vue');
- var core = require('@vueuse/core');
- var index$4 = require('../../../input/index.js');
- var index$5 = require('../../../icon/index.js');
- var index$3 = require('../../../tooltip/index.js');
- var iconsVue = require('@element-plus/icons-vue');
- var utils = require('../utils.js');
- var constants = require('../constants.js');
- var useCommonPicker = require('../composables/use-common-picker.js');
- var props = require('./props.js');
- var pickerRangeTrigger = require('./picker-range-trigger.js');
- var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
- var index$1 = require('../../../../hooks/use-empty-values/index.js');
- var event = require('../../../../constants/event.js');
- var index = require('../../../../hooks/use-namespace/index.js');
- var useFormItem = require('../../../form/src/hooks/use-form-item.js');
- var useFormCommonProps = require('../../../form/src/hooks/use-form-common-props.js');
- var index$2 = require('../../../../hooks/use-focus-controller/index.js');
- var error = require('../../../../utils/error.js');
- var shared = require('@vue/shared');
- var aria = require('../../../../constants/aria.js');
- const __default__ = vue.defineComponent({
- name: "Picker"
- });
- const _sfc_main = /* @__PURE__ */ vue.defineComponent({
- ...__default__,
- props: props.timePickerDefaultProps,
- emits: [
- event.UPDATE_MODEL_EVENT,
- event.CHANGE_EVENT,
- "focus",
- "blur",
- "clear",
- "calendar-change",
- "panel-change",
- "visible-change",
- "keydown"
- ],
- setup(__props, { expose, emit }) {
- const props = __props;
- const attrs = vue.useAttrs();
- const nsDate = index.useNamespace("date");
- const nsInput = index.useNamespace("input");
- const nsRange = index.useNamespace("range");
- const { formItem } = useFormItem.useFormItem();
- const elPopperOptions = vue.inject(constants.PICKER_POPPER_OPTIONS_INJECTION_KEY, {});
- const emptyValues = index$1.useEmptyValues(props, null);
- const refPopper = vue.ref();
- const inputRef = vue.ref();
- const valueOnOpen = vue.ref(null);
- let hasJustTabExitedInput = false;
- const pickerDisabled = useFormCommonProps.useFormDisabled();
- const commonPicker = useCommonPicker.useCommonPicker(props, emit);
- const {
- parsedValue,
- pickerActualVisible,
- userInput,
- pickerVisible,
- pickerOptions,
- valueIsEmpty,
- emitInput,
- onPick,
- onSetPickerOption,
- onCalendarChange,
- onPanelChange
- } = commonPicker;
- const { isFocused, handleFocus, handleBlur } = index$2.useFocusController(inputRef, {
- disabled: pickerDisabled,
- beforeFocus() {
- return props.readonly;
- },
- afterFocus() {
- pickerVisible.value = true;
- },
- beforeBlur(event) {
- var _a;
- return !hasJustTabExitedInput && ((_a = refPopper.value) == null ? void 0 : _a.isFocusInsideContent(event));
- },
- afterBlur() {
- handleChange();
- pickerVisible.value = false;
- hasJustTabExitedInput = false;
- props.validateEvent && (formItem == null ? void 0 : formItem.validate("blur").catch((err) => error.debugWarn()));
- }
- });
- const hovering = vue.ref(false);
- const rangeInputKls = vue.computed(() => [
- nsDate.b("editor"),
- nsDate.bm("editor", props.type),
- nsInput.e("wrapper"),
- nsDate.is("disabled", pickerDisabled.value),
- nsDate.is("active", pickerVisible.value),
- nsRange.b("editor"),
- pickerSize ? nsRange.bm("editor", pickerSize.value) : "",
- attrs.class
- ]);
- const clearIconKls = vue.computed(() => [
- nsInput.e("icon"),
- nsRange.e("close-icon"),
- !showClearBtn.value ? nsRange.e("close-icon--hidden") : ""
- ]);
- vue.watch(pickerVisible, (val) => {
- if (!val) {
- userInput.value = null;
- vue.nextTick(() => {
- emitChange(props.modelValue);
- });
- } else {
- vue.nextTick(() => {
- if (val) {
- valueOnOpen.value = props.modelValue;
- }
- });
- }
- });
- const emitChange = (val, isClear) => {
- if (isClear || !utils.valueEquals(val, valueOnOpen.value)) {
- emit(event.CHANGE_EVENT, val);
- isClear && (valueOnOpen.value = val);
- props.validateEvent && (formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn()));
- }
- };
- const emitKeydown = (e) => {
- emit("keydown", e);
- };
- const refInput = vue.computed(() => {
- if (inputRef.value) {
- return Array.from(inputRef.value.$el.querySelectorAll("input"));
- }
- return [];
- });
- const setSelectionRange = (start, end, pos) => {
- const _inputs = refInput.value;
- if (!_inputs.length)
- return;
- if (!pos || pos === "min") {
- _inputs[0].setSelectionRange(start, end);
- _inputs[0].focus();
- } else if (pos === "max") {
- _inputs[1].setSelectionRange(start, end);
- _inputs[1].focus();
- }
- };
- const onBeforeShow = () => {
- pickerActualVisible.value = true;
- };
- const onShow = () => {
- emit("visible-change", true);
- };
- const onHide = () => {
- pickerActualVisible.value = false;
- pickerVisible.value = false;
- emit("visible-change", false);
- };
- const handleOpen = () => {
- pickerVisible.value = true;
- };
- const handleClose = () => {
- pickerVisible.value = false;
- };
- const displayValue = vue.computed(() => {
- if (!pickerOptions.value.panelReady)
- return "";
- const formattedValue = formatDayjsToString(parsedValue.value);
- if (shared.isArray(userInput.value)) {
- return [
- userInput.value[0] || formattedValue && formattedValue[0] || "",
- userInput.value[1] || formattedValue && formattedValue[1] || ""
- ];
- } else if (userInput.value !== null) {
- return userInput.value;
- }
- if (!isTimePicker.value && valueIsEmpty.value)
- return "";
- if (!pickerVisible.value && valueIsEmpty.value)
- return "";
- if (formattedValue) {
- return isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value ? formattedValue.join(", ") : formattedValue;
- }
- return "";
- });
- const isTimeLikePicker = vue.computed(() => props.type.includes("time"));
- const isTimePicker = vue.computed(() => props.type.startsWith("time"));
- const isDatesPicker = vue.computed(() => props.type === "dates");
- const isMonthsPicker = vue.computed(() => props.type === "months");
- const isYearsPicker = vue.computed(() => props.type === "years");
- const triggerIcon = vue.computed(() => props.prefixIcon || (isTimeLikePicker.value ? iconsVue.Clock : iconsVue.Calendar));
- const showClearBtn = vue.computed(() => props.clearable && !pickerDisabled.value && !props.readonly && !valueIsEmpty.value && (hovering.value || isFocused.value));
- const onClearIconClick = (event) => {
- if (props.readonly || pickerDisabled.value)
- return;
- if (showClearBtn.value) {
- event.stopPropagation();
- if (pickerOptions.value.handleClear) {
- pickerOptions.value.handleClear();
- } else {
- emitInput(emptyValues.valueOnClear.value);
- }
- emitChange(emptyValues.valueOnClear.value, true);
- onHide();
- }
- emit("clear");
- };
- const onMouseDownInput = async (event) => {
- var _a;
- if (props.readonly || pickerDisabled.value)
- return;
- if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || isFocused.value) {
- pickerVisible.value = true;
- }
- };
- const onMouseEnter = () => {
- if (props.readonly || pickerDisabled.value)
- return;
- if (!valueIsEmpty.value && props.clearable) {
- hovering.value = true;
- }
- };
- const onMouseLeave = () => {
- hovering.value = false;
- };
- const onTouchStartInput = (event) => {
- var _a;
- if (props.readonly || pickerDisabled.value)
- return;
- if (((_a = event.touches[0].target) == null ? void 0 : _a.tagName) !== "INPUT" || isFocused.value) {
- pickerVisible.value = true;
- }
- };
- const isRangeInput = vue.computed(() => {
- return props.type.includes("range");
- });
- const pickerSize = useFormCommonProps.useFormSize();
- const popperEl = vue.computed(() => {
- var _a, _b;
- return (_b = (_a = vue.unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
- });
- const stophandle = core.onClickOutside(inputRef, (e) => {
- const unrefedPopperEl = vue.unref(popperEl);
- const inputEl = core.unrefElement(inputRef);
- if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || inputEl && e.composedPath().includes(inputEl))
- return;
- pickerVisible.value = false;
- });
- vue.onBeforeUnmount(() => {
- stophandle == null ? void 0 : stophandle();
- });
- const handleChange = () => {
- if (userInput.value) {
- const value = parseUserInputToDayjs(displayValue.value);
- if (value) {
- if (isValidValue(value)) {
- emitInput(utils.dayOrDaysToDate(value));
- userInput.value = null;
- }
- }
- }
- if (userInput.value === "") {
- emitInput(emptyValues.valueOnClear.value);
- emitChange(emptyValues.valueOnClear.value, true);
- userInput.value = null;
- }
- };
- const parseUserInputToDayjs = (value) => {
- if (!value)
- return null;
- return pickerOptions.value.parseUserInput(value);
- };
- const formatDayjsToString = (value) => {
- if (!value)
- return null;
- return pickerOptions.value.formatToString(value);
- };
- const isValidValue = (value) => {
- return pickerOptions.value.isValidValue(value);
- };
- const handleKeydownInput = async (event) => {
- if (props.readonly || pickerDisabled.value)
- return;
- const { code } = event;
- emitKeydown(event);
- if (code === aria.EVENT_CODE.esc) {
- if (pickerVisible.value === true) {
- pickerVisible.value = false;
- event.preventDefault();
- event.stopPropagation();
- }
- return;
- }
- if (code === aria.EVENT_CODE.down) {
- if (pickerOptions.value.handleFocusPicker) {
- event.preventDefault();
- event.stopPropagation();
- }
- if (pickerVisible.value === false) {
- pickerVisible.value = true;
- await vue.nextTick();
- }
- if (pickerOptions.value.handleFocusPicker) {
- pickerOptions.value.handleFocusPicker();
- return;
- }
- }
- if (code === aria.EVENT_CODE.tab) {
- hasJustTabExitedInput = true;
- return;
- }
- if (code === aria.EVENT_CODE.enter || code === aria.EVENT_CODE.numpadEnter) {
- if (userInput.value === null || userInput.value === "" || isValidValue(parseUserInputToDayjs(displayValue.value))) {
- handleChange();
- pickerVisible.value = false;
- }
- event.stopPropagation();
- return;
- }
- if (userInput.value) {
- event.stopPropagation();
- return;
- }
- if (pickerOptions.value.handleKeydownInput) {
- pickerOptions.value.handleKeydownInput(event);
- }
- };
- const onUserInput = (e) => {
- userInput.value = e;
- if (!pickerVisible.value) {
- pickerVisible.value = true;
- }
- };
- const handleStartInput = (event) => {
- const target = event.target;
- if (userInput.value) {
- userInput.value = [target.value, userInput.value[1]];
- } else {
- userInput.value = [target.value, null];
- }
- };
- const handleEndInput = (event) => {
- const target = event.target;
- if (userInput.value) {
- userInput.value = [userInput.value[0], target.value];
- } else {
- userInput.value = [null, target.value];
- }
- };
- const handleStartChange = () => {
- var _a;
- const values = userInput.value;
- const value = parseUserInputToDayjs(values && values[0]);
- const parsedVal = vue.unref(parsedValue);
- if (value && value.isValid()) {
- userInput.value = [
- formatDayjsToString(value),
- ((_a = displayValue.value) == null ? void 0 : _a[1]) || null
- ];
- const newValue = [value, parsedVal && (parsedVal[1] || null)];
- if (isValidValue(newValue)) {
- emitInput(utils.dayOrDaysToDate(newValue));
- userInput.value = null;
- }
- }
- };
- const handleEndChange = () => {
- var _a;
- const values = vue.unref(userInput);
- const value = parseUserInputToDayjs(values && values[1]);
- const parsedVal = vue.unref(parsedValue);
- if (value && value.isValid()) {
- userInput.value = [
- ((_a = vue.unref(displayValue)) == null ? void 0 : _a[0]) || null,
- formatDayjsToString(value)
- ];
- const newValue = [parsedVal && parsedVal[0], value];
- if (isValidValue(newValue)) {
- emitInput(utils.dayOrDaysToDate(newValue));
- userInput.value = null;
- }
- }
- };
- const focus = () => {
- var _a;
- (_a = inputRef.value) == null ? void 0 : _a.focus();
- };
- const blur = () => {
- var _a;
- (_a = inputRef.value) == null ? void 0 : _a.blur();
- };
- vue.provide(constants.PICKER_BASE_INJECTION_KEY, {
- props,
- emptyValues
- });
- vue.provide(constants.ROOT_COMMON_PICKER_INJECTION_KEY, commonPicker);
- expose({
- focus,
- blur,
- handleOpen,
- handleClose,
- onPick
- });
- return (_ctx, _cache) => {
- return vue.openBlock(), vue.createBlock(vue.unref(index$3.ElTooltip), vue.mergeProps({
- ref_key: "refPopper",
- ref: refPopper,
- visible: vue.unref(pickerVisible),
- effect: "light",
- pure: "",
- trigger: "click"
- }, _ctx.$attrs, {
- role: "dialog",
- teleported: "",
- transition: `${vue.unref(nsDate).namespace.value}-zoom-in-top`,
- "popper-class": [`${vue.unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass],
- "popper-style": _ctx.popperStyle,
- "popper-options": vue.unref(elPopperOptions),
- "fallback-placements": _ctx.fallbackPlacements,
- "gpu-acceleration": false,
- placement: _ctx.placement,
- "stop-popper-mouse-event": false,
- "hide-after": 0,
- persistent: "",
- onBeforeShow,
- onShow,
- onHide
- }), {
- default: vue.withCtx(() => [
- !vue.unref(isRangeInput) ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElInput), {
- key: 0,
- id: _ctx.id,
- ref_key: "inputRef",
- ref: inputRef,
- "container-role": "combobox",
- "model-value": vue.unref(displayValue),
- name: _ctx.name,
- size: vue.unref(pickerSize),
- disabled: vue.unref(pickerDisabled),
- placeholder: _ctx.placeholder,
- class: vue.normalizeClass([
- vue.unref(nsDate).b("editor"),
- vue.unref(nsDate).bm("editor", _ctx.type),
- vue.unref(nsDate).is("focus", vue.unref(pickerVisible)),
- _ctx.$attrs.class
- ]),
- style: vue.normalizeStyle(_ctx.$attrs.style),
- readonly: !_ctx.editable || _ctx.readonly || vue.unref(isDatesPicker) || vue.unref(isMonthsPicker) || vue.unref(isYearsPicker) || _ctx.type === "week",
- "aria-label": _ctx.ariaLabel,
- tabindex: _ctx.tabindex,
- "validate-event": false,
- onInput: onUserInput,
- onFocus: vue.unref(handleFocus),
- onBlur: vue.unref(handleBlur),
- onKeydown: handleKeydownInput,
- onChange: handleChange,
- onMousedown: onMouseDownInput,
- onMouseenter: onMouseEnter,
- onMouseleave: onMouseLeave,
- onTouchstartPassive: onTouchStartInput,
- onClick: vue.withModifiers(() => {
- }, ["stop"])
- }, {
- prefix: vue.withCtx(() => [
- vue.unref(triggerIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.ElIcon), {
- key: 0,
- class: vue.normalizeClass(vue.unref(nsInput).e("icon")),
- onMousedown: vue.withModifiers(onMouseDownInput, ["prevent"]),
- onTouchstartPassive: onTouchStartInput
- }, {
- default: vue.withCtx(() => [
- (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(triggerIcon))))
- ]),
- _: 1
- }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true)
- ]),
- suffix: vue.withCtx(() => [
- vue.unref(showClearBtn) && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.ElIcon), {
- key: 0,
- class: vue.normalizeClass(`${vue.unref(nsInput).e("icon")} clear-icon`),
- onMousedown: vue.withModifiers(vue.unref(shared.NOOP), ["prevent"]),
- onClick: onClearIconClick
- }, {
- default: vue.withCtx(() => [
- (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
- ]),
- _: 1
- }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true)
- ]),
- _: 1
- }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onFocus", "onBlur", "onClick"])) : (vue.openBlock(), vue.createBlock(pickerRangeTrigger["default"], {
- key: 1,
- id: _ctx.id,
- ref_key: "inputRef",
- ref: inputRef,
- "model-value": vue.unref(displayValue),
- name: _ctx.name,
- disabled: vue.unref(pickerDisabled),
- readonly: !_ctx.editable || _ctx.readonly,
- "start-placeholder": _ctx.startPlaceholder,
- "end-placeholder": _ctx.endPlaceholder,
- class: vue.normalizeClass(vue.unref(rangeInputKls)),
- style: vue.normalizeStyle(_ctx.$attrs.style),
- "aria-label": _ctx.ariaLabel,
- tabindex: _ctx.tabindex,
- autocomplete: "off",
- role: "combobox",
- onClick: onMouseDownInput,
- onFocus: vue.unref(handleFocus),
- onBlur: vue.unref(handleBlur),
- onStartInput: handleStartInput,
- onStartChange: handleStartChange,
- onEndInput: handleEndInput,
- onEndChange: handleEndChange,
- onMousedown: onMouseDownInput,
- onMouseenter: onMouseEnter,
- onMouseleave: onMouseLeave,
- onTouchstartPassive: onTouchStartInput,
- onKeydown: handleKeydownInput
- }, {
- prefix: vue.withCtx(() => [
- vue.unref(triggerIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.ElIcon), {
- key: 0,
- class: vue.normalizeClass([vue.unref(nsInput).e("icon"), vue.unref(nsRange).e("icon")])
- }, {
- default: vue.withCtx(() => [
- (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(triggerIcon))))
- ]),
- _: 1
- }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
- ]),
- "range-separator": vue.withCtx(() => [
- vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [
- vue.createElementVNode("span", {
- class: vue.normalizeClass(vue.unref(nsRange).b("separator"))
- }, vue.toDisplayString(_ctx.rangeSeparator), 3)
- ])
- ]),
- suffix: vue.withCtx(() => [
- _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.ElIcon), {
- key: 0,
- class: vue.normalizeClass(vue.unref(clearIconKls)),
- onMousedown: vue.withModifiers(vue.unref(shared.NOOP), ["prevent"]),
- onClick: onClearIconClick
- }, {
- default: vue.withCtx(() => [
- (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
- ]),
- _: 1
- }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true)
- ]),
- _: 3
- }, 8, ["id", "model-value", "name", "disabled", "readonly", "start-placeholder", "end-placeholder", "class", "style", "aria-label", "tabindex", "onFocus", "onBlur"]))
- ]),
- content: vue.withCtx(() => [
- vue.renderSlot(_ctx.$slots, "default", {
- visible: vue.unref(pickerVisible),
- actualVisible: vue.unref(pickerActualVisible),
- parsedValue: vue.unref(parsedValue),
- format: _ctx.format,
- dateFormat: _ctx.dateFormat,
- timeFormat: _ctx.timeFormat,
- unlinkPanels: _ctx.unlinkPanels,
- type: _ctx.type,
- defaultValue: _ctx.defaultValue,
- showNow: _ctx.showNow,
- showConfirm: _ctx.showConfirm,
- showFooter: _ctx.showFooter,
- showWeekNumber: _ctx.showWeekNumber,
- onPick: vue.unref(onPick),
- onSelectRange: setSelectionRange,
- onSetPickerOption: vue.unref(onSetPickerOption),
- onCalendarChange: vue.unref(onCalendarChange),
- onPanelChange: vue.unref(onPanelChange),
- onMousedown: vue.withModifiers(() => {
- }, ["stop"])
- })
- ]),
- _: 3
- }, 16, ["visible", "transition", "popper-class", "popper-style", "popper-options", "fallback-placements", "placement"]);
- };
- }
- });
- var CommonPicker = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "picker.vue"]]);
- exports["default"] = CommonPicker;
- //# sourceMappingURL=picker.js.map
|