From a5dff7722e7fae4631214ec012b1a0f46ebd6eb0 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Fri, 29 Mar 2024 11:25:15 +0000 Subject: [PATCH] Theming API: update nuxt-primevue module --- components/lib/base/style/BaseStyle.js | 20 +++++++++---------- .../lib/basecomponent/BaseComponent.vue | 9 +++++---- components/lib/basedirective/BaseDirective.js | 7 ++++--- components/lib/config/PrimeVue.js | 9 +-------- components/lib/themes/config/index.js | 20 +++++++++---------- components/lib/themes/helpers/dt.js | 2 +- layouts/AppConfigurator.vue | 8 +------- modules/nuxt-primevue/module.js | 13 +++++++++--- .../nuxt-primevue/runtime/plugin.server.js | 4 ++-- nuxt.config.js | 2 +- mytheme.js => themes/aura.js | 2 +- 11 files changed, 46 insertions(+), 50 deletions(-) rename mytheme.js => themes/aura.js (83%) diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js index d267eef41..0e5cc4770 100644 --- a/components/lib/base/style/BaseStyle.js +++ b/components/lib/base/style/BaseStyle.js @@ -40,14 +40,14 @@ export default { loadTheme(theme, options = {}) { return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {}; }, - getCommonThemeCSS(theme, params) { - return Theme.getCommonCSS(this.name, theme, params); + getCommonThemeCSS(params) { + return Theme.getCommonCSS(this.name, params); }, - getComponentThemeCSS(theme, params) { - return Theme.getComponentCSS(this.name, theme, params); + getComponentThemeCSS(params) { + return Theme.getComponentCSS(this.name, params); }, - getDirectiveThemeCSS(theme, params) { - return Theme.getDirectiveCSS(this.name, theme, params); + getDirectiveThemeCSS(params) { + return Theme.getDirectiveCSS(this.name, params); }, getLayerOrderThemeCSS() { return Theme.getLayerOrderCSS(this.name); @@ -64,11 +64,11 @@ export default { return ''; }, - getCommonThemeStyleSheet(theme = {}, params, props = {}) { - return Theme.getCommonStyleSheet(this.name, theme, params, props); + getCommonThemeStyleSheet(params, props = {}) { + return Theme.getCommonStyleSheet(this.name, params, props); }, - getThemeStyleSheet(theme = {}, params, props = {}) { - return Theme.getStyleSheet(this.name, theme, params, props); + getThemeStyleSheet(params, props = {}) { + return Theme.getStyleSheet(this.name, params, props); }, extend(style) { return { ...this, css: undefined, ...style }; diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index 860479d9a..1343bcb18 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/basecomponent/BaseComponent.vue @@ -40,7 +40,8 @@ export default { deep: true, immediate: true, handler(newValue) { - this._loadThemeStyles(newValue); + Theme.setTheme(newValue); + this._loadThemeStyles(); } } }, @@ -114,16 +115,16 @@ export default { ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions); }, - _loadThemeStyles(theme) { + _loadThemeStyles() { // common - const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(theme, this.$themeParams) || {}; + const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(this.$themeParams) || {}; 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) || {}; + const { variables, style } = this.$style?.getComponentThemeCSS?.(this.$themeParams) || {}; this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions }); this.$style?.loadTheme(style, this.$styleOptions); diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js index 579a616a1..1588642ee 100644 --- a/components/lib/basedirective/BaseDirective.js +++ b/components/lib/basedirective/BaseDirective.js @@ -82,20 +82,21 @@ const BaseDirective = { // apply theme settings Theme.init(); + Theme.setTheme(el.$instance?.theme()); BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce }); }, _loadThemeStyles: (instance = {}, useStyleOptions) => { - const [theme, themeParams] = [instance.theme(), instance.themeParams()]; + const themeParams = instance.themeParams(); // common - const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(theme, themeParams) || {}; + const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(themeParams) || {}; 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) || {}; + const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(themeParams) || {}; instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, ...useStyleOptions }); instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, ...useStyleOptions }); diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js index 9d9fe869d..47318c884 100644 --- a/components/lib/config/PrimeVue.js +++ b/components/lib/config/PrimeVue.js @@ -141,15 +141,8 @@ export const defaultOptions = { preset: Aura, options: { prefix: 'p', - darkModeSelector: '.p-dark', + darkModeSelector: 'system', cssLayer: false - /* - darkModeSelector: '.p-dark | [data-p-dark="true"] | system(default)', - cssLayer: { - // cssLayer: true | false | undefined | object // default: undefined - name: '', // ({component_name, type=variable|style}) => layer_name // default: primevue - order: '' // ({layer_names}) => layer_order // default: @layer primevue - }*/ } }, pt: undefined, diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js index b8fec3eee..658172380 100644 --- a/components/lib/themes/config/index.js +++ b/components/lib/themes/config/index.js @@ -83,19 +83,19 @@ export default { setLayerNames(layerName) { this._layerNames?.add(layerName); }, - getCommonCSS(name = '', theme, params) { - return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }); + getCommonCSS(name = '', params) { + return ThemeUtils.getCommon({ name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }); }, - getComponentCSS(name = '', theme, params) { - const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }; + getComponentCSS(name = '', params) { + const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }; return { style: ThemeUtils.getBaseC(options), variables: ThemeUtils.getPresetC(options) }; }, - getDirectiveCSS(name = '', theme, params) { - const options = { name, theme: theme || this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }; + getDirectiveCSS(name = '', params) { + const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }; return { style: ThemeUtils.getBaseD(options), @@ -105,10 +105,10 @@ export default { getLayerOrderCSS(name = '') { return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults); }, - getCommonStyleSheet(name = '', theme, params, props = {}) { - return ThemeUtils.getCommonStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }); + getCommonStyleSheet(name = '', params, props = {}) { + return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }); }, - getStyleSheet(name, theme = {}, params, props = {}) { - return ThemeUtils.getStyleSheet({ name, theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }); + getStyleSheet(name, params, props = {}) { + return ThemeUtils.getStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }); } }; diff --git a/components/lib/themes/helpers/dt.js b/components/lib/themes/helpers/dt.js index 92c861cfe..905085240 100644 --- a/components/lib/themes/helpers/dt.js +++ b/components/lib/themes/helpers/dt.js @@ -5,7 +5,7 @@ const types = ['value', 'variable']; export const $dt = (tokenPath, param1, param2) => { const config = Theme.getPConfig(); - return types.includes(param1) ? dt(config?.theme, tokenPath, undefined, param2) : dt(config?.theme, tokenPath, param1, param2); + return types.includes(param1) ? dt(config?.theme, tokenPath, undefined, param1) : dt(config?.theme, tokenPath, param1, param2); }; export const dt = (theme = {}, tokenPath, fallback, type = 'variable') => { diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index c98fc8955..2a0d17068 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -94,13 +94,7 @@ export default { if (type === 'primary') this.selectedPrimaryColor = color.name; else if (type === 'surface') this.selectedSurfaceColor = color.name; - if (!document.startViewTransition) { - this.applyTheme(type, color); - - return; - } - - document.startViewTransition(() => this.applyTheme(type, color)); + this.applyTheme(type, color); }, applyTheme(type, color) { if (type === 'primary') { diff --git a/modules/nuxt-primevue/module.js b/modules/nuxt-primevue/module.js index 173fc3a01..d6f4014ba 100644 --- a/modules/nuxt-primevue/module.js +++ b/modules/nuxt-primevue/module.js @@ -51,7 +51,12 @@ export default defineNuxtModule({ const styleContent = () => ` ${registered.styles.map((style) => `import ${style.as} from '${style.from}';`).join('\n')} -${importTheme ? `import ${importTheme.as} from '${importTheme.from}';\n` : ''} +${ + importTheme + ? `import Theme from 'primevue/themes'; +import ${importTheme.as} from '${importTheme.from}';\n` + : '' +} const styleProps = { ${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''} @@ -61,9 +66,11 @@ const styles = [ ${registered.styles.map((item) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')} ].join(''); +${importTheme ? `Theme.setTheme(${importTheme.as})` : ''} + const themes = [ - ${importTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getCommonThemeStyleSheet ? ${registered.styles[0].as}.getCommonThemeStyleSheet(${importTheme?.as}, undefined, styleProps) : ''` : ''}, - ${importTheme ? registered.styles.map((item) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(${importTheme?.as}, undefined, styleProps) : ''`).join(',') : ''} + ${importTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getCommonThemeStyleSheet ? ${registered.styles[0].as}.getCommonThemeStyleSheet(undefined, styleProps) : ''` : ''}, + ${importTheme ? registered.styles.map((item) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(undefined, styleProps) : ''`).join(',') : ''} ].join(''); export { styles, themes }; diff --git a/modules/nuxt-primevue/runtime/plugin.server.js b/modules/nuxt-primevue/runtime/plugin.server.js index ac2912293..2b5e8f6a3 100644 --- a/modules/nuxt-primevue/runtime/plugin.server.js +++ b/modules/nuxt-primevue/runtime/plugin.server.js @@ -1,5 +1,5 @@ // @ts-expect-error -import { styles } from '#primevue-style'; +import { styles, themes } from '#primevue-style'; //import { useRuntimeConfig } from '#imports'; const defineNitroPlugin = (def) => def; @@ -7,7 +7,7 @@ const defineNitroPlugin = (def) => def; export default defineNitroPlugin(async (nitroApp) => { nitroApp.hooks.hook('render:html', (html) => { html.head.push(styles); - //html.head.push(themes); + html.head.push(themes); //html.htmlAttrs.push('class="p-dark"'); // @todo }); }); diff --git a/nuxt.config.js b/nuxt.config.js index 075afec3d..991c45457 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -26,7 +26,7 @@ export default defineNuxtConfig({ ripple: true }, layerOrder: 'primevue', - //importTheme: { from: '@/mytheme.js' }, + importTheme: { from: '@/themes/aura.js' }, resolvePath: function ({ as, from, type }) { const resolvedPath = from.replace('primevue', '@/components/lib'); diff --git a/mytheme.js b/themes/aura.js similarity index 83% rename from mytheme.js rename to themes/aura.js index 7714093d6..489ec0772 100644 --- a/mytheme.js +++ b/themes/aura.js @@ -5,6 +5,6 @@ export default { base: PrimeOne, preset: Aura, options: { - prefix: 'p' + darkModeSelector: '.p-dark' } };