78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import { form } from '@/__fk-inputs__/inputs/form';
|
|
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 { register as decodeErrors } from '@formkit/dev';
|
|
import { createI18nPlugin, zh } from '@formkit/i18n';
|
|
import { createLibraryPlugin, group, submit, text } 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 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,
|
|
],
|
|
config: {
|
|
// rootClasses: false,
|
|
// rootClasses,
|
|
// rootClasses: (sectionName: string, node: FormKitNode) => {
|
|
// console.debug(`sectionName :>> `, sectionName);
|
|
// }
|
|
},
|
|
};
|
|
|
|
export function setupFormKit(app: App) {
|
|
decodeErrors();
|
|
app.use(plugin, config);
|
|
app.use(autoAnimatePlugin); // v-auto-animate="{ duration: 100 }"
|
|
}
|