All files / lib/components form-select.vue

66.67% Statements 12/18
56.52% Branches 13/23
100% Functions 7/7
66.67% Lines 12/18
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 8518x 18x 18x   18x 18x                     18x     18x     63x             63x     63x     63x                                                                 63x                                
<template>
    <select :class="inputClass"
    I        :name="name"
            :id="id || null"
           E v-model="localValue"
            :multiple="multiple || null"
            :size="(multiple || selectSize > 1) ? selectSize : null"
            :disabled="disabled"
            :required="required"
            :aria-required="required ? 'true' : null"
            :aria-invalid="ariaInvalid"
            ref="input"
    >
        <option v-for="option in formOptions"
                :value="option.value"
                v-html="option.text"
                :disabled="option.disabled"
        ></option>
    </select>
</template>
 
<script>
    import { formMixin, formOptionsMixin, formCustomMixin } from '../mixins';
    import { warn } from '../utils';
 
    export default {
        mixins: [formMixin, formCustomMixin, formOptionsMixin],
        data() {
            return {
                localValue: this.multiple ? (this.value || []) : this.value
            };
        },
        computedI: {
            inputClass() {
                return [
                    'form-control',
                    this.size ? `form-control-${this.size}` : null,
                    (this.plain || this.multiple || this.selectSize > 1) ? null : 'custom-select'
                ];
            },
            ariaInvalid() {
                if (this.invalid === true || this.invalid === 'true') {
                    return 'true';
                }
                return null;
            }
        },
        props: {
            value: {},
            invalid: {
                type: [Boolean, String],
                default: false
            },
            size: {
                type: String,
                default: null
            },
            options: {
                type: [Array, Object],
                required: true
            },
            multiple: {
                type: Boolean,
                default: false
            },
            selectSize: {
                // Browsers default size to 0, which typically shows 4 rows in most browsers
                // Size of 1 can bork out firefox
            I    type: Number,
                default: 0
            },
            returnObject: {
                type: Boolean,
                default: false
            }
        },
        created() {
            if (this.returnObject) {
                warn('form-select: return-object has been deprecated and will be removed in future releases');
            }
        }
    };
 
</script>