83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
import type { FormKitNode, FormKitOptions } from '@formkit/core'
|
|
import { createI18nPlugin, zh } from '@formkit/i18n'
|
|
import { genesisIcons } from '@formkit/icons'
|
|
import { checkbox, createLibraryPlugin, form, group, range, submit, text, list, number, textarea } from '@formkit/inputs'
|
|
import * as defaultRules from '@formkit/rules'
|
|
import { createThemePlugin } from '@formkit/themes'
|
|
import { createValidationPlugin } from '@formkit/validation'
|
|
import { /* defaultConfig, */ bindings } from '@formkit/vue'
|
|
import { rootClasses } from "./formkit.theme"
|
|
import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons'
|
|
|
|
const library = createLibraryPlugin({ text, form, submit, group, checkbox, range, list, number, textarea, })
|
|
const validation = createValidationPlugin(defaultRules)
|
|
const i18n = createI18nPlugin({ zh })
|
|
const theme = undefined;
|
|
const icons = genesisIcons;
|
|
const themePlugin = createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */)
|
|
|
|
|
|
const legends = ['checkbox_multi', 'radio_multi', 'repeater', 'transferlist'];
|
|
function addAsteriskPlugin(node: FormKitNode) {
|
|
if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;
|
|
|
|
node.on('created', () => {
|
|
const legendOrLabel = legends.includes(`${node.props.type}${node.props.options ? '_multi' : ''}`) ? 'legend' : 'label';
|
|
|
|
console.group(node.props.label || node.props.submitLabel)
|
|
console.debug(`node :>> `, node);
|
|
console.debug(`node.props.definition :>> `, node.props.definition);
|
|
// if (typeof node.props.definition!.schema === 'function') {
|
|
// console.debug(`node.props.definition.schema.call :>> `, node.props.definition!.schema.call(node.props.definition, {}));
|
|
// }
|
|
console.debug(`legendOrLabel :>> `, legendOrLabel);
|
|
console.groupEnd()
|
|
|
|
if (node.props.definition?.schemaMemoKey) {
|
|
node.props.definition.schemaMemoKey += `${node.props.options ? '_multi' : ''}_add_asterisk`;
|
|
};
|
|
|
|
const schemaFn = node.props.definition!.schema!;
|
|
node.props.definition!.schema = (sectionsSchema = {}) => {
|
|
sectionsSchema[legendOrLabel] = {
|
|
children: ['$label', {
|
|
$el: 'span',
|
|
if: '$state.required',
|
|
attrs: {
|
|
class: '$classes.asterisk',
|
|
},
|
|
children: ['*']
|
|
}]
|
|
}
|
|
|
|
return typeof schemaFn === 'function' ? schemaFn(sectionsSchema) : schemaFn
|
|
}
|
|
})
|
|
}
|
|
|
|
export default {
|
|
plugins: [
|
|
library, themePlugin, bindings, i18n, validation, addAsteriskPlugin,
|
|
|
|
// https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts
|
|
createAutoHeightTextareaPlugin(),
|
|
|
|
// 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
|
|
createAutoAnimatePlugin(
|
|
{
|
|
duration: 250,
|
|
easing: 'ease-in-out',
|
|
},
|
|
// {
|
|
// /* optional animation targets object */
|
|
// // default:
|
|
// global: ['outer', 'inner'],
|
|
// form: ['form'],
|
|
// repeater: ['items'],
|
|
// }
|
|
)
|
|
],
|
|
config: { rootClasses },
|
|
} satisfies FormKitOptions |