All files / lib/components nav-item-dropdown.vue

58.33% Statements 7/12
37.5% Branches 3/8
75% Functions 3/4
58.33% Lines 7/12
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 6018x 18x 18x   18x 18x                     18x     18x                                                                                
<template>
    <li :id="id || null" :class="['nav-item','dropdown', {dropup, show: visible}]">
I
        <a :class="['nav-link', dropdownToggle, {disabled}]"
           Ehref="#"
           ref="button"
           :id="id ? (id + '__BV_button_') : null"
           aria-haspopup="true"
           :aria-expanded="visible ? 'true' : 'false'"
           :disabled="disabled"
           @click.stop.prevent="toggle($event)"
           @keydown.enter.stop.prevent="toggle($event)"
           @keydown.space.stop.prevent="toggle($event)"
        >
            <slot name="button-content"><slot name="text"><span v-html="text"></span></slot></slot>
        </a>
 
        <div :class="['dropdown-menu',{'dropdown-menu-right': right}]"
             role="menu"
             ref="menu"
             :aria-labelledby="id ? (id + '__BV_button_') : null"
             @keyup.esc="onEsc"
             @keydown.tab="onTab"
             @keydown.up="focusNext($event,true)"
             @keydown.down="focusNext($event,false)"
        >
            <slot></slot>
        </div>
 
    </li>
</template>
 
<style scoped>
    .dropdown-item:focus,
    .dropdown-item:hover,
    .dropdown-header:focus {
        background-color: #eaeaea;
        outline: none;
    }
</style>
 
<script>
    import { dropdownMixin } from '../mixins';
 
    export default {
        mixins: [dropdownMixin],
        computed: {
            dropdownToggle() {
                return this.noCaret ? '' : 'dropdown-toggle';
            }
        },
        props: {
            noCaret: {
                type: Boolean,
                default: false
            }
        }
    };
</script>