Files
vue-formkit-example/formkit.config.ts
严浩 c4afb0342e
All checks were successful
/ test (push) Successful in 27s
/ surge (push) Successful in 31s
feat: 更新 formkit 配置,移除不必要的插件和组件,优化代码结构
2024-12-06 15:10:20 +08:00

74 lines
2.5 KiB
TypeScript

import { form } from '@/__fk-inputs__/inputs/form';
import { PInputPassword } from '@/__fk-inputs__/inputs/p-input-password';
import { PInputText } from '@/__fk-inputs__/inputs/p-input-text';
import { PSelect } from '@/__fk-inputs__/inputs/p-select';
import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons';
import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
import type { FormKitOptions, FormKitPlugin } from '@formkit/core';
import { register as decodeErrors } from '@formkit/dev';
import { createI18nPlugin, zh } from '@formkit/i18n';
import { createLibraryPlugin, group, list, submit } from '@formkit/inputs';
import * as defaultRules from '@formkit/rules';
import { createValidationPlugin } from '@formkit/validation';
import { /* defaultConfig, */ bindings, plugin /* defaultConfig */ } from '@formkit/vue';
import type { App } from 'vue';
import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin';
import { debugPlugin } from './formkit.config.plugin.debug';
const plugins: FormKitPlugin[] = [
// createLibraryPlugin(fkLibrary),
createLibraryPlugin({
submit,
list,
group,
// ==============================
form,
PInputText,
PInputPassword,
PSelect,
}),
// 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 config: FormKitOptions = {
plugins,
config: {},
};
export function setupFormKit(app: App) {
decodeErrors();
app.use(plugin, config);
app.use(autoAnimatePlugin); // v-auto-animate="{ duration: 100 }"
}