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

Theming API: Improve performance

pull/5507/head
mertsincan 2024-03-31 05:44:48 +01:00
parent d0d0a38598
commit 45521ea6af
28 changed files with 193 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/accordiontab/style/AccordionTabStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'accordiontab'
});

5
components/lib/animateonscroll/BaseAnimateOnScroll.js
View File

@ -1,5 +1,8 @@
import AnimateOnScrollStyle from 'primevue/animateonscroll/style';
import BaseDirective from 'primevue/basedirective';
const BaseAnimateOnScroll = BaseDirective.extend({});
const BaseAnimateOnScroll = BaseDirective.extend({
style: AnimateOnScrollStyle
});
export default BaseAnimateOnScroll;

6
components/lib/animateonscroll/style/AnimateOnScrollStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'animateonscroll-directive'
});

2
components/lib/badgedirective/style/BadgeDirectiveStyle.js
View File

@ -5,6 +5,6 @@ const classes = {
};
export default BaseStyle.extend({
name: 'badge',
name: 'badge-directive',
classes
});

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

@ -38,7 +38,7 @@ export default {
return this.css ? useStyle(ObjectUtils.minifyCSS(this.css), { name: this.name, ...options }) : {};
},
loadTheme(theme, options = {}) {
return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {};
return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: this.name, ...options }) : {};
},
getCommonThemeCSS(params) {
return Theme.getCommonCSS(this.name, params);

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

@ -1,6 +1,6 @@
<script>
import BaseStyle from 'primevue/base/style';
import Theme from 'primevue/themes';
import Theme, { ThemeService } from 'primevue/themes';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle';
@ -35,14 +35,6 @@ export default {
this.$options.style && this.$style.loadStyle(this.$styleOptions);
}
}
},
$theme: {
deep: true,
immediate: true,
handler(newValue) {
Theme.setTheme(newValue);
this._loadThemeStyles();
}
}
},
beforeCreate() {
@ -96,9 +88,9 @@ export default {
_loadStyles() {
BaseStyle.loadStyle(this.$styleOptions);
this._loadGlobalStyles();
this._loadThemeStyles();
// apply theme settings
Theme.init();
ThemeService.on('theme:change', this._loadThemeStyles);
},
_loadGlobalStyles() {
/*
@ -113,26 +105,38 @@ export default {
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
ObjectUtils.isNotEmpty(globalCSS) && BaseStyle.loadStyle(globalCSS, { name: 'global', ...this.$styleOptions });
},
_loadThemeStyles() {
// common
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(this.$themeParams) || {};
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.() || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
BaseStyle.loadTheme(global, { name: 'global-style', ...this.$styleOptions });
Theme.setLoadedStyleName('common');
}
// component
const { variables, style } = this.$style?.getComponentThemeCSS?.(this.$themeParams) || {};
if (!Theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
const { variables, style } = this.$style?.getComponentThemeCSS?.() || {};
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
this.$style?.loadTheme(style, this.$styleOptions);
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
this.$style?.loadTheme(style, { name: `${this.$style.name}-style`, ...this.$styleOptions });
Theme.setLoadedStyleName(this.$style.name);
}
// layer order
const layerOrder = this.$style?.getLayerOrderThemeCSS?.();
if (!Theme.isStyleNameLoaded('layer-order')) {
const layerOrder = this.$style?.getLayerOrderThemeCSS?.();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
Theme.setLoadedStyleName('layer-order');
}
},
_getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@ -229,7 +233,7 @@ export default {
},
ptmi(key = '', params = {}) {
// inheritAttrs:true without `pt:*`
return mergeProps(this.$_attrsNoPT, this.ptm(key, params));
return mergeProps(this.$_attrsWithoutPT, this.ptm(key, params));
},
ptmo(obj = {}, key = '', params = {}) {
return this._getPTValue(obj, key, { instance: this, ...params }, false);
@ -286,15 +290,7 @@ export default {
props: parentInstance?.$props,
state: parentInstance?.$data,
attrs: parentInstance?.$attrs
},
/* @deprecated since v3.43.0. Use the `parent.instance` instead of the `parentInstance`.*/
parentInstance
};
},
$themeParams() {
return {
...this.$params,
theme: this.$theme
}
};
},
$_attrsPT() {
@ -312,7 +308,7 @@ export default {
return result;
}, {});
},
$_attrsNoPT() {
$_attrsWithoutPT() {
// $attrs without `pt:*`
return Object.entries(this.$attrs || {})
.filter(([key]) => !key?.startsWith('pt:'))

5
components/lib/basecomponent/style/BaseComponentStyle.js
View File

@ -1,8 +1,5 @@
import BaseStyle from 'primevue/base/style';
import { useStyle } from 'primevue/usestyle';
export default BaseStyle.extend({
name: 'common',
loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options }),
loadGlobalTheme: (globalTheme, options = {}) => useStyle(globalTheme, { name: 'global-style', ...options })
name: 'common'
});

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

