172 lines
6.5 KiB
JavaScript
172 lines
6.5 KiB
JavaScript
import { defineComponent, ref, toRef, computed, provide, readonly, unref, watch, onDeactivated, openBlock, createBlock, withCtx, createVNode, renderSlot, createCommentVNode, createElementBlock, toDisplayString } from 'vue';
|
|
import { ElPopper } from '../../popper/index.mjs';
|
|
import { TOOLTIP_INJECTION_KEY } from './constants.mjs';
|
|
import { useTooltipProps, tooltipEmits, useTooltipModelToggle } from './tooltip.mjs';
|
|
import ElTooltipTrigger from './trigger2.mjs';
|
|
import ElTooltipContent from './content2.mjs';
|
|
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
|
|
import { usePopperContainer } from '../../../hooks/use-popper-container/index.mjs';
|
|
import ElPopperArrow from '../../popper/src/arrow.mjs';
|
|
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
|
import { useId } from '../../../hooks/use-id/index.mjs';
|
|
import { useDelayedToggle } from '../../../hooks/use-delayed-toggle/index.mjs';
|
|
import { isBoolean } from '../../../utils/types.mjs';
|
|
|
|
const __default__ = defineComponent({
|
|
name: "ElTooltip"
|
|
});
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
...__default__,
|
|
props: useTooltipProps,
|
|
emits: tooltipEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
usePopperContainer();
|
|
const ns = useNamespace("tooltip");
|
|
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);
|
|
const kls = computed(() => {
|
|
return [ns.b(), props.popperClass];
|
|
});
|
|
provide(TOOLTIP_INJECTION_KEY, {
|
|
controlled,
|
|
id,
|
|
open: readonly(open),
|
|
trigger: toRef(props, "trigger"),
|
|
onOpen,
|
|
onClose,
|
|
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;
|
|
return (_a = contentRef.value) == null ? void 0 : _a.isFocusInsideContent(event);
|
|
};
|
|
onDeactivated(() => open.value && hide());
|
|
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,
|
|
"focus-on-target": _ctx.focusOnTarget
|
|
}, {
|
|
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", "focus-on-target"]),
|
|
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": unref(kls),
|
|
"popper-style": _ctx.popperStyle,
|
|
placement: _ctx.placement,
|
|
"popper-options": _ctx.popperOptions,
|
|
"arrow-offset": _ctx.arrowOffset,
|
|
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, ["innerHTML"])) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.content), 1))
|
|
]),
|
|
_ctx.showArrow ? (openBlock(), createBlock(unref(ElPopperArrow), { key: 0 })) : 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", "arrow-offset", "pure", "raw-content", "reference-el", "trigger-target-el", "show-after", "strategy", "teleported", "transition", "virtual-triggering", "z-index", "append-to"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["role"]);
|
|
};
|
|
}
|
|
});
|
|
var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tooltip.vue"]]);
|
|
|
|
export { Tooltip as default };
|
|
//# sourceMappingURL=tooltip2.mjs.map
|