From e2d6a290d9cac1067c109dc35d9633f0b49e5ca9 Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Tue, 20 Aug 2024 14:17:48 -0400
Subject: [PATCH] feat(components): expose setValues handler from Form

---
 src/components/Form/PdapForm.vue | 41 +++++++++++++++++++-------------
 src/demo/pages/ComponentDemo.vue | 23 ++++--------------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/components/Form/PdapForm.vue b/src/components/Form/PdapForm.vue
index 9fc7ed8..2a69b2f 100644
--- a/src/components/Form/PdapForm.vue
+++ b/src/components/Form/PdapForm.vue
@@ -53,6 +53,11 @@ const props = withDefaults(defineProps<PdapFormProps>(), {
 // Emits
 const emit = defineEmits(['submit', 'change']);
 
+// Expose
+defineExpose({
+	setValues,
+});
+
 // State
 const data = computed(() =>
 	props.schema.map((input) => {
@@ -97,6 +102,22 @@ const v$ = useVuelidate(rules, values, { $autoDirty: false, $lazy: true });
 // Vars
 const errorMessage = ref(props.error);
 
+// Effects
+// Effect - Updates form error state based on input error state and/or props
+watchEffect(() => {
+	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)
+		errorMessage.value = 'Please update this form to correct the errors';
+});
+
+watchEffect(() => {
+	if (props.resetOn && props.resetOn !== 'submit') {
+		resetForm();
+	}
+});
+
 // Handlers
 function updateForm(field: PdapInputProps, event: Event) {
 	const target = event.target as HTMLInputElement;
@@ -114,22 +135,6 @@ function updateForm(field: PdapInputProps, event: Event) {
 	emit('change', values.value, event);
 }
 
-// Effects
-// Effect - Updates form error state based on input error state and/or props
-watchEffect(() => {
-	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)
-		errorMessage.value = 'Please update this form to correct the errors';
-});
-
-watchEffect(() => {
-	if (props.resetOn && props.resetOn !== 'submit') {
-		resetForm();
-	}
-});
-
 /**
  * Reset vuelidate and wipe values state
  */
@@ -140,6 +145,10 @@ function resetForm() {
 	}, {});
 }
 
+function setValues<T extends typeof values.value>(update: T) {
+	values.value = update;
+}
+
 async function submit(e: Event) {
 	// Check form submission
 	const isValidSubmission = await v$.value.$validate();
diff --git a/src/demo/pages/ComponentDemo.vue b/src/demo/pages/ComponentDemo.vue
index 00569f1..64dd2ee 100644
--- a/src/demo/pages/ComponentDemo.vue
+++ b/src/demo/pages/ComponentDemo.vue
@@ -195,6 +195,7 @@
 		<h2>Form</h2>
 		<Form
 			id="test"
+			ref="formRef"
 			name="test"
 			:schema="mockFormSchema"
 			@change="change"
@@ -266,24 +267,6 @@ const mockFormSchema = [
 			},
 		},
 	},
-	{
-		id: 'password',
-		name: 'password',
-		label: 'Password',
-		type: PdapInputTypes.PASSWORD,
-		placeholder: 'Password',
-		value: '',
-		validators: {
-			password: {
-				message: 'Please enter a valid password',
-				value: true,
-			},
-			required: {
-				message: 'Please enter a valid password',
-				value: true,
-			},
-		},
-	},
 	{
 		id: 'likes-ice-cream',
 		defaultChecked: true,
@@ -294,6 +277,7 @@ const mockFormSchema = [
 	},
 ];
 
+const formRef = ref();
 const dropDownPressIsOpen = ref(false);
 const dropDownHoverIsOpen = ref(false);
 const loadingText = ref('customizable, with optional text...');
@@ -344,6 +328,9 @@ function change(
 	values: Record<'firstName' | 'lastName' | 'iceCream', string>,
 	event: Event
 ) {
+	if (formRef.value) {
+		console.debug({ ref: formRef.value });
+	}
 	console.debug('onChange', { values, event });
 }