feat: 添加动态列表功能，更新 FormKit 配置以支持列表和数字输入类型

formkit.config.ts

@@ -1,14 +1,14 @@
-import type { FormKitExtendableSchemaRoot, FormKitNode, FormKitOptions } from '@formkit/core'
+import type { FormKitNode, FormKitOptions } from '@formkit/core'
 import { createI18nPlugin, zh } from '@formkit/i18n'
 import { genesisIcons } from '@formkit/icons'
-import { checkbox, createLibraryPlugin, form, group, range, submit, text } from '@formkit/inputs'
+import { checkbox, createLibraryPlugin, form, group, range, submit, text, list, number } from '@formkit/inputs'
 import * as defaultRules from '@formkit/rules'
 import { createThemePlugin } from '@formkit/themes'
 import { createValidationPlugin } from '@formkit/validation'
 import { /* defaultConfig, */ bindings } from '@formkit/vue'
 import { rootClasses } from "./formkit.theme"
 
-const library = createLibraryPlugin({ text, form, submit, group, checkbox, range })
+const library = createLibraryPlugin({ text, form, submit, group, checkbox, range, list, number })
 const validation = createValidationPlugin(defaultRules)
 const i18n = createI18nPlugin({ zh })
 const theme = undefined;
@@ -55,6 +55,6 @@ function addAsteriskPlugin(node: FormKitNode) {
 }
 
 export default {
-  plugins: [library, themePlugin, bindings, i18n, validation, addAsteriskPlugin],
+  plugins: [library, themePlugin, bindings, i18n, validation, addAsteriskPlugin,],
   config: { rootClasses },
 } satisfies FormKitOptions

src/App.vue

@@ -13,7 +13,6 @@ const castNumber = (node: FormKitNode) => {
   node.hook.input((value, next) => next(Number(value)))
 }
 
-
 onMounted(() => {
   console.group('onMounted')
   const nameNode = getNode('nameNodeId')
@@ -65,7 +64,6 @@ const SCHEMA: FormKitSchemaDefinition = [
       submit-label="提交 ✨"
     >
       <div class="character-attributes">
-
         <FormKit
           type="group"
           name="attributes"
@@ -144,12 +142,63 @@ const SCHEMA: FormKitSchemaDefinition = [
         <FormKitSchema :schema="SCHEMA" />
       </div>
 
+      <div class="character-attributes">
+        <FormKit
+          type="list"
+          name="guests"
+          :value="[{}]"
+          dynamic
+          #default="{ items, node, value }"
+        >
+          <FormKit
+            type="group"
+            v-for="(item, index) in items"
+            :key="item"
+            :index="index"
+          >
+            <div class="list-group">
+              <FormKit
+                type="text"
+                name="name"
+                label="Guest name"
+                placeholder="Guest name"
+              />
+              <FormKit
+                type="number"
+                name="age"
+                label="Guest age"
+              />
+              <button
+                type="button"
+                @click="() => node.input(value!.filter((_, i) => i !== index))"
+                class="border border-blue-600 text-blue-600 p-3"
+              >
+                - Remove
+              </button>
+            </div>
+
+          </FormKit>
+
+          <button
+            type="button"
+            @click="() => node.input(value!.concat({}))"
+            class="border border-blue-600 text-blue-600 p-3 mb-4"
+          >
+            + Add another
+          </button>
+
+          <pre wrap>{{ value }}</pre>
+        </FormKit>
+      </div>
+
+
       <FormKit
         type="checkbox"
         name="agree"
         label="我同意FormKit是最好的表单开发框架。"
         class="mb-4"
       />
+
       <pre class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ value }}</pre>
 
     </FormKit>
@@ -178,4 +227,18 @@ ul.error-box {
 ul.error-box p {
   font-weight: 500;
 }
+
+.list-group {
+  position: relative;
+  padding: 10px;
+  border: 1px solid grey;
+  border-radius: 10px;
+  margin-bottom: 5px;
+}
+
+.list-group button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
 </style>