37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<template>
|
|
<div class="space-y-2">
|
|
<label for="textarea" class="block text-sm text-gray-900 dark:text-white">{{ label }}</label>
|
|
<div class="h-full flex items-center rounded-md bg-white pl-2 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[input:focus-within]:outline-indigo-500">
|
|
<textarea
|
|
id="textarea"
|
|
name="textarea"
|
|
rows="3"
|
|
class="block grow p-2 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
|
|
placeholder="Input"
|
|
@input="onInput" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'InputTextarea',
|
|
props: {
|
|
label: { type: String, default: 'Textarea' },
|
|
placeholder: { type: String, default: 'Input' },
|
|
required: { type: Boolean, default: false },
|
|
},
|
|
emits: ['input-value'],
|
|
data() {
|
|
return {
|
|
value: ''
|
|
}
|
|
},
|
|
methods: {
|
|
onInput(event) {
|
|
this.value = event.target.value;
|
|
this.$emit('input-value', this.value);
|
|
}
|
|
}
|
|
}
|
|
</script> |