feat: Support multiple errors

2 files changed, 15 insertions, 10 deletions

diff --git a/code/app/src/lib/components/input.svelte b/code/app/src/lib/components/input.svelte
index 5d38597..ac01348 100644
--- a/code/app/src/lib/components/input.svelte
+++ b/code/app/src/lib/components/input.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import pwKey from "$actions/pwKey";
     import { random_string } from "$lib/helpers";
-    import { htmlLangAttributeDetector } from "typesafe-i18n/detectors";
     import { ExclamationCircleIcon } from "./icons";
 
     export let label: string | undefined = undefined;
@@ -13,6 +12,7 @@
     export let placeholder: string | undefined = undefined;
     export let helpText: string | undefined = undefined;
     export let errorText: string | undefined = undefined;
+    export let errors: Array<string> | undefined = undefined;
     export let disabled = false;
     export let hideLabel = false;
     export let cornerHint: string | undefined = undefined;
@@ -98,9 +98,15 @@
             {helpText}
         </p>
     {/if}
-    {#if errorText}
+    {#if errorText || errors?.length === 1}
         <p class="mt-2 text-sm text-red-600" id={ariaErrorDescribedBy}>
-            {errorText}
+            {errorText ?? errors[0]}
         </p>
+    {:else if errors && errors.length}
+        <ul class="mt-2 list-disc" id={ariaErrorDescribedBy}>
+            {#each errors as error}
+                <li class="text-sm text-red-600">{error}</li>
+            {/each}
+        </ul>
     {/if}
 </div>
diff --git a/code/app/src/routes/book/inputs/+page.svelte b/code/app/src/routes/book/inputs/+page.svelte
index 9118a54..7ca0d31 100644
--- a/code/app/src/routes/book/inputs/+page.svelte
+++ b/code/app/src/routes/book/inputs/+page.svelte
@@ -28,13 +28,7 @@
 
 <section>
     <h2>Combobox</h2>
-    <Combobox
-        {options}
-        label="Wiii"
-        multiple
-        createable
-        on_create_async={add}
-    />
+    <Combobox {options} label="Wiii" multiple createable on_create_async={add} />
 </section>
 
 <section>
@@ -63,6 +57,11 @@
 </section>
 
 <section>
+    <h2>Many errors</h2>
+    <Input label="No" placeholder="Sorry" errors={["That's not right", "Call help!", "Get it together"]} bind:value icon={DatabaseIcon} />
+</section>
+
+<section>
     <h2>Help</h2>
     <Input label="Go ahead" placeholder="Write here" helpText="Write above" bind:value />
 </section>