From 5a63d257752bd35920772a02f023838991acef8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Fri, 15 Nov 2024 18:18:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=BC=95=E7=94=A8=EF=BC=8C=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E6=A8=A1=E5=BC=8F=E9=AA=8C=E8=AF=81=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E8=B0=83=E6=95=B4=20schema=20=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 62 +++++++++++++++++++++--------------------------------
 1 file changed, 24 insertions(+), 38 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 167e9aa..1abf75a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,46 +15,38 @@ const castNumber = (node: FormKitNode) => {
 
 
 onMounted(() => {
-  const agreeNode = getNode('agreeNodeId')
-  Object.assign(window, { agreeNode })
-  console.debug('[onMounted]', `agreeNode :>> `, agreeNode);
-
-  const nameNode = agreeNode?.context?.node.at('attributes.name')
+  const nameNode = getNode('nameNodeId')
+  Object.assign(window, { nameNode })
   console.debug('[onMounted]', `nameNode :>> `, nameNode);
-  agreeNode!.on('commit', ({ payload }) => {
-    console.debug('[agreeNode] [on commit]', `payload :>> `, payload);
-    let newValue = (nameNode?.value as string)?.replace(' 👍', '')?.replace(' 👎', '')
-    nameNode!.input(`${newValue} ${payload ? '👍' : '👎'}`)
+
+  const schemaGroupInput = nameNode!.root.at('schemaGroup.input')
+  console.debug('[onMounted]', `schemaGroupInput :>> `, schemaGroupInput);
+  nameNode!.on('commit', ({ payload }) => {
+    console.debug('[nameNode] [on commit]', `payload :>> `, payload);
+    schemaGroupInput!.input(`姓名：${payload}`)
   })
 })
 
-const addressSchema: FormKitSchemaDefinition = [
+const SCHEMA: FormKitSchemaDefinition = [
+  {
+    $el: 'h1',
+    children: 'JSON Schema Form',
+    attrs: {
+      class: 'font-bold text-2xl mb-4',
+      'data-foo': 'bar',
+    },
+  },
   {
     $formkit: 'group',
-    name: 'address',
+    name: 'schemaGroup',
     children: [
       {
         $formkit: 'text',
-        name: 'street',
-        label: '街道地址',
+        label: 'JSON Schema’ed Input',
+        name: 'input',
         validation: 'required',
-        validationLabel: '街道地址'
-      },
-      {
-        $formkit: 'text',
-        name: 'city',
-        label: '城市',
-        validation: 'required',
-        validationLabel: '城市'
-      },
-      {
-        $formkit: 'text',
-        name: 'zipCode',
-        label: '邮政编码',
-        validation: 'required|number|length:6',
-        validationLabel: '邮政编码',
-        errors: ['显式错误'] // 显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。
-        //  :errors="errors"
+        validationLabel: 'input字段',
+        errors: ['显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。']
       }
     ]
   }
@@ -94,15 +86,10 @@ const addressSchema: FormKitSchemaDefinition = [
           <FormKit
             type="text"
             name="name"
+            id="nameNodeId"
             label="姓名"
             help="别人都叫你什么？"
           />
-          <div
-            v-if="!((value?.attributes as any)?.name)?.includes('测试')"
-            class="text-red-500 mb-4 p-2 border border-red-500 rounded"
-          >
-            输入的姓名必须包含 '测试' 字符串。
-          </div>
 
           <FormKit
             type="checkbox"
@@ -151,13 +138,12 @@ const addressSchema: FormKitSchemaDefinition = [
       </div>
 
       <div class="character-attributes">
-        <FormKitSchema :schema="addressSchema" />
+        <FormKitSchema :schema="SCHEMA" />
       </div>
 
       <FormKit
         type="checkbox"
         name="agree"
-        id="agreeNodeId"
         label="我同意FormKit是最好的表单开发框架。"
         class="mb-4"
       />