Vue.component('tt-input', {
    props: {
        label: String,
        type: String,
        placeholder: String,
        required: Boolean,
        value: [String, Number],
        hint: String,
        additionalProps: Object,
        sm: {type: Boolean, default: false},
    },
    data() {
        return {
            inputValue: this.value,
        };
    },
    watch: {
        value(val) {
            this.inputValue = val;
        }
    },
    template: `
      <div class="form-group">
        <slot name="prepend"></slot>
        <label
            v-if="label"
            :for="label">{{ label }}</label>
        <input :type="type"
               :name="label"
               class="form-control"
               :class="{'form-control-sm': sm}"
               :placeholder="placeholder"
               :required="required"
               v-bind="additionalProps"
               v-model="inputValue"
               @input="$emit('input', $event.target.value)"
        >
        <small v-if="hint" class="form-text text-muted">{{ hint }}</small>
      </div>
    `
});