86 lines
3.0 KiB
TypeScript
86 lines
3.0 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 { 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, 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';
|
|
import { PSelect } from '@/__fk-inputs__/inputs/p-select';
|
|
import { createProPlugin, dropdown } from '@formkit/pro';
|
|
import { rootClasses } from './formkit.config.theme';
|
|
|
|
const plugins: FormKitPlugin[] = [
|
|
// createLibraryPlugin(fkLibrary),
|
|
createLibraryPlugin({
|
|
text,
|
|
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_FORMKIT_PRO_KEY)
|
|
plugins.unshift(createProPlugin(import.meta.env.VITE_FORMKIT_PRO_KEY, { dropdown }));
|
|
|
|
if (import.meta.env.VITE_DEBUG_FORMKIT === 'true') plugins.push(debugPlugin);
|
|
|
|
const config: FormKitOptions = {
|
|
plugins,
|
|
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 }"
|
|
}
|