| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- import { defineComponent, ref, unref, toRef, computed, provide, readonly, watch, onDeactivated, openBlock, createBlock, withCtx, createVNode, renderSlot, createCommentVNode, createElementBlock, toDisplayString } from 'vue';
- import { ElPopper } from '../../popper/index.mjs';
- import '../../../utils/index.mjs';
- import '../../../hooks/index.mjs';
- import '../../../tokens/index.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 { useId } from '../../../hooks/use-id/index.mjs';
- import { useDelayedToggle } from '../../../hooks/use-delayed-toggle/index.mjs';
- import { isBoolean } from '@vueuse/core';
- import { TOOLTIP_INJECTION_KEY } from '../../../tokens/tooltip.mjs';
- import ElPopperArrow from '../../popper/src/arrow2.mjs';
- 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"),
- 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 = () => {
- var _a, _b;
- const popperContent = (_b = (_a = contentRef.value) == null ? void 0 : _a.contentRef) == null ? void 0 : _b.popperContentRef;
- return popperContent && popperContent.contains(document.activeElement);
- };
- 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
- }, {
- 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"]]);
- export { Tooltip as default };
- //# sourceMappingURL=tooltip2.mjs.map
|