extract form value initialization into utils/form

spx-gui/src/components/project/ProjectCreate.vue

@@ -1,5 +1,5 @@
 <template>
-  <NForm ref="formRef" :model="formValue" :rules="formRules">
+  <NForm v-bind="formBinds" :model="formValue">
     <NFormItem :label="_t({ en: 'Project Name', zh: '项目名' })" path="name">
       <NInput v-model:value="formValue.name" />
     </NFormItem>
@@ -15,9 +15,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
-import { type ProjectData, getProject, addProject as rawAddProject, IsPublic } from '@/apis/project'
+import { type ProjectData, getProject, addProject as apiAddProject, IsPublic } from '@/apis/project'
 import { useForm, type ValidationResult } from '@/utils/form'
 import { useMessageHandle } from '@/utils/exception'
 import { useUserStore } from '@/stores/user'
@@ -30,26 +29,21 @@ const emit = defineEmits<{
 
 const userStore = useUserStore()
 
-const formValue = ref({
-  name: ''
-})
-
-const [formRef, formRules, validateForm] = useForm({
-  name: validateName
+const [formBinds, formValue, validateForm] = useForm({
+  name: ['', validateName]
 })
 
 function handleCancel() {
   emit('cancelled')
 }
 
 const addProject = useMessageHandle(
-  rawAddProject,
+  apiAddProject,
   { en: 'Failed to create project', zh: '创建失败' },
   (project) => ({ en: `Project ${project.name} created`, zh: `项目 ${project.name} 创建成功` })
 )
 
 async function handleSubmit() {
-  if (formRef.value == null) return
   const errs = await validateForm()
   if (errs.length > 0) return
   const projectData = await addProject({

spx-gui/src/utils/form.ts

@@ -13,19 +13,22 @@ export type ValidatorReturned = ValidationResult | Promise<ValidationResult>
 
 export type Validator<V> = (v: V) => ValidatorReturned
 
-export type FormRulesInput = {
-  [path: string]: Validator<any>
+export type FormInput = {
+  [path: string]: [initialValue: unknown, validator: Validator<any>]
 }
 
-export function useForm(rulesInput: FormRulesInput) {
+// TODO: better type definition for better type-safety
+export function useForm(input: FormInput) {
   const { t } = useI18n()
 
   const formRef = ref<FormInst | null>(null)
 
-  const rules: FormRules = {}
-  Object.keys(rulesInput).forEach((path) => {
-    const validator = rulesInput[path]
-    rules[path] = {
+  const formValue = ref<{ [path: string]: any }>({})
+  const formRules: FormRules = {}
+  Object.keys(input).forEach((path) => {
+    const [initialValue, validator] = input[path]
+    formValue.value[path] = initialValue
+    formRules[path] = {
       async validator(_: unknown, v: unknown) {
         const result = await validator(v)
         if (result == null) return
@@ -48,5 +51,12 @@ export function useForm(rulesInput: FormRulesInput) {
     return errs
   }
 
-  return [formRef, rules, validate] as const
+  // for NForm v-bind
+  const binds = {
+    // TODO: model in binds, to avoid `:model="formValue"`
+    ref: formRef,
+    rules: formRules
+  }
+
+  return [binds, formValue, validate] as const
 }