optimize api for utils/form

nighca · Apr 3, 2024 · 19bbfc4 · 19bbfc4
1 parent bca6b08
commit 19bbfc4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/spx-gui/src/components/project/ProjectCreate.vue b/spx-gui/src/components/project/ProjectCreate.vue
@@ -1,7 +1,7 @@
 <template>
-  <NForm v-bind="formBinds" :model="formValue">
+  <NForm v-bind="form.binds" :model="form.value">
     <NFormItem :label="_t({ en: 'Project Name', zh: '项目名' })" path="name">
-      <NInput v-model:value="formValue.name" />
+      <NInput v-model:value="form.value.name" />
     </NFormItem>
     <NFormItem>
       <NButton type="tertiary" @click="handleCancel">
@@ -29,7 +29,7 @@ const emit = defineEmits<{
 
 const userStore = useUserStore()
 
-const [formBinds, formValue, validateForm] = useForm({
+const form = useForm({
   name: ['', validateName]
 })
 
@@ -44,10 +44,10 @@ const addProject = useMessageHandle(
 )
 
 async function handleSubmit() {
-  const errs = await validateForm()
+  const errs = await form.validate()
   if (errs.length > 0) return
   const projectData = await addProject({
-    name: formValue.value.name,
+    name: form.value.name,
     isPublic: IsPublic.personal,
     files: {}
   })

diff --git a/spx-gui/src/utils/form.ts b/spx-gui/src/utils/form.ts
@@ -3,7 +3,7 @@
  * @desc Helpers to deal with form validation
  */
 
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 import type { FormRules, FormInst, FormValidationError } from 'naive-ui'
 import { useI18n, type LocaleMessage } from './i18n'
 
@@ -23,11 +23,11 @@ export function useForm(input: FormInput) {
 
   const formRef = ref<FormInst | null>(null)
 
-  const formValue = ref<{ [path: string]: any }>({})
+  const formValue = reactive<{ [path: string]: any }>({})
   const formRules: FormRules = {}
   Object.keys(input).forEach((path) => {
     const [initialValue, validator] = input[path]
-    formValue.value[path] = initialValue
+    formValue[path] = initialValue
     formRules[path] = {
       async validator(_: unknown, v: unknown) {
         const result = await validator(v)
@@ -58,5 +58,5 @@ export function useForm(input: FormInput) {
     rules: formRules
   }
 
-  return [binds, formValue, validate] as const
+  return { binds, value: formValue, validate }
 }