整理

README.md

@@ -1,15 +1,15 @@
-# Vue FormKit Example
+# [Vue FormKit Example](https://formkit.com)
 
-- https://github.com/mathsgod/formkit-element
-
----
-- https://themes.formkit.com/editor?theme=regenesis
+## Example
 - https://formkit.com/essentials/examples
-- https://formkit.com/essentials/inputs#sections
-- 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
+## Knowledge
+- [sections](https://formkit.com/inputs/text#sections)
+- [sections](https://formkit.com/essentials/inputs#sections)
+- [useformkitcontext](https://formkit.com/inputs/form#useformkitcontext)
+
+## Theme
+- https://themes.formkit.com/editor?theme=regenesis
+
+## 3rd Party
+- https://github.com/mathsgod/formkit-element

formkit.addAsteriskPlugin.ts

@@ -7,7 +7,7 @@ export function addAsteriskPlugin(node: FormKitNode) {
   node.on('created', () => {
     const legendOrLabel = legends.includes(`${node.props.type}${node.props.options ? '_multi' : ''}`) ? 'legend' : 'label';
 
-    console.group(node.props.label || node.props.submitLabel)
+    console.group('[node created]', node.props.label || node.props.submitLabel)
     console.debug(`node :>> `, node);
     console.debug(`node.props.definition :>> `, node.props.definition);
     // if (typeof node.props.definition!.schema === 'function') {

src/App.vue

@@ -15,15 +15,15 @@ const castNumber = (node: FormKitNode) => {
 
 onMounted(() => {
   console.group('onMounted')
-  const nameNode = getNode('nameNodeId')
+  const nameNode = getNode('nameNodeId') // 用 id 获取节点
   Object.assign(window, { nameNode })
   console.debug(`nameNode :>> `, nameNode);
 
-  const schemaGroupInput = nameNode!.root.at('schemaGroup.input')
+  const schemaGroupInput = nameNode?.root.at('schemaGroup.input') // 用路径获取节点
   console.debug(`schemaGroupInput :>> `, schemaGroupInput);
-  nameNode!.on('commit', ({ payload }) => {
+  nameNode?.on('commit', ({ payload }) => {
     console.debug('[nameNode] [on commit]', `payload :>> `, payload);
-    schemaGroupInput!.input(`姓名：${payload}`)
+    schemaGroupInput?.input(`姓名：${payload}`)
   })
   console.groupEnd()
 })
@@ -58,6 +58,18 @@ const SCHEMA: FormKitSchemaDefinition = [
   }
 ];
 
+function onChangeName() {
+  const nameNode = getNode('nameNodeId')
+  nameNode?.input('测试')
+}
+
+import autoAnimate from "@formkit/auto-animate"
+onMounted(() => {
+  // setTimeout(() => {
+  autoAnimate(document.getElementById('attributes-group-wrapper')!);
+  // });
+})
+
 </script>
 
 <template>
@@ -70,7 +82,10 @@ const SCHEMA: FormKitSchemaDefinition = [
       submit-label="提交 ✨"
     >
       <!-- v-auto-animate -->
-      <div class="character-attributes">
+      <div
+        class="character-attributes"
+        id="attributes-group-wrapper"
+      >
         <FormKit
           type="group"
           name="attributes"
@@ -80,7 +95,7 @@ const SCHEMA: FormKitSchemaDefinition = [
               return name?.includes('测试') ? true : false
             }
           }"
-          validation-visibility="live"
+          validation-visibility="dirty"
           validation="validateGroup"
           :validation-messages="{
             validateGroup: ({ name/* , args */ }) => {
@@ -97,7 +112,22 @@ const SCHEMA: FormKitSchemaDefinition = [
             label="姓名"
             :help="`现在 confirmName 的值是：${attributes?.confirmName}`"
             some-attr="some-attr-value"
-          />
+          >
+            <template #label="{ classes, attrs, label }">
+              <!-- <pre
+                class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ JSON.stringify({ classes, attrs, label }, null, 2) }}</pre> -->
+              <label
+                for="nameNodeId"
+                v-bind="attrs"
+                :class="classes.label"
+              >{{ label }}<button
+                  class="ml-2 px-2 py-1 bg-blue-500 text-white rounded"
+                  type="button"
+                  @click="onChangeName"
+                >点击赋值</button>
+              </label>
+            </template>
+          </FormKit>
 
           <FormKit
             v-if="attributes?.name"

src/main.ts

@@ -8,5 +8,6 @@ const app = createApp(App)
 
 // https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue
 app.use(autoAnimatePlugin) // v-auto-animate
+
 app.use(plugin, formKitConfig)
 app.mount('#app')