diff --git a/formkit.addAsteriskPlugin.ts b/formkit.addAsteriskPlugin.ts new file mode 100644 index 0000000..11c4fbc --- /dev/null +++ b/formkit.addAsteriskPlugin.ts @@ -0,0 +1,39 @@ +import type { FormKitNode } from "@formkit/core"; + +const legends = ['checkbox_multi', 'radio_multi', 'repeater', 'transferlist']; +export 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 + } + }) +} diff --git a/formkit.config.ts b/formkit.config.ts index afc760f..ae5afd0 100644 --- a/formkit.config.ts +++ b/formkit.config.ts @@ -1,13 +1,14 @@ -import type { FormKitNode, FormKitOptions } from '@formkit/core' +import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons' +import type { 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 { checkbox, createLibraryPlugin, form, group, list, number, range, submit, text, 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 { addAsteriskPlugin } from './formkit.addAsteriskPlugin' 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) @@ -17,44 +18,6 @@ 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,