feat: 更新表单组件，简化代码结构并添加调试插件

formkit.config.ts

@@ -1,65 +1,59 @@
-import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons'
-import type { FormKitNode, FormKitOptions } from '@formkit/core'
-import { createI18nPlugin, zh } from '@formkit/i18n'
-import { genesisIcons } from '@formkit/icons'
-import { createLibraryPlugin, submit, text } from '@formkit/inputs'
-import { createProPlugin, toggle } from '@formkit/pro'
-import * as defaultRules from '@formkit/rules'
-import { createThemePlugin } from '@formkit/themes'
-import { createValidationPlugin } from '@formkit/validation'
-import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue'
-import { addAsteriskPlugin } from './formkit.config.addAsteriskPlugin'
-// import { fkLibrary } from './formkit.config.fkLibrary'
-// import { rootClasses } from "./formkit.config.theme"
-import HeadlessuiToggle from "./src/headlessui-switch.vue"
-import { register as decodeErrors } from '@formkit/dev'
-
-decodeErrors();
-
-const validation = createValidationPlugin(defaultRules)
-
-const theme = undefined;
-const icons = genesisIcons;
+import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons';
+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 * as defaultRules from '@formkit/rules';
+import { createValidationPlugin } from '@formkit/validation';
+import { /* defaultConfig, */ bindings, plugin /* defaultConfig */ } from '@formkit/vue';
+import type { App } from 'vue';
+import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin';
+import { debugPlugin } from './formkit.config.plugin.debug';
+import { form } from '@/__fk-inputs__/inputs/form';
 
 // const apiKey = 'fk-6cdd5192223'
-export default {
+const config: FormKitOptions = {
   plugins: [
-    // createProPlugin(apiKey, { toggle }),
-    // createLibraryPlugin(fkLibrary),
-    createLibraryPlugin({
-      text,
-      submit,
-    }),
-    // createLibraryPlugin(
-    //   {
-    //     'headlessuiSwitch': createInput(HeadlessuiToggle),
-    //   }
+    ...[
+      // createProPlugin(apiKey, { toggle }),
+      // createLibraryPlugin(fkLibrary),
+      createLibraryPlugin({
+        form,
+        submit,
+        text,
+      }),
+      // createLibraryPlugin(
+      //   {
+      //     'headlessuiSwitch': createInput(HeadlessuiToggle),
+      //   }
+      // ),
+    ],
+    // createThemePlugin(
+    //   theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */,
     // ),
-    createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */),
     bindings,
     createI18nPlugin({ zh }),
-    validation,
+    createValidationPlugin(defaultRules),
     addAsteriskPlugin,
-
-    // https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts
-    createAutoHeightTextareaPlugin(),
-
-    // 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
+    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'],
-      // }
-    )
+      {
+        /* optional animation targets object */
+        // default:
+        global: ['outer', 'inner'],
+        form: ['form'],
+        repeater: ['items'],
+      },
+    ),
+    debugPlugin,
   ],
   config: {
     // rootClasses: false,
@@ -68,4 +62,10 @@ export default {
     //   console.debug(`sectionName :>> `, sectionName);
     // }
   },
-} satisfies FormKitOptions
+};
+
+export function setupFormKit(app: App) {
+  decodeErrors();
+  app.use(plugin, config);
+  app.use(autoAnimatePlugin); // v-auto-animate="{ duration: 100 }"
+}