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

Refactor #5667

pull/5701/head
Mert Sincan 2024-05-02 23:12:36 +01:00
parent 1ea0731a18
commit 8574a61891
8 changed files with 73 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/base/style/BaseStyle.d.ts vendored
View File

@ -5,6 +5,6 @@ export declare interface BaseStyle {
css?: string | undefined; css?: string | undefined;
classes?: object | undefined; classes?: object | undefined;
inlineStyles?: object | undefined; inlineStyles?: object | undefined;
loadStyle?: ((options?: StyleOptions) => Style | object | undefined) | undefined; load?: ((style: string | ((params?: any) => string | undefined), options?: StyleOptions) => Style | object | undefined) | undefined;
getStyleSheet?: ((extendedCSS?: string, props?: any) => string | undefined) | undefined; getStyleSheet?: ((extendedCSS?: string, props?: any) => string | undefined) | undefined;
} }

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

@ -264,20 +264,16 @@ export default {
theme, theme,
classes, classes,
inlineStyles, inlineStyles,
loadStyle(options = {}) { load(style, options = {}, transform = (cs) => cs) {
const css = ObjectUtils.getItemValue(this.css, { dt }); const computedStyle = transform(ObjectUtils.getItemValue(style, { dt }));
return css ? useStyle(ObjectUtils.minifyCSS(css), { name: this.name, ...options }) : {}; return computedStyle ? useStyle(ObjectUtils.minifyCSS(computedStyle), { name: this.name, ...options }) : {};
}, },
loadInlineTheme(options = {}) { loadCSS(options = {}) {
const theme = ObjectUtils.getItemValue(this.theme, { dt }); return this.load(this.css, options);
return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: this.name, ...options }) : {};
}, },
loadTheme(theme, options = {}) { loadTheme(options = {}) {
const callbacks = { onMounted: (name) => Theme.onStyleMounted(name), onUpdated: (name) => Theme.onStyleUpdated(name), onLoad: (event, options) => Theme.onStyleLoaded(event, options) }; return this.load(this.theme, options, (computedStyle) => Theme.transformCSS(options.name || this.name, computedStyle));
return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: this.name, ...options, ...callbacks }) : {};
}, },
getCommonThemeCSS(params) { getCommonThemeCSS(params) {
return Theme.getCommonCSS(this.name, params); return Theme.getCommonCSS(this.name, params);
@ -296,12 +292,13 @@ export default {
}, },
getStyleSheet(extendedCSS = '', props = {}) { getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) { if (this.css) {
const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`); const _css = ObjectUtils.getItemValue(this.css, { dt });
const _style = ObjectUtils.minifyCSS(`${_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}>${_css}</style>`; return `<style type="text/css" data-primevue-style-id="${this.name}" ${_props}>${_style}</style>`;
} }
return ''; return '';
@ -310,7 +307,20 @@ export default {
return Theme.getCommonStyleSheet(this.name, params, props); return Theme.getCommonStyleSheet(this.name, params, props);
}, },
getThemeStyleSheet(params, props = {}) { getThemeStyleSheet(params, props = {}) {
return Theme.getStyleSheet(this.name, params, props); let css = [Theme.getStyleSheet(this.name, params, props)];
if (this.theme) {
const name = `${this.name}-style`;
const _css = ObjectUtils.getItemValue(this.theme, { dt });
const _style = ObjectUtils.minifyCSS(Theme.transformCSS(name, _css));
const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' ');
css.push(`<style type="text/css" data-primevue-style-id="${name}" ${_props}>${_style}</style>`);
}
return css.join('');
}, },
extend(style) { extend(style) {
return { ...this, css: undefined, theme: undefined, ...style }; return { ...this, css: undefined, theme: undefined, ...style };

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

@ -38,9 +38,6 @@ export default {
if (!newValue) { if (!newValue) {
this._loadCoreStyles(); this._loadCoreStyles();
this._themeChangeListener(this._loadCoreStyles); // update styles with theme settings this._themeChangeListener(this._loadCoreStyles); // update styles with theme settings
} else {
// load theme
this._loadThemeStyles();
} }
} }
}, },
@ -114,7 +111,7 @@ export default {
const _load = () => { const _load = () => {
// @todo // @todo
if (!Base.isStyleNameLoaded('base')) { if (!Base.isStyleNameLoaded('base')) {
BaseStyle.loadStyle(this.$styleOptions); BaseStyle.loadCSS(this.$styleOptions);
this._loadGlobalStyles(); this._loadGlobalStyles();
Base.setLoadedStyleName('base'); Base.setLoadedStyleName('base');
@ -128,8 +125,8 @@ export default {
}, },
_loadCoreStyles() { _loadCoreStyles() {
if (!Base.isStyleNameLoaded(this.$style?.name) && this.$style?.name) { if (!Base.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
BaseComponentStyle.loadStyle(this.$styleOptions); BaseComponentStyle.loadCSS(this.$styleOptions);
this.$options.style && this.$style.loadStyle(this.$styleOptions); this.$options.style && this.$style.loadCSS(this.$styleOptions);
Base.setLoadedStyleName(this.$style.name); Base.setLoadedStyleName(this.$style.name);
} }
@ -147,7 +144,7 @@ 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) && BaseStyle.loadStyle(globalCSS, { name: 'global', ...this.$styleOptions }); ObjectUtils.isNotEmpty(globalCSS) && BaseStyle.load(globalCSS, { name: 'global', ...this.$styleOptions });
}, },
_loadThemeStyles() { _loadThemeStyles() {
if (this.isUnstyled) return; if (this.isUnstyled) return;
@ -156,21 +153,19 @@ export default {
if (!Theme.isStyleNameLoaded('common')) { if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic } = this.$style?.getCommonThemeCSS?.() || {}; const { primitive, semantic } = this.$style?.getCommonThemeCSS?.() || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions }); BaseStyle.load(primitive, { name: 'primitive-variables', ...this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions }); BaseStyle.load(semantic, { name: 'semantic-variables', ...this.$styleOptions });
BaseStyle.loadInlineTheme({ name: 'global-style', ...this.$styleOptions }); BaseStyle.loadTheme({ name: 'global-style', ...this.$styleOptions });
Theme.setLoadedStyleName('common'); Theme.setLoadedStyleName('common');
} }
// component // component
if (!Theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) { if (!Theme.isStyleNameLoaded(this.$style?.name) && this.$style?.name) {
const { variables, style } = this.$style?.getComponentThemeCSS?.() || {}; const { variables } = this.$style?.getComponentThemeCSS?.() || {};
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions }); this.$style?.load(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
this.$style?.loadInlineTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions }); this.$style?.loadTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions });
//this.$style?.loadTheme(style, { name: `${this.$style.name}-style`, ...this.$styleOptions });
Theme.setLoadedStyleName(this.$style.name); Theme.setLoadedStyleName(this.$style.name);
} }
@ -179,14 +174,14 @@ export default {
if (!Theme.isStyleNameLoaded('layer-order')) { if (!Theme.isStyleNameLoaded('layer-order')) {
const layerOrder = this.$style?.getLayerOrderThemeCSS?.(); const layerOrder = this.$style?.getLayerOrderThemeCSS?.();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions }); BaseStyle.load(layerOrder, { name: 'layer-order', first: true, ...this.$styleOptions });
Theme.setLoadedStyleName('layer-order'); Theme.setLoadedStyleName('layer-order');
} }
}, },
_loadScopedThemeStyles(preset) { _loadScopedThemeStyles(preset) {
const variables = this.$style?.getPresetThemeCSS?.(preset, `[${this.$attrSelector}]`) || {}; const { variables } = this.$style?.getPresetThemeCSS?.(preset, `[${this.$attrSelector}]`) || {};
const scopedStyle = this.$style?.loadTheme(variables, { name: `${this.$attrSelector}-${this.$style.name}`, ...this.$styleOptions }); const scopedStyle = this.$style?.load(variables, { name: `${this.$attrSelector}-${this.$style.name}`, ...this.$styleOptions });
this.scopedStyleEl = scopedStyle.el; this.scopedStyleEl = scopedStyle.el;
}, },
@ -325,7 +320,7 @@ export default {
return this.$config?.theme; return this.$config?.theme;
}, },
$style() { $style() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style }; return { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
}, },
$styleOptions() { $styleOptions() {
return { nonce: this.$config?.csp?.nonce }; return { nonce: this.$config?.csp?.nonce };

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

@ -87,8 +87,8 @@ const BaseDirective = {
}, },
_loadCoreStyles(instance = {}, useStyleOptions) { _loadCoreStyles(instance = {}, useStyleOptions) {
if (!Base.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) { if (!Base.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
BaseStyle.loadStyle(useStyleOptions); BaseStyle.loadCSS(useStyleOptions);
instance.isUnstyled() && instance.$style?.loadStyle(useStyleOptions); instance.isUnstyled() && instance.$style?.loadCSS(useStyleOptions);
Base.setLoadedStyleName(instance.$style.name); Base.setLoadedStyleName(instance.$style.name);
} }
@ -100,20 +100,19 @@ const BaseDirective = {
if (!Theme.isStyleNameLoaded('common')) { if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic } = instance.$style?.getCommonThemeCSS?.() || {}; const { primitive, semantic } = instance.$style?.getCommonThemeCSS?.() || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions }); BaseStyle.load(primitive, { name: 'primitive-variables', ...useStyleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions }); BaseStyle.load(semantic, { name: 'semantic-variables', ...useStyleOptions });
BaseStyle.loadInlineTheme({ name: 'global-style', ...useStyleOptions }); BaseStyle.loadTheme({ name: 'global-style', ...useStyleOptions });
Theme.setLoadedStyleName('common'); Theme.setLoadedStyleName('common');
} }
// directive // directive
if (!Theme.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) { if (!Theme.isStyleNameLoaded(instance.$style?.name) && instance.$style?.name) {
const { variables, style } = instance.$style?.getDirectiveThemeCSS?.() || {}; const { variables } = instance.$style?.getDirectiveThemeCSS?.() || {};
instance.$style?.loadTheme(variables, { name: `${instance.$style.name}-variables`, ...useStyleOptions }); instance.$style?.load(variables, { name: `${instance.$style.name}-variables`, ...useStyleOptions });
instance.$style?.loadInlineTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions }); instance.$style?.loadTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions });
//instance.$style?.loadTheme(style, { name: `${instance.$style.name}-style`, ...useStyleOptions });
Theme.setLoadedStyleName(instance.$style.name); Theme.setLoadedStyleName(instance.$style.name);
} }
@ -122,7 +121,7 @@ const BaseDirective = {
if (!Theme.isStyleNameLoaded('layer-order')) { if (!Theme.isStyleNameLoaded('layer-order')) {
const layerOrder = instance.$style?.getLayerOrderThemeCSS?.(); const layerOrder = instance.$style?.getLayerOrderThemeCSS?.();
BaseStyle.loadTheme(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions }); BaseStyle.load(layerOrder, { name: 'layer-order', first: true, ...useStyleOptions });
Theme.setLoadedStyleName('layer-order'); Theme.setLoadedStyleName('layer-order');
} }
@ -131,8 +130,8 @@ const BaseDirective = {
const preset = instance.preset(); const preset = instance.preset();
if (preset && instance.$attrSelector) { if (preset && instance.$attrSelector) {
const variables = instance.$style?.getPresetThemeCSS?.(preset, `[${instance.$attrSelector}]`) || {}; const { variables } = instance.$style?.getPresetThemeCSS?.(preset, `[${instance.$attrSelector}]`) || {};
const scopedStyle = instance.$style?.loadTheme(variables, { name: `${instance.$attrSelector}-${instance.$style.name}`, ...useStyleOptions }); const scopedStyle = instance.$style?.load(variables, { name: `${instance.$attrSelector}-${instance.$style.name}`, ...useStyleOptions });
instance.scopedStyleEl = scopedStyle.el; instance.scopedStyleEl = scopedStyle.el;
} }
@ -172,7 +171,7 @@ const BaseDirective = {
$modifiers: binding?.modifiers, $modifiers: binding?.modifiers,
$value: binding?.value, $value: binding?.value,
$el: $prevInstance['$el'] || el || undefined, $el: $prevInstance['$el'] || el || undefined,
$style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadTheme: () => {}, ...options?.style }, $style: { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...options?.style },
$config: config, $config: config,
$attrSelector: el.$attrSelector, $attrSelector: el.$attrSelector,
/* computed instance variables */ /* computed instance variables */

3
components/lib/editor/BaseEditor.vue
View File

@ -19,9 +19,6 @@ export default {
$pcEditor: this, $pcEditor: this,
$parentInstance: this $parentInstance: this
}; };
},
beforeMount() {
EditorStyle.loadStyle({ nonce: this.$primevue?.config?.csp?.nonce });
} }
}; };
</script> </script>

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

@ -36,9 +36,6 @@ export default {
get theme() { get theme() {
return this._theme; return this._theme;
}, },
get base() {
return this.theme?.base || {};
},
get preset() { get preset() {
return this.theme?.preset || {}; return this.theme?.preset || {};
}, },
@ -97,7 +94,6 @@ export default {
const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }; const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return { return {
style: ThemeUtils.getBaseC(options),
variables: ThemeUtils.getPresetC(options) variables: ThemeUtils.getPresetC(options)
}; };
}, },
@ -105,18 +101,22 @@ export default {
const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }; const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return { return {
style: ThemeUtils.getBaseD(options),
variables: ThemeUtils.getPresetD(options) variables: ThemeUtils.getPresetD(options)
}; };
}, },
getPresetCSS(name = '', preset, selector, params) { getPresetCSS(name = '', preset, selector, params) {
const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }; const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return ThemeUtils.getPreset(options); return {
variables: ThemeUtils.getPreset(options)
};
}, },
getLayerOrderCSS(name = '') { getLayerOrderCSS(name = '') {
return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults); return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
}, },
transformCSS(name = '', css, type = 'style', mode) {
return ThemeUtils.transformCSS(name, css, mode, type, this.options, { layerNames: this.setLayerNames.bind(this) }, this.defaults);
},
getCommonStyleSheet(name = '', params, props = {}) { getCommonStyleSheet(name = '', params, props = {}) {
return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } }); return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
}, },

55
components/lib/themes/utils/themeUtils.js
View File

@ -1,4 +1,4 @@
import { SharedUtils, dtwt, toVariables } from 'primevue/themes'; import { SharedUtils, toVariables } from 'primevue/themes';
export default { export default {
regex: { regex: {
@ -41,9 +41,12 @@ export default {
return [value].flat().map((v) => rules.map((r) => r.resolve(v)).find((rr) => rr.matched) ?? this.rules.custom.resolve(v)); return [value].flat().map((v) => rules.map((r) => r.resolve(v)).find((rr) => rr.matched) ?? this.rules.custom.resolve(v));
} }
}, },
_toVariables(theme, options) {
return toVariables(theme, { prefix: options?.prefix });
},
getCommon({ name = '', theme = {}, params, set, defaults }) { getCommon({ name = '', theme = {}, params, set, defaults }) {
const { base, preset, options } = theme; const { preset, options } = theme;
let primitive_css, semantic_css, global_css; let primitive_css, semantic_css;
if (SharedUtils.object.isNotEmpty(preset)) { if (SharedUtils.object.isNotEmpty(preset)) {
const { primitive, semantic } = preset; const { primitive, semantic } = preset;
@ -54,21 +57,17 @@ export default {
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark }, options).declarations : '';
primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, set, defaults); primitive_css = this.transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
const semantic_light_css = this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults); const semantic_light_css = this.transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults);
const semantic_dark_css = this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults); const semantic_dark_css = this.transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults);
semantic_css = `${semantic_light_css}${semantic_dark_css}`; semantic_css = `${semantic_light_css}${semantic_dark_css}`;
} }
global_css = SharedUtils.object.getItemValue(base?.global?.css, { ...params, dt: (...args) => dtwt(theme, ...args) });
global_css = this._transformCSS(name, global_css, undefined, 'style', options, set, defaults);
return { return {
primitive: primitive_css, primitive: primitive_css,
semantic: semantic_css, semantic: semantic_css
global: global_css
}; };
}, },
getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) { getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
@ -79,8 +78,8 @@ export default {
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [_name]: csRest }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [_name]: csRest }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [_name]: dark }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [_name]: dark }, options).declarations : '';
const light_variable_css = this._transformCSS(_name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector); const light_variable_css = this.transformCSS(_name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
const dark_variable_css = this._transformCSS(_name, dark_css, 'dark', 'variable', options, set, defaults, selector); const dark_variable_css = this.transformCSS(_name, dark_css, 'dark', 'variable', options, set, defaults, selector);
return `${light_variable_css}${dark_variable_css}`; return `${light_variable_css}${dark_variable_css}`;
}, },
@ -90,13 +89,6 @@ export default {
return this.getPreset({ name, preset: cPreset, options, params, set, defaults }); return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
}, },
getBaseC({ name = '', theme = {}, params, set, defaults }) {
const { base, options } = theme;
const { css } = base?.components?.[name] || {};
const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (...args) => dtwt(theme, ...args) });
return this._transformCSS(name, computed_css, undefined, 'style', options, set, defaults);
},
getPresetD({ name = '', theme = {}, params, set, defaults }) { getPresetD({ name = '', theme = {}, params, set, defaults }) {
const dName = name.replace('-directive', ''); const dName = name.replace('-directive', '');
const { preset, options } = theme; const { preset, options } = theme;
@ -104,14 +96,6 @@ export default {
return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults }); return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
}, },
getBaseD({ name = '', theme = {}, params, set, defaults }) {
const dName = name.replace('-directive', '');
const { base, options } = theme;
const { css } = base?.directives?.[dName] || {};
const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (...args) => dtwt(theme, ...args) });
return this._transformCSS(dName, computed_css, undefined, 'style', options, set, defaults);
},
getColorSchemeOption(options, defaults) { getColorSchemeOption(options, defaults) {
return this.regex.resolve(options.darkModeSelector ?? defaults.options.darkModeSelector); return this.regex.resolve(options.darkModeSelector ?? defaults.options.darkModeSelector);
}, },
@ -136,7 +120,7 @@ export default {
.reduce((acc, [key, value]) => { .reduce((acc, [key, value]) => {
if (value) { if (value) {
const _css = SharedUtils.object.minifyCSS(value); const _css = SharedUtils.object.minifyCSS(value);
const id = key === 'global' ? `${key}-style` : `${key}-variables`; const id = `${key}-variables`;
acc.push(`<style type="text/css" data-primevue-style-id="${id}" ${_props}>${_css}</style>`); acc.push(`<style type="text/css" data-primevue-style-id="${id}" ${_props}>${_css}</style>`);
} }
@ -147,17 +131,11 @@ export default {
}, },
getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) { getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
const presetC_css = this.getPresetC({ name, theme, params, set, defaults }); const presetC_css = this.getPresetC({ name, theme, params, set, defaults });
const baseC_css = this.getBaseC({ name, theme, params, set, defaults });
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(' ');
let css = []; return presetC_css ? `<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${SharedUtils.object.minifyCSS(presetC_css)}</style>` : '';
presetC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${SharedUtils.object.minifyCSS(presetC_css)}</style>`);
baseC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-style" ${_props}>${SharedUtils.object.minifyCSS(baseC_css)}</style>`);
return css.join('');
}, },
createTokens(obj = {}, defaults, parentKey = '', parentPath = '', tokens = {}) { createTokens(obj = {}, defaults, parentKey = '', parentPath = '', tokens = {}) {
Object.entries(obj).forEach(([key, value]) => { Object.entries(obj).forEach(([key, value]) => {
@ -240,10 +218,7 @@ export default {
return acc; return acc;
}, undefined); }, undefined);
}, },
_toVariables(theme, options) { transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
return toVariables(theme, { prefix: options?.prefix });
},
_transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
if (SharedUtils.object.isNotEmpty(css)) { if (SharedUtils.object.isNotEmpty(css)) {
const { cssLayer } = options; const { cssLayer } = options;

2
components/lib/virtualscroller/BaseVirtualScroller.vue
View File

@ -95,7 +95,7 @@ export default {
}; };
}, },
beforeMount() { beforeMount() {
VirtualScrollerStyle.loadStyle({ nonce: this.$config?.csp?.nonce }); VirtualScrollerStyle.loadCSS({ nonce: this.$config?.csp?.nonce });
} }
}; };
</script> </script>