From 592a8ed0c4cb46edffc68f1ce9a9cd0d45b6495d Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 18 Mar 2024 10:57:17 +0000 Subject: [PATCH] Theming API: Implement layer order --- components/lib/base/style/BaseStyle.js | 3 +++ components/lib/basecomponent/BaseComponent.vue | 13 +++++++++---- components/lib/basedirective/BaseDirective.js | 15 ++++++++++----- components/lib/themes/config/index.js | 7 +++++-- components/lib/themes/utils/themeUtils.js | 11 +++++++++++ components/lib/usestyle/UseStyle.js | 4 ++-- 6 files changed, 40 insertions(+), 13 deletions(-) diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js index ca0a7107e..dc16cc185 100644 --- a/components/lib/base/style/BaseStyle.js +++ b/components/lib/base/style/BaseStyle.js @@ -49,6 +49,9 @@ export default { getDirectiveThemeCSS(theme, params) { return Theme.getDirectiveCSS(this.name, theme, params); }, + getLayerOrderThemeCSS() { + return Theme.getLayerOrderCSS(this.name); + }, getStyleSheet(extendedCSS = '', props = {}) { if (this.css) { const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`); diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index ddfaa6c81..65a4e95d4 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/basecomponent/BaseComponent.vue @@ -115,18 +115,23 @@ 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) || {}; - BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions }); - BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions }); + BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions }); + BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions }); BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions); // component const { variables, style } = this.$style?.getComponentThemeCSS?.(theme, this.$themeParams) || {}; - this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions }); - this.$style?.loadTheme(style, { useStyleOptions: this.$styleOptions }); + this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions }); + this.$style?.loadTheme(style, 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 ffb2b3c4c..0f158bdfa 100644 --- a/components/lib/basedirective/BaseDirective.js +++ b/components/lib/basedirective/BaseDirective.js @@ -87,18 +87,23 @@ 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) || {}; - BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions }); - BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions }); - BaseStyle.loadTheme(global, { name: 'global-style', useStyleOptions }); + BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions }); + BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions }); + BaseStyle.loadTheme(global, { name: 'global-style', ...useStyleOptions }); // component const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(theme, themeParams) || {}; - instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, useStyleOptions }); - instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, useStyleOptions }); + instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, ...useStyleOptions }); + instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, ...useStyleOptions }); }, _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { const name = `on${ObjectUtils.toCapitalCase(hookName)}`; diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js index ea9a12f5d..1cb8a7089 100644 --- a/components/lib/themes/config/index.js +++ b/components/lib/themes/config/index.js @@ -20,8 +20,8 @@ export default { } }, layer: { - name: 'primevue' - //order: 'primevue' // @todo + name: 'primevue', + order: 'primevue' } }, _pConfig: undefined, @@ -98,6 +98,9 @@ export default { variables: ThemeUtils.getPresetD(options) }; }, + getLayerOrderCSS(name = '') { + return ThemeUtils.getLayerOrder(name, this.options, this.defaults); + }, getCommonStyleSheet(name = '', theme, params, props = {}) { return ThemeUtils.getCommonStyleSheet(name, theme, params, props); }, diff --git a/components/lib/themes/utils/themeUtils.js b/components/lib/themes/utils/themeUtils.js index 6d338700c..30e6d6df8 100644 --- a/components/lib/themes/utils/themeUtils.js +++ b/components/lib/themes/utils/themeUtils.js @@ -110,6 +110,17 @@ export default { return newColorScheme; }, + getLayerOrder(name, options = {}, defaults) { + const { layer } = options; + + if (layer) { + const order = SharedUtils.object.getItemValue(layer.order || defaults.layer.order); + + return `@layer ${order}`; + } + + return ''; + }, getCommonStyleSheet(name, theme = {}, params, props = {}) { const { preset, base } = theme; const common_css = this.getCommon(preset, base, params, theme); diff --git a/components/lib/usestyle/UseStyle.js b/components/lib/usestyle/UseStyle.js index df46b8d5b..4cd6d74fe 100644 --- a/components/lib/usestyle/UseStyle.js +++ b/components/lib/usestyle/UseStyle.js @@ -19,7 +19,7 @@ export function useStyle(css, options = {}) { const styleRef = ref(null); const defaultDocument = DomHandler.isClient() ? window.document : undefined; - const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined, nonce = undefined, props = {} } = options; + const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined, nonce = undefined, first = false, props = {} } = options; let stop = () => {}; @@ -41,7 +41,7 @@ export function useStyle(css, options = {}) { media, nonce: _nonce }); - document.head.appendChild(styleRef.value); + first ? document.head.prepend(styleRef.value) : document.head.appendChild(styleRef.value); DomHandler.setAttribute(styleRef.value, 'data-primevue-style-id', name); DomHandler.setAttributes(styleRef.value, _styleProps); }