dk-plus
Version:
65 lines (64 loc) • 1.95 kB
JavaScript
import { defineComponent as v, reactive as n, onMounted as c, watch as r, toRefs as f } from "vue";
import { popoverProps as m } from "./index3.js";
import "../../_icon/index.js";
import { getPopover as h } from "../../_hooks/get-popover/index.js";
const x = v({
name: "DkPopover",
props: m,
emits: ["update:modelValue", "hidden"],
setup(a, { emit: o }) {
const { classList: e, styleList: s, wrapperClassList: d, setTop: p } = h(a), i = n({
visible: a.visible,
trigger: a.trigger,
wrapperRef: null,
placement: a.placement,
top: "0px",
left: "0px",
showArrow: a.showArrow
});
c(() => {
const { height: t, width: u } = p(i.wrapperRef);
i.top = t + "px", i.left = u + "px";
});
const l = {
handleMouseEnter: () => {
i.trigger === "hover" && (e.value.includes("dk-popover-active") || e.value.push("dk-popover-active"), o("update:modelValue", !0), o("hidden", !0));
},
handleMouseLeave: () => {
i.trigger === "hover" && (e.value.includes("dk-popover-active") && e.value.splice(e.value.indexOf("dk-popover-active"), 1), o("update:modelValue", !1), o("hidden", !1));
},
setClassName: (t) => {
t ? e.value.includes("dk-popover-active") || e.value.push("dk-popover-active") : e.value.includes("dk-popover-active") && e.value.splice(e.value.indexOf("dk-popover-active"), 1);
},
handleClick: () => {
o("update:modelValue", !i.visible), o("hidden", !i.visible);
}
};
return r(
() => a.visible,
(t) => {
i.visible = t, l.setClassName(t);
},
{
immediate: !0
}
), r(
() => a.modelValue,
(t) => {
i.visible = t, l.setClassName(t);
},
{
immediate: !0
}
), {
...f(i),
...l,
classList: e,
styleList: s,
wrapperClassList: d
};
}
});
export {
x as default
};