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

src/__fk-inputs__/inputs/_demo_text.ts

@@ -1,16 +1,15 @@
 import { FormKitTypeDefinition } from '@formkit/core'
 import {
-  outer,
-  inner,
-  wrapper,
-  label,
+  casts,
   help,
   icon,
+  inner,
+  label,
+  outer,
   prefix,
   suffix,
   textInput,
-  casts,
-  createSection,
+  wrapper
 } from '@formkit/inputs'
 import { messages } from '../sections/messages'
 

src/all-custom/all-custom.vue

@@ -31,7 +31,7 @@ async function submit() {
           label: 'font-medium block'
         }
       }"
-      :type="form"
+      type="form"
       #default="{ value }"
       @submit="submit"
       submit-label="提交 ✨"

src/main.ts

@@ -1,13 +1,9 @@
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-import { plugin, /* defaultConfig */ } from '@formkit/vue'
-import { createApp } from 'vue'
-import formKitConfig from '../formkit.config'
-import App from './App.vue'
-
+import Aura from "@primevue/themes/aura";
 import PrimeVue from "primevue/config";
-import Aura from '@primevue/themes/aura';
-import ToastService from 'primevue/toastservice';
-
+import ToastService from "primevue/toastservice";
+import { createApp } from "vue";
+import { setupFormKit } from "../formkit.config";
+import App from "./App.vue";
 
 // import '@unocss/reset/normalize.css'
 // import '@unocss/reset/sanitize/sanitize.css'
@@ -16,16 +12,15 @@ import ToastService from 'primevue/toastservice';
 // import '@unocss/reset/tailwind-compat.css'
 // import '@unocss/reset/tailwind.css'
 
-import 'virtual:uno.css'
-import 'primeicons/primeicons.css'
+import "primeicons/primeicons.css";
+import "virtual:uno.css";
 
-const app = createApp(App)
+const app = createApp(App);
 app.use(PrimeVue, { theme: { preset: Aura } });
 app.use(ToastService);
 
-
 // https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue
-app.use(autoAnimatePlugin) // v-auto-animate="{ duration: 100 }"
 
-app.use(plugin, formKitConfig)
-app.mount('#app')
+setupFormKit(app);
+
+app.mount("#app");

src/tutorial-form/index.vue

@@ -220,7 +220,7 @@ onMounted(() => {
 
       <div class="bg-gray-100 p-4 rounded-xl dark:bg-gray-800">
         <h2 class="font-bold text-lg mb-4 color:gray-800 dark:text-white">Pro Inputs</h2>
-        <FormKit type="toggle" />
+        <!-- <FormKit type="toggle" /> -->
       </div>
 
     </FormKit>