From e9df5cbe1ad9751288834bcaf184d2d90b18dcf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Tue, 10 Oct 2023 22:10:42 -0400
Subject: [PATCH] refactor(components): migrate story form to use
 vee-validate's `useForm` instead of the equivalent component

this is because v-slot values are not accessible from the `setup` script
---
 components/story/create/storyform.vue | 30 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/components/story/create/storyform.vue b/components/story/create/storyform.vue
index 2bb78f6..55e6bbf 100644
--- a/components/story/create/storyform.vue
+++ b/components/story/create/storyform.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 	import draggable from "vuedraggable";
 	import { v4 } from "uuid";
+	import { autoSave } from "~/lib/client/utils";
 	import lmove from "lodash-move";
-	import { Field, Form as veeForm, FieldArray, FieldEntry } from "vee-validate";
-	import { log } from "~/lib/server/logger";
+	import {
+		Field,
+		Form as veeForm,
+		FieldArray,
+		FieldEntry,
+		useForm,
+	} from "vee-validate";
 	import { storySchema } from "~/lib/client/storyFormSchema";
 	import {
 		FormChapter,
@@ -24,9 +30,9 @@
 	const expandos = ref<string[]>([]);
 
 	function logSubmit(values, actions) {
-		// log.debug("VALUE");
-		// log.debug(values);
-		// log.debug(actions);
+		console.debug("VALUE");
+		console.debug(values);
+		console.debug(actions);
 	}
 	function onSubmit(values, actions) {
 		logSubmit(values, actions);
@@ -34,16 +40,23 @@
 	function inval({ values, errors, results }) {
 		logSubmit(values, undefined);
 	}
+	const { values, setFieldValue, handleSubmit } = useForm({
+		keepValuesOnUnmount: true,
+		validationSchema: storySchema,
+		initialValues: props.data,
+	});
+	const subCb = handleSubmit(onSubmit);
 </script>
 <template>
-	<vee-form
+	<!-- <vee-form
 		:keep-values="true"
 		v-slot="{ values, setFieldValue }"
 		:validation-schema="storySchema"
 		:initial-values="data"
 		@submit="onSubmit"
 		@invalid-submit="inval"
-	>
+	> -->
+	<form @submit="subCb" @change="() => canDraft && autoSave(values)">
 		<!-- <a-form v-bind:model="acData"> -->
 		<Field name="title" v-slot="{ value, field, errorMessage }">
 			<a-form-item
@@ -147,5 +160,6 @@
 			</draggable>
 		</field-array>
 		<a-button type="primary" html-type="submit">go.</a-button>
-	</vee-form>
+	</form>
+	<!-- </vee-form> -->
 </template>