@empathyco/x-components/js/components/panels/base-tabs-panel.vue2.js

Empathy X Components

import { defineComponent, ref } from 'vue';
import { AnimationProp } from '../../types/animation-prop.js';
import '../animations/animate-clip-path/animate-clip-path.style.scss.js';
import '../animations/animate-scale/animate-scale.style.scss.js';
import '../animations/animate-translate/animate-translate.style.scss.js';
import '../animations/animate-width.vue2.js';
import '../animations/animate-width.vue3.js';
import '../animations/change-height.vue2.js';
import '../animations/collapse-height.vue2.js';
import '../animations/collapse-height.vue3.js';
import '../animations/collapse-width.vue2.js';
import '../animations/collapse-width.vue3.js';
import '../animations/cross-fade.vue2.js';
import '../animations/cross-fade.vue3.js';
import '../animations/fade-and-slide.vue2.js';
import '../animations/fade-and-slide.vue3.js';
import '../animations/fade.vue2.js';
import '../animations/fade.vue3.js';
import _sfc_main$1 from '../animations/no-animation.vue.js';
import '../animations/staggered-fade-and-slide.vue2.js';
import '../animations/staggered-fade-and-slide.vue3.js';

/**
 * Base Tabs Panel.
 *
 * @public
 */
var _sfc_main = defineComponent({
    name: 'BaseTabsPanel',
    props: {
        /**
         * Animation component that will be used to animate the tabs list.
         *
         * @public
         */
        tabsAnimation: {
            type: AnimationProp,
            default: 'header',
        },
        /**
         * Animation component that will be used to animate the selected tab content.
         *
         * @public
         */
        contentAnimation: {
            type: AnimationProp,
            default: () => _sfc_main$1,
        },
        /**
         * The tab to be initially selected.
         *
         * @public
         */
        initialTab: {
            type: String,
            default: '',
        },
        /**
         * Allows the tabs to be unselected.
         *
         * @public
         */
        allowTabDeselect: {
            type: Boolean,
            default: false,
        },
        /** Class inherited by content element. */
        activeTabClass: String,
        /** Class inherited by content element. */
        contentClass: String,
        /** Class inherited by content element. */
        tabClass: String,
        /** Class inherited by content element. */
        tabsListClass: String,
    },
    setup(props, { slots }) {
        /**
         * The currently selected tab.
         *
         * @internal
         */
        const selectedTab = ref(props.initialTab);
        /**
         * Extracts the tab from the slots.
         *
         * @returns The list of tabs.
         *
         * @internal
         */
        const getTabs = () => Object.keys(slots).filter(slotName => !['tab', 'tab-content'].includes(slotName));
        /**
         * Changes the current selected tab. If the tab is already selected
         * and `allowTabDeselect` is `true`, the tab will be unselected.
         *
         * @param tab - The tab to be selected.
         *
         * @internal
         */
        const selectTab = (tab) => {
            if (props.allowTabDeselect && selectedTab.value === tab) {
                selectedTab.value = '';
            }
            else {
                selectedTab.value = tab;
            }
        };
        /**
         * Checks if a tab is selected.
         *
         * @param tab - Tab to check.
         * @returns True if the tab is selected, false otherwise.
         *
         * @internal
         */
        const tabIsSelected = (tab) => selectedTab.value === tab;
        return {
            selectedTab,
            slots,
            getTabs,
            selectTab,
            tabIsSelected,
        };
    },
});

export { _sfc_main as default };
//# sourceMappingURL=base-tabs-panel.vue2.js.map