All files / lib/components dropdown-select.vue

17.95% Statements 7/39
7.14% Branches 3/42
23.08% Functions 3/13
17.95% Lines 7/39
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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 14618x 18x 18x   18x 18x                     18x     18x                                                                                                                                                                                                                                                            
<template>
    <div class="dropdown-select" :class="{open: show, dropdown: !dropup, dropup: dropup}">
    I    <button
                :id="id"
           E     :class="['btn','dropdown',dropdownToggle,btnVariant,btnSize]"
                role="button"
                aria-haspopup="true"
                aria-expanded="show"
                @click.prevent="toggle($event)"
                :disabled="disabled">
            <span class="checked-items" v-html="displayItem"></span>
        </button>
        <ul class="dropdown-menu" :class="{'dropdown-menu-right' : position == 'right'}" aria-labelledby="dLabel">
            <li v-for="item in list">
                <button class="dropdown-item" :click.stop.prevent="select(item)">{{item.text}}</button>
            </li>
        </ul>
    </div>
</template>
 

<script>
    export default {
        data() {
            return {
                show: false,
                selected: false
            };
        },
        computed: {
            btnVariant() {
                return !this.variant || this.variant === `default` ? `btn-secondary` : `btn-${this.variant}`;
            },
            btnSize() {
                return !this.size || this.size === `default` ? `` : `btn-${this.size}`;
            },
            dropdownToggle() {
                return this.caret ? 'dropdown-toggle' : '';
            },
            displayItem() {
                // If zero show default message
                if ((this.returnObject && this.model && !this.model.text) || (!this.returnObject && this.model && this.model.length === 0) || this.forceDefault) {
                    return this.defaultText;
                }

                // Show selected item
                if (this.returnObject && this.model && this.model.text) {
                    return this.model.text;
                }

                // Show text that coresponds to the model value
                if (!this.returnObject && this.model) {
                    let result = this.model || '';
                    this.list.forEach(function (item) {
                        if (item.value === this.model) {
                            result = item.text;
                        }
                    });
                    return result;
                }
 
                return '';
            }
        },
        props: {
            id: {
                type: String
            },
            model: {
                required: false
            },
            list: {
                type: Array,
                default: [],
                required: true
            },
            caret: {
                type: Boolean,
                default: true
            },
            position: {
                type: String,
                default: 'left'
            },
            size: {
                type: String,
                default: ''
            },
            variant: {
                type: String,
                default: 'default'
            },
            defaultText: {
                type: String,
                default: 'Plase select one'
            },
            forceDefault: {
                type: Boolean,
                default: false
            },
            returnObject: {
                type: Boolean,
                default: false
            },
            dropup: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            toggle(e) {
                // Hide an alert
                this.show = !this.show;
                // Dispatch an event from the current vm that propagates all the way up to its $root
                if (this.show) {
                    this.$root.$emit('shown:dropdown', this.id);
                    e.stopPropagation();
                } else {
                    this.$root.$emit('hidden::dropdown', this.id);
                }
            },
            select(item) {
                // We need to set empty model to make model watchers react to it
                if (this.returnObject) {
                    this.model = item;
                } else {
                    this.model = item.value;
                }
                this.show = false;
                // Dispatch an event from the current vm that propagates all the way up to its $root
                this.$root.$emit('selected::dropdown', this.id, this.model);
            }
        },
        created() {
            const hub = this.$root;
            hub.$on('hide::dropdown', function () {
                this.show = false;
            });
        }
    };
</script>