@coreui/vue/dist/cjs/components/tabs/CTabPanel.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var transition = require('../../utils/transition.js');

const CTabPanel = vue.defineComponent({
    name: 'CTabPanel',
    props: {
        /**
         * Item key.
         */
        itemKey: {
            type: [Number, String],
            required: true,
        },
        /**
         * Enable fade in and fade out transition.
         */
        transition: {
            type: Boolean,
            default: true,
        },
        /**
         * Toggle the visibility of component.
         */
        visible: {
            type: Boolean,
            default: false,
        },
    },
    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 activeItemKey = vue.inject('activeItemKey');
        const id = vue.inject('id');
        const tabPaneRef = vue.ref();
        const firstRender = vue.ref(true);
        const visible = vue.ref();
        vue.watch(() => props.visible, () => {
            visible.value = props.visible;
        }, {
            immediate: true,
        });
        vue.watch(activeItemKey, () => {
            visible.value = Boolean(activeItemKey.value === props.itemKey);
        }, {
            immediate: true,
        });
        const handleEnter = (el, done) => {
            firstRender.value = false;
            emit('show');
            setTimeout(() => {
                transition.executeAfterTransition(() => done(), el);
                el.classList.add('show');
            }, 1);
        };
        const handleLeave = (el, done) => {
            firstRender.value = false;
            emit('hide');
            el.classList.remove('show');
            transition.executeAfterTransition(() => done(), el);
        };
        return () => vue.h(vue.Transition, {
            onEnter: (el, done) => handleEnter(el, done),
            onLeave: (el, done) => handleLeave(el, done),
        }, () => vue.withDirectives(vue.h('div', {
            class: [
                'tab-pane',
                {
                    active: visible.value,
                    fade: props.transition,
                    show: firstRender.value && visible.value,
                },
            ],
            id: `${props.itemKey}-tab-panel-${id}`,
            role: 'tabpanel',
            'aria-labelledby': `${props.itemKey}-tab-${id}`,
            tabindex: 0,
            ref: tabPaneRef,
        }, slots.default && slots.default()), [[vue.vShow, visible.value]]));
    },
});

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