From 72397d5bd9dc763f4029b0fe0a2386e55de11c42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Tue, 19 Nov 2024 18:22:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20README=20=E5=92=8C?=
 =?UTF-8?q?=20App.vue=EF=BC=8C=E6=B7=BB=E5=8A=A0=20FormKit=20=E4=B8=8A?=
 =?UTF-8?q?=E4=B8=8B=E6=96=87=E9=93=BE=E6=8E=A5=EF=BC=8C=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E6=A0=87=E7=AD=BE=E5=8F=8A=E5=B8=AE?=
 =?UTF-8?q?=E5=8A=A9=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md   |  1 +
 src/App.vue | 20 ++++++++++++++++----
 src/main.ts |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 01edf78..4de3dc9 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@
 - https://formkit.com/essentials/architecture#getting-a-components-node
 - https://formkit.com/essentials/architecture#getting-a-components-node#message-store
 - https://formkit.com/essentials/validation#showing-errors
+- https://formkit.com/inputs/form#useformkitcontext
 
 ---
 - https://github.com/formkit/formkit/blob/master/packages/addons/src/plugins/autoHeightTextarea.ts
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index b04e58a..0892139 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,7 +48,7 @@ const SCHEMA: FormKitSchemaDefinition = [
     children: [
       {
         $formkit: 'text',
-        label: 'JSON Schema’ed Input',
+        label: 'JSON Schema 渲染的输入框',
         name: 'input',
         validation: 'required',
         validationLabel: 'validationLabel', // validation message 使用顺序：validationLabel > label > name
@@ -57,6 +57,7 @@ const SCHEMA: FormKitSchemaDefinition = [
     ]
   }
 ];
+
 </script>
 
 <template>
@@ -64,12 +65,12 @@ const SCHEMA: FormKitSchemaDefinition = [
 
     <FormKit
       type="form"
-      #default="{ value }"
+      #default="{ value } : { value ?: Record<string, any> }"
       @submit="submit"
       submit-label="提交 ✨"
     >
+      <!-- v-auto-animate -->
       <div class="character-attributes">
-
         <FormKit
           type="group"
           name="attributes"
@@ -94,10 +95,19 @@ const SCHEMA: FormKitSchemaDefinition = [
             name="name"
             id="nameNodeId"
             label="姓名"
-            help="别人都叫你什么？"
+            :help="`现在 confirmName 的值是：${value?.attributes?.confirmName}`"
             some-attr="some-attr-value"
           />
 
+          <FormKit
+            v-if="value?.attributes?.name"
+            :preserve="false"
+            name="confirmName"
+            type="checkbox"
+            :value="false"
+            :label="`如果清空 name 输入框，这个确认框及其值将被移除。`"
+          />
+
           <FormKit
             type="checkbox"
             name="flavors"
@@ -109,6 +119,7 @@ const SCHEMA: FormKitSchemaDefinition = [
             }"
             validation="required|min:2"
           />
+
           <FormKit
             type="range"
             name="strength"
@@ -124,6 +135,7 @@ const SCHEMA: FormKitSchemaDefinition = [
             :plugins="[castNumber]"
             class="mb-4"
           />
+
           <FormKit
             type="textarea"
             auto-height
diff --git a/src/main.ts b/src/main.ts
index d30646c..2eea8d4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,6 @@ import App from './App.vue'
 const app = createApp(App)
 
 // https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue
-app.use(autoAnimatePlugin)
+app.use(autoAnimatePlugin) // v-auto-animate
 app.use(plugin, formKitConfig)
 app.mount('#app')