diff --git a/components/lib/themes/actions/definePreset.js b/components/lib/themes/actions/definePreset.js index 16ca5dcd2..f18347e47 100644 --- a/components/lib/themes/actions/definePreset.js +++ b/components/lib/themes/actions/definePreset.js @@ -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); diff --git a/components/lib/themes/actions/updatePreset.js b/components/lib/themes/actions/updatePreset.js index df8d72aae..ab8490cb9 100644 --- a/components/lib/themes/actions/updatePreset.js +++ b/components/lib/themes/actions/updatePreset.js @@ -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); diff --git a/components/lib/themes/actions/updatePrimaryPalette.js b/components/lib/themes/actions/updatePrimaryPalette.js index c3441ba52..558bd14c8 100644 --- a/components/lib/themes/actions/updatePrimaryPalette.js +++ b/components/lib/themes/actions/updatePrimaryPalette.js @@ -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; diff --git a/components/lib/themes/actions/updateSurfacePalette.js b/components/lib/themes/actions/updateSurfacePalette.js index 740f3fcb8..2eb22fa45 100644 --- a/components/lib/themes/actions/updateSurfacePalette.js +++ b/components/lib/themes/actions/updateSurfacePalette.js @@ -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; diff --git a/components/lib/themes/actions/usePreset.js b/components/lib/themes/actions/usePreset.js index 6b37ba089..cb22d6e61 100644 --- a/components/lib/themes/actions/usePreset.js +++ b/components/lib/themes/actions/usePreset.js @@ -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; }; diff --git a/components/lib/themes/actions/useTheme.js b/components/lib/themes/actions/useTheme.js index c2af87405..265a27d26 100644 --- a/components/lib/themes/actions/useTheme.js +++ b/components/lib/themes/actions/useTheme.js @@ -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 }); diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js index 87d9977f6..002fee782 100644 --- a/components/lib/themes/config/index.js +++ b/components/lib/themes/config/index.js @@ -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]; }, diff --git a/components/lib/themes/helpers/index.js b/components/lib/themes/helpers/index.js index f96847ed9..8bfba38ab 100644 --- a/components/lib/themes/helpers/index.js +++ b/components/lib/themes/helpers/index.js @@ -1,4 +1,5 @@ export * from './color/index.js'; export * from './css'; export * from './dt'; +export * from './t'; export { default as toVariables } from './toVariables'; diff --git a/components/lib/themes/helpers/t.js b/components/lib/themes/helpers/t.js new file mode 100644 index 000000000..175a2761b --- /dev/null +++ b/components/lib/themes/helpers/t.js @@ -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; + } + }; +}; diff --git a/components/lib/themes/utils/sharedUtils.js b/components/lib/themes/utils/sharedUtils.js index 2e56177cc..2af8b6aa9 100644 --- a/components/lib/themes/utils/sharedUtils.js +++ b/components/lib/themes/utils/sharedUtils.js @@ -61,18 +61,22 @@ export default { return mergedObj; }, - mergeKeys(target = {}, source = {}) { - const mergedObj = { ...target }; + 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]); - } else { - mergedObj[key] = source[key]; - } - }); + Object.keys(source).forEach((key) => { + if (this.isObject(source[key]) && key in target && this.isObject(target[key])) { + mergedObj[key] = _mergeKeys(target[key], source[key]); + } else { + mergedObj[key] = source[key]; + } + }); - return mergedObj; + return mergedObj; + }; + + return args.reduce((acc, obj, i) => (i === 0 ? obj : _mergeKeys(acc, obj)), {}); }, getItemValue(obj, ...params) { return this.isFunction(obj) ? obj(...params) : obj;