t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
80 lines (79 loc) • 2.44 kB
JavaScript
import { defineComponent as d, computed as v, openBlock as i, createBlock as y, Teleport as C, createVNode as _, Transition as b, withCtx as w, withDirectives as B, createElementVNode as p, normalizeStyle as s, createElementBlock as g, normalizeClass as a, createCommentVNode as z, withModifiers as S, unref as L, renderSlot as N, vShow as O } from "vue";
import { Props as P, Emits as T } from "./index3.js";
import { sizeChange as n } from "../../_utils/index3.js";
const V = ["onClick"], A = d({
name: "FPopup"
}), D = /* @__PURE__ */ d({
...A,
props: P,
emits: T,
setup(l, { emit: c }) {
const o = l, u = () => {
!o.maskClose || c("update:visible", !1);
}, f = (e) => {
o.open && o.open(e);
}, m = (e) => {
o.openEnd && o.openEnd(e);
}, h = (e) => {
o.close && o.close(e);
}, k = (e) => {
o.closeEnd && o.closeEnd(e);
}, E = v(
() => {
const { direction: e, popupSize: t, padding: r } = o;
return e === "top" || e === "bottom" ? {
height: n(t),
padding: n(r)
} : {
width: n(t),
padding: n(r)
};
}
);
return (e, t) => (i(), y(C, {
to: "body",
disabled: !e.appendToBody
}, [
_(b, {
name: e.direction === "center" ? "f-popup-center" : "f-popup-other",
onBeforeEnter: f,
onAfterEnter: m,
onBeforeLeave: h,
onAfterLeave: k
}, {
default: w(() => [
B(p("div", {
class: "f-popup",
style: s({ zIndex: e.zIndex })
}, [
e.showMask ? (i(), g("div", {
key: 0,
class: a(["f-popup__mask", { "f-popup__blur": e.maskBlur }]),
style: s({ background: e.maskBackground, opacity: e.maskOpacity })
}, null, 6)) : z("", !0),
p("div", {
class: a([
"f-popup__container",
{ [`f-popup__container-${e.direction}`]: e.direction }
]),
onClick: S(u, ["self"])
}, [
p("div", {
class: "f-popup__wrapper",
style: s(L(E))
}, [
N(e.$slots, "default")
], 4)
], 10, V)
], 4), [
[O, e.visible]
])
]),
_: 3
}, 8, ["name"])
], 8, ["disabled"]));
}
});
export {
D as default
};