@coreui/vue/dist/cjs/components/collapse/CCollapse.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var vCVisible = require('../../directives/v-c-visible.js');
var transition = require('../../utils/transition.js');

const CCollapse = vue.defineComponent({
    name: 'CCollapse',
    props: {
        /**
         * Set horizontal collapsing to transition the width instead of height.
         */
        horizontal: Boolean,
        /**
         * Toggle the visibility of component.
         */
        visible: Boolean,
    },
    emits: [
        /**
         * Callback fired when the component requests to be hidden.
         */
        'hide',
        /**
         * Callback fired when the component requests to be shown.
         */
        'show',
    ],
    setup(props, { slots, emit }) {
        const collapsing = vue.ref(false);
        const show = vue.ref(props.visible);
        const handleBeforeEnter = () => {
            collapsing.value = true;
        };
        const handleEnter = (el, done) => {
            emit('show');
            // collapsing.value = true
            setTimeout(() => {
                transition.executeAfterTransition(() => done(), el);
                if (props.horizontal) {
                    el.style.width = `${el.scrollWidth}px`;
                    return;
                }
                el.style.height = `${el.scrollHeight}px`;
            }, 1);
        };
        const handleAfterEnter = (el) => {
            show.value = true;
            collapsing.value = false;
            props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height');
        };
        const handleBeforeLeave = (el) => {
            collapsing.value = true;
            show.value = false;
            if (props.horizontal) {
                el.style.width = `${el.scrollWidth}px`;
                return;
            }
            el.style.height = `${el.scrollHeight}px`;
        };
        const handleLeave = (el, done) => {
            emit('hide');
            setTimeout(() => {
                transition.executeAfterTransition(() => done(), el);
                if (props.horizontal) {
                    el.style.width = '0px';
                    return;
                }
                el.style.height = '0px';
            }, 1);
        };
        const handleAfterLeave = (el) => {
            collapsing.value = false;
            props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height');
        };
        return () => vue.h(vue.Transition, {
            css: false,
            onBeforeEnter: () => handleBeforeEnter(),
            onEnter: (el, done) => handleEnter(el, done),
            onAfterEnter: (el) => handleAfterEnter(el),
            onBeforeLeave: (el) => handleBeforeLeave(el),
            onLeave: (el, done) => handleLeave(el, done),
            onAfterLeave: (el) => handleAfterLeave(el),
        }, () => vue.withDirectives(vue.h('div', {
            class: [
                collapsing.value ? 'collapsing' : 'collapse',
                { 'collapse-horizontal': props.horizontal, show: show.value },
            ],
        }, slots.default && slots.default()), [[vCVisible.vVisible, props.visible]]));
    },
});

exports.CCollapse = CCollapse;
//# sourceMappingURL=CCollapse.js.map