feat: 添加自动动画插件，更新 FormKit 配置以支持动态列表，重构样式和组件结构

2024-11-19 16:07:49 +08:00
parent 588c3ac243
commit 8a1398d91d
6 changed files with 80 additions and 28 deletions
--- a/formkit.config.ts
+++ b/formkit.config.ts
@ -7,6 +7,7 @@ import { createThemePlugin } from '@formkit/themes'
 import { createValidationPlugin } from '@formkit/validation'
 import { /* defaultConfig, */ bindings } from '@formkit/vue'
 import { rootClasses } from "./formkit.theme"
+import { createAutoAnimatePlugin } from '@formkit/addons'

 const library = createLibraryPlugin({ text, form, submit, group, checkbox, range, list, number })
 const validation = createValidationPlugin(defaultRules)
@ -54,7 +55,27 @@ function addAsteriskPlugin(node: FormKitNode) {
  })
 }

+
 export default {
-  plugins: [library, themePlugin, bindings, i18n, validation, addAsteriskPlugin,],
+  plugins: [
+    library, themePlugin, bindings, i18n, validation, addAsteriskPlugin,
+
+    // 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
+    createAutoAnimatePlugin(
+      {
+        duration: 250,
+        easing: 'ease-in-out',
+      },
+      // {
+      //   /* optional animation targets object */
+      //   // default:
+      //   global: ['outer', 'inner'],
+      //   form: ['form'],
+      //   repeater: ['items'],
+      // }
+    )
+  ],
  config: { rootClasses },
 } satisfies FormKitOptions
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@formkit/addons": "^1.6.9",
    "@formkit/core": "latest",
    "@formkit/icons": "latest",
    "@formkit/themes": "latest",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      '@formkit/addons':
+        specifier: ^1.6.9
+        version: 1.6.9
      '@formkit/core':
        specifier: latest
        version: 1.6.9
@ -207,6 +210,12 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@formkit/addons@1.6.9':
+    resolution: {integrity: sha512-Qfq789kpQ5EYqFl6QPE32vMCs0qivbvR50NNRwUadC2hgfGcayKe8Gc43G8neW6HHPjmyzkHQHLknLxHrGni3Q==}
+
+  '@formkit/auto-animate@0.8.2':
+    resolution: {integrity: sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ==}
+
  '@formkit/core@1.6.9':
    resolution: {integrity: sha512-Zb5OkYKMf7Rp1pd4iUMv0TJQvfgl1PdKtRRQoGiTA0XIFLB/7tcRMr1wc5isA2JS+hllfxMTh3RWF8N+64fTMg==}

@ -1039,6 +1048,15 @@ snapshots:
  '@esbuild/win32-x64@0.21.5':
    optional: true

+  '@formkit/addons@1.6.9':
+    dependencies:
+      '@formkit/auto-animate': 0.8.2
+      '@formkit/core': 1.6.9
+      '@formkit/inputs': 1.6.9
+      '@formkit/utils': 1.6.9
+
+  '@formkit/auto-animate@0.8.2': {}
+
  '@formkit/core@1.6.9':
    dependencies:
      '@formkit/utils': 1.6.9
--- a/src/App.vue
+++ b/src/App.vue
@ -51,7 +51,7 @@ const SCHEMA: FormKitSchemaDefinition = [
        label: 'JSON Schema’ed Input',
        name: 'input',
        validation: 'required',
-        validationLabel: 'input字段',
+        validationLabel: 'validationLabel', // validation message 使用顺序：validationLabel > label > name
        errors: ['显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。']
      }
    ]
@ -69,6 +69,7 @@ const SCHEMA: FormKitSchemaDefinition = [
      submit-label="提交 ✨"
    >
      <div class="character-attributes">
+
        <FormKit
          type="group"
          name="attributes"
@ -146,6 +147,7 @@ const SCHEMA: FormKitSchemaDefinition = [
      <div class="character-attributes">
        <FormKitSchema :schema="SCHEMA" />
      </div>
+
      <Guests />

      <FormKit
@ -162,14 +164,6 @@ const SCHEMA: FormKitSchemaDefinition = [
 </template>

 <style scoped>
-.character-attributes {
-  padding: 1.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  background-color: #f9fafb;
-}
-
 ul.error-box {
  padding: 0.75rem;
  border: 1px solid #ef4444;
@ -183,4 +177,14 @@ ul.error-box {
 ul.error-box p {
  font-weight: 500;
 }
+</style>
+
+<style>
+.character-attributes {
+  padding: 1.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  background-color: #f9fafb;
+}
 </style>
--- a/src/guests.vue
+++ b/src/guests.vue
@ -3,15 +3,18 @@ import { FormKitMessages } from '@formkit/vue'
 </script>

 <template>
-  <div class="character-attributes">
-    <FormKit
-      type="list"
-      name="guests"
-      label="客人列表"
-      :value="[{}]"
-      dynamic
-      validation="required"
-      #default="{ items, node, value }"
+  <FormKit
+    type="list"
+    name="guests"
+    label="客人列表"
+    :value="[{}]"
+    dynamic
+    validation="required"
+    #default="{ items, node, value }"
+  >
+    <div
+      class="character-attributes"
+      v-auto-animate
    >
      <FormKitMessages />
      <FormKit
@ -20,14 +23,15 @@ import { FormKitMessages } from '@formkit/vue'
        :key="item"
        :index="index"
      >
-        <div class="list-group">
+        <div class="list-group-item">
          <FormKit
            type="text"
            name="name"
            label="客人姓名"
            placeholder="客人姓名"
            validation="required"
-          />
+          >
+          </FormKit>
          <FormKit
            type="number"
            name="age"
@ -42,7 +46,6 @@ import { FormKitMessages } from '@formkit/vue'
          </button>
        </div>
      </FormKit>
-
      <button
        type="button"
        @click="() => node.input(value?.concat({}))"
@ -51,12 +54,13 @@ import { FormKitMessages } from '@formkit/vue'
        + 添加另一个
      </button>
      <pre wrap>{{ value }}</pre>
-    </FormKit>
-  </div>
+
+    </div>
+  </FormKit>
 </template>

 <style scoped>
-.list-group {
+.list-group-item {
  position: relative;
  padding: 10px;
  border: 1px solid grey;
@ -64,7 +68,7 @@ import { FormKitMessages } from '@formkit/vue'
  margin-bottom: 5px;
 }

-.list-group button {
+.list-group-item button {
  position: absolute;
  top: 10px;
  right: 10px;
--- a/src/main.ts
+++ b/src/main.ts
@ -1,8 +1,12 @@
-import { createApp } from 'vue'
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 import { plugin, /* defaultConfig */ } from '@formkit/vue'
-import App from './App.vue'
+import { createApp } from 'vue'
 import formKitConfig from '../formkit.config'
+import App from './App.vue'

 const app = createApp(App)
+
+// https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue
+app.use(autoAnimatePlugin)
 app.use(plugin, formKitConfig)
 app.mount('#app')