apps/web-shared/src/components/form/textarea.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<script lang="ts">
    export let id;
    export let disabled = false;
    export let loading = false;
    export let rows = 2;
    export let cols = 0;
    export let name;
    export let placeholder;
    export let value;
    export let label;
    export let errorText;

    $: shared_props = {
        rows: rows || null,
        cols: cols || null,
        name: name || null,
        id: id || null,
        disabled: disabled || null,
        class: [`form-control ${loading ? "c-disabled loading" : ""}`, $$restProps.class ?? ""].filter(Boolean).join(" "),
    };

    let textarea;
    let scrollHeight = 0;

    $:if (textarea) {
        scrollHeight = textarea.scrollHeight;
    }

    function on_input(event) {
        event.target.style.height = "auto";
        event.target.style.height = (this.scrollHeight) + "px";
    }
</script>

{#if label}
    <label for="{id}"
           class="form-label margin-bottom-xxs">{label}</label>
{/if}
<textarea {...shared_props}
          {placeholder}
          style="overflow-y:hidden;min-height:calc(1.5em + .75rem + 2px);{scrollHeight ? 'height:{scrollHeight}px' : ''};"
          bind:value={value}
          bind:this={textarea}
          on:input={on_input}
></textarea>
{#if errorText}
    <small class="color-error">{errorText}</small>
{/if}