rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): migrate story form to use vee-validate's useForm instead of the equivalent component

Browse Source 
this is because v-slot values are not accessible from the `setup` script
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2023-10-10 22:10:42 -04:00
parent 83d1e97f49
commit e9df5cbe1a
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/story/create/storyform.vue
View File

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