All files / lib/components dropdown.vue

69.23% Statements 9/13
60% Branches 6/10
100% Functions 4/4
69.23% Lines 9/13
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 79 80 81 8218x 18x 18x   18x 18x                     18x       18x     18x         18x                                                                                                          
<template>
    <div :id="id || null" :class="['dropdown', 'btn-group', {dropup, show: visible}]">
I
        <b-button :class="{'dropdown-toggle': !split}"
           E       ref="button"
                  :id="id ? (id + '__BV_button_') : null"
                  :aria-haspopup="split ? null : 'true'"
                  :aria-expanded="split ? null : (visible ? 'true' : 'false')"
                  :variant="variant"
                  :size="size"
                  :disabled="disabled"
                  @click.stop.prevent="click"
        >
            <slot name="button-content"><slot name="text">{{text}}</slot></slot>
        </b-button>
 
        <b-button :class="['dropdown-toggle','dropdown-toggle-split']"
                  v-if="split"
                  ref="toggle"
                  :id="id ? (id + '__BV_toggle_') : null"
                  :aria-haspopup="split ? 'true' : null"
                  :aria-expanded="split ? (visible ? 'true' : 'false') : null"
                  :variant="variant"
                  :size="size"
                  :disabled="disabled"
                  @click.stop.prevent="toggle"
        >
            <span class="sr-only">{{toggleText}}</span>
        </b-button>
 
        <div :class="['dropdown-menu',{'dropdown-menu-right': right}]"
             ref="menu"
             role="menu"
             :aria-labelledby="id ? (id + (split ? '__BV_toggle_' : '__BV_button_')) : null"
             @keyup.esc="onEsc"
             @keydown.tab="onTab"
             @keydown.up="focusNext($event,true)"
             @keydown.down="focusNext($event,false)"
        >
            <slot></slot>
        </div>
 
    </div>
</template>
 
<style scoped>
    .dropdown-item:focus,
    .dropdown-item:hover,
    .dropdown-header:focus {
        background-color: #eaeaea;
        outline: none;
    }
</style>
 
<script>
    import { dropdownMixin } from '../mixins';
    import bButton from './button.vue';
 
    export default {
        mixins: [dropdownMixin],
        components: {bButton},
        props: {
            split: {
                type: Boolean,
                default: false
            },
            toggleText: {
                type: String,
                default: 'Toggle Dropdown'
            },
            size: {
                type: String,
                default: null
            },
            variant: {
                type: String,
                default: null
            }
        }
    };
</script>