comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
90 lines (89 loc) • 3.36 kB
JavaScript
import { defineComponent, ref, computed, watch, openBlock, createBlock, Teleport, createElementVNode, normalizeStyle, unref, createVNode, Transition, withCtx, withDirectives, normalizeClass, createElementBlock, createCommentVNode, renderSlot, vShow } from "vue";
import "../style/popper.css";
import { getNextZIndex } from "../../../utils/config.mjs";
import "@vueuse/core";
import { popperProps } from "./main.props.mjs";
import { offset, flip, shift, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
const _hoisted_1 = ["data-placement"];
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "CuPopper"
},
__name: "main",
props: popperProps,
setup(__props) {
const props = __props;
const zIndex = ref(0);
const arrowRef = ref(null);
const popperRef = ref(null);
const triggerRef = computed(() => {
return props.trigger;
});
var cleanup;
const middleware = computed(() => {
return [offset(props.offset), flip(), shift({ padding: 10 }), arrow({ element: arrowRef, padding: 10 })];
});
const { floatingStyles, middlewareData, placement, update } = useFloating(triggerRef, popperRef, {
placement: props.placement,
middleware
});
watch(
() => props.show,
(val, old) => {
if (val && val !== old) {
zIndex.value = getNextZIndex();
}
if (val) {
if (triggerRef.value && popperRef.value) {
cleanup = autoUpdate(triggerRef.value, popperRef.value, update);
}
} else {
cleanup();
}
}
);
return (_ctx, _cache) => {
return openBlock(), createBlock(Teleport, { to: "body" }, [
createElementVNode("div", {
class: "cu-popper-warpper",
ref_key: "popperRef",
ref: popperRef,
style: normalizeStyle({ ...unref(floatingStyles), zIndex: zIndex.value })
}, [
createVNode(Transition, {
name: _ctx.transitionName,
onAfterLeave: _cache[0] || (_cache[0] = () => zIndex.value = 0)
}, {
default: withCtx(() => {
var _a, _b;
return [
withDirectives(createElementVNode("div", {
class: normalizeClass(["cu-popper", [_ctx.effect, _ctx.customClass]]),
"data-placement": unref(placement)
}, [
!_ctx.hideArrow ? (openBlock(), createElementBlock("span", {
key: 0,
class: "cu-popper__arrow",
ref_key: "arrowRef",
ref: arrowRef,
style: normalizeStyle({
left: _ctx.arrowLeft ? "20px" : ((_a = unref(middlewareData).arrow) == null ? void 0 : _a.x) != null ? `${unref(middlewareData).arrow.x}px` : "",
top: ((_b = unref(middlewareData).arrow) == null ? void 0 : _b.y) != null ? `${unref(middlewareData).arrow.y}px` : ""
})
}, null, 4)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1), [
[vShow, _ctx.show]
])
];
}),
_: 3
}, 8, ["name"])
], 4)
]);
};
}
});
export {
_sfc_main as default
};