Files
thetool/public/plugins/vue/tt-components/tt-input.js
2024-05-10 21:03:01 +00:00

42 lines
1.1 KiB
JavaScript

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>
`
});