From a6f99cdc67cfc06e8b8d9768dc5843f6c772f514 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 18 Mar 2024 12:23:53 +0000 Subject: [PATCH] Theming API: Refactor layers --- .../lib/basecomponent/BaseComponent.vue | 10 ++-- components/lib/basedirective/BaseDirective.js | 10 ++-- components/lib/config/PrimeVue.js | 4 +- components/lib/themes/config/index.js | 23 +++++--- components/lib/themes/utils/themeUtils.js | 56 +++++++++++-------- 5 files changed, 59 insertions(+), 44 deletions(-) diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index 65a4e95d4..749989c2f 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/basecomponent/BaseComponent.vue @@ -115,11 +115,6 @@ export default { ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions); }, _loadThemeStyles(theme) { - // layer order - const layerOrder = this.$style?.getLayerOrderThemeCSS(); - - BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions }); - // common const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(theme, this.$themeParams) || {}; @@ -132,6 +127,11 @@ export default { this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions }); this.$style?.loadTheme(style, this.$styleOptions); + + // layer order + const layerOrder = this.$style?.getLayerOrderThemeCSS(); + + BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions }); }, _getHostInstance(instance) { return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined; diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js index 0f158bdfa..579a616a1 100644 --- a/components/lib/basedirective/BaseDirective.js +++ b/components/lib/basedirective/BaseDirective.js @@ -87,11 +87,6 @@ const BaseDirective = { _loadThemeStyles: (instance = {}, useStyleOptions) => { const [theme, themeParams] = [instance.theme(), instance.themeParams()]; - // layer order - const layerOrder = instance.$style?.getLayerOrderThemeCSS?.(); - - BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions }); - // common const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(theme, themeParams) || {}; @@ -104,6 +99,11 @@ const BaseDirective = { instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, ...useStyleOptions }); instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, ...useStyleOptions }); + + // layer order + const layerOrder = instance.$style?.getLayerOrderThemeCSS?.(); + + BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions }); }, _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { const name = `on${ObjectUtils.toCapitalCase(hookName)}`; diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js index 09e82430b..b44e331d9 100644 --- a/components/lib/config/PrimeVue.js +++ b/components/lib/config/PrimeVue.js @@ -158,8 +158,8 @@ export const defaultOptions = { }, layer: { // layer: true | false | undefined | object // default: undefined - name: '', // (component_name, type=variable|style) => layer_names // default: primevue - order: '' // (layer_names) => layer_order // default: @layer primevue + name: '', // ({component_name, type=variable|style}) => layer_name // default: primevue + order: '' // ({layer_names}) => layer_order // default: @layer primevue }*/ }, extend: {} diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js index 1cb8a7089..3fd818266 100644 --- a/components/lib/themes/config/index.js +++ b/components/lib/themes/config/index.js @@ -10,12 +10,12 @@ export default { colorScheme: { light: { class: '', - rule: `:root{[CSS]}`, + rule: ':root{[CSS]}', default: false }, dark: { class: 'p-dark', - rule: `.p-dark{[CSS]}`, + rule: '.p-dark{[CSS]}', default: false } }, @@ -28,6 +28,7 @@ export default { _theme: undefined, _initialized: false, _currentColorScheme: 'light', + _layerNames: new Set(), init() { if (!this._initialized) { this.applyColorScheme(); @@ -65,6 +66,12 @@ export default { setCurrentColorScheme(newValue) { this._currentColorScheme = newValue; }, + getLayerNames() { + return [...this._layerNames]; + }, + setLayerNames(layerName) { + this._layerNames.add(layerName); + }, applyColorScheme() { const newColorScheme = ThemeUtils.applyColorScheme(this.options, this.getCurrentColorScheme(), this.defaults); @@ -80,10 +87,10 @@ export default { return newColorScheme; }, getCommonCSS(name = '', theme, params) { - return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults }); + return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames } }); }, getComponentCSS(name = '', theme, params) { - const options = { name, theme: theme || this.theme, params, defaults: this.defaults }; + const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames } }; return { style: ThemeUtils.getBaseC(options), @@ -91,7 +98,7 @@ export default { }; }, getDirectiveCSS(name = '', theme, params) { - const options = { name, theme: theme || this.theme, params, defaults: this.defaults }; + const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames } }; return { style: ThemeUtils.getBaseD(options), @@ -99,12 +106,12 @@ export default { }; }, getLayerOrderCSS(name = '') { - return ThemeUtils.getLayerOrder(name, this.options, this.defaults); + return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }); }, getCommonStyleSheet(name = '', theme, params, props = {}) { - return ThemeUtils.getCommonStyleSheet(name, theme, params, props); + return ThemeUtils.getCommonStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames } }); }, getStyleSheet(name, theme = {}, params, props = {}) { - return ThemeUtils.getStyleSheet(name, theme, params, props); + return ThemeUtils.getStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames } }); } }; diff --git a/components/lib/themes/utils/themeUtils.js b/components/lib/themes/utils/themeUtils.js index 30e6d6df8..ef397f77f 100644 --- a/components/lib/themes/utils/themeUtils.js +++ b/components/lib/themes/utils/themeUtils.js @@ -1,7 +1,7 @@ import { SharedUtils, dt, toVariables } from 'primevue/themes'; export default { - getCommon({ name = '', theme = {}, params, defaults }) { + getCommon({ name = '', theme = {}, params, set, defaults }) { const { base, preset } = theme; let primitive_css, semantic_css, global_css; @@ -18,8 +18,16 @@ export default { const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : ''; - primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, defaults); - semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, defaults)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, defaults)}`; + primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, set, defaults); + semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults)}${this._transformCSS( + name, + `${dark_css}color-scheme:dark`, + 'dark', + 'variable', + options, + set, + defaults + )}`; } global_css = SharedUtils.object.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); @@ -30,7 +38,7 @@ export default { global: global_css }; }, - getPresetC({ name = '', theme = {}, params, defaults }) { + getPresetC({ name = '', theme = {}, params, set, defaults }) { const { preset, options, extend } = theme; const { colorScheme, ...vRest } = preset?.components?.[name] || {}; const { dark, ...csRest } = colorScheme || {}; @@ -40,16 +48,16 @@ export default { const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : ''; - return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`; + return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults)}`; }, - getBaseC({ name = '', theme = {}, params, defaults }) { + getBaseC({ name = '', theme = {}, params, set, defaults }) { const { base, options } = theme; const { css } = base?.components?.[name] || {}; const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); - return this._transformCSS(name, computed_css, undefined, 'style', options, defaults); + return this._transformCSS(name, computed_css, undefined, 'style', options, set, defaults); }, - getPresetD({ name = '', theme = {}, params, defaults }) { + getPresetD({ name = '', theme = {}, params, set, defaults }) { const { preset, options, extend } = theme; const { colorScheme, ...vRest } = preset?.directives?.[name] || {}; const { dark, ...csRest } = colorScheme || {}; @@ -59,14 +67,14 @@ export default { const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : ''; - return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`; + return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults)}`; }, - getBaseD({ name = '', theme = {}, params, defaults }) { + getBaseD({ name = '', theme = {}, params, set, defaults }) { const { base, options } = theme; const { css } = base?.directives?.[name] || {}; const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); - return this._transformCSS(name, computed_css, undefined, 'style', options, defaults); + return this._transformCSS(name, computed_css, undefined, 'style', options, set, defaults); }, getColorSchemeOption(colorScheme, defaults) { let options = { ...defaults.colorScheme }; @@ -110,20 +118,19 @@ export default { return newColorScheme; }, - getLayerOrder(name, options = {}, defaults) { + getLayerOrder(name, options = {}, params, defaults) { const { layer } = options; if (layer) { - const order = SharedUtils.object.getItemValue(layer.order || defaults.layer.order); + const order = SharedUtils.object.getItemValue(layer.order || defaults.layer.order, params); return `@layer ${order}`; } return ''; }, - getCommonStyleSheet(name, theme = {}, params, props = {}) { - const { preset, base } = theme; - const common_css = this.getCommon(preset, base, params, theme); + getCommonStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) { + const common_css = this.getCommon({ name, theme, params, set, defaults }); const _props = Object.entries(props) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .join(' '); @@ -140,12 +147,9 @@ export default { }, []) .join(''); }, - getStyleSheet(name, theme = {}, params, props = {}) { - const { preset, base } = theme; - const presetCTheme = preset?.components?.[name]; - const baseCTheme = base?.components?.[name]; - const presetC_css = this.getPresetC(name, presetCTheme, theme); - const baseC_css = this.getBaseC(name, baseCTheme, params, theme); + getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) { + const presetC_css = this.getPresetC({ name, theme, params, set, defaults }); + const baseC_css = this.getBaseC({ name, theme, params, set, defaults }); const _props = Object.entries(props) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .join(' '); @@ -160,7 +164,7 @@ export default { _toVariables(theme, options) { return toVariables(theme, { prefix: options?.prefix }); }, - _transformCSS(name, css, mode, type, options = {}, defaults) { + _transformCSS(name, css, mode, type, options = {}, set, defaults) { if (SharedUtils.object.isNotEmpty(css)) { const { layer, colorScheme } = options; @@ -175,7 +179,11 @@ export default { let layerOptions = { ...defaults.layer }; SharedUtils.object.isObject(layer) && (layerOptions.name = SharedUtils.object.getItemValue(layer.name, { name, type })); - css = SharedUtils.object.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css; + + if (SharedUtils.object.isNotEmpty(layerOptions.name)) { + css = SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css); + set?.layerNames(layerOptions.name); + } } return css;