@ctsy/layui-vue
Version:
a component library for Vue 3 base on layui-vue
240 lines (239 loc) • 8.08 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, watch, onMounted, openBlock, createBlock, Teleport, withDirectives, createVNode, Transition, withCtx, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createTextVNode, toDisplayString, vShow, createCommentVNode, resolveComponent, createElementBlock, Fragment, normalizeProps, mergeProps } from "vue";
import { _ as _export_sfc } from "../plugin-vue_export-helper.js";
var index = "";
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;
}
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;
}
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;
}
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;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${right}px`
};
}
};
function on(elem, events, handler) {
[].concat(events).forEach((event) => elem.addEventListener(event, handler, false));
}
const _hoisted_1 = ["position"];
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "layui-popper-arrow" }, null, -1);
const NAME = "LayPopper";
const __default__ = {
name: NAME
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: {
el: null,
content: null,
position: { default: "top" },
trigger: { default: "hover" },
enterable: { type: Boolean, default: true },
isDark: { type: Boolean, default: true },
disabled: { type: Boolean, default: false },
isCanHide: { type: Boolean, default: true }
},
setup(__props) {
var _a;
const props = __props;
const EVENT_MAP = {
hover: ["mouseenter", null, "mouseleave", false],
click: ["click", document, "click", true]
};
const triggerArr = EVENT_MAP[props.trigger];
if (!triggerArr) {
console.error(`${NAME} render error!cause: 'Trigger' must be 'hover/click' `);
}
const style = ref({ top: -window.innerHeight + "px", left: 0 });
const checkTarget = ref(false);
const popper = ref({});
const innnerPosition = ref(props.position);
const innerVisible = ref(!props.isCanHide);
const isExist = ref(!props.isCanHide);
watch(() => props.isCanHide, (val) => {
innerVisible.value = !val;
});
watch(innerVisible, (val) => {
invokeShowPosistion();
});
watch(popper, (val) => {
if (props.trigger === "hover" && props.enterable) {
on(popper.value, EVENT_MAP["hover"][0], doShow);
on(popper.value, EVENT_MAP["hover"][2], doHidden);
}
});
watch(() => props.content, (val) => {
innerVisible.value && invokeShowPosistion();
});
const doShow = function() {
if (!props.disabled) {
if (!isExist.value) {
isExist.value = true;
setTimeout(() => innerVisible.value = true, 0);
} else {
innerVisible.value = true;
}
}
};
const doHidden = function(e) {
if (checkTarget.value && props.el.contains(e.target)) {
return;
}
if (props.isCanHide === false) {
return;
}
innerVisible.value = false;
innnerPosition.value = props.position;
style.value = { top: -window.innerHeight + "px", left: 0 };
};
const showPosistion = function() {
postionFns[props.position] && (style.value = postionFns[props.position](props.el, popper.value, innnerPosition));
};
const invokeShowPosistion = function() {
if (innerVisible.value) {
popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion();
setTimeout(() => innerVisible.value && showPosistion(), 2);
}
};
on(props.el, triggerArr[0], doShow);
on((_a = triggerArr[1]) != null ? _a : props.el, triggerArr[2], doHidden);
checkTarget.value = triggerArr[3];
onMounted(() => {
invokeShowPosistion();
});
return (_ctx, _cache) => {
return isExist.value ? (openBlock(), createBlock(Teleport, {
key: 0,
to: "body"
}, [
withDirectives(createVNode(Transition, null, {
default: withCtx(() => [
createElementVNode("div", {
ref_key: "popper",
ref: popper,
class: normalizeClass(["layui-popper", { "layui-dark": __props.isDark }]),
style: normalizeStyle(style.value),
position: __props.position
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(__props.content), 1)
]),
_hoisted_2
], 14, _hoisted_1)
]),
_: 3
}, 512), [
[vShow, innerVisible.value]
])
])) : createCommentVNode("", true);
};
}
}));
const _sfc_main = defineComponent({
name: "LayTooltip",
components: {
LayPopper: _sfc_main$1
},
props: {
content: {
type: [Number, String],
required: true
},
position: {
type: String,
default: "top"
},
isDark: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
isCanHide: {
type: Boolean,
default: true
}
},
setup() {
const isMounted = ref(false);
return {
isMounted
};
},
computed: {
innerProps() {
return __spreadValues({ el: this.$el.nextElementSibling }, this.$props);
}
},
mounted() {
this.$nextTick(() => this.isMounted = true);
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_lay_popper = resolveComponent("lay-popper");
return openBlock(), createElementBlock(Fragment, null, [
renderSlot(_ctx.$slots, "default"),
_ctx.isMounted ? (openBlock(), createBlock(_component_lay_popper, normalizeProps(mergeProps({ key: 0 }, _ctx.innerProps)), null, 16)) : createCommentVNode("", true)
], 64);
}
var Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
Component.install = (app) => {
app.component(Component.name, Component);
};
export { Component as default };