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

feat: 添加 Unocss 支持，更新配置并引入新组件
All checks were successful
/ test (push) Successful in 27s
Details

Browse Source
This commit is contained in:
mac-mini-2024
2024-11-22 00:25:34 +08:00
parent da85a6715d
commit 7a69e5755d
10 changed files with 1022 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
formkit.config.theme.ts
View File

@ -10,43 +10,55 @@ 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)) {
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)) {
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 }
}
/**
* These classes have already been merged with globals using tailwind-merge
* and are ready to be used directly in the theme.
**/
const classes: Record<string, Record<string, boolean>> = {
export const classes: Record<string, Record<string, boolean>> = {
"family:button__wrapper": {
"group-data-[disabled=true]:grayscale": true
},
@ -3288,7 +3300,7 @@ const classes: Record<string, Record<string, boolean>> = {
* Globals are merged prior to generating this file — these are included for
* any other non-matching inputs.
**/
const globals: Record<string, Record<string, boolean>> = {
export const globals: Record<string, Record<string, boolean>> = {
"outer": {
"group": true,
"max-w-[20em]": true,