theluyuan/layui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Theluyuan
2022-11-14 11:59:26 +08:00
parent 0a63adba99
commit 492d0963fe
336 changed files with 70636 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
es/tooltip/index.css Normal file
View File

@@ -0,0 +1 @@
.lay-tooltip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.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}

4
es/tooltip/index.js Normal file
View File

@@ -0,0 +1,4 @@
import "../badge/index2.js";
export { c as default } from "./index2.js";
import "vue";
import "../_chunks/@vueuse/index.js";

374
es/tooltip/index2.js Normal file
View File

@@ -0,0 +1,374 @@
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 };