feat: 更新 README 和 App.vue，添加 FormKit 上下文链接，修改输入框标签及帮助文本

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

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

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')