element-plus/lib/el-transition/index.js

A Component Library for Vue3.0

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var dom = require('../utils/dom');

var script = vue.defineComponent({
    name: 'ElCollapseTransition',
    setup() {
        return {
            on: {
                beforeEnter(el) {
                    dom.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) {
                    dom.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) {
                        dom.addClass(el, 'collapse-transition');
                        el.style.transitionProperty = 'height';
                        el.style.height = 0;
                        el.style.paddingTop = 0;
                        el.style.paddingBottom = 0;
                    }
                },
                afterLeave(el) {
                    dom.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 render(_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createBlock(vue.Transition, vue.toHandlers(_ctx.on), {
    default: vue.withCtx(() => [
      vue.renderSlot(_ctx.$slots, "default")
    ]),
    _: 3 /* FORWARDED */
  }, 16 /* FULL_PROPS */))
}

script.render = render;
script.__file = "packages/transition/collapse-transition/index.vue";

var index = (app) => {
    app.component(script.name, script);
};

exports.ElCollapseTransition = script;
exports.default = index;