All files / lib/components tab.vue

46.67% Statements 7/15
30% Branches 3/10
42.86% Functions 3/7
46.67% Lines 7/15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 7918x 18x 18x   18x 18x                     18x     18x                                                                                                                      
<template>
    <transition @enter="enter" @before-leave="beforeLeave" mode="out-in">
    I    <component :is="tag"
                   :id="id || null"
           E        role="tabpanel"
                   :class="['tab-pane', {show, fade, disabled, active: localActive}]"
                   :aria-hidden="localActive ? 'false' : 'true'"
                   :aria-expanded="localActive ? 'true' : 'false'"
                   :aria-lablelledby="controlledBy || null"
                   v-if="localActive || !lazy"
                   v-show="localActive || lazy"
                   ref="panel"
        >
             <slot></slot>
        </component>
    </transition>
</template>
 
<script>
    export default {
        methods: {
            enter() {
                this.show = true;
            },
            beforeLeave() {
                this.show = false;
            }
        },
        data() {
            return {
                fade: false,
                localActive: this.active,
                lazy: true,
                show: false
            };
        },
        computed: {
            controlledBy() {
                return this.buttonId || (this.id ? (this.id + '__BV_tab_button__') : null);
            }
        },
        props: {
            id: {
                type: String,
                default: ''
            },
            tag: {
                type: String,
                default: 'div'
            },
            buttonId: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            headHtml: {
                type: String,
                default: null
            },
            disabled: {
                type: Boolean,
                default: false
            },
            active: {
                type: Boolean,
                default: false
            },
            href: {
                type: String,
                default: '#'
            }
        }
    };
 
</script>