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 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'code/app/src/lib')

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>
-- 
cgit v1.3