@ -1,5 +1,5 @@
import BaseStyle from 'primevue/base/style';
import Theme from 'primevue/themes';
import Theme, { ThemeService } from 'primevue/themes';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
@ -80,31 +80,39 @@ const BaseDirective = {
BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
// apply theme settings
Theme.init();
Theme.setTheme(el.$instance?.theme());
BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
ThemeService.on('theme:change', () => BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce }));
},
_loadThemeStyles: (instance = {}, useStyleOptions) => {
const themeParams = instance.themeParams();
// common
const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(themeParams) || {};
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.() || {};
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?.(themeParams) || {};
Theme.setLoadedStyleName('common');
}
instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, ...useStyleOptions });
instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, ...useStyleOptions });
// directive
if (!Theme.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
const { variables, style } = instance.$style?.getDirectiveThemeCSS?.() || {};
instance.$style?.loadTheme(variables, { name: `${instance.$style.name}-variables`, ...useStyleOptions });
instance.$style?.loadTheme(style, { name: `${instance.$style.name}-style`, ...useStyleOptions });
Theme.setLoadedStyleName(instance.$style.name);
}
// layer order
const layerOrder = instance.$style?.getLayerOrderThemeCSS?.();
if (!Theme.isStyleNameLoaded('layer-order')) {
const layerOrder = instance.$style?.getLayerOrderThemeCSS?.();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
Theme.setLoadedStyleName('layer-order');
}
},
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
@ -142,8 +150,7 @@ const BaseDirective = {
/* computed instance variables */
defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
theme: () => config?.theme,
themeParams: () => ({ theme: el.$instance?.theme }),
theme: () => el.$instance?.$config?.theme,
/* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),

4
components/lib/chart/style/ChartStyle.js
View File

@ -10,6 +10,6 @@ const classes = {
export default BaseStyle.extend({
name: 'chart',
inlineStyles,
classes
classes,
inlineStyles
});

6
components/lib/column/style/ColumnStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'column'
});

6
components/lib/columngroup/style/ColumnGroupStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'columngroup'
});

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

@ -2,7 +2,7 @@ import { FilterMatchMode } from 'primevue/api';
import Theme, { ThemeService } from 'primevue/themes';
import PrimeOne from 'primevue/themes/primeone';
import Aura from 'primevue/themes/primeone/aura';
import { inject, reactive, watch } from 'vue';
import { inject, reactive, ref, watch } from 'vue';
export const defaultOptions = {
ripple: false,
@ -168,52 +168,37 @@ export function usePrimeVue() {
return PrimeVue;
}
function switchTheme(currentTheme, newTheme, linkElementId, callback) {
if (currentTheme !== newTheme) {
const linkElement = document.getElementById(linkElementId);
function setupTheme(app, PrimeVue) {
const isChanged = ref(false);
if (linkElement) {
const cloneLinkElement = linkElement.cloneNode(true);
const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
watch(
PrimeVue.config.theme,
(newValue) => {
if (!isChanged.value) {
Theme.setTheme(newValue);
}
cloneLinkElement.setAttribute('id', linkElementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', linkElementId);
isChanged.value = false;
},
{ immediate: true, deep: true }
);
if (callback) {
callback();
}
});
linkElement.parentNode && linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
}
}
ThemeService.on('theme:change', function (newTheme) {
isChanged.value = true;
app.config.globalProperties.$primevue.config.theme = newTheme;
});
}
export default {
install: (app, options) => {
let configOptions = options ? { ...defaultOptions, ...options } : { ...defaultOptions };
const configOptions = options ? { ...defaultOptions, ...options } : { ...defaultOptions };
const PrimeVue = {
config: reactive(configOptions),
changeTheme: switchTheme
config: reactive(configOptions)
};
watch(
PrimeVue.config,
(newValue) => {
Theme.setPConfig(newValue);
},
{ immediate: true }
);
app.config.globalProperties.$primevue = PrimeVue;
app.provide(PrimeVueSymbol, PrimeVue);
ThemeService.on('theme:change', (newTheme) => {
app.config.globalProperties.$primevue.config.theme = newTheme;
}).on('preset:change', (newPreset) => {
app.config.globalProperties.$primevue.config.theme.preset = newPreset;
});
setupTheme(app, PrimeVue);
}
};

6
components/lib/deferredcontent/style/DeferredContentStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'deferredcontent'
});

6
components/lib/dynamicdialog/style/DynamicDialogStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'dynamicdialog'
});

6
components/lib/focustrap/style/FocusTrapStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'focustrap-directive'
});

0
components/lib/inputicon/style/InputIcoonStyle.d.ts → components/lib/inputicon/style/InputIconStyle.d.ts vendored
View File

6
components/lib/portal/style/PortalStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'portal'
});

2
components/lib/ripple/style/RippleStyle.js
View File

@ -5,6 +5,6 @@ const classes = {
};
export default BaseStyle.extend({
name: 'ripple',
name: 'ripple-directive',
classes
});

6
components/lib/row/style/RowStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'row'
});

6
components/lib/stepperpanel/style/StepperPanelStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'stepperpanel'
});

5
components/lib/styleclass/BaseStyleClass.js
View File

@ -1,5 +1,8 @@
import BaseDirective from 'primevue/basedirective';
import StyleClassStyle from 'primevue/styleclass/style';
const BaseStyleClass = BaseDirective.extend({});
const BaseStyleClass = BaseDirective.extend({
style: StyleClassStyle
});
export default BaseStyleClass;

6
components/lib/styleclass/style/StyleClassStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'styleclass-directive'
});

6
components/lib/tabpanel/style/TabPanelStyle.js
View File

@ -1 +1,5 @@
export default {};
import BaseStyle from 'primevue/base/style';
export default BaseStyle.extend({
name: 'tabpanel'
});

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

@ -16,21 +16,27 @@ export default {
}*/
}
},
_pConfig: undefined,
_theme: undefined,
_initialized: false,
_layerNames: new Set(),
_loadedStyleNames: new Set(),
_tokens: {},
init() {
if (!this._initialized) {
this._tokens = ThemeUtils.createTokens(this.preset, this.defaults);
ThemeService.emit('theme:init', this.theme);
}
update(newValues = {}) {
const { theme } = newValues;
this._initialized = true;
if (theme) {
this._theme = {
...theme,
options: {
...this.defaults.options,
...theme.options
}
};
this._tokens = ThemeUtils.createTokens(theme?.preset, this.defaults);
this.clearLoadedStyleNames();
}
},
get theme() {
return this._theme || this._pConfig?.theme;
return this._theme;
},
get base() {
return this.theme?.base || {};
@ -44,28 +50,11 @@ export default {
get tokens() {
return this._tokens;
},
getPConfig() {
return this._pConfig;
},
setPConfig(newValue) {
this._pConfig = newValue;
},
getTokenValue(tokenPath) {
return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
},
getTheme() {
return this.theme;
},
setTheme(newValue) {
this._theme = {
...newValue,
options: {
...this.defaults.options,
...newValue.options
}
};
this._tokens = ThemeUtils.createTokens(newValue?.preset, this.defaults);
this.update({ theme: newValue });
ThemeService.emit('theme:change', newValue);
},
getPreset() {
@ -75,13 +64,33 @@ export default {
this._theme = { ...this.theme, preset: newValue };
this._tokens = ThemeUtils.createTokens(newValue, this.defaults);
this.clearLoadedStyleNames();
ThemeService.emit('preset:change', newValue);
ThemeService.emit('theme:change', this.theme);
},
getLayerNames() {
return [...this._layerNames];
},
setLayerNames(layerName) {
this._layerNames?.add(layerName);
this._layerNames.add(layerName);
},
getLoadedStyleNames() {
return this._loadedStyleNames;
},
isStyleNameLoaded(name) {
return this._loadedStyleNames.has(name);
},
setLoadedStyleName(name) {
this._loadedStyleNames.add(name);
},
deleteLoadedStyleName(name) {
this._loadedStyleNames.delete(name);
},
clearLoadedStyleNames() {
this._loadedStyleNames.clear();
},
getTokenValue(tokenPath) {
return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
},
getCommonCSS(name = '', params) {
return ThemeUtils.getCommon({ name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });

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

@ -3,9 +3,9 @@ import Theme, { SharedUtils } from 'primevue/themes';
const types = ['value', 'variable'];
export const $dt = (tokenPath, param1, param2) => {
const config = Theme.getPConfig();
const theme = Theme.getTheme();
return types.includes(param1) ? dt(config?.theme, tokenPath, undefined, param1) : dt(config?.theme, tokenPath, param1, param2);
return types.includes(param1) ? dt(theme, tokenPath, undefined, param1) : dt(theme, tokenPath, param1, param2);
};
export const dt = (theme = {}, tokenPath, fallback, type = 'variable') => {
@ -23,11 +23,11 @@ export const dt = (theme = {}, tokenPath, fallback, type = 'variable') => {
};
export const $dtp = (tokenPath) => {
const config = Theme.getPConfig();
const theme = Theme.getTheme();
const variable = dt(config?.theme, tokenPath, undefined, 'variable');
const variable = dt(theme, tokenPath, undefined, 'variable');
const name = variable.match(/--[\w-]+/g)?.[0];
const value = dt(config?.theme, tokenPath, undefined, 'value');
const value = dt(theme, tokenPath, undefined, 'value');
return {
variable,

1
nuxt-vite.config.js
View File

@ -94,6 +94,7 @@ const STYLE_ALIAS = {
'primevue/steps/style': path.resolve(__dirname, './components/lib/steps/style/StepsStyle.js'),
'primevue/stepper/style': path.resolve(__dirname, './components/lib/stepper/style/StepperStyle.js'),
'primevue/stepperpanel/style': path.resolve(__dirname, './components/lib/stepperpanel/style/StepperPanelStyle.js'),
'primevue/styleclass/style': path.resolve(__dirname, './components/lib/styleclass/style/StyleClassStyle.js'),
'primevue/tabmenu/style': path.resolve(__dirname, './components/lib/tabmenu/style/TabMenuStyle.js'),
'primevue/tabpanel/style': path.resolve(__dirname, './components/lib/tabpanel/style/TabPanelStyle.js'),
'primevue/tabview/style': path.resolve(__dirname, './components/lib/tabview/style/TabViewStyle.js'),

2
plugins/app-state.js
View File

@ -1,3 +1,5 @@
import { reactive } from 'vue';
const $appState = {
install: (Vue, options) => {
Vue.config.globalProperties.$appState = reactive({

1
rollup.config.js
View File

@ -155,6 +155,7 @@ const CORE_STYLE_DEPENDENCIES = {
'primevue/stepper/style': 'primevue.stepper.style',
'primevue/stepperpanel/style': 'primevue.stepperpanel.style',
'primevue/steps/style': 'primevue.steps.style',
'primevue/styleclass/style': 'primevue.styleclass.style',
'primevue/tabmenu/style': 'primevue.tabmenu.style',
'primevue/tabpanel/style': 'primevue.tabpanel.style',
'primevue/tabview/style': 'primevue.tabview.style',