feat: add formkit auto animate plugin

Signed-off-by: Ryan Wang <i@ryanc.cc>

package.json

@@ -25,6 +25,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "@formkit/addons": "1.0.0-beta.9",
     "@formkit/core": "1.0.0-beta.9",
     "@formkit/i18n": "1.0.0-beta.9",
     "@formkit/inputs": "1.0.0-beta.9",

pnpm-lock.yaml

@@ -4,6 +4,7 @@ importers:
 
   .:
     specifiers:
+      '@formkit/addons': 1.0.0-beta.9
       '@formkit/core': 1.0.0-beta.9
       '@formkit/i18n': 1.0.0-beta.9
       '@formkit/inputs': 1.0.0-beta.9
@@ -65,6 +66,7 @@ importers:
       vue-router: ^4.1.1
       vue-tsc: ^0.38.3
     dependencies:
+      '@formkit/addons': 1.0.0-beta.9_vue@3.2.37
       '@formkit/core': 1.0.0-beta.9
       '@formkit/i18n': 1.0.0-beta.9
       '@formkit/inputs': 1.0.0-beta.9
@@ -1465,6 +1467,31 @@ packages:
     dependencies:
       '@floating-ui/core': 0.3.1
 
+  /@formkit/addons/1.0.0-beta.9_vue@3.2.37:
+    resolution: {integrity: sha512-hDsQY6bxC1ITNYqQL+i378uo2UCQ5/0rD7PpiN0Dr5vDCCsFFTOelnj8BbMz8Xftd8LIjhbyBKb7dOrrtEPCKQ==}
+    dependencies:
+      '@formkit/auto-animate': 1.0.0-beta.1_vue@3.2.37
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/utils': 1.0.0-beta.9
+    transitivePeerDependencies:
+      - react
+      - vue
+    dev: false
+
+  /@formkit/auto-animate/1.0.0-beta.1_vue@3.2.37:
+    resolution: {integrity: sha512-I3OWOBaPZKSJL4bsooXI8kC3q7bcgibD2oML0P/Lir6MnbvUe/0/7EH8br024juvM/Ulm9C9xGx9CJUQYrOWSA==}
+    peerDependencies:
+      react: ^16.8.0
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      vue: 3.2.37
+    dev: false
+
   /@formkit/core/1.0.0-beta.9:
     resolution: {integrity: sha512-TFU2dTY/0DS9CLv0djwG0WgfSX1Hx0hvLzqCZWSx2Jw0ivO4jtMOEJjagy4LZSEvrE8yu4MTolZVSi3PbEEXug==}
     dependencies:

src/formkit/formkit.config.ts

@@ -1,11 +1,20 @@
 import { generateClasses } from "@formkit/themes";
 import theme from "./theme";
-import type { FormKitOptions } from "@formkit/core";
+import { createAutoAnimatePlugin } from "@formkit/addons";
+import { zh } from "@formkit/i18n";
+import type { DefaultConfigOptions } from "@formkit/vue";
+import { form } from "./inputs/form";
 
-const config: FormKitOptions = {
+const config: DefaultConfigOptions = {
   config: {
     classes: generateClasses(theme),
   },
+  plugins: [createAutoAnimatePlugin()],
+  inputs: {
+    form,
+  },
+  locales: { zh },
+  locale: "zh",
 };
 
 export default config;

src/formkit/inputs/form.ts

@@ -0,0 +1,38 @@
+import type { FormKitTypeDefinition } from "@formkit/core";
+import {
+  disablesChildren,
+  formInput,
+  forms,
+  message,
+  messages,
+} from "@formkit/inputs";
+
+/**
+ * Input definition for a form.
+ * @public
+ */
+export const form: FormKitTypeDefinition = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: formInput("$slots.default", messages(message("$message.value"))),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: "group",
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [
+    "actions",
+    "submit",
+    "submitLabel",
+    "submitAttrs",
+    "submitBehavior",
+    "incompleteMessage",
+  ],
+  /**
+   * Additional features that should be added to your input
+   */
+  features: [forms, disablesChildren],
+};

src/formkit/theme.ts

@@ -25,10 +25,11 @@ const buttonClassification = {
 
 const theme: Record<string, Record<string, string>> = {
   global: {
-    outer: "formkit-disabled:opacity-50",
+    outer: "formkit-disabled:opacity-50 py-3",
     help: "text-xs text-gray-500",
     messages: "list-none p-0 mt-1 mb-0",
     message: "text-red-500 mb-1 text-xs",
+    form: "flex flex-col divide-y divide-gray-100",
   },
   button: buttonClassification,
   color: {

src/modules/interface/menus/MenuList.vue

@@ -92,7 +92,7 @@ const menus = ref([
   </VPageHeader>
   <div class="m-0 md:m-4">
     <div class="flex flex-col gap-4 sm:flex-row">
-      <div class="w-full sm:w-96">
+      <div class="w-96">
         <VCard title="分组">
           <VMenu class="!p-0">
             <VMenuItem id="default" active title="未分组"></VMenuItem>

src/modules/system/roles/RoleList.vue

@@ -73,10 +73,7 @@ onMounted(() => {
             class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
             <div class="flex w-full flex-1 sm:w-auto">
-              <FormKit
+              <FormKit placeholder="输入关键词搜索" type="text"></FormKit>
-                placeholder="输入关键词搜索"
-                type="text"
-              ></FormKit>
             </div>
             <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">

src/modules/system/users/components/UserCreationModal.vue

@@ -94,12 +94,7 @@ const handleCreateUser = async () => {
     :width="700"
     @update:visible="handleVisibleChange"
   >
-    <FormKit
+    <FormKit id="user-form" type="form" @submit="handleCreateUser">
-      id="user-form"
-      :actions="false"
-      type="form"
-      @submit="handleCreateUser"
-    >
       <FormKit
         v-model="creationForm.user.metadata.name"
         label="用户名"

src/setup/setupComponents.ts

@@ -5,15 +5,12 @@ import "floating-vue/dist/style.css";
 import VueGridLayout from "vue-grid-layout";
 import { defaultConfig, plugin as FormKit } from "@formkit/vue";
 import FormKitConfig from "@/formkit/formkit.config";
-import { zh } from "@formkit/i18n";
 
 export function setupComponents(app: App) {
   app.use(VueGridLayout);
   app.use(
     FormKit,
     defaultConfig({
-      locales: { zh },
-      locale: "zh",
       ...FormKitConfig,
     })
   );