element-plus
Version:
A Component Library for Vue 3
629 lines (626 loc) • 23.2 kB
JavaScript
import { defineComponent, useAttrs, inject, ref, computed, watch, nextTick, unref, onBeforeUnmount, provide, openBlock, createBlock, mergeProps, withCtx, normalizeClass, normalizeStyle, withModifiers, resolveDynamicComponent, createCommentVNode, renderSlot, createElementVNode, toDisplayString } from 'vue';
import { isEqual } from 'lodash-unified';
import { onClickOutside, unrefElement } from '@vueuse/core';
import { ElInput } from '../../../input/index.mjs';
import { ElIcon } from '../../../icon/index.mjs';
import { ElTooltip } from '../../../tooltip/index.mjs';
import { Clock, Calendar } from '@element-plus/icons-vue';
import { valueEquals, parseDate, dayOrDaysToDate, formatter } from '../utils.mjs';
import { timePickerDefaultProps } from './props.mjs';
import PickerRangeTrigger from './picker-range-trigger.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { useEmptyValues } from '../../../../hooks/use-empty-values/index.mjs';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../../constants/event.mjs';
import { useLocale } from '../../../../hooks/use-locale/index.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { useFormItem } from '../../../form/src/hooks/use-form-item.mjs';
import { useFocusController } from '../../../../hooks/use-focus-controller/index.mjs';
import { debugWarn } from '../../../../utils/error.mjs';
import { isArray, NOOP } from '@vue/shared';
import { useFormSize } from '../../../form/src/hooks/use-form-common-props.mjs';
import { EVENT_CODE } from '../../../../constants/aria.mjs';
const __default__ = defineComponent({
name: "Picker"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: timePickerDefaultProps,
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
"focus",
"blur",
"clear",
"calendar-change",
"panel-change",
"visible-change",
"keydown"
],
setup(__props, { expose, emit }) {
const props = __props;
const attrs = useAttrs();
const { lang } = useLocale();
const nsDate = useNamespace("date");
const nsInput = useNamespace("input");
const nsRange = useNamespace("range");
const { form, formItem } = useFormItem();
const elPopperOptions = inject("ElPopperOptions", {});
const { valueOnClear } = useEmptyValues(props, null);
const refPopper = ref();
const inputRef = ref();
const pickerVisible = ref(false);
const pickerActualVisible = ref(false);
const valueOnOpen = ref(null);
let hasJustTabExitedInput = false;
const { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
beforeFocus() {
return props.readonly || pickerDisabled.value;
},
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) => debugWarn(err)));
}
});
const rangeInputKls = 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 = computed(() => [
nsInput.e("icon"),
nsRange.e("close-icon"),
!showClose.value ? nsRange.e("close-icon--hidden") : ""
]);
watch(pickerVisible, (val) => {
if (!val) {
userInput.value = null;
nextTick(() => {
emitChange(props.modelValue);
});
} else {
nextTick(() => {
if (val) {
valueOnOpen.value = props.modelValue;
}
});
}
});
const emitChange = (val, isClear) => {
if (isClear || !valueEquals(val, valueOnOpen.value)) {
emit(CHANGE_EVENT, val);
isClear && (valueOnOpen.value = val);
props.validateEvent && (formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err)));
}
};
const emitInput = (input) => {
if (!valueEquals(props.modelValue, input)) {
let formatted;
if (isArray(input)) {
formatted = input.map((item) => formatter(item, props.valueFormat, lang.value));
} else if (input) {
formatted = formatter(input, props.valueFormat, lang.value);
}
emit(UPDATE_MODEL_EVENT, input ? formatted : input, lang.value);
}
};
const emitKeydown = (e) => {
emit("keydown", e);
};
const refInput = 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 onPick = (date = "", visible = false) => {
pickerVisible.value = visible;
let result;
if (isArray(date)) {
result = date.map((_) => _.toDate());
} else {
result = date ? date.toDate() : date;
}
userInput.value = null;
emitInput(result);
};
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 pickerDisabled = computed(() => {
return props.disabled || (form == null ? void 0 : form.disabled);
});
const parsedValue = computed(() => {
let dayOrDays;
if (valueIsEmpty.value) {
if (pickerOptions.value.getDefaultValue) {
dayOrDays = pickerOptions.value.getDefaultValue();
}
} else {
if (isArray(props.modelValue)) {
dayOrDays = props.modelValue.map((d) => parseDate(d, props.valueFormat, lang.value));
} else {
dayOrDays = parseDate(props.modelValue, props.valueFormat, lang.value);
}
}
if (pickerOptions.value.getRangeAvailableTime) {
const availableResult = pickerOptions.value.getRangeAvailableTime(dayOrDays);
if (!isEqual(availableResult, dayOrDays)) {
dayOrDays = availableResult;
if (!valueIsEmpty.value) {
emitInput(dayOrDaysToDate(dayOrDays));
}
}
}
if (isArray(dayOrDays) && dayOrDays.some((day) => !day)) {
dayOrDays = [];
}
return dayOrDays;
});
const displayValue = computed(() => {
if (!pickerOptions.value.panelReady)
return "";
const formattedValue = formatDayjsToString(parsedValue.value);
if (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 = computed(() => props.type.includes("time"));
const isTimePicker = computed(() => props.type.startsWith("time"));
const isDatesPicker = computed(() => props.type === "dates");
const isMonthsPicker = computed(() => props.type === "months");
const isYearsPicker = computed(() => props.type === "years");
const triggerIcon = computed(() => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar));
const showClose = ref(false);
const onClearIconClick = (event) => {
if (props.readonly || pickerDisabled.value)
return;
if (showClose.value) {
event.stopPropagation();
if (pickerOptions.value.handleClear) {
pickerOptions.value.handleClear();
} else {
emitInput(valueOnClear.value);
}
emitChange(valueOnClear.value, true);
showClose.value = false;
onHide();
}
emit("clear");
};
const valueIsEmpty = computed(() => {
const { modelValue } = props;
return !modelValue || isArray(modelValue) && !modelValue.filter(Boolean).length;
});
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) {
showClose.value = true;
}
};
const onMouseLeave = () => {
showClose.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 = computed(() => {
return props.type.includes("range");
});
const pickerSize = useFormSize();
const popperEl = computed(() => {
var _a, _b;
return (_b = (_a = unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
const stophandle = onClickOutside(inputRef, (e) => {
const unrefedPopperEl = unref(popperEl);
const inputEl = unrefElement(inputRef);
if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || inputEl && e.composedPath().includes(inputEl))
return;
pickerVisible.value = false;
});
onBeforeUnmount(() => {
stophandle == null ? void 0 : stophandle();
});
const userInput = ref(null);
const handleChange = () => {
if (userInput.value) {
const value = parseUserInputToDayjs(displayValue.value);
if (value) {
if (isValidValue(value)) {
emitInput(dayOrDaysToDate(value));
userInput.value = null;
}
}
}
if (userInput.value === "") {
emitInput(valueOnClear.value);
emitChange(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 === EVENT_CODE.esc) {
if (pickerVisible.value === true) {
pickerVisible.value = false;
event.preventDefault();
event.stopPropagation();
}
return;
}
if (code === EVENT_CODE.down) {
if (pickerOptions.value.handleFocusPicker) {
event.preventDefault();
event.stopPropagation();
}
if (pickerVisible.value === false) {
pickerVisible.value = true;
await nextTick();
}
if (pickerOptions.value.handleFocusPicker) {
pickerOptions.value.handleFocusPicker();
return;
}
}
if (code === EVENT_CODE.tab) {
hasJustTabExitedInput = true;
return;
}
if (code === EVENT_CODE.enter || code === 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 = 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(dayOrDaysToDate(newValue));
userInput.value = null;
}
}
};
const handleEndChange = () => {
var _a;
const values = unref(userInput);
const value = parseUserInputToDayjs(values && values[1]);
const parsedVal = unref(parsedValue);
if (value && value.isValid()) {
userInput.value = [
((_a = unref(displayValue)) == null ? void 0 : _a[0]) || null,
formatDayjsToString(value)
];
const newValue = [parsedVal && parsedVal[0], value];
if (isValidValue(newValue)) {
emitInput(dayOrDaysToDate(newValue));
userInput.value = null;
}
}
};
const pickerOptions = ref({});
const onSetPickerOption = (e) => {
pickerOptions.value[e[0]] = e[1];
pickerOptions.value.panelReady = true;
};
const onCalendarChange = (e) => {
emit("calendar-change", e);
};
const onPanelChange = (value, mode, view) => {
emit("panel-change", value, mode, view);
};
const focus = () => {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.focus();
};
const blur = () => {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.blur();
};
provide("EP_PICKER_BASE", {
props
});
expose({
focus,
blur,
handleOpen,
handleClose,
onPick
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElTooltip), mergeProps({
ref_key: "refPopper",
ref: refPopper,
visible: pickerVisible.value,
effect: "light",
pure: "",
trigger: "click"
}, _ctx.$attrs, {
role: "dialog",
teleported: "",
transition: `${unref(nsDate).namespace.value}-zoom-in-top`,
"popper-class": [`${unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass],
"popper-options": 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: withCtx(() => [
!unref(isRangeInput) ? (openBlock(), createBlock(unref(ElInput), {
key: 0,
id: _ctx.id,
ref_key: "inputRef",
ref: inputRef,
"container-role": "combobox",
"model-value": unref(displayValue),
name: _ctx.name,
size: unref(pickerSize),
disabled: unref(pickerDisabled),
placeholder: _ctx.placeholder,
class: normalizeClass([unref(nsDate).b("editor"), unref(nsDate).bm("editor", _ctx.type), _ctx.$attrs.class]),
style: normalizeStyle(_ctx.$attrs.style),
readonly: !_ctx.editable || _ctx.readonly || unref(isDatesPicker) || unref(isMonthsPicker) || unref(isYearsPicker) || _ctx.type === "week",
"aria-label": _ctx.ariaLabel,
tabindex: _ctx.tabindex,
"validate-event": false,
onInput: onUserInput,
onFocus: unref(handleFocus),
onBlur: unref(handleBlur),
onKeydown: handleKeydownInput,
onChange: handleChange,
onMousedown: onMouseDownInput,
onMouseenter: onMouseEnter,
onMouseleave: onMouseLeave,
onTouchstartPassive: onTouchStartInput,
onClick: withModifiers(() => {
}, ["stop"])
}, {
prefix: withCtx(() => [
unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
key: 0,
class: normalizeClass(unref(nsInput).e("icon")),
onMousedown: withModifiers(onMouseDownInput, ["prevent"]),
onTouchstartPassive: onTouchStartInput
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
]),
_: 1
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
]),
suffix: withCtx(() => [
showClose.value && _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
key: 0,
class: normalizeClass(`${unref(nsInput).e("icon")} clear-icon`),
onMousedown: withModifiers(unref(NOOP), ["prevent"]),
onClick: onClearIconClick
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
]),
_: 1
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onFocus", "onBlur", "onClick"])) : (openBlock(), createBlock(PickerRangeTrigger, {
key: 1,
id: _ctx.id,
ref_key: "inputRef",
ref: inputRef,
"model-value": unref(displayValue),
name: _ctx.name,
disabled: unref(pickerDisabled),
readonly: !_ctx.editable || _ctx.readonly,
"start-placeholder": _ctx.startPlaceholder,
"end-placeholder": _ctx.endPlaceholder,
class: normalizeClass(unref(rangeInputKls)),
style: normalizeStyle(_ctx.$attrs.style),
"aria-label": _ctx.ariaLabel,
tabindex: _ctx.tabindex,
autocomplete: "off",
role: "combobox",
onClick: onMouseDownInput,
onFocus: unref(handleFocus),
onBlur: unref(handleBlur),
onStartInput: handleStartInput,
onStartChange: handleStartChange,
onEndInput: handleEndInput,
onEndChange: handleEndChange,
onMousedown: onMouseDownInput,
onMouseenter: onMouseEnter,
onMouseleave: onMouseLeave,
onTouchstartPassive: onTouchStartInput,
onKeydown: handleKeydownInput
}, {
prefix: withCtx(() => [
unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
key: 0,
class: normalizeClass([unref(nsInput).e("icon"), unref(nsRange).e("icon")])
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true)
]),
"range-separator": withCtx(() => [
renderSlot(_ctx.$slots, "range-separator", {}, () => [
createElementVNode("span", {
class: normalizeClass(unref(nsRange).b("separator"))
}, toDisplayString(_ctx.rangeSeparator), 3)
])
]),
suffix: withCtx(() => [
_ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
key: 0,
class: normalizeClass(unref(clearIconKls)),
onMousedown: withModifiers(unref(NOOP), ["prevent"]),
onClick: onClearIconClick
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
]),
_: 1
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["id", "model-value", "name", "disabled", "readonly", "start-placeholder", "end-placeholder", "class", "style", "aria-label", "tabindex", "onFocus", "onBlur"]))
]),
content: withCtx(() => [
renderSlot(_ctx.$slots, "default", {
visible: pickerVisible.value,
actualVisible: pickerActualVisible.value,
parsedValue: unref(parsedValue),
format: _ctx.format,
dateFormat: _ctx.dateFormat,
timeFormat: _ctx.timeFormat,
unlinkPanels: _ctx.unlinkPanels,
type: _ctx.type,
defaultValue: _ctx.defaultValue,
showNow: _ctx.showNow,
onPick,
onSelectRange: setSelectionRange,
onSetPickerOption,
onCalendarChange,
onPanelChange,
onMousedown: withModifiers(() => {
}, ["stop"])
})
]),
_: 3
}, 16, ["visible", "transition", "popper-class", "popper-options", "fallback-placements", "placement"]);
};
}
});
var CommonPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "picker.vue"]]);
export { CommonPicker as default };
//# sourceMappingURL=picker.mjs.map