comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
112 lines (111 loc) • 4.21 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../style/tip.css");
const config = require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
require("@vueuse/core");
const main_props = require("./main.props.js");
require("../../../icons/index.js");
const resize = require("../../../hooks/resize.js");
const components = require("../../../icons/components/components.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "CuTip"
},
__name: "main",
props: main_props.tipProps,
emits: main_props.tipEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const tipRef = vue.ref(null);
const tipContentRef = vue.ref(null);
const tipPositionRef = vue.ref(null);
const thresholdX = vue.ref(0);
const duration = vue.ref("25s");
const isRolling = vue.ref(false);
const cloendEle = vue.ref();
const { globalSize } = config.useGlobal();
const isHoverPause = vue.computed(() => props.rolling && isRolling.value && props.hoverPause);
const tipStyle = vue.computed(() => {
if (!props.color) return void 0;
return {
backgroundColor: props.plain ? `color-mix(in srgb, ${props.color}, white 90%)` : props.color,
color: props.plain ? props.color : "#fff"
};
});
function determineScroll() {
if (!tipContentRef.value) return;
let rect = tipContentRef.value.getBoundingClientRect();
let pRect = tipPositionRef.value.getBoundingClientRect();
if (pRect.width > rect.width) {
if (!cloendEle.value) {
cloendEle.value = tipPositionRef.value.cloneNode(true);
tipPositionRef.value.parentNode.appendChild(cloendEle.value);
}
cloendEle.value.style.setProperty("margin-left", rect.width / 4 + "px");
duration.value = Math.floor(pRect.width / 25) + "s";
thresholdX.value = pRect.width + rect.width / 4;
isRolling.value = true;
} else {
cloendEle.value && tipPositionRef.value.parentNode.removeChild(cloendEle.value);
cloendEle.value = null;
isRolling.value = false;
}
}
resize.useResize(
tipRef,
() => {
if (props.rolling) {
determineScroll();
}
},
{ immediate: true }
);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(["cu-tip", [
{ "is-plain": _ctx.plain },
_ctx.type ? "cu-tip--" + _ctx.type : void 0,
_ctx.size ?? vue.unref(globalSize),
{ "hover-pause": isHoverPause.value },
{ "rolling-mode": _ctx.rolling },
{ "is-rolling": _ctx.rolling && isRolling.value }
]]),
style: vue.normalizeStyle(tipStyle.value),
ref_key: "tipRef",
ref: tipRef
}, [
vue.unref(typescript.isVueComponent)(_ctx.icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon), {
key: 0,
class: "cu-tip__icon"
})) : vue.createCommentVNode("", true),
vue.createElementVNode("span", {
class: "cu-tip__content",
ref_key: "tipContentRef",
ref: tipContentRef
}, [
vue.createElementVNode("span", {
class: "cu-tip__position",
style: vue.normalizeStyle({ "--threshold-x": 0 - thresholdX.value + "px", animationDuration: duration.value })
}, [
vue.createElementVNode("span", {
class: "cu-tip-message-box",
ref_key: "tipPositionRef",
ref: tipPositionRef
}, [
vue.renderSlot(_ctx.$slots, "default")
], 512)
], 4)
], 512),
_ctx.closable ? (vue.openBlock(), vue.createBlock(vue.unref(components.CloseOne), {
key: 1,
class: "cu-tip__close",
onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
})) : vue.createCommentVNode("", true)
], 6);
};
}
});
exports.default = _sfc_main;