From 84b602db3bbd3d4e309f51da4611e3d68f3fc39f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Mon, 18 Nov 2024 16:17:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=20FormKit=20=E9=85=8D=E7=BD=AE=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=92=8C=E6=95=B0=E5=AD=97=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 formkit.config.ts |  8 +++---
 src/App.vue       | 67 +++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/formkit.config.ts b/formkit.config.ts
index d3f7644..65640d5 100644
--- a/formkit.config.ts
+++ b/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
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 69da120..74b8c61 100644
--- a/src/App.vue
+++ b/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>
\ No newline at end of file