PC-mj/.output/server/chunks/app/_nuxt/el-popper-c6097418.mjs

1367 lines
39 KiB
JavaScript
Raw Normal View History

2024-01-03 11:11:30 +00:00
import { defineComponent, ref, computed, provide, renderSlot, inject, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, cloneVNode, Fragment, Text, Comment, createVNode, createBlock, mergeProps, withCtx, createCommentVNode, toRef, Teleport, Transition, vShow, readonly, toDisplayString, shallowRef, getCurrentInstance } from 'vue';
2024-01-04 03:12:34 +00:00
import { ac as buildProp, b as buildProps, d as definePropType, m as ElFocusTrap, c as withInstall, y as EVENT_CODE, e as isBoolean, _ as _export_sfc, s as useZIndex, k as isNumber } from './cross-icon-4989af54.mjs';
2024-01-03 11:11:30 +00:00
import { onClickOutside, tryOnScopeDispose, isClient, unrefElement } from '@vueuse/core';
import { placements, createPopper } from '@popperjs/core';
import { NOOP, isObject, isFunction, isArray } from '@vue/shared';
import { d as useNamespace, f as useId, i as useGetDerivedNamespace, j as useIdInjection } from '../server.mjs';
import { isUndefined, fromPairs } from 'lodash-unified';
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 _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 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);
}
};
};
const formContextKey = Symbol("formContextKey");
const formItemContextKey = Symbol("formItemContextKey");
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, formItemContextKey as b, formContextKey as f, useTooltipTriggerProps as u };
2024-01-04 03:12:34 +00:00
//# sourceMappingURL=el-popper-c6097418.mjs.map