From 34b20a0a972b03e1ccb1d3630368c174337d2299 Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Wed, 26 Jun 2024 07:49:04 -0400
Subject: [PATCH] refactor(demo): update form stuff

---
 src/components/Form/PdapForm.vue                | 17 +++++++++++++----
 src/components/Form/form.spec.ts                |  4 ++--
 src/components/Header/PdapHeader.vue            |  1 -
 src/components/Input/Checkbox/InputCheckbox.vue |  8 ++++----
 src/components/Input/PdapInput.vue              |  4 ++--
 src/components/Input/Text/InputText.vue         |  6 ------
 src/demo/pages/SignupFormDemo.vue               |  4 ++--
 7 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/Form/PdapForm.vue b/src/components/Form/PdapForm.vue
index 25aa300..647e02c 100644
--- a/src/components/Form/PdapForm.vue
+++ b/src/components/Form/PdapForm.vue
@@ -17,7 +17,7 @@
 					: ''
 			"
 			:value="values[field.name]"
-			@input="updateForm(field.name, $event)"
+			@input="updateForm(field, $event)"
 		/>
 		<slot />
 	</form>
@@ -36,7 +36,7 @@ import { createRule } from '../../utils/vuelidate';
 
 // Types
 import { PdapFormProps } from './types';
-import { PdapInputTypes } from '../Input/types';
+import { PdapInputProps, PdapInputTypes } from '../Input/types';
 
 // Props
 const props = withDefaults(defineProps<PdapFormProps>(), {
@@ -92,10 +92,19 @@ const v$ = useVuelidate(rules, values, { $autoDirty: false, $lazy: true });
 const errorMessage = ref(props.error);
 
 // Handlers
-function updateForm(fieldName: string, event: Event) {
+function updateForm(field: PdapInputProps, event: Event) {
 	const target = event.target as HTMLInputElement;
 
-	values.value[fieldName] = target.value;
+	const update = (() => {
+		switch (field.type) {
+			case PdapInputTypes.CHECKBOX:
+				return target.checked ? 'true' : 'false';
+			default:
+				return target.value;
+		}
+	})();
+
+	values.value[field.name] = update;
 	emit('change', values.value);
 }
 
diff --git a/src/components/Form/form.spec.ts b/src/components/Form/form.spec.ts
index 4770aed..19f15cc 100644
--- a/src/components/Form/form.spec.ts
+++ b/src/components/Form/form.spec.ts
@@ -200,8 +200,8 @@ describe('Form component', () => {
 		await inputTextTwo.setValue('bar');
 		await inputEmail.setValue('hello@hello.com');
 		await inputPassword.setValue('P@ssword1!');
-		await inputCheckboxDefaultChecked.trigger('change');
-		await inputCheckboxDefaultUnchecked.trigger('change');
+		await inputCheckboxDefaultChecked.trigger('input');
+		await inputCheckboxDefaultUnchecked.trigger('input');
 		await nextTick();
 
 		// Assert new values
diff --git a/src/components/Header/PdapHeader.vue b/src/components/Header/PdapHeader.vue
index 667f2ca..9d5fc47 100644
--- a/src/components/Header/PdapHeader.vue
+++ b/src/components/Header/PdapHeader.vue
@@ -37,7 +37,6 @@ const navLogoLinkIsPath = props.logoImageAnchorPath.startsWith('/');
 
 // Lifecycle methods
 onMounted(() => {
-	console.debug('on mounted');
 	getHeightAndSetToCSSVar();
 	window.addEventListener('resize', getHeightAndSetToCSSVar);
 });
diff --git a/src/components/Input/Checkbox/InputCheckbox.vue b/src/components/Input/Checkbox/InputCheckbox.vue
index 252033b..0a58268 100644
--- a/src/components/Input/Checkbox/InputCheckbox.vue
+++ b/src/components/Input/Checkbox/InputCheckbox.vue
@@ -7,7 +7,7 @@
 		class="pdap-input-checkbox"
 		type="checkbox"
 		v-bind="$attrs"
-		@change="change"
+		@input="input"
 	/>
 </template>
 
@@ -18,10 +18,10 @@ defineProps<PdapInputCheckboxProps>();
 
 // Emits
 const emit = defineEmits<{
-	(event: 'change', val: Event): void;
+	(event: 'input', val: Event): void;
 }>();
 
-const change = (event: Event) => {
-	emit('change', event);
+const input = (event: Event) => {
+	emit('input', event);
 };
 </script>
diff --git a/src/components/Input/PdapInput.vue b/src/components/Input/PdapInput.vue
index 559bdac..1dc0b3a 100644
--- a/src/components/Input/PdapInput.vue
+++ b/src/components/Input/PdapInput.vue
@@ -49,7 +49,7 @@ const errorMessageId = computed(() => `pdap-${props.name}-input-error`);
 @layer components {
 	/* General input styles  */
 	.pdap-input {
-		@apply h-[max-content] gap-4 leading-normal mb-3 w-full flex flex-col;
+		@apply h-[max-content] gap-1 leading-normal mb-3 w-full flex flex-col;
 	}
 
 	.pdap-input input {
@@ -78,7 +78,7 @@ const errorMessageId = computed(() => `pdap-${props.name}-input-error`);
 	}
 
 	.pdap-input-error label {
-		@apply justify-start text-sm;
+		@apply justify-start;
 	}
 
 	.pdap-input-error input {
diff --git a/src/components/Input/Text/InputText.vue b/src/components/Input/Text/InputText.vue
index 8e88ad0..9da0f04 100644
--- a/src/components/Input/Text/InputText.vue
+++ b/src/components/Input/Text/InputText.vue
@@ -6,7 +6,6 @@
 		:placeholder="placeholder"
 		:value="value"
 		v-bind="$attrs"
-		@change="change"
 		@input="input"
 	/>
 </template>
@@ -18,14 +17,9 @@ defineProps<PdapInputTextProps>();
 
 // Emits
 const emit = defineEmits<{
-	(event: 'change', val: Event): void;
 	(event: 'input', val: Event): void;
 }>();
 
-const change = (event: Event) => {
-	emit('change', event);
-};
-
 const input = (event: Event) => {
 	emit('input', event);
 };
diff --git a/src/demo/pages/SignupFormDemo.vue b/src/demo/pages/SignupFormDemo.vue
index 880db8f..86e38ad 100644
--- a/src/demo/pages/SignupFormDemo.vue
+++ b/src/demo/pages/SignupFormDemo.vue
@@ -48,7 +48,7 @@ const SCHEMA = [
 		value: '',
 		validators: {
 			password: {
-				message: 'Please provide your password',
+				message: 'Please provide a valid password',
 				value: true,
 			},
 		},
@@ -64,7 +64,7 @@ const SCHEMA = [
 		value: '',
 		validators: {
 			password: {
-				message: 'Please confirm your password',
+				message: 'Please confirm your valid password',
 				value: true,
 			},
 		},