From b65b6bf48ea983f5605a3ca8d517814448a78e94 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 17:17:48 +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=E4=BC=98=E5=8C=96=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=E5=B9=B6=E4=BF=AE=E6=94=B9=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                          |  1 +
 formkit.config.ts             | 95 ++++++++++++++++++-----------------
 src/all-custom/all-custom.vue |  2 +-
 3 files changed, 51 insertions(+), 47 deletions(-)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 0000000..b2545d2
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_DEBUG_FORMKIT=true
\ No newline at end of file
diff --git a/formkit.config.ts b/formkit.config.ts
index 31b9eeb..44bad88 100644
--- a/formkit.config.ts
+++ b/formkit.config.ts
@@ -3,7 +3,7 @@ import { PInputPassword } from '@/__fk-inputs__/inputs/input-password';
 import { PInputText } from '@/__fk-inputs__/inputs/input-text';
 import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons';
 import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
-import type { FormKitOptions } from '@formkit/core';
+import type { FormKitOptions, FormKitPlugin } from '@formkit/core';
 import { register as decodeErrors } from '@formkit/dev';
 import { createI18nPlugin, zh } from '@formkit/i18n';
 import { createLibraryPlugin, group, submit, text } from '@formkit/inputs';
@@ -14,53 +14,56 @@ import type { App } from 'vue';
 import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin';
 import { debugPlugin } from './formkit.config.plugin.debug';
 
+const plugins: FormKitPlugin[] = [
+  // createProPlugin(apiKey, { toggle }),
+  // createLibraryPlugin(fkLibrary),
+  createLibraryPlugin({
+    text,
+    submit,
+    group,
+    // ==============================
+    form,
+    PInputText,
+    PInputPassword,
+  }),
+  // createLibraryPlugin(
+  //   {
+  //     'headlessuiSwitch': createInput(HeadlessuiToggle),
+  //   }
+  // ),
+  // createThemePlugin(
+  //   theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */,
+  // ),
+  // #############################
+  bindings,
+  createI18nPlugin({ zh }),
+  createValidationPlugin(defaultRules),
+  addAsteriskPlugin,
+  createAutoHeightTextareaPlugin(/* https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts */),
+  createAutoAnimatePlugin(
+    // https://auto-animate.formkit.com/#usage
+    // https://github.com/formkit/auto-animate/
+    // https://github.com/formkit/formkit/blob/46d64d05c1b37875fc6227853f2bcfa987550c91/packages/addons/src/plugins/autoAnimatePlugin.ts
+    {
+      duration: 250,
+      easing: 'ease-in-out',
+    },
+    {
+      /* optional animation targets object */
+      // default:
+      global: ['outer', 'inner'],
+      form: ['form'],
+      repeater: ['items'],
+    },
+  ),
+];
+if (import.meta.env.VITE_DEBUG_FORMKIT === 'true') {
+  plugins.push(debugPlugin);
+}
+
 // const apiKey = 'fk-6cdd5192223'
 const config: FormKitOptions = {
-  plugins: [
-    ...[
-      // createProPlugin(apiKey, { toggle }),
-      // createLibraryPlugin(fkLibrary),
-      createLibraryPlugin({
-        text,
-        submit,
-        group,
-        // ==============================
-        form,
-        PInputText,
-        PInputPassword,
-      }),
-      // createLibraryPlugin(
-      //   {
-      //     'headlessuiSwitch': createInput(HeadlessuiToggle),
-      //   }
-      // ),
-    ],
-    // createThemePlugin(
-    //   theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */,
-    // ),
-    bindings,
-    createI18nPlugin({ zh }),
-    createValidationPlugin(defaultRules),
-    addAsteriskPlugin,
-    createAutoHeightTextareaPlugin(/* https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts */),
-    createAutoAnimatePlugin(
-      // https://auto-animate.formkit.com/#usage
-      // https://github.com/formkit/auto-animate/
-      // https://github.com/formkit/formkit/blob/46d64d05c1b37875fc6227853f2bcfa987550c91/packages/addons/src/plugins/autoAnimatePlugin.ts
-      {
-        duration: 250,
-        easing: 'ease-in-out',
-      },
-      {
-        /* optional animation targets object */
-        // default:
-        global: ['outer', 'inner'],
-        form: ['form'],
-        repeater: ['items'],
-      },
-    ),
-    debugPlugin,
-  ],
+  plugins,
   config: {
     // rootClasses: false,
     // rootClasses,
diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue
index ac22c9a..548edae 100644
--- a/src/all-custom/all-custom.vue
+++ b/src/all-custom/all-custom.vue
@@ -105,7 +105,7 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
         label="Button"
         @click="() => {
           value!.button = value!.button || {};
-          (value!.button as any).clicked = 'clicked';
+          (value!.button as any).clicked = 'clicked-这个值在@submit回调的formData里不会出现';
           (value!.group as any)['text-in-group-1'] = 'changed-by-button';
         }"
       />