import { w as withInstall } from "../badge/index2.js"; import { defineComponent, useSlots, ref, toRef, shallowRef, computed, watch, onMounted, openBlock, createBlock, Teleport, withDirectives, createVNode, Transition, withCtx, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createTextVNode, toDisplayString, vShow, createCommentVNode, nextTick, getCurrentInstance, createElementBlock, Fragment, mergeProps, unref } from "vue"; import { o as onClickOutside, a as useResizeObserver, c as useEventListener, b as useThrottleFn } from "../_chunks/@vueuse/index.js"; var index$1 = /* @__PURE__ */ (() => ".lay-tooltip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}\n")(); var index = /* @__PURE__ */ (() => '.layui-popper{position:fixed;padding:10px;border-radius:3px;word-wrap:break-word;min-width:12px;min-height:12px;font-size:14px;box-sizing:border-box;box-shadow:0 2px 12px #00000026;background-color:#fff;color:#3a3a3a;border:1px solid #cecece;max-width:300px;z-index:99999}.layui-popper[position=top]{margin-bottom:6px}.layui-popper[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#cecece}.layui-popper[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#fff}.layui-popper[position=bottom]{margin-top:6px}.layui-popper[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#cecece}.layui-popper[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#fff}.layui-popper[position=right]{margin-left:6px}.layui-popper[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#cecece}.layui-popper[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#fff}.layui-popper[position=left]{margin-right:6px}.layui-popper[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#cecece}.layui-popper[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#fff}.layui-popper[position=top] .layui-popper-arrow,.layui-popper[position=bottom] .layui-popper-arrow{left:-moz-calc(44%);left:-webkit-calc(44%);left:calc(50% - 6px)}.layui-popper[position=left] .layui-popper-arrow,.layui-popper[position=right] .layui-popper-arrow{top:-moz-calc(44%);top:-webkit-calc(44%);top:calc(50% - 6px)}.layui-popper:after{content:" ";position:absolute;display:block}.layui-popper[position=top]:after{bottom:-7px;left:0;width:100%;height:7px}.layui-popper[position=bottom]:after{top:-7px;left:0;width:100%;height:7px}.layui-popper[position=left]:after{right:-7px;bottom:0;height:100%;width:7px}.layui-popper[position=right]:after{left:-7px;bottom:0;height:100%;width:7px}.layui-popper .layui-popper-arrow,.layui-popper .layui-popper-arrow:after{position:absolute;display:block;width:0;height:0;border-width:6px;border-style:solid;border-color:transparent}.layui-popper .layui-popper-arrow:after{content:" "}.layui-popper.layui-dark{background-color:#353535;color:#fff;border:1px solid #353535}.layui-popper.layui-dark[position=top]{margin-bottom:6px}.layui-popper.layui-dark[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#353535}.layui-popper.layui-dark[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#353535}.layui-popper.layui-dark[position=bottom]{margin-top:6px}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#353535}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#353535}.layui-popper.layui-dark[position=right]{margin-left:6px}.layui-popper.layui-dark[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#353535}.layui-popper.layui-dark[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#353535}.layui-popper.layui-dark[position=left]{margin-right:6px}.layui-popper.layui-dark[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#353535}.layui-popper.layui-dark[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#353535}\n')(); const postionFns = { top(el, popper, innnerPosition, called) { let { top, left, bottom } = el.getBoundingClientRect(); if ((top = top - popper.offsetHeight - 6) < 0 && bottom > popper.offsetHeight) { innnerPosition.value = "bottom"; top = bottom; } else { innnerPosition.value = "top"; } return { top: `${top}px`, left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px` }; }, bottom(el, popper, innnerPosition, called) { let { top, left, bottom } = el.getBoundingClientRect(); if (window.innerHeight - bottom < popper.offsetHeight + 6) { innnerPosition.value = "top"; bottom = top - popper.offsetHeight - 6; } else { innnerPosition.value = "bottom"; } return { top: `${bottom}px`, left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px` }; }, left(el, popper, innnerPosition, called) { let { top, left, right } = el.getBoundingClientRect(); left = left - popper.offsetWidth - 6; if (left < 0) { innnerPosition.value = "right"; left = right; } else { innnerPosition.value = "left"; } return { top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`, left: `${left}px` }; }, right(el, popper, innnerPosition, called) { let { top, left, right } = el.getBoundingClientRect(); if (window.innerWidth < right + popper.offsetWidth + 6) { innnerPosition.value = "left"; right = left - popper.offsetWidth - 6; } else { innnerPosition.value = "right"; } return { top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`, left: `${right}px` }; } }; const _hoisted_1 = ["position"]; const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "layui-popper-arrow" }, null, -1); const NAME = "LayPopper"; const __default__$1 = { name: NAME }; const _sfc_main$1 = defineComponent({ ...__default__$1, props: { el: null, position: { default: "top" }, enterable: { type: Boolean, default: true }, isDark: { type: Boolean, default: true }, disabled: { type: Boolean, default: false }, isCanHide: { type: Boolean, default: true }, isAutoShow: { type: Boolean, default: false }, visible: { type: Boolean, default: false }, content: null, trigger: { default: "hover" }, popperClass: null, popperStyle: null }, setup(__props) { const props = __props; useSlots(); const style = ref({ top: -window.innerHeight + "px", left: 0 }); const triggerRefEl = toRef(props, "el"); const popperRefEl = shallowRef({}); const innnerPosition = ref(props.position); const innerVisible = ref(props.visible); const isExist = ref(props.visible); let scrollElements; const triggerMethods = computed(() => [].concat(props.trigger)); const doShow = function() { if (!props.disabled) { if (!isExist.value) { isExist.value = true; nextTick(() => { innerVisible.value = true; }); } else { innerVisible.value = true; } } }; const doHidden = function(e) { if (props.isCanHide === false) { return; } innerVisible.value = false; innnerPosition.value = props.position; style.value = { top: -window.innerHeight + "px", left: 0 }; }; const calcPosistion = function() { postionFns[props.position] && (style.value = postionFns[props.position](triggerRefEl.value, popperRefEl.value, innnerPosition)); }; const updatePosistion = function() { if (innerVisible.value) { popperRefEl.value.offsetWidth === 0 ? nextTick(() => calcPosistion()) : calcPosistion(); nextTick(() => { calcPosistion(); }); } }; const handlerPopperMouseEnter = function() { if (triggerMethods.value.includes("hover") && props.enterable) { doShow(); } }; const handlerPopperMouseLeave = function() { if (triggerMethods.value.includes("hover") && props.enterable) { doHidden(); } }; const handlerTriggerClick = function() { if (!triggerMethods.value.includes("click")) return; if (innerVisible.value) { doHidden(); } else { doShow(); } }; const handleTriggerContextMenu = function(e) { if (!triggerMethods.value.includes("contextMenu")) return; e.preventDefault(); if (innerVisible.value) { doHidden(); } else { doShow(); } }; const handlerTriggerMouseEnter = function() { if (!triggerMethods.value.includes("hover")) return; doShow(); }; const handlerTriggerMouseLeave = function() { if (!triggerMethods.value.includes("hover")) return; doHidden(); }; const handleTriggerFocusin = function() { if (triggerMethods.value.includes("focus") && props.enterable) { doShow(); } }; const handleTriggerFocusout = function() { if (triggerMethods.value.includes("focus") && props.enterable) { doHidden(); } }; const handlerTriggerEventRegist = function() { useEventListener(triggerRefEl.value, "click", handlerTriggerClick); useEventListener(triggerRefEl.value, "contextmenu", handleTriggerContextMenu); useEventListener(triggerRefEl.value, "mouseenter", handlerTriggerMouseEnter); useEventListener(triggerRefEl.value, "mouseleave", handlerTriggerMouseLeave); useEventListener(triggerRefEl.value, "focusin", handleTriggerFocusin); useEventListener(triggerRefEl.value, "focusout", handleTriggerFocusout); }; const handleScroll = useThrottleFn(() => { if (innerVisible.value) { updatePosistion(); } }, 15); onClickOutside(triggerRefEl.value, (e) => { if (!innerVisible.value || triggerRefEl.value.contains(e.target) || popperRefEl.value.contains(e.target)) { return; } doHidden(); }, { ignore: [popperRefEl.value] }); useResizeObserver(triggerRefEl, () => { updatePosistion(); }); let popperObserver = void 0; watch(innerVisible, (isShow) => { updatePosistion(); if (isShow) { popperObserver = useResizeObserver(popperRefEl, () => { updatePosistion(); }); } else { popperObserver && popperObserver.stop(); } }); watch(() => props.visible, (isShow) => isShow ? doShow() : doHidden()); watch(() => props.content, () => { updatePosistion(); }); const isScrollElement = function(element) { return element.scrollHeight > element.offsetHeight || element.scrollWidth > element.offsetWidth; }; const getScrollElements = function(container) { var _a; const scrollElements2 = []; let element = container; while (element && element !== document.documentElement) { if (isScrollElement(element)) { scrollElements2.push(element); } element = (_a = element.parentElement) != null ? _a : void 0; } return scrollElements2; }; onMounted(() => { updatePosistion(); scrollElements = getScrollElements(triggerRefEl.value); for (const item of scrollElements) { useEventListener(item, "scroll", handleScroll); } useEventListener("resize", handleScroll); handlerTriggerEventRegist(); }); return (_ctx, _cache) => { return isExist.value ? (openBlock(), createBlock(Teleport, { key: 0, to: "body" }, [ withDirectives(createVNode(Transition, null, { default: withCtx(() => { var _a; return [ createElementVNode("div", { ref_key: "popperRefEl", ref: popperRefEl, class: normalizeClass(["layui-popper", { "layui-dark": __props.isDark }, props.popperClass]), style: normalizeStyle([style.value, (_a = props.popperStyle) != null ? _a : ""]), position: innnerPosition.value, onMouseenter: handlerPopperMouseEnter, onMouseleave: handlerPopperMouseLeave }, [ renderSlot(_ctx.$slots, "default", {}, () => [ createTextVNode(toDisplayString(__props.content), 1) ]), _hoisted_2 ], 46, _hoisted_1) ]; }), _: 3 }, 512), [ [vShow, innerVisible.value] ]) ])) : createCommentVNode("", true); }; } }); const __default__ = { name: "LayTooltip", inheritAttrs: false }; const _sfc_main = defineComponent({ ...__default__, props: { content: { type: [Number, String], required: false }, position: { type: String, default: "top" }, isDark: { type: Boolean, default: true }, disabled: { type: Boolean, default: false }, isCanHide: { type: Boolean, default: true }, isAutoShow: { type: Boolean, default: false }, visible: { type: Boolean, default: false }, trigger: { type: String, default: "hover" }, enterable: { type: Boolean, default: true }, popperClass: { type: [String, Array, Object] }, popperStyle: { type: [String, Object] } }, setup(__props) { const props = __props; const vm = getCurrentInstance(); const isMounted = ref(false); const tooltipRefEl = shallowRef(void 0); const innerProps = computed(() => { return { el: vm.proxy.$el.nextElementSibling, ...vm.proxy.$props }; }); const setEllipsis = function() { var _a; if (tooltipRefEl.value) { let tooltipHtml = tooltipRefEl.value; if (tooltipHtml.offsetWidth >= ((_a = tooltipHtml.firstChild) == null ? void 0 : _a.offsetWidth)) { isMounted.value = false; } else { isMounted.value = true; } } else { isMounted.value = true; } }; onMounted(() => { if (props.isAutoShow) { useEventListener("resize", () => { setEllipsis(); }); } nextTick(() => { setEllipsis(); }); }); return (_ctx, _cache) => { return openBlock(), createElementBlock(Fragment, null, [ __props.isAutoShow ? (openBlock(), createElementBlock("div", { key: 0, ref_key: "tooltipRefEl", ref: tooltipRefEl, class: "lay-tooltip-content" }, [ createElementVNode("span", null, [ renderSlot(_ctx.$slots, "default") ]) ], 512)) : renderSlot(_ctx.$slots, "default", { key: 1 }), isMounted.value ? (openBlock(), createBlock(_sfc_main$1, mergeProps({ key: 2, positio: __props.position }, unref(innerProps)), { default: withCtx(() => [ renderSlot(_ctx.$slots, "content") ]), _: 3 }, 16, ["positio"])) : createCommentVNode("", true) ], 64); }; } }); const component = withInstall(_sfc_main); export { _sfc_main as _, component as c };