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

Theming API: new `$t` helper

pull/5701/head
Mert Sincan 2024-05-06 16:50:06 +01:00
parent d7a42ed9c3
commit 222efa71a1
10 changed files with 106 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/lib/themes/actions/definePreset.js
View File

@ -1,9 +1,3 @@
import Theme, { SharedUtils } from 'primevue/themes';
import { SharedUtils } from 'primevue/themes';
export default (preset1, preset2) => {
const newPreset = SharedUtils.object.mergeKeys(preset1, preset2);
Theme.setPreset(newPreset);
return newPreset;
};
export default (...presets) => SharedUtils.object.mergeKeys(...presets);

4
components/lib/themes/actions/updatePreset.js
View File

@ -1,7 +1,7 @@
import Theme, { SharedUtils } from 'primevue/themes';
export default (preset) => {
const newPreset = SharedUtils.object.mergeKeys(Theme.getPreset(), preset);
export default (...presets) => {
const newPreset = SharedUtils.object.mergeKeys(Theme.getPreset(), ...presets);
Theme.setPreset(newPreset);

16
components/lib/themes/actions/updatePrimaryPalette.js
View File

@ -1,15 +1,3 @@
import Theme from 'primevue/themes';
import { $t } from 'primevue/themes';
export default (primary) => {
const { primitive, semantic, components, directives } = Theme.getPreset();
const newPreset = {
primitive,
semantic: { ...semantic, primary },
components,
directives
};
Theme.setPreset(newPreset);
return newPreset;
};
export default (primary) => $t().primaryPalette(primary).update().preset;

23
components/lib/themes/actions/updateSurfacePalette.js
View File

@ -1,22 +1,3 @@
import Theme from 'primevue/themes';
import { $t } from 'primevue/themes';
export default (surface) => {
const { primitive, semantic, components, directives } = Theme.getPreset();
const hasLightDark = surface?.hasOwnProperty('light') || surface?.hasOwnProperty('dark');
const newColorScheme = {
colorScheme: {
light: { ...semantic?.colorScheme?.light, ...{ surface: hasLightDark ? surface?.light : surface } },
dark: { ...semantic?.colorScheme?.dark, ...{ surface: hasLightDark ? surface?.dark : surface } }
}
};
const newPreset = {
primitive,
semantic: { ...semantic, ...newColorScheme },
components,
directives
};
Theme.setPreset(newPreset);
return newPreset;
};
export default (surface) => $t().surfacePalette(surface).update().preset;

8
components/lib/themes/actions/usePreset.js
View File

@ -1,7 +1,9 @@
import Theme from 'primevue/themes';
export default (preset) => {
Theme.setPreset(preset);
export default (...presets) => {
const newPreset = SharedUtils.object.mergeKeys(...presets);
return preset;
Theme.setPreset(newPreset);
return newPreset;
};

14
components/lib/themes/actions/useTheme.js
View File

@ -1,13 +1,3 @@
import Theme from 'primevue/themes';
import { $t } from 'primevue/themes';
export default (theme) => {
const [{ options: o1 }, { options: o2 }] = [Theme.getTheme(), theme];
const newTheme = {
...theme,
options: { ...o1, ...o2 }
};
Theme.setTheme(newTheme);
return newTheme;
};
export default (theme) => $t(theme).update({ mergePresets: false });

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

@ -63,6 +63,16 @@ export default {
ThemeService.emit('preset:change', newValue);
ThemeService.emit('theme:change', this.theme);
},
getOptions() {
return this.options;
},
setOptions(newValue) {
this._theme = { ...this.theme, options: newValue };
this.clearLoadedStyleNames();
ThemeService.emit('options:change', newValue);
ThemeService.emit('theme:change', this.theme);
},
getLayerNames() {
return [...this._layerNames];
},

1
components/lib/themes/helpers/index.js
View File

@ -1,4 +1,5 @@
export * from './color/index.js';
export * from './css';
export * from './dt';
export * from './t';
export { default as toVariables } from './toVariables';

66
components/lib/themes/helpers/t.js Normal file
View File

@ -0,0 +1,66 @@
import { SharedUtils } from 'primevue/themes';
import Theme from 'primevue/themes/config';
export const $t = (theme = {}) => {
let { preset: _preset, options: _options } = theme;
return {
preset(value) {
_preset = _preset ? SharedUtils.object.mergeKeys(_preset, value) : value;
return this;
},
options(value) {
_options = _options ? { ..._options, ...value } : value;
return this;
},
// features
primaryPalette(primary) {
const { semantic } = _preset || {};
_preset = { ..._preset, semantic: { ...semantic, primary } };
return this;
},
surfacePalette(surface) {
const { semantic } = _preset || {};
const lightSurface = surface?.hasOwnProperty('light') ? surface?.light : surface;
const darkSurface = surface?.hasOwnProperty('dark') ? surface?.dark : surface;
const newColorScheme = {
colorScheme: {
light: { ...semantic?.colorScheme?.light, ...(!!lightSurface && { surface: lightSurface }) },
dark: { ...semantic?.colorScheme?.dark, ...(!!darkSurface && { surface: darkSurface }) }
}
};
_preset = { ..._preset, semantic: { ...semantic, ...newColorScheme } };
return this;
},
// actions
define({ useDefaultPreset = false, useDefaultOptions = false } = {}) {
return {
preset: useDefaultPreset ? Theme.getPreset() : _preset,
options: useDefaultOptions ? Theme.getOptions() : _options
};
},
update({ mergePresets = true, mergeOptions = true } = {}) {
const newTheme = {
preset: mergePresets ? SharedUtils.object.mergeKeys(Theme.getPreset(), _preset) : _preset,
options: mergeOptions ? { ...Theme.getOptions(), ..._options } : _options
};
Theme.setTheme(newTheme);
return newTheme;
},
use(options) {
const newTheme = this.define(options);
Theme.setTheme(newTheme);
return newTheme;
}
};
};

8
components/lib/themes/utils/sharedUtils.js
View File

@ -61,18 +61,22 @@ export default {
return mergedObj;
},
mergeKeys(target = {}, source = {}) {
mergeKeys(...args) {
const _mergeKeys = (target = {}, source = {}) => {
const mergedObj = { ...target };
Object.keys(source).forEach((key) => {
if (this.isObject(source[key]) && key in target && this.isObject(target[key])) {
mergedObj[key] = this.mergeKeys(target[key], source[key]);
mergedObj[key] = _mergeKeys(target[key], source[key]);
} else {
mergedObj[key] = source[key];
}
});
return mergedObj;
};
return args.reduce((acc, obj, i) => (i === 0 ? obj : _mergeKeys(acc, obj)), {});
},
getItemValue(obj, ...params) {
return this.isFunction(obj) ? obj(...params) : obj;