feat: ZodForm

src/tutorial-form/guests.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { FormKitMessages } from '@formkit/vue'
+</script>
+
+<template>
+  <FormKit
+    type="list"
+    name="guests"
+    label="客人列表"
+    :value="[{}]"
+    dynamic
+    validation="required"
+    #default="{ items, node, value }"
+  >
+    <div
+      class="attributes-group"
+      v-auto-animate
+    >
+      <FormKitMessages />
+      <FormKit
+        type="group"
+        v-for="(item, index) in items"
+        :key="item"
+        :index="index"
+      >
+        <div class="list-group-item">
+          <FormKit
+            type="text"
+            name="name"
+            label="客人姓名"
+            placeholder="客人姓名"
+            validation="required"
+            value="默认值"
+          >
+          </FormKit>
+          <FormKit
+            type="number"
+            name="age"
+            label="客人年龄"
+          />
+          <button
+            type="button"
+            class="border border-blue-600 text-blue-600 p-3"
+            @click="() => node.input(value?.filter((_, i) => i !== index))"
+          >
+            - 移除
+          </button>
+        </div>
+      </FormKit>
+      <button
+        type="button"
+        @click="() => node.input(value?.concat({}))"
+        class="border border-blue-600 text-blue-600 p-3 mb-4"
+      >
+        + 添加另一个
+      </button>
+      <pre wrap>{{ value }}</pre>
+
+    </div>
+  </FormKit>
+</template>
+
+<style scoped>
+.list-group-item {
+  position: relative;
+  padding: 10px;
+  border: 1px solid grey;
+  border-radius: 10px;
+  margin-bottom: 5px;
+}
+
+.list-group-item button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+</style>