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 { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
const css = ` const css = `
.p-hidden-accessible { .p-hidden-accessible {
@ -33,18 +34,19 @@ export default {
classes, classes,
inlineStyles, inlineStyles,
loadStyle(options = {}) { 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 = {}) { 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 = {}) { getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) { if (this.css) {
const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`);
const _props = Object.entries(props) const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' '); .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 ''; return '';

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

@ -31,15 +31,15 @@ export default {
immediate: true, immediate: true,
handler(newValue) { handler(newValue) {
if (!newValue) { if (!newValue) {
BaseComponentStyle.loadStyle({ nonce: this.$config?.csp?.nonce }); BaseComponentStyle.loadStyle(this.$styleOptions);
this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce }); this.$options.style && this.$style.loadStyle(this.$styleOptions);
} }
} }
}, },
$globalPresetTheme: { $globalPresetCTheme: {
immediate: true, immediate: true,
handler(newValue) { handler(newValue, oldValue) {
if (newValue) { if (newValue && newValue !== oldValue) {
const { variables } = newValue; const { variables } = newValue;
const { colorScheme, ...vRest } = variables || {}; const { colorScheme, ...vRest } = variables || {};
const { dark, ...csRest } = colorScheme || {}; const { dark, ...csRest } = colorScheme || {};
@ -52,10 +52,10 @@ export default {
} }
} }
}, },
$globalBaseTheme: { $globalBaseCTheme: {
immediate: true, immediate: true,
handler(newValue) { handler(newValue, oldValue) {
if (newValue) { if (newValue && newValue !== oldValue) {
const { css } = newValue; const { css } = newValue;
this.$style?.loadTheme(`${css}`, { useStyleOptions: this.$styleOptions }); this.$style?.loadTheme(`${css}`, { useStyleOptions: this.$styleOptions });
@ -80,8 +80,9 @@ export default {
this._hook('onCreated'); this._hook('onCreated');
}, },
beforeMount() { beforeMount() {
BaseStyle.loadStyle({ nonce: this.$config?.csp?.nonce }); BaseStyle.loadStyle(this.$styleOptions);
this._loadGlobalStyles(); this._loadGlobalStyles();
this._loadGlobalThemeStyles();
this._hook('onBeforeMount'); this._hook('onBeforeMount');
}, },
mounted() { mounted() {
@ -125,52 +126,24 @@ export default {
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params); const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce }); ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
this._loadThemeVariables();
BaseComponentStyle.loadGlobalTheme(this.$baseTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce });
}, },
_loadThemeVariables() { _loadGlobalThemeStyles() {
const { primitive, semantic } = this.$presetTheme; if (ObjectUtils.isNotEmpty(this.$globalPresetTheme)) {
const { colorScheme, ...sRest } = semantic || {}; const { primitive, semantic } = this.$globalPresetTheme;
const { dark, ...csRest } = colorScheme || {}; const { colorScheme, ...sRest } = semantic || {};
const primitive_css = ObjectUtils.isNotEmpty(primitive) ? toVariables({ primitive }).css : ''; const { dark, ...csRest } = colorScheme || {};
const sRest_css = ObjectUtils.isNotEmpty(sRest) ? toVariables({ semantic: sRest }).css : ''; const primitive_css = ObjectUtils.isNotEmpty(primitive) ? toVariables({ primitive }).css : '';
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : ''; const sRest_css = ObjectUtils.isNotEmpty(sRest) ? toVariables({ semantic: sRest }).css : '';
const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : ''; const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
const semantic_css = `${sRest_css}${csRest_css}${dark_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(primitive_css, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
BaseStyle.loadTheme(semantic_css, { name: 'semantic-variables', nonce: this.$config?.csp?.nonce }); BaseStyle.loadTheme(semantic_css, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
}
/*const { variables } = this.$presetTheme; BaseComponentStyle.loadGlobalTheme(this.$globalBaseTheme?.components?.global?.css, this.$styleOptions);
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 });
});
*/
}, },
_getHostInstance(instance) { _getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined; 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() { isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled; return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
}, },
$baseTheme() { $globalTheme() {
const { base } = this.$config?.theme || {}; return this.$config?.theme;
return ObjectUtils.getItemValue(base);
},
$presetTheme() {
const { preset, options } = this.$config?.theme || {};
return ObjectUtils.getItemValue(preset, options);
}, },
$globalBaseTheme() { $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() { $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() { $params() {
const parentInstance = this._getHostInstance(this) || this.$parent; const parentInstance = this._getHostInstance(this) || this.$parent;
@ -330,18 +314,6 @@ export default {
parentInstance 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() { $_attrsPT() {
return Object.entries(this.$attrs || {}) return Object.entries(this.$attrs || {})
.filter(([key]) => key?.startsWith('pt:')) .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) => { _useDefaultPT: (instance = {}, defaultPT = {}, callback, key, params) => {
return BaseDirective._usePT(instance, defaultPT, callback, key, params); return BaseDirective._usePT(instance, defaultPT, callback, key, params);
}, },
_loadThemeStyle: (instance = {}, useStyleOptions) => { _loadGlobalThemeStyles: (instance = {}, useStyleOptions) => {
const preset = instance.globalPresetTheme(); const preset = instance.globalPresetCTheme();
if (preset) { if (preset) {
const { variables } = preset; const { variables } = preset;
@ -89,7 +89,7 @@ const BaseDirective = {
instance.$style?.loadTheme(`${variables_css}`, { name: `${instance.$name}-directive-variable`, useStyleOptions }); instance.$style?.loadTheme(`${variables_css}`, { name: `${instance.$name}-directive-variable`, useStyleOptions });
} }
const base = instance.globalBaseTheme(); const base = instance.globalBaseCTheme();
if (base) { if (base) {
const { css } = base; const { css } = base;
@ -133,10 +133,11 @@ const BaseDirective = {
/* computed instance variables */ /* computed instance variables */
defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]), defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled), isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
baseTheme: () => ObjectUtils.getItemValue(config?.theme?.base), globalTheme: () => config?.theme,
presetTheme: () => ObjectUtils.getItemValue(config?.theme?.preset, config?.theme?.options), globalBaseTheme: () => ObjectUtils.getItemValue(el.$instance?.globalTheme?.()?.base),
globalBaseTheme: () => ObjectUtils.getItemValue(el.$instance?.baseTheme?.()?.directives?.[name], undefined), globalBaseCTheme: () => ObjectUtils.getItemValue(el.$instance?.globalBaseTheme?.()?.directives?.[name], undefined),
globalPresetTheme: () => ObjectUtils.getItemValue(el.$instance?.presetTheme?.()?.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 */ /* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }), 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), ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
@ -160,7 +161,7 @@ const BaseDirective = {
BaseStyle.loadStyle({ nonce: config?.csp?.nonce }); BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled() && el.$instance?.$style?.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); handleHook('beforeMount', el, binding, vnode, prevVnode);
}, },
mounted: (el, binding, vnode, prevVnode) => { mounted: (el, binding, vnode, prevVnode) => {
@ -168,7 +169,7 @@ const BaseDirective = {
BaseStyle.loadStyle({ nonce: config?.csp?.nonce }); BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled() && el.$instance?.$style?.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); handleHook('mounted', el, binding, vnode, prevVnode);
}, },
beforeUpdate: (el, binding, vnode, prevVnode) => { beforeUpdate: (el, binding, vnode, prevVnode) => {

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

@ -367,5 +367,17 @@ export default {
} else { } else {
return JSON.stringify(value); 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;
} }
}; };