All files / lib/components nav-toggle.vue

35% Statements 7/20
25% Branches 3/12
37.5% Functions 3/8
35% Lines 7/20
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 6318x 18x 18x   18x 18x                     18x     18x                                                                                      
<template>
    <button :class="classObject"
    I        type="button"
            :aria-label="label"
           E :aria-controls="target.id ? target.id : target"
            :aria-expanded="toggleState ? 'true' : 'false'"
            @click="onclick"
    >
        <span class="navbar-toggler-icon"></span>
    </button>
</template>

<script>
import { listenOnRootMixin } from '../mixins';
 
export default {
    mixins: [listenOnRootMixin],
    computed: {
        classObject() {
            return [
                'navbar-toggler',
                'navbar-toggler-' + this.position
            ];
        }
    },
    data() {
        return {
            toggleState: false
        };
    },
    props: {
        label: {
            type: String,
            default: 'Toggle navigation'
        },
        position: {
            type: String,
            default: 'right'
        },
        target: {
            required: true
        }
    },
    methods: {
        onclick() {
            const target = this.target;
            if (target.toggle) {
                target.toggle();
            }
            this.$root.$emit('collapse::toggle', this.target);
        },
        handleStateEvt(target, state) {
            if (target === this.target || target === this.target.id) {
                this.toggleState = state;
            }
        }
    },
    created() {
        this.listenOnRoot('collapse::toggle::state', this.handleStateEvt);
    }
};
</script>