feat: 更新 formkit 配置,优化插件结构并修改按钮点击事件逻辑
This commit is contained in:
@ -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,
|
||||
|
@ -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';
|
||||
}"
|
||||
/>
|
||||
|
Reference in New Issue
Block a user