From f9d1a5c2e20737dc7712b4bb9b5b9a3ad9253d17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Wed, 4 Dec 2024 16:18:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20formkit=20?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=EF=BC=8C=E6=B7=BB=E5=8A=A0=20group=20?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=94=AF=E6=8C=81=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 formkit.config.ts             |  3 ++-
 src/all-custom/all-custom.vue | 40 +++++++++++++++++++++++++++++------
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/formkit.config.ts b/formkit.config.ts
index 85a3f0d..31b9eeb 100644
--- a/formkit.config.ts
+++ b/formkit.config.ts
@@ -6,7 +6,7 @@ import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
 import type { FormKitOptions } from '@formkit/core';
 import { register as decodeErrors } from '@formkit/dev';
 import { createI18nPlugin, zh } from '@formkit/i18n';
-import { createLibraryPlugin, submit, text } from '@formkit/inputs';
+import { createLibraryPlugin, group, submit, text } from '@formkit/inputs';
 import * as defaultRules from '@formkit/rules';
 import { createValidationPlugin } from '@formkit/validation';
 import { /* defaultConfig, */ bindings, plugin /* defaultConfig */ } from '@formkit/vue';
@@ -23,6 +23,7 @@ const config: FormKitOptions = {
       createLibraryPlugin({
         text,
         submit,
+        group,
         // ==============================
         form,
         PInputText,
diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue
index 2eb47af..9579140 100644
--- a/src/all-custom/all-custom.vue
+++ b/src/all-custom/all-custom.vue
@@ -77,13 +77,35 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
         </template> -->
       </FormKit>
 
-      <!-- <FormKit
-        v-if="false"
-        type="text"
-        label="默认text"
-        validation="required"
+      <Button
+        label="Button"
+        @click="() => {
+          value!.button = value!.button || {};
+          (value!.button as any).clicked = 'clicked';
+        }"
+      />
+
+      <FormKit
+        type="group"
+        name="group"
       >
-      </FormKit> -->
+        <FormKit
+          type="text"
+          name="text-in-group-1"
+        >
+        </FormKit>
+      </FormKit>
+
+      <FormKit
+        type="group"
+        name="group"
+      >
+        <FormKit
+          type="text"
+          name="text-in-group-2"
+        >
+        </FormKit>
+      </FormKit>
 
       <pre class="font-mono text-sm p-4 bg-slate-100 dark:bg-gray-900 overflow-x-auto rounded-md shadow-inner dark:text-gray-300
       ">{{ value }}</pre>
@@ -92,3 +114,9 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
   </Fieldset>
 
 </template>
+
+<style scoped>
+:deep(.formkit-input) {
+  border: 1px solid #e2e8f0;
+}
+</style>
\ No newline at end of file