import { ref, inject, computed, unref, defineComponent, useAttrs as useAttrs$1, useSlots, shallowRef, watch, nextTick, toRef, withDirectives, openBlock, createElementBlock, mergeProps, createCommentVNode, Fragment, normalizeClass, renderSlot, createElementVNode, createBlock, withCtx, resolveDynamicComponent, withModifiers, createVNode, toDisplayString, normalizeStyle, vShow, provide, cloneVNode, Text, Comment, Teleport, Transition, readonly, getCurrentInstance, onUnmounted } from 'vue';
import { useResizeObserver, isClient, useEventListener, onClickOutside, tryOnScopeDispose, unrefElement } from '@vueuse/core';
import { isNil, fromPairs, isUndefined } from 'lodash-unified';
import { Y as buildProp, b as buildProps, Z as useGlobalSize, I as useSizeProp, d as definePropType, i as iconPropType, m as mutable, $ as ValidateComponentsMap, a0 as view_default, a1 as hide_default, E as ElIcon, G as circle_close_default, c as withInstall, h as ElFocusTrap, r as EVENT_CODE, e as isBoolean, U as UPDATE_MODEL_EVENT, _ as _export_sfc, o as useZIndex, f as isNumber } from './cross-icon-E21N3oOb.mjs';
import { NOOP, isObject, isString, isFunction, isArray } from '@vue/shared';
import { d as useNamespace, g as debugWarn, e as useId, i as useGetDerivedNamespace, j as useIdInjection } from '../server.mjs';
import { placements, createPopper } from '@popperjs/core';
const composeEventHandlers = (theirsHandler, oursHandler, { checkForDefaultPrevented = true } = {}) => {
const handleEvent = (event) => {
const shouldPrevent = theirsHandler == null ? void 0 : theirsHandler(event);
if (checkForDefaultPrevented === false || !shouldPrevent) {
return oursHandler == null ? void 0 : oursHandler(event);
}
};
return handleEvent;
};
const isFirefox = () => isClient && /firefox/i.test((void 0).navigator.userAgent);
const isKorean = (text) => /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text);
const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
const LISTENER_PREFIX = /^on[A-Z]/;
const useAttrs = (params = {}) => {
const { excludeListeners = false, excludeKeys } = params;
const allExcludeKeys = computed(() => {
return ((excludeKeys == null ? void 0 : excludeKeys.value) || []).concat(DEFAULT_EXCLUDE_KEYS);
});
const instance = getCurrentInstance();
if (!instance) {
return computed(() => ({}));
}
return computed(() => {
var _a;
return fromPairs(Object.entries((_a = instance.proxy) == null ? void 0 : _a.$attrs).filter(([key]) => !allExcludeKeys.value.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))));
});
};
const _prop = buildProp({
type: definePropType(Boolean),
default: null
});
const _event = buildProp({
type: definePropType(Function)
});
const createModelToggleComposable = (name) => {
const updateEventKey = `update:${name}`;
const updateEventKeyRaw = `onUpdate:${name}`;
const useModelToggleEmits2 = [updateEventKey];
const useModelToggleProps2 = {
[name]: _prop,
[updateEventKeyRaw]: _event
};
const useModelToggle2 = ({
indicator,
toggleReason,
shouldHideWhenRouteChanges,
shouldProceed,
onShow,
onHide
}) => {
const instance = getCurrentInstance();
const { emit } = instance;
const props = instance.props;
const hasUpdateHandler = computed(() => isFunction(props[updateEventKeyRaw]));
const isModelBindingAbsent = computed(() => props[name] === null);
const doShow = (event) => {
if (indicator.value === true) {
return;
}
indicator.value = true;
if (toggleReason) {
toggleReason.value = event;
}
if (isFunction(onShow)) {
onShow(event);
}
};
const doHide = (event) => {
if (indicator.value === false) {
return;
}
indicator.value = false;
if (toggleReason) {
toggleReason.value = event;
}
if (isFunction(onHide)) {
onHide(event);
}
};
const show = (event) => {
if (props.disabled === true || isFunction(shouldProceed) && !shouldProceed())
return;
const shouldEmit = hasUpdateHandler.value && isClient;
if (shouldEmit) {
emit(updateEventKey, true);
}
if (isModelBindingAbsent.value || !shouldEmit) {
doShow(event);
}
};
const hide = (event) => {
if (props.disabled === true || !isClient)
return;
const shouldEmit = hasUpdateHandler.value && isClient;
if (shouldEmit) {
emit(updateEventKey, false);
}
if (isModelBindingAbsent.value || !shouldEmit) {
doHide(event);
}
};
const onChange = (val) => {
if (!isBoolean(val))
return;
if (props.disabled && val) {
if (hasUpdateHandler.value) {
emit(updateEventKey, false);
}
} else if (indicator.value !== val) {
if (val) {
doShow();
} else {
doHide();
}
}
};
const toggle = () => {
if (indicator.value) {
hide();
} else {
show();
}
};
watch(() => props[name], onChange);
if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
watch(() => ({
...instance.proxy.$route
}), () => {
if (shouldHideWhenRouteChanges.value && indicator.value) {
hide();
}
});
}
return {
hide,
show,
toggle,
hasUpdateHandler
};
};
return {
useModelToggle: useModelToggle2,
useModelToggleProps: useModelToggleProps2,
useModelToggleEmits: useModelToggleEmits2
};
};
const useProp = (name) => {
const vm = getCurrentInstance();
return computed(() => {
var _a, _b;
return (_b = (_a = vm == null ? void 0 : vm.proxy) == null ? void 0 : _a.$props) == null ? void 0 : _b[name];
});
};
const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
const stateUpdater = {
name: "updateState",
enabled: true,
phase: "write",
fn: ({ state }) => {
const derivedState = deriveState(state);
Object.assign(states.value, derivedState);
},
requires: ["computeStyles"]
};
const options = computed(() => {
const { onFirstUpdate, placement, strategy, modifiers } = unref(opts);
return {
onFirstUpdate,
placement: placement || "bottom",
strategy: strategy || "absolute",
modifiers: [
...modifiers || [],
stateUpdater,
{ name: "applyStyles", enabled: false }
]
};
});
const instanceRef = shallowRef();
const states = ref({
styles: {
popper: {
position: unref(options).strategy,
left: "0",
top: "0"
},
arrow: {
position: "absolute"
}
},
attributes: {}
});
const destroy = () => {
if (!instanceRef.value)
return;
instanceRef.value.destroy();
instanceRef.value = void 0;
};
watch(options, (newOptions) => {
const instance = unref(instanceRef);
if (instance) {
instance.setOptions(newOptions);
}
}, {
deep: true
});
watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
destroy();
if (!referenceElement || !popperElement)
return;
instanceRef.value = createPopper(referenceElement, popperElement, unref(options));
});
return {
state: computed(() => {
var _a;
return { ...((_a = unref(instanceRef)) == null ? void 0 : _a.state) || {} };
}),
styles: computed(() => unref(states).styles),
attributes: computed(() => unref(states).attributes),
update: () => {
var _a;
return (_a = unref(instanceRef)) == null ? void 0 : _a.update();
},
forceUpdate: () => {
var _a;
return (_a = unref(instanceRef)) == null ? void 0 : _a.forceUpdate();
},
instanceRef: computed(() => unref(instanceRef))
};
};
function deriveState(state) {
const elements = Object.keys(state.elements);
const styles = fromPairs(elements.map((element) => [element, state.styles[element] || {}]));
const attributes = fromPairs(elements.map((element) => [element, state.attributes[element]]));
return {
styles,
attributes
};
}
function useTimeout() {
let timeoutHandle;
const registerTimeout = (fn, delay) => {
cancelTimeout();
timeoutHandle = (void 0).setTimeout(fn, delay);
};
const cancelTimeout = () => (void 0).clearTimeout(timeoutHandle);
tryOnScopeDispose(() => cancelTimeout());
return {
registerTimeout,
cancelTimeout
};
}
const usePopperContainerId = () => {
const namespace = useGetDerivedNamespace();
const idInjection = useIdInjection();
const id = computed(() => {
return `${namespace.value}-popper-container-${idInjection.prefix}`;
});
const selector = computed(() => `#${id.value}`);
return {
id,
selector
};
};
const usePopperContainer = () => {
const { id, selector } = usePopperContainerId();
return {
id,
selector
};
};
const useDelayedToggleProps = buildProps({
showAfter: {
type: Number,
default: 0
},
hideAfter: {
type: Number,
default: 200
},
autoClose: {
type: Number,
default: 0
}
});
const useDelayedToggle = ({
showAfter,
hideAfter,
autoClose,
open,
close
}) => {
const { registerTimeout } = useTimeout();
const {
registerTimeout: registerTimeoutForAutoClose,
cancelTimeout: cancelTimeoutForAutoClose
} = useTimeout();
const onOpen = (event) => {
registerTimeout(() => {
open(event);
const _autoClose = unref(autoClose);
if (isNumber(_autoClose) && _autoClose > 0) {
registerTimeoutForAutoClose(() => {
close(event);
}, _autoClose);
}
}, unref(showAfter));
};
const onClose = (event) => {
cancelTimeoutForAutoClose();
registerTimeout(() => {
close(event);
}, unref(hideAfter));
};
return {
onOpen,
onClose
};
};
const FORWARD_REF_INJECTION_KEY = Symbol("elForwardRef");
const useForwardRef = (forwardRef) => {
const setForwardRef = (el) => {
forwardRef.value = el;
};
provide(FORWARD_REF_INJECTION_KEY, {
setForwardRef
});
};
const useForwardRefDirective = (setForwardRef) => {
return {
mounted(el) {
setForwardRef(el);
},
updated(el) {
setForwardRef(el);
},
unmounted() {
setForwardRef(null);
}
};
};
function useCursor(input) {
const selectionRef = ref();
function recordCursor() {
if (input.value == void 0)
return;
const { selectionStart, selectionEnd, value } = input.value;
if (selectionStart == null || selectionEnd == null)
return;
const beforeTxt = value.slice(0, Math.max(0, selectionStart));
const afterTxt = value.slice(Math.max(0, selectionEnd));
selectionRef.value = {
selectionStart,
selectionEnd,
value,
beforeTxt,
afterTxt
};
}
function setCursor() {
if (input.value == void 0 || selectionRef.value == void 0)
return;
const { value } = input.value;
const { beforeTxt, afterTxt, selectionStart } = selectionRef.value;
if (beforeTxt == void 0 || afterTxt == void 0 || selectionStart == void 0)
return;
let startPos = value.length;
if (value.endsWith(afterTxt)) {
startPos = value.length - afterTxt.length;
} else if (value.startsWith(beforeTxt)) {
startPos = beforeTxt.length;
} else {
const beforeLastChar = beforeTxt[selectionStart - 1];
const newIndex = value.indexOf(beforeLastChar, selectionStart - 1);
if (newIndex !== -1) {
startPos = newIndex + 1;
}
}
input.value.setSelectionRange(startPos, startPos);
}
return [recordCursor, setCursor];
}
function useFocusController(target, { afterFocus, beforeBlur, afterBlur } = {}) {
const instance = getCurrentInstance();
const { emit } = instance;
const wrapperRef = shallowRef();
const isFocused = ref(false);
const handleFocus = (event) => {
if (isFocused.value)
return;
isFocused.value = true;
emit("focus", event);
afterFocus == null ? void 0 : afterFocus();
};
const handleBlur = (event) => {
var _a;
const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false;
if (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)))
return;
isFocused.value = false;
emit("blur", event);
afterBlur == null ? void 0 : afterBlur();
};
const handleClick = () => {
var _a;
(_a = target.value) == null ? void 0 : _a.focus();
};
watch(wrapperRef, (el) => {
if (el) {
el.setAttribute("tabindex", "-1");
}
});
useEventListener(wrapperRef, "click", handleClick);
return {
wrapperRef,
isFocused,
handleFocus,
handleBlur
};
}
const formContextKey = Symbol("formContextKey");
const formItemContextKey = Symbol("formItemContextKey");
const useFormSize = (fallback, ignore = {}) => {
const emptyRef = ref(void 0);
const size = ignore.prop ? emptyRef : useProp("size");
const globalConfig = ignore.global ? emptyRef : useGlobalSize();
const form = ignore.form ? { size: void 0 } : inject(formContextKey, void 0);
const formItem = ignore.formItem ? { size: void 0 } : inject(formItemContextKey, void 0);
return computed(() => size.value || unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || "");
};
const useFormDisabled = (fallback) => {
const disabled = useProp("disabled");
const form = inject(formContextKey, void 0);
return computed(() => disabled.value || unref(fallback) || (form == null ? void 0 : form.disabled) || false);
};
const useFormItem = () => {
const form = inject(formContextKey, void 0);
const formItem = inject(formItemContextKey, void 0);
return {
form,
formItem
};
};
const useFormItemInputId = (props, {
formItemContext,
disableIdGeneration,
disableIdManagement
}) => {
if (!disableIdGeneration) {
disableIdGeneration = ref(false);
}
if (!disableIdManagement) {
disableIdManagement = ref(false);
}
const inputId = ref();
const isLabeledByFormItem = computed(() => {
var _a;
return !!(!props.label && formItemContext && formItemContext.inputIds && ((_a = formItemContext.inputIds) == null ? void 0 : _a.length) <= 1);
});
onUnmounted(() => {
if (formItemContext == null ? void 0 : formItemContext.removeInputId) {
inputId.value && formItemContext.removeInputId(inputId.value);
}
});
return {
isLabeledByFormItem,
inputId
};
};
let hiddenTextarea = void 0;
const HIDDEN_STYLE = `
height:0 !important;
visibility:hidden !important;
${isFirefox() ? "" : "overflow:hidden !important;"}
position:absolute !important;
z-index:-1000 !important;
top:0 !important;
right:0 !important;
`;
const CONTEXT_STYLE = [
"letter-spacing",
"line-height",
"padding-top",
"padding-bottom",
"font-family",
"font-weight",
"font-size",
"text-rendering",
"text-transform",
"width",
"text-indent",
"padding-left",
"padding-right",
"border-width",
"box-sizing"
];
function calculateNodeStyling(targetElement) {
const style = (void 0).getComputedStyle(targetElement);
const boxSizing = style.getPropertyValue("box-sizing");
const paddingSize = Number.parseFloat(style.getPropertyValue("padding-bottom")) + Number.parseFloat(style.getPropertyValue("padding-top"));
const borderSize = Number.parseFloat(style.getPropertyValue("border-bottom-width")) + Number.parseFloat(style.getPropertyValue("border-top-width"));
const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";");
return { contextStyle, paddingSize, borderSize, boxSizing };
}
function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
var _a;
if (!hiddenTextarea) {
hiddenTextarea = (void 0).createElement("textarea");
(void 0).body.appendChild(hiddenTextarea);
}
const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
let height = hiddenTextarea.scrollHeight;
const result = {};
if (boxSizing === "border-box") {
height = height + borderSize;
} else if (boxSizing === "content-box") {
height = height - paddingSize;
}
hiddenTextarea.value = "";
const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
if (isNumber(minRows)) {
let minHeight = singleRowHeight * minRows;
if (boxSizing === "border-box") {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
result.minHeight = `${minHeight}px`;
}
if (isNumber(maxRows)) {
let maxHeight = singleRowHeight * maxRows;
if (boxSizing === "border-box") {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);
}
result.height = `${height}px`;
(_a = hiddenTextarea.parentNode) == null ? void 0 : _a.removeChild(hiddenTextarea);
hiddenTextarea = void 0;
return result;
}
const inputProps = buildProps({
id: {
type: String,
default: void 0
},
size: useSizeProp,
disabled: Boolean,
modelValue: {
type: definePropType([
String,
Number,
Object
]),
default: ""
},
type: {
type: String,
default: "text"
},
resize: {
type: String,
values: ["none", "both", "horizontal", "vertical"]
},
autosize: {
type: definePropType([Boolean, Object]),
default: false
},
autocomplete: {
type: String,
default: "off"
},
formatter: {
type: Function
},
parser: {
type: Function
},
placeholder: {
type: String
},
form: {
type: String
},
readonly: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: false
},
showPassword: {
type: Boolean,
default: false
},
showWordLimit: {
type: Boolean,
default: false
},
suffixIcon: {
type: iconPropType
},
prefixIcon: {
type: iconPropType
},
containerRole: {
type: String,
default: void 0
},
label: {
type: String,
default: void 0
},
tabindex: {
type: [String, Number],
default: 0
},
validateEvent: {
type: Boolean,
default: true
},
inputStyle: {
type: definePropType([Object, Array, String]),
default: () => mutable({})
},
autofocus: {
type: Boolean,
default: false
}
});
const inputEmits = {
[UPDATE_MODEL_EVENT]: (value) => isString(value),
input: (value) => isString(value),
change: (value) => isString(value),
focus: (evt) => evt instanceof FocusEvent,
blur: (evt) => evt instanceof FocusEvent,
clear: () => true,
mouseleave: (evt) => evt instanceof MouseEvent,
mouseenter: (evt) => evt instanceof MouseEvent,
keydown: (evt) => evt instanceof Event,
compositionstart: (evt) => evt instanceof CompositionEvent,
compositionupdate: (evt) => evt instanceof CompositionEvent,
compositionend: (evt) => evt instanceof CompositionEvent
};
const _hoisted_1$1 = ["role"];
const _hoisted_2$1 = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus"];
const _hoisted_3 = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus"];
const __default__$7 = defineComponent({
name: "ElInput",
inheritAttrs: false
});
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
...__default__$7,
props: inputProps,
emits: inputEmits,
setup(__props, { expose, emit }) {
const props = __props;
const rawAttrs = useAttrs$1();
const slots = useSlots();
const containerAttrs = computed(() => {
const comboBoxAttrs = {};
if (props.containerRole === "combobox") {
comboBoxAttrs["aria-haspopup"] = rawAttrs["aria-haspopup"];
comboBoxAttrs["aria-owns"] = rawAttrs["aria-owns"];
comboBoxAttrs["aria-expanded"] = rawAttrs["aria-expanded"];
}
return comboBoxAttrs;
});
const containerKls = computed(() => [
props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
nsInput.m(inputSize.value),
nsInput.is("disabled", inputDisabled.value),
nsInput.is("exceed", inputExceed.value),
{
[nsInput.b("group")]: slots.prepend || slots.append,
[nsInput.bm("group", "append")]: slots.append,
[nsInput.bm("group", "prepend")]: slots.prepend,
[nsInput.m("prefix")]: slots.prefix || props.prefixIcon,
[nsInput.m("suffix")]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
[nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value
},
rawAttrs.class
]);
const wrapperKls = computed(() => [
nsInput.e("wrapper"),
nsInput.is("focus", isFocused.value)
]);
const attrs = useAttrs({
excludeKeys: computed(() => {
return Object.keys(containerAttrs.value);
})
});
const { form, formItem } = useFormItem();
const { inputId } = useFormItemInputId(props, {
formItemContext: formItem
});
const inputSize = useFormSize();
const inputDisabled = useFormDisabled();
const nsInput = useNamespace("input");
const nsTextarea = useNamespace("textarea");
const input = shallowRef();
const textarea = shallowRef();
const hovering = ref(false);
const isComposing = ref(false);
const passwordVisible = ref(false);
const countStyle = ref();
const textareaCalcStyle = shallowRef(props.inputStyle);
const _ref = computed(() => input.value || textarea.value);
const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(_ref, {
afterBlur() {
var _a;
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
}
}
});
const needStatusIcon = computed(() => {
var _a;
return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
});
const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
const passwordIcon = computed(() => passwordVisible.value ? view_default : hide_default);
const containerStyle = computed(() => [
rawAttrs.style,
props.inputStyle
]);
const textareaStyle = computed(() => [
props.inputStyle,
textareaCalcStyle.value,
{ resize: props.resize }
]);
const nativeInputValue = computed(() => isNil(props.modelValue) ? "" : String(props.modelValue));
const showClear = computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
const showPwdVisible = computed(() => props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || isFocused.value));
const isWordLimitVisible = computed(() => props.showWordLimit && !!attrs.value.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
const textLength = computed(() => nativeInputValue.value.length);
const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength));
const suffixVisible = computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
const [recordCursor, setCursor] = useCursor(input);
useResizeObserver(textarea, (entries) => {
onceInitSizeTextarea();
if (!isWordLimitVisible.value || props.resize !== "both")
return;
const entry = entries[0];
const { width } = entry.contentRect;
countStyle.value = {
right: `calc(100% - ${width + 15 + 6}px)`
};
});
const resizeTextarea = () => {
const { type, autosize } = props;
if (!isClient || type !== "textarea" || !textarea.value)
return;
if (autosize) {
const minRows = isObject(autosize) ? autosize.minRows : void 0;
const maxRows = isObject(autosize) ? autosize.maxRows : void 0;
const textareaStyle2 = calcTextareaHeight(textarea.value, minRows, maxRows);
textareaCalcStyle.value = {
overflowY: "hidden",
...textareaStyle2
};
nextTick(() => {
textarea.value.offsetHeight;
textareaCalcStyle.value = textareaStyle2;
});
} else {
textareaCalcStyle.value = {
minHeight: calcTextareaHeight(textarea.value).minHeight
};
}
};
const createOnceInitResize = (resizeTextarea2) => {
let isInit = false;
return () => {
var _a;
if (isInit || !props.autosize)
return;
const isElHidden = ((_a = textarea.value) == null ? void 0 : _a.offsetParent) === null;
if (!isElHidden) {
resizeTextarea2();
isInit = true;
}
};
};
const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
const setNativeInputValue = () => {
const input2 = _ref.value;
const formatterValue = props.formatter ? props.formatter(nativeInputValue.value) : nativeInputValue.value;
if (!input2 || input2.value === formatterValue)
return;
input2.value = formatterValue;
};
const handleInput = async (event) => {
recordCursor();
let { value } = event.target;
if (props.formatter) {
value = props.parser ? props.parser(value) : value;
}
if (isComposing.value)
return;
if (value === nativeInputValue.value) {
setNativeInputValue();
return;
}
emit(UPDATE_MODEL_EVENT, value);
emit("input", value);
await nextTick();
setNativeInputValue();
setCursor();
};
const handleChange = (event) => {
emit("change", event.target.value);
};
const handleCompositionStart = (event) => {
emit("compositionstart", event);
isComposing.value = true;
};
const handleCompositionUpdate = (event) => {
var _a;
emit("compositionupdate", event);
const text = (_a = event.target) == null ? void 0 : _a.value;
const lastCharacter = text[text.length - 1] || "";
isComposing.value = !isKorean(lastCharacter);
};
const handleCompositionEnd = (event) => {
emit("compositionend", event);
if (isComposing.value) {
isComposing.value = false;
handleInput(event);
}
};
const handlePasswordVisible = () => {
passwordVisible.value = !passwordVisible.value;
focus();
};
const focus = async () => {
var _a;
await nextTick();
(_a = _ref.value) == null ? void 0 : _a.focus();
};
const blur = () => {
var _a;
return (_a = _ref.value) == null ? void 0 : _a.blur();
};
const handleMouseLeave = (evt) => {
hovering.value = false;
emit("mouseleave", evt);
};
const handleMouseEnter = (evt) => {
hovering.value = true;
emit("mouseenter", evt);
};
const handleKeydown = (evt) => {
emit("keydown", evt);
};
const select = () => {
var _a;
(_a = _ref.value) == null ? void 0 : _a.select();
};
const clear = () => {
emit(UPDATE_MODEL_EVENT, "");
emit("change", "");
emit("clear");
emit("input", "");
};
watch(() => props.modelValue, () => {
var _a;
nextTick(() => resizeTextarea());
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
}
});
watch(nativeInputValue, () => setNativeInputValue());
watch(() => props.type, async () => {
await nextTick();
setNativeInputValue();
resizeTextarea();
});
expose({
input,
textarea,
ref: _ref,
textareaStyle,
autosize: toRef(props, "autosize"),
focus,
blur,
select,
clear,
resizeTextarea
});
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock("div", mergeProps(unref(containerAttrs), {
class: unref(containerKls),
style: unref(containerStyle),
role: _ctx.containerRole,
onMouseenter: handleMouseEnter,
onMouseleave: handleMouseLeave
}), [
createCommentVNode(" input "),
_ctx.type !== "textarea" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createCommentVNode(" prepend slot "),
_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(nsInput).be("group", "prepend"))
}, [
renderSlot(_ctx.$slots, "prepend")
], 2)) : createCommentVNode("v-if", true),
createElementVNode("div", {
ref_key: "wrapperRef",
ref: wrapperRef,
class: normalizeClass(unref(wrapperKls))
}, [
createCommentVNode(" prefix slot "),
_ctx.$slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(unref(nsInput).e("prefix"))
}, [
createElementVNode("span", {
class: normalizeClass(unref(nsInput).e("prefix-inner"))
}, [
renderSlot(_ctx.$slots, "prefix"),
_ctx.prefixIcon ? (openBlock(), createBlock(unref(ElIcon), {
key: 0,
class: normalizeClass(unref(nsInput).e("icon"))
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon)))
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true)
], 2)
], 2)) : createCommentVNode("v-if", true),
createElementVNode("input", mergeProps({
id: unref(inputId),
ref_key: "input",
ref: input,
class: unref(nsInput).e("inner")
}, unref(attrs), {
type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type,
disabled: unref(inputDisabled),
formatter: _ctx.formatter,
parser: _ctx.parser,
readonly: _ctx.readonly,
autocomplete: _ctx.autocomplete,
tabindex: _ctx.tabindex,
"aria-label": _ctx.label,
placeholder: _ctx.placeholder,
style: _ctx.inputStyle,
form: props.form,
autofocus: props.autofocus,
onCompositionstart: handleCompositionStart,
onCompositionupdate: handleCompositionUpdate,
onCompositionend: handleCompositionEnd,
onInput: handleInput,
onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
onBlur: _cache[1] || (_cache[1] = (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
onChange: handleChange,
onKeydown: handleKeydown
}), null, 16, _hoisted_2$1),
createCommentVNode(" suffix slot "),
unref(suffixVisible) ? (openBlock(), createElementBlock("span", {
key: 1,
class: normalizeClass(unref(nsInput).e("suffix"))
}, [
createElementVNode("span", {
class: normalizeClass(unref(nsInput).e("suffix-inner"))
}, [
!unref(showClear) || !unref(showPwdVisible) || !unref(isWordLimitVisible) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
renderSlot(_ctx.$slots, "suffix"),
_ctx.suffixIcon ? (openBlock(), createBlock(unref(ElIcon), {
key: 0,
class: normalizeClass(unref(nsInput).e("icon"))
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon)))
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true)
], 64)) : createCommentVNode("v-if", true),
unref(showClear) ? (openBlock(), createBlock(unref(ElIcon), {
key: 1,
class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("clear")]),
onMousedown: withModifiers(unref(NOOP), ["prevent"]),
onClick: clear
}, {
default: withCtx(() => [
createVNode(unref(circle_close_default))
]),
_: 1
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true),
unref(showPwdVisible) ? (openBlock(), createBlock(unref(ElIcon), {
key: 2,
class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("password")]),
onClick: handlePasswordVisible
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(unref(passwordIcon))))
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true),
unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
key: 3,
class: normalizeClass(unref(nsInput).e("count"))
}, [
createElementVNode("span", {
class: normalizeClass(unref(nsInput).e("count-inner"))
}, toDisplayString(unref(textLength)) + " / " + toDisplayString(unref(attrs).maxlength), 3)
], 2)) : createCommentVNode("v-if", true),
unref(validateState) && unref(validateIcon) && unref(needStatusIcon) ? (openBlock(), createBlock(unref(ElIcon), {
key: 4,
class: normalizeClass([
unref(nsInput).e("icon"),
unref(nsInput).e("validateIcon"),
unref(nsInput).is("loading", unref(validateState) === "validating")
])
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(unref(validateIcon))))
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true)
], 2)
], 2)) : createCommentVNode("v-if", true)
], 2),
createCommentVNode(" append slot "),
_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(unref(nsInput).be("group", "append"))
}, [
renderSlot(_ctx.$slots, "append")
], 2)) : createCommentVNode("v-if", true)
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createCommentVNode(" textarea "),
createElementVNode("textarea", mergeProps({
id: unref(inputId),
ref_key: "textarea",
ref: textarea,
class: unref(nsTextarea).e("inner")
}, unref(attrs), {
tabindex: _ctx.tabindex,
disabled: unref(inputDisabled),
readonly: _ctx.readonly,
autocomplete: _ctx.autocomplete,
style: unref(textareaStyle),
"aria-label": _ctx.label,
placeholder: _ctx.placeholder,
form: props.form,
autofocus: props.autofocus,
onCompositionstart: handleCompositionStart,
onCompositionupdate: handleCompositionUpdate,
onCompositionend: handleCompositionEnd,
onInput: handleInput,
onFocus: _cache[2] || (_cache[2] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
onBlur: _cache[3] || (_cache[3] = (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
onChange: handleChange,
onKeydown: handleKeydown
}), null, 16, _hoisted_3),
unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
key: 0,
style: normalizeStyle(countStyle.value),
class: normalizeClass(unref(nsInput).e("count"))
}, toDisplayString(unref(textLength)) + " / " + toDisplayString(unref(attrs).maxlength), 7)) : createCommentVNode("v-if", true)
], 64))
], 16, _hoisted_1$1)), [
[vShow, _ctx.type !== "hidden"]
]);
};
}
});
var Input = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "input.vue"]]);
const ElInput = withInstall(Input);
const POPPER_INJECTION_KEY = Symbol("popper");
const POPPER_CONTENT_INJECTION_KEY = Symbol("popperContent");
const roleTypes = [
"dialog",
"grid",
"group",
"listbox",
"menu",
"navigation",
"tooltip",
"tree"
];
const popperProps = buildProps({
role: {
type: String,
values: roleTypes,
default: "tooltip"
}
});
const __default__$6 = defineComponent({
name: "ElPopper",
inheritAttrs: false
});
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
...__default__$6,
props: popperProps,
setup(__props, { expose }) {
const props = __props;
const triggerRef = ref();
const popperInstanceRef = ref();
const contentRef = ref();
const referenceRef = ref();
const role = computed(() => props.role);
const popperProvides = {
triggerRef,
popperInstanceRef,
contentRef,
referenceRef,
role
};
expose(popperProvides);
provide(POPPER_INJECTION_KEY, popperProvides);
return (_ctx, _cache) => {
return renderSlot(_ctx.$slots, "default");
};
}
});
var Popper = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "popper.vue"]]);
const popperArrowProps = buildProps({
arrowOffset: {
type: Number,
default: 5
}
});
const __default__$5 = defineComponent({
name: "ElPopperArrow",
inheritAttrs: false
});
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
...__default__$5,
props: popperArrowProps,
setup(__props, { expose }) {
const props = __props;
const ns = useNamespace("popper");
const { arrowOffset, arrowRef, arrowStyle } = inject(POPPER_CONTENT_INJECTION_KEY, void 0);
watch(() => props.arrowOffset, (val) => {
arrowOffset.value = val;
});
expose({
arrowRef
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("span", {
ref_key: "arrowRef",
ref: arrowRef,
class: normalizeClass(unref(ns).e("arrow")),
style: normalizeStyle(unref(arrowStyle)),
"data-popper-arrow": ""
}, null, 6);
};
}
});
var ElPopperArrow = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "arrow.vue"]]);
const NAME = "ElOnlyChild";
const OnlyChild = defineComponent({
name: NAME,
setup(_, {
slots,
attrs
}) {
var _a;
const forwardRefInjection = inject(FORWARD_REF_INJECTION_KEY);
const forwardRefDirective = useForwardRefDirective((_a = forwardRefInjection == null ? void 0 : forwardRefInjection.setForwardRef) != null ? _a : NOOP);
return () => {
var _a2;
const defaultSlot = (_a2 = slots.default) == null ? void 0 : _a2.call(slots, attrs);
if (!defaultSlot)
return null;
if (defaultSlot.length > 1) {
return null;
}
const firstLegitNode = findFirstLegitChild(defaultSlot);
if (!firstLegitNode) {
return null;
}
return withDirectives(cloneVNode(firstLegitNode, attrs), [[forwardRefDirective]]);
};
}
});
function findFirstLegitChild(node) {
if (!node)
return null;
const children = node;
for (const child of children) {
if (isObject(child)) {
switch (child.type) {
case Comment:
continue;
case Text:
case "svg":
return wrapTextContent(child);
case Fragment:
return findFirstLegitChild(child.children);
default:
return child;
}
}
return wrapTextContent(child);
}
return null;
}
function wrapTextContent(s) {
const ns = useNamespace("only-child");
return createVNode("span", {
"class": ns.e("content")
}, [s]);
}
const popperTriggerProps = buildProps({
virtualRef: {
type: definePropType(Object)
},
virtualTriggering: Boolean,
onMouseenter: {
type: definePropType(Function)
},
onMouseleave: {
type: definePropType(Function)
},
onClick: {
type: definePropType(Function)
},
onKeydown: {
type: definePropType(Function)
},
onFocus: {
type: definePropType(Function)
},
onBlur: {
type: definePropType(Function)
},
onContextmenu: {
type: definePropType(Function)
},
id: String,
open: Boolean
});
const __default__$4 = defineComponent({
name: "ElPopperTrigger",
inheritAttrs: false
});
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
...__default__$4,
props: popperTriggerProps,
setup(__props, { expose }) {
const props = __props;
const { role, triggerRef } = inject(POPPER_INJECTION_KEY, void 0);
useForwardRef(triggerRef);
const ariaControls = computed(() => {
return ariaHaspopup.value ? props.id : void 0;
});
const ariaDescribedby = computed(() => {
if (role && role.value === "tooltip") {
return props.open && props.id ? props.id : void 0;
}
return void 0;
});
const ariaHaspopup = computed(() => {
if (role && role.value !== "tooltip") {
return role.value;
}
return void 0;
});
const ariaExpanded = computed(() => {
return ariaHaspopup.value ? `${props.open}` : void 0;
});
expose({
triggerRef
});
return (_ctx, _cache) => {
return !_ctx.virtualTriggering ? (openBlock(), createBlock(unref(OnlyChild), mergeProps({ key: 0 }, _ctx.$attrs, {
"aria-controls": unref(ariaControls),
"aria-describedby": unref(ariaDescribedby),
"aria-expanded": unref(ariaExpanded),
"aria-haspopup": unref(ariaHaspopup)
}), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["aria-controls", "aria-describedby", "aria-expanded", "aria-haspopup"])) : createCommentVNode("v-if", true);
};
}
});
var ElPopperTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "trigger.vue"]]);
const POSITIONING_STRATEGIES = ["fixed", "absolute"];
const popperCoreConfigProps = buildProps({
boundariesPadding: {
type: Number,
default: 0
},
fallbackPlacements: {
type: definePropType(Array),
default: void 0
},
gpuAcceleration: {
type: Boolean,
default: true
},
offset: {
type: Number,
default: 12
},
placement: {
type: String,
values: placements,
default: "bottom"
},
popperOptions: {
type: definePropType(Object),
default: () => ({})
},
strategy: {
type: String,
values: POSITIONING_STRATEGIES,
default: "absolute"
}
});
const popperContentProps = buildProps({
...popperCoreConfigProps,
id: String,
style: {
type: definePropType([String, Array, Object])
},
className: {
type: definePropType([String, Array, Object])
},
effect: {
type: String,
default: "dark"
},
visible: Boolean,
enterable: {
type: Boolean,
default: true
},
pure: Boolean,
focusOnShow: {
type: Boolean,
default: false
},
trapping: {
type: Boolean,
default: false
},
popperClass: {
type: definePropType([String, Array, Object])
},
popperStyle: {
type: definePropType([String, Array, Object])
},
referenceEl: {
type: definePropType(Object)
},
triggerTargetEl: {
type: definePropType(Object)
},
stopPopperMouseEvent: {
type: Boolean,
default: true
},
ariaLabel: {
type: String,
default: void 0
},
virtualTriggering: Boolean,
zIndex: Number
});
const popperContentEmits = {
mouseenter: (evt) => evt instanceof MouseEvent,
mouseleave: (evt) => evt instanceof MouseEvent,
focus: () => true,
blur: () => true,
close: () => true
};
const buildPopperOptions = (props, modifiers = []) => {
const { placement, strategy, popperOptions } = props;
const options = {
placement,
strategy,
...popperOptions,
modifiers: [...genModifiers(props), ...modifiers]
};
deriveExtraModifiers(options, popperOptions == null ? void 0 : popperOptions.modifiers);
return options;
};
const unwrapMeasurableEl = ($el) => {
if (!isClient)
return;
return unrefElement($el);
};
function genModifiers(options) {
const { offset, gpuAcceleration, fallbackPlacements } = options;
return [
{
name: "offset",
options: {
offset: [0, offset != null ? offset : 12]
}
},
{
name: "preventOverflow",
options: {
padding: {
top: 2,
bottom: 2,
left: 5,
right: 5
}
}
},
{
name: "flip",
options: {
padding: 5,
fallbackPlacements
}
},
{
name: "computeStyles",
options: {
gpuAcceleration
}
}
];
}
function deriveExtraModifiers(options, modifiers) {
if (modifiers) {
options.modifiers = [...options.modifiers, ...modifiers != null ? modifiers : []];
}
}
const DEFAULT_ARROW_OFFSET = 0;
const usePopperContent = (props) => {
const { popperInstanceRef, contentRef, triggerRef, role } = inject(POPPER_INJECTION_KEY, void 0);
const arrowRef = ref();
const arrowOffset = ref();
const eventListenerModifier = computed(() => {
return {
name: "eventListeners",
enabled: !!props.visible
};
});
const arrowModifier = computed(() => {
var _a;
const arrowEl = unref(arrowRef);
const offset = (_a = unref(arrowOffset)) != null ? _a : DEFAULT_ARROW_OFFSET;
return {
name: "arrow",
enabled: !isUndefined(arrowEl),
options: {
element: arrowEl,
padding: offset
}
};
});
const options = computed(() => {
return {
onFirstUpdate: () => {
update();
},
...buildPopperOptions(props, [
unref(arrowModifier),
unref(eventListenerModifier)
])
};
});
const computedReference = computed(() => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef));
const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options);
watch(instanceRef, (instance) => popperInstanceRef.value = instance);
return {
attributes,
arrowRef,
contentRef,
instanceRef,
state,
styles,
role,
forceUpdate,
update
};
};
const usePopperContentDOM = (props, {
attributes,
styles,
role
}) => {
const { nextZIndex } = useZIndex();
const ns = useNamespace("popper");
const contentAttrs = computed(() => unref(attributes).popper);
const contentZIndex = ref(isNumber(props.zIndex) ? props.zIndex : nextZIndex());
const contentClass = computed(() => [
ns.b(),
ns.is("pure", props.pure),
ns.is(props.effect),
props.popperClass
]);
const contentStyle = computed(() => {
return [
{ zIndex: unref(contentZIndex) },
unref(styles).popper,
props.popperStyle || {}
];
});
const ariaModal = computed(() => role.value === "dialog" ? "false" : void 0);
const arrowStyle = computed(() => unref(styles).arrow || {});
const updateZIndex = () => {
contentZIndex.value = isNumber(props.zIndex) ? props.zIndex : nextZIndex();
};
return {
ariaModal,
arrowStyle,
contentAttrs,
contentClass,
contentStyle,
contentZIndex,
updateZIndex
};
};
const usePopperContentFocusTrap = (props, emit) => {
const trapped = ref(false);
const focusStartRef = ref();
const onFocusAfterTrapped = () => {
emit("focus");
};
const onFocusAfterReleased = (event) => {
var _a;
if (((_a = event.detail) == null ? void 0 : _a.focusReason) !== "pointer") {
focusStartRef.value = "first";
emit("blur");
}
};
const onFocusInTrap = (event) => {
if (props.visible && !trapped.value) {
if (event.target) {
focusStartRef.value = event.target;
}
trapped.value = true;
}
};
const onFocusoutPrevented = (event) => {
if (!props.trapping) {
if (event.detail.focusReason === "pointer") {
event.preventDefault();
}
trapped.value = false;
}
};
const onReleaseRequested = () => {
trapped.value = false;
emit("close");
};
return {
focusStartRef,
trapped,
onFocusAfterReleased,
onFocusAfterTrapped,
onFocusInTrap,
onFocusoutPrevented,
onReleaseRequested
};
};
const __default__$3 = defineComponent({
name: "ElPopperContent"
});
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
...__default__$3,
props: popperContentProps,
emits: popperContentEmits,
setup(__props, { expose, emit }) {
const props = __props;
const {
focusStartRef,
trapped,
onFocusAfterReleased,
onFocusAfterTrapped,
onFocusInTrap,
onFocusoutPrevented,
onReleaseRequested
} = usePopperContentFocusTrap(props, emit);
const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props);
const {
ariaModal,
arrowStyle,
contentAttrs,
contentClass,
contentStyle,
updateZIndex
} = usePopperContentDOM(props, {
styles,
attributes,
role
});
const formItemContext = inject(formItemContextKey, void 0);
const arrowOffset = ref();
provide(POPPER_CONTENT_INJECTION_KEY, {
arrowStyle,
arrowRef,
arrowOffset
});
if (formItemContext && (formItemContext.addInputId || formItemContext.removeInputId)) {
provide(formItemContextKey, {
...formItemContext,
addInputId: NOOP,
removeInputId: NOOP
});
}
const updatePopper = (shouldUpdateZIndex = true) => {
update();
shouldUpdateZIndex && updateZIndex();
};
expose({
popperContentRef: contentRef,
popperInstanceRef: instanceRef,
updatePopper,
contentStyle
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", mergeProps({
ref_key: "contentRef",
ref: contentRef
}, unref(contentAttrs), {
style: unref(contentStyle),
class: unref(contentClass),
tabindex: "-1",
onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
}), [
createVNode(unref(ElFocusTrap), {
trapped: unref(trapped),
"trap-on-focus-in": true,
"focus-trap-el": unref(contentRef),
"focus-start-el": unref(focusStartRef),
onFocusAfterTrapped: unref(onFocusAfterTrapped),
onFocusAfterReleased: unref(onFocusAfterReleased),
onFocusin: unref(onFocusInTrap),
onFocusoutPrevented: unref(onFocusoutPrevented),
onReleaseRequested: unref(onReleaseRequested)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"])
], 16);
};
}
});
var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "content.vue"]]);
const ElPopper = withInstall(Popper);
const TOOLTIP_INJECTION_KEY = Symbol("elTooltip");
const useTooltipContentProps = buildProps({
...useDelayedToggleProps,
...popperContentProps,
appendTo: {
type: definePropType([String, Object])
},
content: {
type: String,
default: ""
},
rawContent: {
type: Boolean,
default: false
},
persistent: Boolean,
ariaLabel: String,
visible: {
type: definePropType(Boolean),
default: null
},
transition: String,
teleported: {
type: Boolean,
default: true
},
disabled: Boolean
});
const useTooltipTriggerProps = buildProps({
...popperTriggerProps,
disabled: Boolean,
trigger: {
type: definePropType([String, Array]),
default: "hover"
},
triggerKeys: {
type: definePropType(Array),
default: () => [EVENT_CODE.enter, EVENT_CODE.space]
}
});
const {
useModelToggleProps: useTooltipModelToggleProps,
useModelToggleEmits: useTooltipModelToggleEmits,
useModelToggle: useTooltipModelToggle
} = createModelToggleComposable("visible");
const useTooltipProps = buildProps({
...popperProps,
...useTooltipModelToggleProps,
...useTooltipContentProps,
...useTooltipTriggerProps,
...popperArrowProps,
showArrow: {
type: Boolean,
default: true
}
});
const tooltipEmits = [
...useTooltipModelToggleEmits,
"before-show",
"before-hide",
"show",
"hide",
"open",
"close"
];
const isTriggerType = (trigger, type) => {
if (isArray(trigger)) {
return trigger.includes(type);
}
return trigger === type;
};
const whenTrigger = (trigger, type, handler) => {
return (e) => {
isTriggerType(unref(trigger), type) && handler(e);
};
};
const __default__$2 = defineComponent({
name: "ElTooltipTrigger"
});
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
...__default__$2,
props: useTooltipTriggerProps,
setup(__props, { expose }) {
const props = __props;
const ns = useNamespace("tooltip");
const { controlled, id, open, onOpen, onClose, onToggle } = inject(TOOLTIP_INJECTION_KEY, void 0);
const triggerRef = ref(null);
const stopWhenControlledOrDisabled = () => {
if (unref(controlled) || props.disabled) {
return true;
}
};
const trigger = toRef(props, "trigger");
const onMouseenter = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onOpen));
const onMouseleave = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onClose));
const onClick = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "click", (e) => {
if (e.button === 0) {
onToggle(e);
}
}));
const onFocus = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onOpen));
const onBlur = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onClose));
const onContextMenu = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "contextmenu", (e) => {
e.preventDefault();
onToggle(e);
}));
const onKeydown = composeEventHandlers(stopWhenControlledOrDisabled, (e) => {
const { code } = e;
if (props.triggerKeys.includes(code)) {
e.preventDefault();
onToggle(e);
}
});
expose({
triggerRef
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElPopperTrigger), {
id: unref(id),
"virtual-ref": _ctx.virtualRef,
open: unref(open),
"virtual-triggering": _ctx.virtualTriggering,
class: normalizeClass(unref(ns).e("trigger")),
onBlur: unref(onBlur),
onClick: unref(onClick),
onContextmenu: unref(onContextMenu),
onFocus: unref(onFocus),
onMouseenter: unref(onMouseenter),
onMouseleave: unref(onMouseleave),
onKeydown: unref(onKeydown)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "virtual-ref", "open", "virtual-triggering", "class", "onBlur", "onClick", "onContextmenu", "onFocus", "onMouseenter", "onMouseleave", "onKeydown"]);
};
}
});
var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "trigger.vue"]]);
const __default__$1 = defineComponent({
name: "ElTooltipContent",
inheritAttrs: false
});
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
...__default__$1,
props: useTooltipContentProps,
setup(__props, { expose }) {
const props = __props;
const { selector } = usePopperContainerId();
const ns = useNamespace("tooltip");
const contentRef = ref(null);
const destroyed = ref(false);
const {
controlled,
id,
open,
trigger,
onClose,
onOpen,
onShow,
onHide,
onBeforeShow,
onBeforeHide
} = inject(TOOLTIP_INJECTION_KEY, void 0);
const transitionClass = computed(() => {
return props.transition || `${ns.namespace.value}-fade-in-linear`;
});
const persistentRef = computed(() => {
return props.persistent;
});
const shouldRender = computed(() => {
return unref(persistentRef) ? true : unref(open);
});
const shouldShow = computed(() => {
return props.disabled ? false : unref(open);
});
const appendTo = computed(() => {
return props.appendTo || selector.value;
});
const contentStyle = computed(() => {
var _a;
return (_a = props.style) != null ? _a : {};
});
const ariaHidden = computed(() => !unref(open));
const onTransitionLeave = () => {
onHide();
};
const stopWhenControlled = () => {
if (unref(controlled))
return true;
};
const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
if (props.enterable && unref(trigger) === "hover") {
onOpen();
}
});
const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
if (unref(trigger) === "hover") {
onClose();
}
});
const onBeforeEnter = () => {
var _a, _b;
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
onBeforeShow == null ? void 0 : onBeforeShow();
};
const onBeforeLeave = () => {
onBeforeHide == null ? void 0 : onBeforeHide();
};
const onAfterShow = () => {
onShow();
stopHandle = onClickOutside(computed(() => {
var _a;
return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
}), () => {
if (unref(controlled))
return;
const $trigger = unref(trigger);
if ($trigger !== "hover") {
onClose();
}
});
};
const onBlur = () => {
if (!props.virtualTriggering) {
onClose();
}
};
let stopHandle;
watch(() => unref(open), (val) => {
if (!val) {
stopHandle == null ? void 0 : stopHandle();
}
}, {
flush: "post"
});
watch(() => props.content, () => {
var _a, _b;
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
});
expose({
contentRef
});
return (_ctx, _cache) => {
return openBlock(), createBlock(Teleport, {
disabled: !_ctx.teleported,
to: unref(appendTo)
}, [
createVNode(Transition, {
name: unref(transitionClass),
onAfterLeave: onTransitionLeave,
onBeforeEnter,
onAfterEnter: onAfterShow,
onBeforeLeave
}, {
default: withCtx(() => [
unref(shouldRender) ? withDirectives((openBlock(), createBlock(unref(ElPopperContent), mergeProps({
key: 0,
id: unref(id),
ref_key: "contentRef",
ref: contentRef
}, _ctx.$attrs, {
"aria-label": _ctx.ariaLabel,
"aria-hidden": unref(ariaHidden),
"boundaries-padding": _ctx.boundariesPadding,
"fallback-placements": _ctx.fallbackPlacements,
"gpu-acceleration": _ctx.gpuAcceleration,
offset: _ctx.offset,
placement: _ctx.placement,
"popper-options": _ctx.popperOptions,
strategy: _ctx.strategy,
effect: _ctx.effect,
enterable: _ctx.enterable,
pure: _ctx.pure,
"popper-class": _ctx.popperClass,
"popper-style": [_ctx.popperStyle, unref(contentStyle)],
"reference-el": _ctx.referenceEl,
"trigger-target-el": _ctx.triggerTargetEl,
visible: unref(shouldShow),
"z-index": _ctx.zIndex,
onMouseenter: unref(onContentEnter),
onMouseleave: unref(onContentLeave),
onBlur,
onClose: unref(onClose)
}), {
default: withCtx(() => [
!destroyed.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)
]),
_: 3
}, 16, ["id", "aria-label", "aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "trigger-target-el", "visible", "z-index", "onMouseenter", "onMouseleave", "onClose"])), [
[vShow, unref(shouldShow)]
]) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["name"])
], 8, ["disabled", "to"]);
};
}
});
var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "content.vue"]]);
const _hoisted_1 = ["innerHTML"];
const _hoisted_2 = { key: 1 };
const __default__ = defineComponent({
name: "ElTooltip"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: useTooltipProps,
emits: tooltipEmits,
setup(__props, { expose, emit }) {
const props = __props;
usePopperContainer();
const id = useId();
const popperRef = ref();
const contentRef = ref();
const updatePopper = () => {
var _a;
const popperComponent = unref(popperRef);
if (popperComponent) {
(_a = popperComponent.popperInstanceRef) == null ? void 0 : _a.update();
}
};
const open = ref(false);
const toggleReason = ref();
const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
indicator: open,
toggleReason
});
const { onOpen, onClose } = useDelayedToggle({
showAfter: toRef(props, "showAfter"),
hideAfter: toRef(props, "hideAfter"),
autoClose: toRef(props, "autoClose"),
open: show,
close: hide
});
const controlled = computed(() => isBoolean(props.visible) && !hasUpdateHandler.value);
provide(TOOLTIP_INJECTION_KEY, {
controlled,
id,
open: readonly(open),
trigger: toRef(props, "trigger"),
onOpen: (event) => {
onOpen(event);
},
onClose: (event) => {
onClose(event);
},
onToggle: (event) => {
if (unref(open)) {
onClose(event);
} else {
onOpen(event);
}
},
onShow: () => {
emit("show", toggleReason.value);
},
onHide: () => {
emit("hide", toggleReason.value);
},
onBeforeShow: () => {
emit("before-show", toggleReason.value);
},
onBeforeHide: () => {
emit("before-hide", toggleReason.value);
},
updatePopper
});
watch(() => props.disabled, (disabled) => {
if (disabled && open.value) {
open.value = false;
}
});
const isFocusInsideContent = (event) => {
var _a, _b;
const popperContent = (_b = (_a = contentRef.value) == null ? void 0 : _a.contentRef) == null ? void 0 : _b.popperContentRef;
const activeElement = (event == null ? void 0 : event.relatedTarget) || (void 0).activeElement;
return popperContent && popperContent.contains(activeElement);
};
expose({
popperRef,
contentRef,
isFocusInsideContent,
updatePopper,
onOpen,
onClose,
hide
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElPopper), {
ref_key: "popperRef",
ref: popperRef,
role: _ctx.role
}, {
default: withCtx(() => [
createVNode(ElTooltipTrigger, {
disabled: _ctx.disabled,
trigger: _ctx.trigger,
"trigger-keys": _ctx.triggerKeys,
"virtual-ref": _ctx.virtualRef,
"virtual-triggering": _ctx.virtualTriggering
}, {
default: withCtx(() => [
_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["disabled", "trigger", "trigger-keys", "virtual-ref", "virtual-triggering"]),
createVNode(ElTooltipContent, {
ref_key: "contentRef",
ref: contentRef,
"aria-label": _ctx.ariaLabel,
"boundaries-padding": _ctx.boundariesPadding,
content: _ctx.content,
disabled: _ctx.disabled,
effect: _ctx.effect,
enterable: _ctx.enterable,
"fallback-placements": _ctx.fallbackPlacements,
"hide-after": _ctx.hideAfter,
"gpu-acceleration": _ctx.gpuAcceleration,
offset: _ctx.offset,
persistent: _ctx.persistent,
"popper-class": _ctx.popperClass,
"popper-style": _ctx.popperStyle,
placement: _ctx.placement,
"popper-options": _ctx.popperOptions,
pure: _ctx.pure,
"raw-content": _ctx.rawContent,
"reference-el": _ctx.referenceEl,
"trigger-target-el": _ctx.triggerTargetEl,
"show-after": _ctx.showAfter,
strategy: _ctx.strategy,
teleported: _ctx.teleported,
transition: _ctx.transition,
"virtual-triggering": _ctx.virtualTriggering,
"z-index": _ctx.zIndex,
"append-to": _ctx.appendTo
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "content", {}, () => [
_ctx.rawContent ? (openBlock(), createElementBlock("span", {
key: 0,
innerHTML: _ctx.content
}, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.content), 1))
]),
_ctx.showArrow ? (openBlock(), createBlock(unref(ElPopperArrow), {
key: 0,
"arrow-offset": _ctx.arrowOffset
}, null, 8, ["arrow-offset"])) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["aria-label", "boundaries-padding", "content", "disabled", "effect", "enterable", "fallback-placements", "hide-after", "gpu-acceleration", "offset", "persistent", "popper-class", "popper-style", "placement", "popper-options", "pure", "raw-content", "reference-el", "trigger-target-el", "show-after", "strategy", "teleported", "transition", "virtual-triggering", "z-index", "append-to"])
]),
_: 3
}, 8, ["role"]);
};
}
});
var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tooltip.vue"]]);
const ElTooltip = withInstall(Tooltip);
export { ElTooltip as E, TOOLTIP_INJECTION_KEY as T, useTooltipContentProps as a, ElInput as b, useFormItem as c, useFormSize as d, useFormDisabled as e, useTooltipTriggerProps as u };
//# sourceMappingURL=el-input-EWo97eJz.mjs.map