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

Cosmetics

pull/5507/head
mertsincan 2024-02-20 11:44:09 +00:00
parent d30500cac7
commit 4c67b97481
4 changed files with 74 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
const css = `
.p-hidden-accessible {
@ -33,18 +34,19 @@ export default {
classes,
inlineStyles,
loadStyle(options = {}) {
return this.css ? useStyle(this.css, { name: this.name, ...options }) : {};
return this.css ? useStyle(ObjectUtils.minifyCSS(this.css), { name: this.name, ...options }) : {};
},
loadTheme(theme, options = {}) {
return theme ? useStyle(theme, { name: `${this.name}-style`, ...options }) : {};
return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {};
},
getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) {
const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`);
const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' ');
return `<style type="text/css" data-primevue-style-id="${this.name}" ${_props}>${this.css}${extendedCSS}</style>`;
return `<style type="text/css" data-primevue-style-id="${this.name}" ${_props}>${_css}</style>`;
}
return '';

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

@ -31,15 +31,15 @@ export default {
immediate: true,
handler(newValue) {
if (!newValue) {
BaseComponentStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce });
BaseComponentStyle.loadStyle(this.$styleOptions);
this.$options.style && this.$style.loadStyle(this.$styleOptions);
}
}
},
$globalPresetTheme: {
$globalPresetCTheme: {
immediate: true,
handler(newValue) {
if (newValue) {
handler(newValue, oldValue) {
if (newValue && newValue !== oldValue) {
const { variables } = newValue;
const { colorScheme, ...vRest } = variables || {};
const { dark, ...csRest } = colorScheme || {};
@ -52,10 +52,10 @@ export default {
}
}
},
$globalBaseTheme: {
$globalBaseCTheme: {
immediate: true,
handler(newValue) {
if (newValue) {
handler(newValue, oldValue) {
if (newValue && newValue !== oldValue) {
const { css } = newValue;
this.$style?.loadTheme(`${css}`, { useStyleOptions: this.$styleOptions });
@ -80,8 +80,9 @@ export default {
this._hook('onCreated');
},
beforeMount() {
BaseStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
BaseStyle.loadStyle(this.$styleOptions);
this._loadGlobalStyles();
this._loadGlobalThemeStyles();
this._hook('onBeforeMount');
},
mounted() {
@ -125,52 +126,24 @@ export default {
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
this._loadThemeVariables();
BaseComponentStyle.loadGlobalTheme(this.$baseTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce });
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
},
_loadThemeVariables() {
const { primitive, semantic } = this.$presetTheme;
const { colorScheme, ...sRest } = semantic || {};
const { dark, ...csRest } = colorScheme || {};
const primitive_css = ObjectUtils.isNotEmpty(primitive) ? toVariables({ primitive }).css : '';
const sRest_css = ObjectUtils.isNotEmpty(sRest) ? toVariables({ semantic: sRest }).css : '';
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : '';
const semantic_css = `${sRest_css}${csRest_css}${dark_css}`;
_loadGlobalThemeStyles() {
if (ObjectUtils.isNotEmpty(this.$globalPresetTheme)) {
const { primitive, semantic } = this.$globalPresetTheme;
const { colorScheme, ...sRest } = semantic || {};
const { dark, ...csRest } = colorScheme || {};
const primitive_css = ObjectUtils.isNotEmpty(primitive) ? toVariables({ primitive }).css : '';
const sRest_css = ObjectUtils.isNotEmpty(sRest) ? toVariables({ semantic: sRest }).css : '';
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : '';
const semantic_css = `${sRest_css}${csRest_css}${dark_css}`;
BaseStyle.loadTheme(primitive_css, { name: 'primitive-variables', nonce: this.$config?.csp?.nonce });
BaseStyle.loadTheme(semantic_css, { name: 'semantic-variables', nonce: this.$config?.csp?.nonce });
BaseStyle.loadTheme(primitive_css, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
BaseStyle.loadTheme(semantic_css, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
}
/*const { variables } = this.$presetTheme;
const { colorScheme, ...vRest } = variables || {};
const { dark, ...csRest } = colorScheme || {};
const vRest_css = ObjectUtils.isNotEmpty(vRest) ? toVariables({ light: vRest }).css : '';
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : '';
const variables_css = `${vRest_css}${csRest_css}${dark_css}`;
BaseStyle.loadTheme(variables_css, { name: 'theme-variables', nonce: this.$config?.csp?.nonce });*/
/*const { primitive, semantic } = this.$presetTheme;
const { colorScheme, ...sRest } = semantic || {};
const { dark, ...csRest } = colorScheme || {};
// primitive
BaseStyle.loadTheme(toVariables({ primitive }).css, { name: 'primitive-variables', nonce: this.$config?.csp?.nonce });
// semantic -> light + common
const light_common_css = `${toVariables({ light: { ...sRest, ...csRest } }).css}${toVariables({ dark }, { selector: '.p-dark' }).css}`;
BaseStyle.loadTheme(light_common_css, { name: 'semantic-variables', nonce: this.$config?.csp?.nonce });
/*Object.entries(rest).forEach(([key, value]) => {
const v = toVariables({ [key]: value });
BaseStyle.loadTheme(v.css, { name: `${key}-variables`, nonce: this.$config?.csp?.nonce });
});
*/
BaseComponentStyle.loadGlobalTheme(this.$globalBaseTheme?.components?.global?.css, this.$styleOptions);
},
_getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@ -296,21 +269,32 @@ export default {
isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
},
$baseTheme() {
const { base } = this.$config?.theme || {};
return ObjectUtils.getItemValue(base);
},
$presetTheme() {
const { preset, options } = this.$config?.theme || {};
return ObjectUtils.getItemValue(preset, options);
$globalTheme() {
return this.$config?.theme;
},
$globalBaseTheme() {
return ObjectUtils.getItemValue(this.$baseTheme?.components?.[this.$style.name], this.$params);
return ObjectUtils.getItemValue(this.$globalTheme?.base);
},
$globalBaseCTheme() {
return ObjectUtils.getItemValue(this.$globalBaseTheme?.components?.[this.$style.name], this.$params);
},
$globalPresetTheme() {
return ObjectUtils.getItemValue(this.$presetTheme?.components?.[this.$style.name], this.$params);
return ObjectUtils.getItemValue(this.$globalTheme?.preset, this.$globalTheme?.options);
},
$globalPresetCTheme() {
return ObjectUtils.getItemValue(this.$globalPresetTheme?.components?.[this.$style.name], this.$params);
},
$style() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
},
$styleOptions() {
return { nonce: this.$config?.csp?.nonce };
},
$config() {
return this.$primevue?.config;
},
$name() {
return this.$options.hostName || this.$.type.name;
},
$params() {
const parentInstance = this._getHostInstance(this) || this.$parent;
@ -330,18 +314,6 @@ export default {
parentInstance
};
},
$style() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
},
$styleOptions() {
return { nonce: this.$config?.csp?.nonce };
},
$config() {
return this.$primevue?.config;
},
$name() {
return this.$options.hostName || this.$.type.name;
},
$_attrsPT() {
return Object.entries(this.$attrs || {})
.filter(([key]) => key?.startsWith('pt:'))

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

@ -74,8 +74,8 @@ const BaseDirective = {
_useDefaultPT: (instance = {}, defaultPT = {}, callback, key, params) => {
return BaseDirective._usePT(instance, defaultPT, callback, key, params);
},
_loadThemeStyle: (instance = {}, useStyleOptions) => {
const preset = instance.globalPresetTheme();
_loadGlobalThemeStyles: (instance = {}, useStyleOptions) => {
const preset = instance.globalPresetCTheme();
if (preset) {
const { variables } = preset;
@ -89,7 +89,7 @@ const BaseDirective = {
instance.$style?.loadTheme(`${variables_css}`, { name: `${instance.$name}-directive-variable`, useStyleOptions });
}
const base = instance.globalBaseTheme();
const base = instance.globalBaseCTheme();
if (base) {
const { css } = base;
@ -133,10 +133,11 @@ 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),
baseTheme: () => ObjectUtils.getItemValue(config?.theme?.base),
presetTheme: () => ObjectUtils.getItemValue(config?.theme?.preset, config?.theme?.options),
globalBaseTheme: () => ObjectUtils.getItemValue(el.$instance?.baseTheme?.()?.directives?.[name], undefined),
globalPresetTheme: () => ObjectUtils.getItemValue(el.$instance?.presetTheme?.()?.directives?.[name], undefined),
globalTheme: () => config?.theme,
globalBaseTheme: () => ObjectUtils.getItemValue(el.$instance?.globalTheme?.()?.base),
globalBaseCTheme: () => ObjectUtils.getItemValue(el.$instance?.globalBaseTheme?.()?.directives?.[name], undefined),
globalPresetTheme: () => ObjectUtils.getItemValue(el.$instance?.globalTheme?.()?.preset, el.$instance?.globalTheme?.()?.options),
globalPresetCTheme: () => ObjectUtils.getItemValue(el.$instance?.globalPresetTheme?.()?.directives?.[name], undefined),
/* 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),
@ -160,7 +161,7 @@ const BaseDirective = {
BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
BaseDirective._loadThemeStyle(el.$instance, { nonce: config?.csp?.nonce });
BaseDirective._loadGlobalThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
handleHook('beforeMount', el, binding, vnode, prevVnode);
},
mounted: (el, binding, vnode, prevVnode) => {
@ -168,7 +169,7 @@ const BaseDirective = {
BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
BaseDirective._loadThemeStyle(el.$instance, { nonce: config?.csp?.nonce });
BaseDirective._loadGlobalThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
handleHook('mounted', el, binding, vnode, prevVnode);
},
beforeUpdate: (el, binding, vnode, prevVnode) => {

12
components/lib/utils/ObjectUtils.js
View File

@ -367,5 +367,17 @@ export default {
} else {
return JSON.stringify(value);
}
},
minifyCSS(css) {
return css
? css
.replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '')
.replace(/ {2,}/g, ' ')
.replace(/ ([{:}]) /g, '$1')
.replace(/([;,]) /g, '$1')
.replace(/ !/g, '!')
.replace(/: /g, ':')
: css;
}
};