375 lines
15 KiB
JavaScript
375 lines
15 KiB
JavaScript
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, normalizeProps, 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, normalizeProps(mergeProps({ key: 2 }, unref(innerProps))), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "content")
|
|
]),
|
|
_: 3
|
|
}, 16)) : createCommentVNode("", true)
|
|
], 64);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { _sfc_main as _, component as c };
|