bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import { tick } from 'svelte'
3 import type { HTMLAttributes } from 'svelte/elements'
4
5 let textarea: HTMLTextAreaElement | undefined = $state()
6
7 async function adjustHeight() {
8 await tick()
9 if (textarea) {
10 textarea.style.height = 'auto' // Reset height to auto to calculate new height
11 textarea.style.height = `${textarea.scrollHeight}px` // Set height to the scrollHeight
12 }
13 }
14 interface Props extends HTMLAttributes<HTMLTextAreaElement> {
15 label?: string | undefined
16 value: string
17 required?: boolean
18 class?: string
19 }
20
21 let {
22 label = undefined,
23 value = $bindable(),
24 required = false,
25 class: clazz = '',
26 ...rest
27 }: Props = $props()
28
29 $effect(() => {
30 if (value) adjustHeight()
31 })
32</script>
33
34<label class="w-full">
35 {#if label}
36 <div class="text-sm font-medium">
37 {label}
38 {#if required}
39 <span class="text-red-600 font-bold">*</span>
40 {/if}
41 </div>
42 {/if}
43 <textarea
44 bind:this={textarea}
45 oninput={() => adjustHeight()}
46 bind:value
47 {required}
48 {...rest}
49 rows={1}
50 class={['focus:outline-hidden w-full bg-transparent resize-none', clazz]}
51 ></textarea>
52</label>