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

feat: 更新表单组件，简化代码结构并添加调试插件
Some checks failed
/ test (push) Failing after 26s
Details
/ surge (push) Successful in 39s
Details

Browse Source
This commit is contained in:
严浩
2024-11-25 10:33:01 +08:00
parent 07320f09b0
commit 7bb954e348
11 changed files with 152 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
formkit.config.theme.ts
View File

@ -10,55 +10,43 @@ import type { FormKitNode } from '@formkit/core'
* @theme - regenesis
**/
/**
* This is the theme function itself, it should be imported and used as the
* config.rootClasses function. For example:
*
* ```js
* import { theme } from './formkit.theme'
* import { defineFormKitConfig } from '@formkit/vue'
*
* export default defineFormKitConfig({
* config: {
* rootClasses: theme
* }
* })
* ```
**/
export function rootClasses(sectionName: string, node: FormKitNode): Record<string, boolean> {
const key = `${node.props.type}__${sectionName}`
const semanticKey = `formkit-${sectionName}`
const familyKey = node.props.family ? `family:${node.props.family}__${sectionName}` : ''
const memoKey = `${key}__${familyKey}`
if (!(memoKey in classes)) {
setTimeout(() => {
// console.group(`rootClasses(${sectionName}) ${memoKey}`)
// console.debug(`key :>> `, key);
// console.debug(`semanticKey :>> `, semanticKey);
// console.debug(`familyKey :>> `, familyKey);
// console.debug(`memoKey :>> `, memoKey);
// console.debug(`classes[key] :>> `, classes[key]);
// console.debug(`globals[sectionName] :>> `, globals[sectionName]);
// console.groupEnd()
}, 1000);
const sectionClasses = classes[key] ?? globals[sectionName] ?? {}
sectionClasses[semanticKey] = true
if (familyKey in classes) {
classes[memoKey] = { ...classes[familyKey], ...sectionClasses }
} else {
classes[memoKey] = sectionClasses
}
}
return classes[memoKey] ?? { [semanticKey]: true }
}
/**
* This is the theme function itself, it should be imported and used as the
* config.rootClasses function. For example:
*
* ```js
* import { theme } from './formkit.theme'
* import { defineFormKitConfig } from '@formkit/vue'
*
* export default defineFormKitConfig({
* config: {
* rootClasses: theme
* }
* })
* ```
**/
export function rootClasses (sectionName: string, node: FormKitNode): Record<string, boolean> {
const key = `${node.props.type}__${sectionName}`
const semanticKey = `formkit-${sectionName}`
const familyKey = node.props.family ? `family:${node.props.family}__${sectionName}` : ''
const memoKey = `${key}__${familyKey}`
if (!(memoKey in classes)) {
const sectionClasses = classes[key] ?? globals[sectionName] ?? {}
sectionClasses[semanticKey] = true
if (familyKey in classes) {
classes[memoKey] = { ...classes[familyKey], ...sectionClasses }
} else {
classes[memoKey] = sectionClasses
}
}
return classes[memoKey] ?? { [semanticKey]: true }
}
/**
* These classes have already been merged with globals using tailwind-merge
* and are ready to be used directly in the theme.
**/
export const classes: Record<string, Record<string, boolean>> = {
const classes: Record<string, Record<string, boolean>> = {
"family:button__wrapper": {
"group-data-[disabled=true]:grayscale": true
},
@ -3300,7 +3288,7 @@ export const classes: Record<string, Record<string, boolean>> = {
* Globals are merged prior to generating this file — these are included for
* any other non-matching inputs.
**/
export const globals: Record<string, Record<string, boolean>> = {
const globals: Record<string, Record<string, boolean>> = {
"outer": {
"group": true,
"max-w-[20em]": true,