feat: 更新 formkit 配置,优化插件结构并修改按钮点击事件逻辑
Some checks failed
/ test (push) Failing after 27s
/ surge (push) Successful in 35s

This commit is contained in:
严浩
2024-12-04 17:17:48 +08:00
parent 0afb696583
commit b65b6bf48e
3 changed files with 51 additions and 47 deletions

1
.env Normal file
View File

@ -0,0 +1 @@
VITE_DEBUG_FORMKIT=true

View File

@ -3,7 +3,7 @@ import { PInputPassword } from '@/__fk-inputs__/inputs/input-password';
import { PInputText } from '@/__fk-inputs__/inputs/input-text';
import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons';
import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
import type { FormKitOptions } from '@formkit/core';
import type { FormKitOptions, FormKitPlugin } from '@formkit/core';
import { register as decodeErrors } from '@formkit/dev';
import { createI18nPlugin, zh } from '@formkit/i18n';
import { createLibraryPlugin, group, submit, text } from '@formkit/inputs';
@ -14,53 +14,56 @@ import type { App } from 'vue';
import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin';
import { debugPlugin } from './formkit.config.plugin.debug';
const plugins: FormKitPlugin[] = [
// createProPlugin(apiKey, { toggle }),
// createLibraryPlugin(fkLibrary),
createLibraryPlugin({
text,
submit,
group,
// ==============================
form,
PInputText,
PInputPassword,
}),
// createLibraryPlugin(
// {
// 'headlessuiSwitch': createInput(HeadlessuiToggle),
// }
// ),
// createThemePlugin(
// theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */,
// ),
// #############################
bindings,
createI18nPlugin({ zh }),
createValidationPlugin(defaultRules),
addAsteriskPlugin,
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'],
},
),
];
if (import.meta.env.VITE_DEBUG_FORMKIT === 'true') {
plugins.push(debugPlugin);
}
// const apiKey = 'fk-6cdd5192223'
const config: FormKitOptions = {
plugins: [
...[
// createProPlugin(apiKey, { toggle }),
// createLibraryPlugin(fkLibrary),
createLibraryPlugin({
text,
submit,
group,
// ==============================
form,
PInputText,
PInputPassword,
}),
// createLibraryPlugin(
// {
// 'headlessuiSwitch': createInput(HeadlessuiToggle),
// }
// ),
],
// createThemePlugin(
// theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */,
// ),
bindings,
createI18nPlugin({ zh }),
createValidationPlugin(defaultRules),
addAsteriskPlugin,
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'],
},
),
debugPlugin,
],
plugins,
config: {
// rootClasses: false,
// rootClasses,

View File

@ -105,7 +105,7 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
label="Button"
@click="() => {
value!.button = value!.button || {};
(value!.button as any).clicked = 'clicked';
(value!.button as any).clicked = 'clicked-这个值在@submit回调的formData里不会出现';
(value!.group as any)['text-in-group-1'] = 'changed-by-button';
}"
/>