fix: form error handling (#116)

Police-Data-Accessibility-Project · Oct 21, 2024 · 69c17a0 · 69c17a0
1 parent 249837d
commit 69c17a0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/src/components/FormV2/PdapFormV2.vue b/src/components/FormV2/PdapFormV2.vue
@@ -27,20 +27,15 @@ import { PdapFormPropsV2 } from './types';
 import { provideKey, makeRules } from './util';
 
 // Props
-const { defaultValues, error, schema } = withDefaults(
-	defineProps<PdapFormPropsV2>(),
-	{
-		error: null,
-	}
-);
+const props = defineProps<PdapFormPropsV2>();
 
 // Emits
 const emit = defineEmits(['submit', 'change', 'error']);
 
 // Constants
-const errorMessage = ref(error);
-const values = ref(defaultValues ?? {});
-const rules = schema ? makeRules(schema) : {};
+const errorMessage = ref(props.error);
+const values = ref(props.defaultValues ?? {});
+const rules = props.schema ? makeRules(props.schema) : {};
 const v$ = useVuelidate(rules, values, { $autoDirty: false, $lazy: true });
 
 // Provide
@@ -69,7 +64,7 @@ function resetForm() {
 			[key]:
 				typeof values.value[key] === 'string'
 					? ''
-					: Boolean(defaultValues?.[key]),
+					: Boolean(props.defaultValues?.[key]),
 		};
 	}, {});
 }
@@ -88,7 +83,7 @@ async function submit(e: Event) {
 // Effects
 // Effect - Updates form error state based on input error state and/or props
 watchEffect(() => {
-	if (error) errorMessage.value = error;
+	if (props.error) errorMessage.value = props.error;
 	else if (errorMessage.value && v$.value.$errors.length === 0)
 		errorMessage.value = null;
 	else if (!errorMessage.value && v$.value.$errors.length > 0)

diff --git a/src/components/InputSelect/PdapInputSelect.vue b/src/components/InputSelect/PdapInputSelect.vue
@@ -250,11 +250,11 @@ watch(
 
 @layer components {
 	.pdap-custom-select {
-		@apply relative w-full bg-neutral-50 dark:bg-neutral-950 border-2 border-solid border-neutral-500 cursor-pointer;
+		@apply relative w-full bg-neutral-50 dark:bg-neutral-950 border border-solid border-neutral-500 cursor-pointer;
 	}
 
 	.pdap-custom-select-options {
-		@apply absolute top-[115%] left-[-2px] w-[calc(100%+4px)] bg-neutral-50 dark:bg-neutral-950 border-solid border-2 border-neutral-500 max-h-48 overflow-y-auto z-20 p-1;
+		@apply absolute top-[115%] left-[-2px] w-[calc(100%+4px)] bg-neutral-50 dark:bg-neutral-950 border-solid border border-neutral-500 max-h-48 overflow-y-auto z-20 p-1;
 	}
 
 	.pdap-custom-select-option {