vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
61 lines (60 loc) • 3.12 kB
JavaScript
import { defineComponent as T, createBlock as E, openBlock as v, Transition as B, withCtx as w, renderSlot as C } from "vue";
const S = /* @__PURE__ */ T({
name: "CollapseTransition",
__name: "index",
props: {
dimension: { default: "height" },
duration: { default: 300 }
},
setup(f) {
const e = f, s = /* @__PURE__ */ new WeakMap(), m = (t) => t.replace(/([A-Z])/g, "-$1").toLowerCase(), a = (t) => {
if (!s.has(t)) {
const n = e.dimension === "height" ? { paddingTop: getComputedStyle(t).paddingTop, paddingBottom: getComputedStyle(t).paddingBottom } : { paddingLeft: getComputedStyle(t).paddingLeft, paddingRight: getComputedStyle(t).paddingRight };
s.set(t, n);
}
return s.get(t);
}, c = (t) => {
t instanceof HTMLElement && (t.style.overflow = "hidden", a(t), e.dimension === "height" ? (t.style.height = "0", t.style.paddingTop = "0", t.style.paddingBottom = "0") : (t.style.width = "0", t.style.paddingLeft = "0", t.style.paddingRight = "0"));
}, y = (t) => {
if (!(t instanceof HTMLElement))
return;
t.style.overflow = "hidden";
const n = a(t);
if (e.dimension === "height") {
const i = n;
t.style.height = `${t.scrollHeight}px`, t.style.paddingTop = i.paddingTop, t.style.paddingBottom = i.paddingBottom;
} else {
const i = n;
t.style.width = `${t.scrollWidth}px`, t.style.paddingLeft = i.paddingLeft, t.style.paddingRight = i.paddingRight;
}
}, r = (t, n, i) => {
const o = a(t), d = e.dimension === "height" ? { size: `${t.scrollHeight}px`, pStart: o.paddingTop, pEnd: o.paddingBottom } : { size: `${t.scrollWidth}px`, pStart: o.paddingLeft, pEnd: o.paddingRight }, l = e.dimension === "height" ? ["height", "paddingTop", "paddingBottom"] : ["width", "paddingLeft", "paddingRight"];
t.offsetHeight, t.style.transition = l.map((g) => `${m(g)} ${e.duration}ms ease-in-out`).join(", "), e.dimension === "height" ? (t.style.height = n ? d.size : "0", t.style.paddingTop = n ? d.pStart : "0", t.style.paddingBottom = n ? d.pEnd : "0") : (t.style.width = n ? d.size : "0", t.style.paddingLeft = n ? d.pStart : "0", t.style.paddingRight = n ? d.pEnd : "0");
const p = (g) => {
g.target === t && (t.removeEventListener("transitionend", p), i());
};
t.addEventListener("transitionend", p), setTimeout(() => {
t.removeEventListener("transitionend", p), i();
}, e.duration * 1.1);
}, u = (t, n) => r(t, !0, n), L = (t, n) => r(t, !1, n), h = (t) => {
t instanceof HTMLElement && (t.style.overflow = "", t.style.transition = "", t.style.height = "", t.style.width = "", t.style.paddingTop = "", t.style.paddingBottom = "", t.style.paddingLeft = "", t.style.paddingRight = "");
};
return (t, n) => (v(), E(B, {
name: "CollapseTransition",
onBeforeEnter: c,
onEnter: u,
onAfterEnter: h,
onBeforeLeave: y,
onLeave: L,
onAfterLeave: h
}, {
default: w(() => [
C(t.$slots, "default")
]),
_: 3
}));
}
});
export {
S as default
};