add error highlighting to select class

ssciwr · Sep 5, 2024 · eb5e659 · eb5e659
1 parent c1cd3f1
commit eb5e659
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/lib/components/DataInput/Select.svelte b/src/lib/components/DataInput/Select.svelte
@@ -2,7 +2,8 @@
 	import { Label, Select } from 'flowbite-svelte';
 
 	export let value: string;
-	export let valid: Boolean = true;
+	export let valid: Boolean;
+	export let cls: String = '';
 
 	export function validate(value: unknown): void {
 		if (value !== undefined && value !== null && value !== '') {
@@ -20,7 +21,9 @@
 <div>
 	<Select
 		size="lg"
-		class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400"
+		class={(!valid && $$props.required === true
+			? 'border-6 border-primary-600 text-white dark:border-primary-600'
+			: '') + cls}
 		items={$$props.items.map((v) => {
 			return {
 				name: String(v),

diff --git a/src/lib/components/UserDataInput.svelte b/src/lib/components/UserDataInput.svelte
@@ -193,7 +193,7 @@
 		<form class="m-1 mx-auto w-full flex-col space-y-6">
 			{#each data as element, i}
 				{#if 'items' in element}
-					<Select {...element} bind:value={inputValues[i]} />
+					<Select {...element} bind:value={inputValues[i]} valid={!missingValues[i]} />
 				{:else}
 					<Input {element} bind:value={inputValues[i]} valid={!missingValues[i]} />
 				{/if}