2024-01-09 07:55:02 +00:00
|
|
|
import { computed, getCurrentInstance, ref, inject, 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, onUnmounted } from 'vue';
|
|
|
|
import { useResizeObserver, useEventListener, isClient, onClickOutside, tryOnScopeDispose, unrefElement } from '@vueuse/core';
|
|
|
|
import { fromPairs, isNil, isUndefined } from 'lodash-unified';
|
2024-07-25 11:05:31 +00:00
|
|
|
import { ab as buildProp, b as buildProps, ac as useGlobalSize, W as useSizeProp, d as definePropType, i as iconPropType, z as mutable, ad as ValidateComponentsMap, ae as view_default, af as hide_default, E as ElIcon, V as circle_close_default, c as withInstall, q as ElFocusTrap, B as EVENT_CODE, e as isBoolean, U as UPDATE_MODEL_EVENT, _ as _export_sfc, x as useZIndex, n as isNumber } from './cross-icon-0d3f98ec.mjs';
|
2024-01-09 07:55:02 +00:00
|
|
|
import { NOOP, isObject, isString, isFunction, isArray } from '@vue/shared';
|
|
|
|
import { d as useNamespace, h as debugWarn, f 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(window.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 = window.setTimeout(fn, delay);
|
|
|
|
};
|
|
|
|
const cancelTimeout = () => window.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 = window.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 = document.createElement("textarea");
|
|
|
|
document.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", "/home/runner/work/element-plus/element-plus/packages/components/input/src/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", "/home/runner/work/element-plus/element-plus/packages/components/popper/src/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", "/home/runner/work/element-plus/element-plus/packages/components/popper/src/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", "/home/runner/work/element-plus/element-plus/packages/components/popper/src/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", "/home/runner/work/element-plus/element-plus/packages/components/popper/src/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", "/home/runner/work/element-plus/element-plus/packages/components/tooltip/src/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", "/home/runner/work/element-plus/element-plus/packages/components/tooltip/src/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) || document.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", "/home/runner/work/element-plus/element-plus/packages/components/tooltip/src/tooltip.vue"]]);
|
|
|
|
const ElTooltip = withInstall(Tooltip);
|
|
|
|
|
|
|
|
export { ElTooltip as E, TOOLTIP_INJECTION_KEY as T, useTooltipContentProps as a, ElInput as b, useAttrs as c, useFormDisabled as d, useFormItem as e, useFormSize as f, useTooltipTriggerProps as u };
|
2024-07-25 11:05:31 +00:00
|
|
|
//# sourceMappingURL=el-input-a4ec0489.mjs.map
|