All files / lib/components form-input.vue

40% Statements 14/35
50% Branches 14/28
61.54% Functions 8/13
40% Lines 14/35
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 146 14718x 18x 18x   18x 18x                     18x       18x     18x         18x         35x     1x     35x     35x 35x                                                                                                                                                                                                              
<template>
    <input v-if="!static"
    I       ref="input"
           :is="isTextArea ? 'textarea' : 'input'"
           E:type="isTextArea ? null : type"
           :value="value"
           :name="name"
           :id="id || null"
           :disabled="disabled"
           :required="required"
           :autocomplete="autocomplete || null"
           :aria-required="required ? 'true' : null"
           :aria-invalid="ariaInvalid"
           :readonly="readonly"
           :class="inputClass"
           :rows="isTextArea ? (rows || rowsCount) : null"
           :placeholder="placeholder"
           @input="onInput($event.target.value, $event.target)"
           @change="onChange($event.target.value, $event.target)"
           @keyup="onKeyUp($event)"
           @focus="$emit('focus')"
           @blur="$emit('blur')"
    />
    <b-form-input-static v-else
                         :id="id || null"
                         :value="value"
                         :size="size"
                         :state="state"
    ></b-form-input-static>
</template>
 
<script>
    import { formMixin } from '../mixins';
    import bFormInputStatic from './form-input-static.vue';
 
    export default {
        mixins: [formMixin],
        components: {bFormInputStatic},
        computed: {
            isTextArea() {
                return this.textarea || this.type === 'textarea';
            },
            rowsECount() {
                return (this.value || '').toString().split('\n').length;
            },
            inputClass() {
                return [
                    'form-control',
                    this.size ? `form-control-${this.size}` : null,
                    this.state ? `form-control-${this.state}` : null
                ];
            },
            ariaInvalid() {
                if (this.invalid === false) {
                    return null;
                }
                if (this.invalid === true) {
                    return 'true';
                }
                return this.invalid;
            }
        },
        methods: {
            format(value, el) {
                if (this.formatter) {
                    const formattedValue = this.formatter(value, el);
                    if (formattedValue !== value) {
                        value = formattedValue;
                        this.$refs.input.value = formattedValue;
                    }
                }
                return value;
            },
            onInput(value, el) {
                if (!this.lazyFormatter) {
                    value = this.format(value, el);
                }
                this.$emit('input', value);
            },
            onChange(value, el) {
                value = this.format(value, el);
                this.$emit('input', value);
                this.$emit('change', value);
            },
            onKeyUp(e) {
                this.$emit('keyup', e);
            },
            focus() {
                this.$refs.input.focus();
            }
        },
        props: {
            value: {
                default: null
            },
            type: {
                type: String,
                default: 'text'
            },
            size: {
                type: String,
                default: null
            },
            state: {
                type: String,
                default: null
            },
            invalid: {
                type: [Boolean, String],
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            },
            autocomplete: {
                type: String,
                default: null
            },
            static: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: null
            },
            rows: {
                type: Number,
                default: null
            },
            textarea: {
                type: Boolean,
                default: false
            },
            formatter: {
                type: Function
            },
            lazyFormatter: {
                type: Boolean,
                default: false
            }
        }
    };
 
</script>