61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<div class="input_holder">
|
|
<div class="input_header" v-if="label || description">
|
|
<label :for="name" v-if="label">{{ label }}</label>
|
|
<div class="input_description" v-if="description">{{ description }}</div>
|
|
</div>
|
|
|
|
<textarea v-model="currentValue"
|
|
:id="name"
|
|
:name="name"
|
|
:class="{invalid}"
|
|
:placeholder="props ? props.placeholder : ''"
|
|
@blur="validate"
|
|
@change="handleChange"
|
|
>
|
|
</textarea>
|
|
|
|
<div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
.invalid {
|
|
background-color: #fcc;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
name: "TextareaInput",
|
|
props: [
|
|
'description',
|
|
'label',
|
|
'name',
|
|
'props',
|
|
'value',
|
|
'invalid',
|
|
'validatorMessage'
|
|
],
|
|
data() {
|
|
return {
|
|
currentValue: this.value
|
|
}
|
|
},
|
|
methods: {
|
|
validate() {
|
|
this.$emit('validate', this.currentValue);
|
|
},
|
|
handleChange() {
|
|
this.$emit('change', this.currentValue);
|
|
}
|
|
},
|
|
watch: {
|
|
currentValue(val) {
|
|
this.$emit('input', val);
|
|
}
|
|
}
|
|
}
|
|
</script> |