45 lines
1022 B
Vue
45 lines
1022 B
Vue
<template>
|
|
<label v-if="label" class="w-full space-y-2">
|
|
<span class="text-sm font-bold uppercase tracking-[0.12em] text-[#8a7761]">{{ label }}</span>
|
|
<textarea
|
|
v-bind="$attrs"
|
|
:class="fieldClass"
|
|
:value="modelValue"
|
|
@input="onInput"
|
|
/>
|
|
</label>
|
|
<textarea
|
|
v-else
|
|
v-bind="$attrs"
|
|
:class="fieldClass"
|
|
:value="modelValue"
|
|
@input="onInput"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
mono: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const onInput = (event: Event) => {
|
|
emit('update:modelValue', (event.target as HTMLTextAreaElement).value)
|
|
}
|
|
|
|
const fieldClass = computed(() =>
|
|
['w-full min-h-[120px] rounded-[24px] border-0 bg-[#f6f1ea] px-5 py-4 text-[#2f2418] shadow-none outline-none placeholder:text-[#9b8d79]', props.mono ? 'font-mono' : ''].join(' ')
|
|
)
|
|
</script>
|