vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Theming API: update nuxt-primevue module

pull/5507/head
mertsincan 2024-03-29 11:25:15 +00:00
parent b5e53e6fa3
commit a5dff7722e
11 changed files with 46 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/lib/base/style/BaseStyle.js
View File

@ -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 };

9
components/lib/basecomponent/BaseComponent.vue
View File

@ -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);

7
components/lib/basedirective/BaseDirective.js
View File

@ -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 });

9
components/lib/config/PrimeVue.js
View File

@ -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,

20
components/lib/themes/config/index.js
View File

@ -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) } });
}
};

2
components/lib/themes/helpers/dt.js
View File

@ -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') => {

8
layouts/AppConfigurator.vue
View File

@ -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') {

13
modules/nuxt-primevue/module.js
View File

@ -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 };

4
modules/nuxt-primevue/runtime/plugin.server.js
View File

@ -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
});
});

2
nuxt.config.js
View File

@ -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');

2
mytheme.js → themes/aura.js
View File

@ -5,6 +5,6 @@ export default {
base: PrimeOne,
preset: Aura,
options: {
prefix: 'p'
darkModeSelector: '.p-dark'
}
};