fix(Select): error handling has been corrected

docs(Select): updated error example
N00nDay · Feb 5, 2023 · bd7468e · bd7468e
1 parent 8574757
commit bd7468e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/src/lib/components/select/Label.svelte b/src/lib/components/select/Label.svelte
@@ -12,7 +12,7 @@
 	const error: Writable<string | undefined> = getContext('select-error');
 
 	let defaultClass = 'block text-sm font-medium';
-	$: if (error) {
+	$: if ($error && $error.length > 0) {
 		defaultClass = defaultClass + ' text-danger';
 	} else {
 		defaultClass = defaultClass + ' text-light-secondary-content dark:text-dark-secondary-content';

diff --git a/src/lib/components/select/Select.svelte b/src/lib/components/select/Select.svelte
@@ -30,7 +30,6 @@
 		input.value = option;
 		value = option;
 		$selectedValue = option;
-		error = undefined;
 		toggleVisible();
 	}
 

diff --git a/src/routes/select/+page.svelte b/src/routes/select/+page.svelte
@@ -13,6 +13,14 @@
 	import { email } from '../../docs/icons';
 
 	const options = ['Option 1', 'Option 2', 'Option 3'];
+
+	let value: string | undefined;
+	let error: string | undefined = "You're doing it wrong!";
+	$: if (value && value.length > 0) {
+		error = undefined;
+	} else {
+		error = "You're doing it wrong!";
+	}
 </script>
 
 <Col class="col-24">
@@ -40,7 +48,7 @@
 				</Select.Options>
 			</Select>
 			<br />
-			<Select name="select-3" error="There has been an error">
+			<Select name="select-3" {error} bind:value>
 				<Select.Label slot="label">Label</Select.Label>
 				<Select.Leading slot="leading" data={email} />
 				<Select.Options slot="options">

diff --git a/src/routes/select/examples.ts b/src/routes/select/examples.ts
@@ -133,6 +133,14 @@ export const example = `
 
 	const email = "svg-path";
 	const options = ['Option 1', 'Option 2', 'Option 3'];
+
+	let value: string | undefined;
+	let error: string | undefined = "You're doing it wrong!";
+	$: if (value && value.length > 0) {
+		error = undefined;
+	} else {
+		error = "You're doing it wrong!";
+	}
 </script>
 
 <Select name="select-1" placeholder="Basic">
@@ -153,7 +161,7 @@ export const example = `
 	</Select.Options>
 </Select>
 
-<Select name="select-3" error="There has been an error">
+<Select name="select-3" {error} bind:value>
 	<Select.Label slot="label">Label</Select.Label>
 	<Select.Leading slot="leading" data={email} />
 	<Select.Options slot="options">