codecheck

1
<script setup lang="ts">
2
interface Props {
3
  name: string;
4
  id: string;
5
  placeholder?: string;
6
  modelValue: string | null;
7
}
8
const props = defineProps<Props>();
9
const emits = defineEmits(["update:modelValue"]);
10
</script>
11

12
<template>
13
  <textarea
14
    class="textarea"
15
    :value="props.modelValue"
16
    @input="(event: any) => emits('update:modelValue', event.target.value)"
17
    :name="props.name"
18
    :id="props.id"
19
    :placeholder="props.placeholder"
20
    cols="30"
21
    rows="10"
22
  ></textarea>
23
</template>
24

25
<style scoped lang="scss">
26
.textarea {
27
  width: 100%;
28
  padding: 0.375rem 0.75rem;
29
  resize: vertical;
30
  border-radius: var(--border-radius);
31
  border: 1px solid var(--color-border-primary);
32
  &:focus {
33
    outline: 1px solid var(--color-primary);
34
  }
35
}
36
</style>
37