st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
153 lines (152 loc) • 4.76 kB
JavaScript
import { defineComponent as N, mergeModels as I, useModel as H, ref as f, onBeforeMount as z, watchEffect as D, openBlock as Z, createElementBlock as $, createElementVNode as W, renderSlot as k, createVNode as j, Transition as q, withCtx as A, withDirectives as F, normalizeStyle as G, unref as J, vShow as K } from "vue";
import { StPopoverSubContPosEnum as t, StPopoverSubContPosConst as Q } from "./st-popover-sub-cont-pos.js";
import { onClickOutside as U } from "../../node_modules/.pnpm/@vueuse_core@12.0.0_typescript@5.6.2/node_modules/@vueuse/core/index.js";
const X = { class: "st-popover__content" }, oe = /* @__PURE__ */ N({
name: "StPopover",
__name: "StPopover",
props: /* @__PURE__ */ I({
baseOnPosition: { type: Boolean, default: !1 },
isVertical: { type: Boolean, default: !1 },
x: { default: 0 },
y: { default: 0 },
trigger: {
default: "hover"
/* hover */
},
subContTransitionName: { default: "sub-cont" },
subContZIndex: { default: 1 }
}, {
subContPosition: { default: t.BR },
subContPositionModifiers: {},
isShow: { type: Boolean, default: !1 },
isShowModifiers: {}
}),
emits: ["update:subContPosition", "update:isShow"],
setup(c) {
const s = c, V = H(
c,
"subContPosition"
), l = H(c, "isShow"), u = f(null), d = f(null), a = f(t.LB), r = f(!1);
z(() => {
s.isVertical && (a.value = t.BR);
});
const i = () => {
var T, y, L, O;
let e = ((T = u.value) == null ? void 0 : T.offsetWidth) ?? 0, n = ((y = u.value) == null ? void 0 : y.offsetHeight) ?? 0, _ = ((L = d.value) == null ? void 0 : L.offsetWidth) ?? 0, E = ((O = d.value) == null ? void 0 : O.offsetHeight) ?? 0;
return {
width: e,
height: n,
scHeight: E,
scWidth: _
};
}, v = () => {
let { height: e, scHeight: n } = i();
return n - e > s.y;
}, h = () => {
let { scHeight: e } = i();
return e > window.innerHeight - s.y;
}, P = () => {
let { scWidth: e } = i();
return e > s.x;
}, B = () => {
let { width: e, scWidth: n } = i();
return n > document.body.clientWidth - (s.x + e);
}, p = () => {
let { scWidth: e } = i();
return e > s.x;
}, b = () => {
let { scWidth: e } = i();
return e > document.body.clientWidth - s.x;
}, C = () => {
let { scHeight: e } = i();
return e > s.y;
}, w = () => {
let { height: e, scHeight: n } = i();
return n > window.innerHeight - s.y - e;
}, x = (e) => {
a.value = e, V.value = e;
}, o = (e, n) => {
e() && x(n);
}, M = {
// -------------------------------------------------------------------------------------------------- 水平方向 --------
[t.LT]: () => {
o(h, t.LB), o(P, t.RT);
},
[t.LB]: () => {
o(v, t.LT), o(P, t.RB);
},
[t.RT]: () => {
o(h, t.RB), o(B, t.LT);
},
[t.RB]: () => {
o(v, t.RT), o(B, t.LB);
},
// -------------------------------------------------------------------------------------------------- 垂直方向 --------
[t.TL]: () => {
o(C, t.BL), o(b, t.TR);
},
[t.TR]: () => {
o(C, t.BR), o(p, t.TL);
},
[t.BL]: () => {
o(w, t.TL), o(b, t.BR);
},
[t.BR]: () => {
o(w, t.TR), o(p, t.BL);
}
}, m = () => {
if (s.baseOnPosition)
for (let e in t)
e === a.value && M[e]();
};
D(() => {
m();
});
const S = () => s.trigger === "click", g = (e) => {
if (m(), S()) {
e instanceof PointerEvent && (r.value = !0, l.value = !0);
return;
}
r.value = !0, l.value = !0;
}, R = (e) => {
if (S()) {
e instanceof PointerEvent && (r.value = !1, l.value = !1);
return;
}
r.value = !1, l.value = !1;
};
return U(u, R), (e, n) => (Z(), $("div", {
ref_key: "stPopoverRef",
ref: u,
class: "st-popover",
onMouseover: g,
onMouseleave: R,
onPointerdown: g
}, [
W("div", X, [
k(e.$slots, "default", {}, void 0, !0)
]),
j(q, { name: e.subContTransitionName }, {
default: A(() => [
F(W("div", {
ref_key: "stPopoverSubContentRef",
ref: d,
class: "st-popover__sub-content",
style: G({
...J(Q)[a.value].position,
zIndex: e.subContZIndex
})
}, [
k(e.$slots, "subContent", {}, void 0, !0)
], 4), [
[K, r.value]
])
]),
_: 3
}, 8, ["name"])
], 544));
}
});
export {
oe as default
};