@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
102 lines (101 loc) • 4.99 kB
JavaScript
import { defineComponent as b, renderSlot as T, h as B, Transition as h } from "vue";
import { useProps as S, emitEvent as p } from "@vexip-ui/config";
import { collapseTransitionProps as z } from "./props.mjs";
const L = b({
name: "CollapseTransition",
props: z,
emits: [],
setup(x, { slots: u }) {
const n = S("collapseTransition", x, {
appear: !1,
mode: {
default: "default",
validator: (l) => ["in-out", "out-in", "default"].includes(l)
},
horizontal: !1,
duration: {
default: 250,
validator: (l) => l >= 200
},
timing: null,
fadeEffect: !1,
reverse: !1
});
let m = null, g = null;
return () => {
if (n.disabled)
return T(u, "default");
const l = n.duration, a = n.timing || "ease-in-out";
let s = "maxHeight", r = "paddingTop", y = "paddingBottom", d = "marginTop", f = "marginBottom", c = "scrollHeight", v = `
max-height ${l}ms ${a},
padding-top ${l}ms ${a},
padding-bottom ${l}ms ${a},
margin-top ${l}ms ${a},
margin-bottom ${l}ms ${a}
`;
n.horizontal && (s = "maxWidth", r = "paddingLeft", y = "paddingRight", d = "marginLeft", f = "marginRight", c = "scrollWidth", v = `
max-width ${l}ms ${a},
padding-inline-start ${l}ms ${a},
padding-inline-end ${l}ms ${a},
margin-inline-start ${l}ms ${a},
margin-inline-end ${l}ms ${a}
`), n.fadeEffect && (v = `
${v},
opacity ${l}ms ease
`);
const i = {}, e = {};
return B(
h,
{
appear: n.appear,
mode: n.mode,
onBeforeEnter(o) {
if (m) return;
m = "before";
const t = o;
i.paddingTop = t.style[r], i.paddingBottom = t.style[y], i.marginTop = t.style[d], i.marginBottom = t.style[f], i.transition = t.style.transition, i.boxSizing = t.style.boxSizing, i.opacity = t.style.opacity, t.style.transition = v, n.reverse || (t.style[s] = "0", t.style[r] = "0", t.style[y] = "0", t.style[d] = "0", t.style[f] = "0", t.style.boxSizing = "content-box", n.fadeEffect && (t.style.opacity = "0")), p(n.onBeforeEnter, o);
},
onEnter(o) {
if (m === "in") return;
m = "in";
const t = o;
i.overflow = t.style.overflow, t.style.overflow = "hidden", t[c] !== 0 ? t.style[s] = `${t[c]}px` : t.style[s] = "", t.style[r] = i.paddingTop, t.style[y] = i.paddingBottom, t.style[d] = i.marginTop, t.style[f] = i.marginBottom, n.reverse ? (t[c], t.style[s] = "0", t.style[r] = "0", t.style[y] = "0", t.style[d] = "0", t.style[f] = "0", t.style.boxSizing = "content-box", n.fadeEffect && (t.style.opacity = "0")) : n.fadeEffect && (t.style.opacity = i.opacity), p(n.onEnter, o);
},
onAfterEnter(o) {
const t = o;
t.style.transition = i.transition || "", n.reverse || (t.style[s] = "", t.style.overflow = i.overflow, t.style.boxSizing = i.boxSizing), m = null, p(n.onAfterEnter, o);
},
onEnterCancelled(o) {
const t = o;
t.style.transition = i.transition || "", t.style[s] = "", t.style.overflow = i.overflow, t.style.boxSizing = i.boxSizing, m = null, p(n.onEnterCancelled, o);
},
onBeforeLeave(o) {
if (g) return;
g = "before";
const t = o;
e.paddingTop = t.style[r], e.paddingBottom = t.style[y], e.marginTop = t.style[d], e.marginBottom = t.style[f], e.overflow = t.style.overflow, e.boxSizing = t.style.boxSizing, e.opacity = t.style.opacity, t.style[s] = `${t[c]}px`, t.style.overflow = "hidden", p(n.onBeforeLeave, o);
},
onLeave(o) {
if (g === "in") return;
g = "in";
const t = o;
t[c] !== 0 && (e.transition = t.style.transition, t.style.transition = v, t.style[s] = "0", t.style[r] = "0", t.style[y] = "0", t.style[d] = "0", t.style[f] = "0", n.fadeEffect && (t.style.opacity = "0")), p(n.onLeave, o);
},
onAfterLeave(o) {
const t = o;
t.style[s] = "", t.style[r] = e.paddingTop, t.style[y] = e.paddingBottom, t.style[d] = e.marginTop, t.style[f] = e.marginBottom, t.style.overflow = e.overflow, t.style.transition = e.transition || "", t.style.boxSizing = e.boxSizing, t.style.opacity = e.opacity, g = null, p(n.onAfterLeave, o);
},
onLeaveCancelled(o) {
const t = o;
t.style[s] = "", t.style[r] = e.paddingTop, t.style[y] = e.paddingBottom, t.style[d] = e.marginTop, t.style[f] = e.marginBottom, t.style.overflow = e.overflow, t.style.transition = e.transition || "", t.style.boxSizing = e.boxSizing, t.style.opacity = e.opacity, g = null, p(n.onLeaveCancelled, o);
}
},
u
);
};
}
});
export {
L as default
};
//# sourceMappingURL=collapse-transition.mjs.map