tav-ui
Version:
78 lines (75 loc) • 2.92 kB
JavaScript
import { defineComponent, openBlock, createBlock, Transition, mergeProps, toHandlers, withCtx, renderSlot } from 'vue';
import { addClass, removeClass } from '../../../utils/domUtils2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
const _sfc_main = defineComponent({
name: "TaCollapseTransition",
setup() {
return {
on: {
beforeEnter(el) {
addClass(el, "collapse-transition");
if (!el.dataset)
el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = "0";
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = `${el.scrollHeight}px`;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.height = "";
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = "hidden";
},
afterEnter(el) {
removeClass(el, "collapse-transition");
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
},
beforeLeave(el) {
if (!el.dataset)
el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = `${el.scrollHeight}px`;
el.style.overflow = "hidden";
},
leave(el) {
if (el.scrollHeight !== 0) {
addClass(el, "collapse-transition");
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
afterLeave(el) {
removeClass(el, "collapse-transition");
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
}
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(Transition, mergeProps({ mode: "out-in" }, toHandlers(_ctx.on)), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16);
}
var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/transition/src/CollapseTransition.vue"]]);
export { CollapseTransition as default };
//# sourceMappingURL=CollapseTransition2.mjs.map