From b60a027a4ab9203388470ac51114638983a183da Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Thu, 17 Nov 2022 22:13:14 +0700
Subject: feat: Support multiple errors

---
 code/app/src/lib/components/input.svelte     | 12 +++++++++---
 code/app/src/routes/book/inputs/+page.svelte | 13 ++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

(limited to 'code/app/src')

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>
@@ -62,6 +56,11 @@
     <Input label="No" placeholder="Sorry" errorText="That's not right" bind:value icon={DatabaseIcon} />
 </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 />
-- 
cgit v1.3