examples/vue-formkit-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加 Asterisk 插件以增强表单字段的必填标识，更新配置以集成新插件
All checks were successful
/ surge (push) Successful in 37s
Details

Browse Source
This commit is contained in:
严浩
2024-11-19 17:03:18 +08:00
parent 162f818f50
commit 18cef2e411
2 changed files with 43 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
formkit.addAsteriskPlugin.ts Normal file
View File

@ -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
}
})
}

45
formkit.config.ts
View File

@ -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,