feat: Add combobox and textarea

1 files changed, 64 insertions, 0 deletions

diff --git a/code/app/src/lib/components/textarea.svelte b/code/app/src/lib/components/textarea.svelte
new file mode 100644
index 0000000..65127af
--- /dev/null
+++ b/code/app/src/lib/components/textarea.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { random_string } from "$lib/helpers";
+
+    export let id = "textarea-" + random_string(4);
+    export let disabled = 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,
+    };
+
+    let textarea;
+    let scrollHeight = 0;
+    const defaultColorClass = "border-gray-300 focus:border-teal-500 focus:ring-teal-500";
+    let colorClass = defaultColorClass;
+    $: if (errorText) {
+        colorClass = "placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500 text-red-900 pr-10 border-red-300";
+    } else {
+        colorClass = defaultColorClass;
+    }
+    $: if (textarea) {
+        scrollHeight = textarea.scrollHeight;
+    }
+
+    function on_input(event) {
+        event.target.style.height = "auto";
+        event.target.style.height = this.scrollHeight + "px";
+    }
+</script>
+
+<div>
+    {#if label}
+        <label for={id} class="block text-sm font-medium text-gray-700">{label}</label>
+    {/if}
+    <div class="mt-1">
+        <textarea
+            {rows}
+            {name}
+            {id}
+            {...shared_props}
+            style="overflow-y:hidden;min-height:calc(1.5em + .75rem + 2px);{scrollHeight ? 'height:{scrollHeight}px' : ''};"
+            bind:value
+            bind:this={textarea}
+            on:input={on_input}
+            {placeholder}
+            class="block w-full rounded-md {colorClass} shadow-sm sm:text-sm"
+        />
+        {#if errorText}
+            <p class="mt-2 text-sm text-red-600">
+                {errorText}
+            </p>
+        {/if}
+    </div>
+</div>