refactor(demo): update form stuff

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);
 }
 

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

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);
 });

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>

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 {

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);
 };

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,
 			},
 		},