From 092d7758e0b197b5b08333bb8cb7b1174c49f99e Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Fri, 11 Nov 2022 22:02:11 +0800 Subject: [PATCH] refactor: remove formkit auto-animate addon (halo-dev/console#687) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /kind improvement /milestone 2.0 #### What this PR does / why we need it: 移除 FormKit 的 Auto Animate 扩展，因为如果使用了这个扩展，在动态加载表单元素的时候可能会导致 UI 大范围的抖动。而且此扩展比较不可控，无法对其表现进行修改。 #### Screenshots: before: ![2022-11-10 12 00 58](https://user-images.githubusercontent.com/21301288/200997699-af36cd8c-e56d-4d3b-a4ea-f4d34bfb6903.gif) ![2022-11-10 12 02 23](https://user-images.githubusercontent.com/21301288/200997830-0b2539c8-214f-4399-a33e-c2ebd02f1e93.gif) #### Special notes for your reviewer: /cc @halo-dev/sig-halo-console #### Does this PR introduce a user-facing change? ```release-note 移除表单中的动画效果 ``` --- package.json | 2 -- pnpm-lock.yaml | 16 ---------------- src/formkit/formkit.config.ts | 2 -- src/formkit/theme.ts | 5 +++-- 4 files changed, 3 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 03d1e1171..5d558322c 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,6 @@ ], "dependencies": { "@emoji-mart/data": "^1.0.6", - "@formkit/addons": "^1.0.0-beta.11", - "@formkit/auto-animate": "1.0.0-beta.3", "@formkit/core": "^1.0.0-beta.11", "@formkit/i18n": "^1.0.0-beta.11", "@formkit/inputs": "^1.0.0-beta.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 17d31f513..c6307b585 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,8 +6,6 @@ importers: specifiers: '@changesets/cli': ^2.25.0 '@emoji-mart/data': ^1.0.6 - '@formkit/addons': ^1.0.0-beta.11 - '@formkit/auto-animate': 1.0.0-beta.3 '@formkit/core': ^1.0.0-beta.11 '@formkit/i18n': ^1.0.0-beta.11 '@formkit/inputs': ^1.0.0-beta.11 @@ -101,8 +99,6 @@ importers: yaml: ^2.1.3 dependencies: '@emoji-mart/data': 1.0.6 - '@formkit/addons': 1.0.0-beta.11 - '@formkit/auto-animate': 1.0.0-beta.3 '@formkit/core': 1.0.0-beta.11 '@formkit/i18n': 1.0.0-beta.11 '@formkit/inputs': 1.0.0-beta.11 @@ -1849,18 +1845,6 @@ packages: '@floating-ui/core': 0.3.1 dev: false - /@formkit/addons/1.0.0-beta.11: - resolution: {integrity: sha512-p8q34aOZ54OyxWyjJ6Y3Je/EcCFJTpu4uX5sNbPbgYvn0G3hogdDzC/ysVc42dcpZXg6qgwPZtNMKLGMKH24CQ==} - dependencies: - '@formkit/auto-animate': 1.0.0-beta.3 - '@formkit/core': 1.0.0-beta.11 - '@formkit/utils': 1.0.0-beta.11 - dev: false - - /@formkit/auto-animate/1.0.0-beta.3: - resolution: {integrity: sha512-glsi+ytwQpxT/Ctr9GtcIfVr4dO6mJ04mQbNU8MFSdCdqMopHtyfU5Fib0+9lNFIeR0luY4/0NW95/2R5pKsag==} - dev: false - /@formkit/core/1.0.0-beta.11: resolution: {integrity: sha512-1yIQUicY1ZVGkeT0AEVp3ahx5FdJg+snyc8yaitsNmQeCSq1Ju5o1nCRcpcZ7j2ezMbGUiL7nTscGGejC15N2Q==} dependencies: diff --git a/src/formkit/formkit.config.ts b/src/formkit/formkit.config.ts index 78de33b8c..15dab8dee 100644 --- a/src/formkit/formkit.config.ts +++ b/src/formkit/formkit.config.ts @@ -1,6 +1,5 @@ import { generateClasses } from "@formkit/themes"; import theme from "./theme"; -import { createAutoAnimatePlugin } from "@formkit/addons"; import { zh } from "@formkit/i18n"; import type { DefaultConfigOptions } from "@formkit/vue"; import { form } from "./inputs/form"; @@ -20,7 +19,6 @@ const config: DefaultConfigOptions = { config: { classes: generateClasses(theme), }, - plugins: [createAutoAnimatePlugin()], inputs: { form, attachment, diff --git a/src/formkit/theme.ts b/src/formkit/theme.ts index c0bf79194..a63a6abe1 100644 --- a/src/formkit/theme.ts +++ b/src/formkit/theme.ts @@ -29,9 +29,10 @@ const buttonClassification = { const theme: Record> = { global: { form: "divide-y divide-gray-100", - outer: "formkit-disabled:opacity-50 py-4 first:pt-0 last:pb-0", + outer: + "formkit-disabled:opacity-50 py-4 first:pt-0 last:pb-0 transition-all", help: "text-xs mt-2 text-gray-500", - messages: "list-none p-0 mt-1.5 mb-0", + messages: "list-none p-0 mt-1.5 mb-0 transition-all", message: "text-red-500 mt-2 text-xs", }, button: buttonClassification,