From 18cef2e4117e440f698031172b56d2b0b31744c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= Date: Tue, 19 Nov 2024 17:03:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Asterisk=20?= =?UTF-8?q?=E6=8F=92=E4=BB=B6=E4=BB=A5=E5=A2=9E=E5=BC=BA=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=E7=9A=84=E5=BF=85=E5=A1=AB=E6=A0=87=E8=AF=86?= =?UTF-8?q?=EF=BC=8C=E6=9B=B4=E6=96=B0=E9=85=8D=E7=BD=AE=E4=BB=A5=E9=9B=86?= =?UTF-8?q?=E6=88=90=E6=96=B0=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- formkit.addAsteriskPlugin.ts | 39 +++++++++++++++++++++++++++++++ formkit.config.ts | 45 ++++-------------------------------- 2 files changed, 43 insertions(+), 41 deletions(-) create mode 100644 formkit.addAsteriskPlugin.ts 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,