epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
86 lines (85 loc) • 3.09 kB
JavaScript
import { defineComponent as y, inject as g, ref as p, computed as w, onMounted as E, onUnmounted as C, createElementBlock as c, openBlock as u, normalizeClass as i, createElementVNode as o, createVNode as f, renderSlot as d, toDisplayString as b, unref as k, Transition as P, withCtx as $, withDirectives as A, vShow as x } from "vue";
import B from "../icon/icon.vue.js";
import { COLLAPSE_CONTEXT_KEY as S } from "./collapseContext.js";
const T = { class: "ep-collapse-panel__header-content" }, L = {
key: 1,
class: "ep-collapse-panel__title"
}, H = { class: "ep-collapse-panel__content-wrapper" }, R = /* @__PURE__ */ y({
__name: "collapsePanel",
props: {
bordered: { type: Boolean, default: !0 },
customClass: { default: "" },
defaultExpanded: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
name: { default: "" },
title: { default: "" }
},
setup(n) {
const s = n, t = g(S), a = p(s.name || Symbol("collapse-panel")), r = p(), l = w(() => t ? t.isPanelActive(a.value) : !1), v = () => {
s.disabled || !t || t.togglePanel(a.value);
}, h = (e) => {
e.style.height = "0", e.style.overflow = "hidden", setTimeout(() => {
r.value && (e.style.height = `${r.value.offsetHeight}px`);
}, 0);
}, _ = (e) => {
e.style.height = "auto", e.style.overflow = "visible";
}, m = (e) => {
e.style.height = `${e.offsetHeight}px`, e.style.overflow = "hidden", setTimeout(() => {
e.style.height = "0";
}, 0);
};
return E(() => {
t && (t.registerPanel(a.value), (t.defaultExpandAll || s.defaultExpanded && !l.value) && t.togglePanel(a.value));
}), C(() => {
t && t.unregisterPanel(a.value);
}), (e, N) => (u(), c("div", {
class: i(["ep-collapse-panel", {
"ep-collapse-panel--active": l.value,
"ep-collapse-panel--bordered": n.bordered
}])
}, [
o("div", {
class: i(["ep-collapse-panel__header", { "ep-collapse-panel__header--active": l.value }]),
onClick: v
}, [
o("div", T, [
e.$slots.header ? d(e.$slots, "header", {
key: 0,
active: l.value
}, void 0, !0) : (u(), c("span", L, b(n.title), 1))
]),
o("div", {
class: i(["ep-collapse-panel__arrow", { "ep-collapse-panel__arrow--active": l.value }])
}, [
d(e.$slots, "arrow", {}, () => [
f(k(B), { name: "icon--epic--arrow-forward-ios-rounded" })
], !0)
], 2)
], 2),
f(P, {
name: "ep-collapse-transition",
onEnter: h,
onAfterEnter: _,
onLeave: m
}, {
default: $(() => [
A(o("div", H, [
o("div", {
ref_key: "contentRef",
ref: r,
class: "ep-collapse-panel__content"
}, [
d(e.$slots, "default", {}, void 0, !0)
], 512)
], 512), [
[x, l.value]
])
]),
_: 3
})
], 2));
}
});
export {
R as default
};