Refactor on theme structure
mertsincan
parent
c828680c69
commit
43d561a2b6
|
|
@ -1,4 +1,4 @@
|
|||
import BaseThemeStyle from 'primevue/basetheme/style';
|
||||
import Theme from 'primevue/themes';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
|
||||
|
|
@ -40,17 +40,14 @@ export default {
|
|||
loadTheme(theme, options = {}) {
|
||||
return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {};
|
||||
},
|
||||
getCommonThemeCSS(preset, base, params, theme) {
|
||||
return BaseThemeStyle.getCommon(this.name, preset, base, params, theme);
|
||||
getCommonThemeCSS(theme, params) {
|
||||
return Theme.getCommonCSS(this.name, theme, params);
|
||||
},
|
||||
getPresetThemeCSS(presetCTheme, theme) {
|
||||
return BaseThemeStyle.getPresetC(this.name, presetCTheme, theme);
|
||||
getComponentThemeCSS(theme, params) {
|
||||
return Theme.getComponentCSS(this.name, theme, params);
|
||||
},
|
||||
getBaseThemeCSS(baseCTheme, params, theme) {
|
||||
return BaseThemeStyle.getBaseC(this.name, baseCTheme, params, theme);
|
||||
},
|
||||
getColorSchemeOption(colorScheme) {
|
||||
return BaseThemeStyle.getColorSchemeOption(colorScheme);
|
||||
getDirectiveThemeCSS(theme, params) {
|
||||
return Theme.getDirectiveCSS(this.name, theme, params);
|
||||
},
|
||||
getStyleSheet(extendedCSS = '', props = {}) {
|
||||
if (this.css) {
|
||||
|
|
@ -65,10 +62,10 @@ export default {
|
|||
return '';
|
||||
},
|
||||
getCommonThemeStyleSheet(theme = {}, params, props = {}) {
|
||||
return BaseThemeStyle.getCommonStyleSheet(this.name, theme, params, props);
|
||||
return Theme.getCommonStyleSheet(this.name, theme, params, props);
|
||||
},
|
||||
getThemeStyleSheet(theme = {}, params, props = {}) {
|
||||
return BaseThemeStyle.getStyleSheet(this.name, theme, params, props);
|
||||
return Theme.getStyleSheet(this.name, theme, params, props);
|
||||
},
|
||||
extend(style) {
|
||||
return { ...this, css: undefined, ...style };
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import BaseStyle from 'primevue/base/style';
|
||||
import Theme from 'primevue/themes';
|
||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
import BaseComponentStyle from './style/BaseComponentStyle';
|
||||
|
||||
|
|
@ -36,37 +36,11 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
$globalPresetTheme: {
|
||||
$theme: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(newValue, this.$globalBaseTheme, this.$themeParams, this.$globalTheme) || {};
|
||||
|
||||
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
|
||||
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
|
||||
BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
|
||||
}
|
||||
},
|
||||
$globalPresetCTheme: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
if (newValue) {
|
||||
const variables_css = this.$style?.getPresetThemeCSS?.(newValue, this.$globalTheme);
|
||||
|
||||
this.$style?.loadTheme(`${variables_css}`, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions });
|
||||
}
|
||||
}
|
||||
},
|
||||
$globalBaseCTheme: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
if (newValue) {
|
||||
const style_css = this.$style?.getBaseThemeCSS(newValue, this.$themeParams, this.$globalTheme);
|
||||
|
||||
this.$style?.loadTheme(style_css, { useStyleOptions: this.$styleOptions });
|
||||
}
|
||||
this._loadThemeStyles(newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -87,28 +61,8 @@ export default {
|
|||
this._hook('onCreated');
|
||||
},
|
||||
beforeMount() {
|
||||
BaseStyle.loadStyle(this.$styleOptions);
|
||||
this._loadGlobalStyles();
|
||||
this._loadStyles();
|
||||
this._hook('onBeforeMount');
|
||||
|
||||
// apply colorScheme settings
|
||||
const { colorScheme } = this.$globalThemeOptions || {};
|
||||
|
||||
if (colorScheme && !Theme.isColorSchemeInit()) {
|
||||
const colorSchemeOption = BaseStyle.getColorSchemeOption(colorScheme);
|
||||
const isClient = DomHandler.isClient();
|
||||
|
||||
const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default;
|
||||
const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)').matches : colorSchemeOption.dark?.default;
|
||||
const defaultDocument = isClient ? window.document : undefined;
|
||||
|
||||
Theme.setColorScheme(isDark ? 'dark' : 'light');
|
||||
Theme.setColorSchemeInit(true);
|
||||
|
||||
if (isDark && defaultDocument) {
|
||||
DomHandler.addClass(defaultDocument.documentElement, colorSchemeOption.dark?.class);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this._hook('onMounted');
|
||||
|
|
@ -138,6 +92,13 @@ export default {
|
|||
_mergeProps(fn, ...args) {
|
||||
return ObjectUtils.isFunction(fn) ? fn(...args) : mergeProps(...args);
|
||||
},
|
||||
_loadStyles() {
|
||||
BaseStyle.loadStyle(this.$styleOptions);
|
||||
this._loadGlobalStyles();
|
||||
|
||||
// apply theme settings
|
||||
Theme.init();
|
||||
},
|
||||
_loadGlobalStyles() {
|
||||
/*
|
||||
* @todo Add self custom css support;
|
||||
|
|
@ -153,6 +114,20 @@ export default {
|
|||
|
||||
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
|
||||
},
|
||||
_loadThemeStyles(theme) {
|
||||
// common
|
||||
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(theme, this.$themeParams) || {};
|
||||
|
||||
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
|
||||
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
|
||||
BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
|
||||
|
||||
// component
|
||||
const { variables, style } = this.$style?.getComponentThemeCSS?.(theme, this.$themeParams) || {};
|
||||
|
||||
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions });
|
||||
this.$style?.loadTheme(style, { useStyleOptions: this.$styleOptions });
|
||||
},
|
||||
_getHostInstance(instance) {
|
||||
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
|
||||
},
|
||||
|
|
@ -277,27 +252,9 @@ export default {
|
|||
isUnstyled() {
|
||||
return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
|
||||
},
|
||||
$globalTheme() {
|
||||
$theme() {
|
||||
return this.$config?.theme;
|
||||
},
|
||||
$globalThemeOptions() {
|
||||
return this.$globalTheme?.options;
|
||||
},
|
||||
$globalThemeExtend() {
|
||||
return this.$globalTheme?.extend;
|
||||
},
|
||||
$globalBaseTheme() {
|
||||
return ObjectUtils.getItemValue(this.$globalTheme?.base);
|
||||
},
|
||||
$globalBaseCTheme() {
|
||||
return ObjectUtils.getItemValue(this.$globalBaseTheme?.components?.[this.$style.name], this.$themeParams);
|
||||
},
|
||||
$globalPresetTheme() {
|
||||
return ObjectUtils.getItemValue(this.$globalTheme?.preset, { options: { ...this.$globalThemeOptions } });
|
||||
},
|
||||
$globalPresetCTheme() {
|
||||
return ObjectUtils.getItemValue(this.$globalPresetTheme?.components?.[this.$style.name], this.$themeParams);
|
||||
},
|
||||
$style() {
|
||||
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
|
||||
},
|
||||
|
|
@ -331,12 +288,7 @@ export default {
|
|||
$themeParams() {
|
||||
return {
|
||||
...this.$params,
|
||||
globalTheme: {
|
||||
base: { ...this.$globalBaseTheme },
|
||||
preset: { ...this.$globalPresetTheme },
|
||||
options: { ...this.$globalThemeOptions },
|
||||
extend: { ...this.$globalThemeExtend }
|
||||
}
|
||||
theme: this.$theme
|
||||
};
|
||||
},
|
||||
$_attrsPT() {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
import { toVariables } from 'primevue/themes';
|
||||
import Theme from 'primevue/themes';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
|
||||
|
|
@ -74,27 +74,31 @@ const BaseDirective = {
|
|||
_useDefaultPT: (instance = {}, defaultPT = {}, callback, key, params) => {
|
||||
return BaseDirective._usePT(instance, defaultPT, callback, key, params);
|
||||
},
|
||||
_loadGlobalThemeStyles: (instance = {}, useStyleOptions) => {
|
||||
const preset = instance.globalPresetCTheme();
|
||||
_loadStyles: (el, binding, vnode) => {
|
||||
const config = BaseDirective._getConfig(binding, vnode);
|
||||
|
||||
if (preset) {
|
||||
const { colorScheme, ...vRest } = preset;
|
||||
const { dark, ...csRest } = colorScheme || {};
|
||||
const vRest_css = ObjectUtils.isNotEmpty(vRest) ? toVariables({ [instance.$name]: vRest }).css : '';
|
||||
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ [instance.$name]: csRest }).css : '';
|
||||
const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ [instance.$name]: dark }, { selector: '.p-dark' }).css : '';
|
||||
const variables_css = `${vRest_css}${csRest_css}${dark_css}`;
|
||||
BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
|
||||
!el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
|
||||
|
||||
instance.$style?.loadTheme(`${variables_css}`, { name: `${instance.$name}-directive-variable`, useStyleOptions });
|
||||
}
|
||||
// apply theme settings
|
||||
Theme.init();
|
||||
BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
|
||||
},
|
||||
_loadThemeStyles: (instance = {}, useStyleOptions) => {
|
||||
const [theme, themeParams] = [instance.theme(), instance.themeParams()];
|
||||
|
||||
const base = instance.globalBaseCTheme();
|
||||
// common
|
||||
const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(theme, themeParams) || {};
|
||||
|
||||
if (base) {
|
||||
const { css } = base;
|
||||
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions });
|
||||
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions });
|
||||
BaseStyle.loadTheme(global, { name: 'global-style', useStyleOptions });
|
||||
|
||||
instance.$style?.loadTheme(`${css}`, { name: `${instance.$name}-directive-style`, useStyleOptions });
|
||||
}
|
||||
// component
|
||||
const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(theme, themeParams) || {};
|
||||
|
||||
instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, useStyleOptions });
|
||||
instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, useStyleOptions });
|
||||
},
|
||||
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
|
||||
const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
|
||||
|
|
@ -132,11 +136,8 @@ 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),
|
||||
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),
|
||||
theme: () => config?.theme,
|
||||
themeParams: () => ({ theme: el.$instance?.theme }),
|
||||
/* 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),
|
||||
|
|
@ -156,19 +157,11 @@ const BaseDirective = {
|
|||
handleHook('created', el, binding, vnode, prevVnode);
|
||||
},
|
||||
beforeMount: (el, binding, vnode, prevVnode) => {
|
||||
const config = BaseDirective._getConfig(binding, vnode);
|
||||
|
||||
BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
|
||||
!el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
|
||||
BaseDirective._loadGlobalThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
|
||||
BaseDirective._loadStyles(el, binding, vnode);
|
||||
handleHook('beforeMount', el, binding, vnode, prevVnode);
|
||||
},
|
||||
mounted: (el, binding, vnode, prevVnode) => {
|
||||
const config = BaseDirective._getConfig(binding, vnode);
|
||||
|
||||
BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
|
||||
!el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
|
||||
BaseDirective._loadGlobalThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
|
||||
BaseDirective._loadStyles(el, binding, vnode);
|
||||
handleHook('mounted', el, binding, vnode, prevVnode);
|
||||
},
|
||||
beforeUpdate: (el, binding, vnode, prevVnode) => {
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export default {};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"main": "./basetheme.cjs.js",
|
||||
"module": "./basetheme.esm.js",
|
||||
"unpkg": "./basetheme.min.js"
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export declare interface BaseThemeStyle {}
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
import { SharedUtils, dt, toVariables } from 'primevue/themes';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
getCommon(name, preset, base, params, theme) {
|
||||
let primitive_css, semantic_css, global_css;
|
||||
|
||||
if (ObjectUtils.isNotEmpty(preset)) {
|
||||
const { options, extend } = theme;
|
||||
const { primitive, semantic } = preset;
|
||||
const { colorScheme, ...sRest } = semantic || {};
|
||||
const { dark, ...csRest } = colorScheme || {};
|
||||
const { primitive: primitiveExt, semantic: semanticExt } = extend || {};
|
||||
const { colorScheme: colorSchemeExt, ...sRestExt } = semanticExt || {};
|
||||
const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
|
||||
const prim_css = ObjectUtils.isNotEmpty(primitive) ? this._toVariables({ primitive: { ...primitive, ...primitiveExt } }, options).declarations : '';
|
||||
const sRest_css = ObjectUtils.isNotEmpty(sRest) ? this._toVariables({ semantic: { ...sRest, ...sRestExt } }, options).declarations : '';
|
||||
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : '';
|
||||
const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : '';
|
||||
|
||||
primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options);
|
||||
semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options)}`;
|
||||
}
|
||||
|
||||
global_css = ObjectUtils.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
|
||||
|
||||
return {
|
||||
primitive: primitive_css,
|
||||
semantic: semantic_css,
|
||||
global: global_css
|
||||
};
|
||||
},
|
||||
getPresetC(name, presetCTheme = {}, theme) {
|
||||
const { options, extend } = theme;
|
||||
const { colorScheme, ...vRest } = presetCTheme;
|
||||
const { dark, ...csRest } = colorScheme || {};
|
||||
const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.components?.[name] || {};
|
||||
const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
|
||||
const vRest_css = ObjectUtils.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : '';
|
||||
const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : '';
|
||||
const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : '';
|
||||
|
||||
return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options)}${this._transformCSS(name, dark_css, 'dark', 'variable', options)}`;
|
||||
},
|
||||
getBaseC(name, baseCTheme = {}, params, theme) {
|
||||
const { options } = theme;
|
||||
const { css } = baseCTheme;
|
||||
const computed_css = ObjectUtils.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
|
||||
|
||||
return this._transformCSS(name, computed_css, undefined, 'style', options);
|
||||
},
|
||||
getCommonStyleSheet(name, theme = {}, params, props = {}) {
|
||||
const { preset, base } = theme;
|
||||
const common_css = this.getCommon(preset, base, params, theme);
|
||||
const _props = Object.entries(props)
|
||||
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
|
||||
.join(' ');
|
||||
|
||||
return Object.entries(common_css || {})
|
||||
.reduce((acc, [key, value]) => {
|
||||
if (value) {
|
||||
const _css = ObjectUtils.minifyCSS(value);
|
||||
|
||||
acc.push(`<style type="text/css" data-primevue-style-id="${key}" ${_props}>${_css}</style>`);
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, [])
|
||||
.join('');
|
||||
},
|
||||
getStyleSheet(name, theme = {}, params, props = {}) {
|
||||
const { preset, base } = theme;
|
||||
const presetCTheme = preset?.components?.[name];
|
||||
const baseCTheme = base?.components?.[name];
|
||||
const presetC_css = this.getPresetC(name, presetCTheme, theme);
|
||||
const baseC_css = this.getBaseC(name, baseCTheme, params, theme);
|
||||
const _props = Object.entries(props)
|
||||
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
|
||||
.join(' ');
|
||||
|
||||
let css = [];
|
||||
|
||||
presetC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${ObjectUtils.minifyCSS(presetC_css)}</style>`);
|
||||
baseC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-style" ${_props}>${ObjectUtils.minifyCSS(baseC_css)}</style>`);
|
||||
|
||||
return css.join('');
|
||||
},
|
||||
getColorSchemeOption(colorScheme) {
|
||||
let options = {
|
||||
light: {
|
||||
class: '',
|
||||
rule: `:root{[CSS]}`,
|
||||
default: false
|
||||
},
|
||||
dark: {
|
||||
class: 'p-dark',
|
||||
rule: `.p-dark{[CSS]}`,
|
||||
default: false
|
||||
}
|
||||
};
|
||||
|
||||
if (colorScheme) {
|
||||
if (ObjectUtils.isObject(colorScheme)) {
|
||||
options.light = { ...options.light, ...colorScheme.light };
|
||||
options.dark = { ...options.dark, ...colorScheme.dark };
|
||||
} else {
|
||||
options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
|
||||
options.dark = { ...options.dark, default: colorScheme === 'dark' };
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
_toVariables(theme, options) {
|
||||
return toVariables(theme, { prefix: options?.prefix });
|
||||
},
|
||||
_transformCSS(name, css, mode, type, options = {}) {
|
||||
const { layer, colorScheme } = options;
|
||||
|
||||
if (type !== 'style') {
|
||||
const colorSchemeOption = this.getColorSchemeOption(colorScheme);
|
||||
|
||||
mode = mode === 'dark' ? 'dark' : 'light';
|
||||
css = colorSchemeOption[mode]?.rule?.replace('[CSS]', css);
|
||||
}
|
||||
|
||||
if (layer) {
|
||||
let layerOptions = {
|
||||
name: 'primevue'
|
||||
//order: 'primevue' // @todo
|
||||
};
|
||||
|
||||
ObjectUtils.isObject(layer) && (layerOptions.name = ObjectUtils.getItemValue(layer.name, { name, type }));
|
||||
css = ObjectUtils.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
|
||||
}
|
||||
|
||||
return css;
|
||||
}
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"main": "./basethemestyle.cjs.js",
|
||||
"module": "./basethemestyle.esm.js",
|
||||
"unpkg": "./basethemestyle.min.js",
|
||||
"types": "./BaseThemeStyle.d.ts"
|
||||
}
|
||||
|
|
@ -1,67 +1,107 @@
|
|||
import { SharedUtils, ThemeService } from 'primevue/themes';
|
||||
|
||||
const ServiceSymbol = Symbol();
|
||||
import { ThemeUtils } from 'primevue/themes';
|
||||
|
||||
export default {
|
||||
defaults: {
|
||||
variable: {
|
||||
prefix: '',
|
||||
selector: ':root',
|
||||
excludedKeyRegex: /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states)$/gi
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
class: '',
|
||||
rule: `:root{[CSS]}`,
|
||||
default: false
|
||||
},
|
||||
dark: {
|
||||
class: 'p-dark',
|
||||
rule: `.p-dark{[CSS]}`,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
layer: {
|
||||
name: 'primevue'
|
||||
//order: 'primevue' // @todo
|
||||
}
|
||||
},
|
||||
_pConfig: undefined,
|
||||
_colorScheme: 'dark',
|
||||
_initializeColorScheme: false,
|
||||
_theme: undefined,
|
||||
_initialized: false,
|
||||
_currentColorScheme: 'light',
|
||||
init() {
|
||||
if (!this._initialized) {
|
||||
this.applyColorScheme();
|
||||
}
|
||||
|
||||
this._initialized = true;
|
||||
},
|
||||
get theme() {
|
||||
return this._theme || this._pConfig?.theme;
|
||||
},
|
||||
get base() {
|
||||
return this.theme?.base || {};
|
||||
},
|
||||
get preset() {
|
||||
return this.theme?.preset || {};
|
||||
},
|
||||
get options() {
|
||||
return this.theme?.options || {};
|
||||
},
|
||||
get extend() {
|
||||
return this.theme?.extend || {};
|
||||
},
|
||||
getPConfig() {
|
||||
return this._pConfig;
|
||||
},
|
||||
setPConfig(newValue) {
|
||||
this._pConfig = newValue;
|
||||
ThemeService.emit(ServiceSymbol, this._pConfig);
|
||||
},
|
||||
onPConfigChange(callback) {
|
||||
ThemeService.on(ServiceSymbol, callback);
|
||||
setTheme(newValue) {
|
||||
this._theme = newValue;
|
||||
},
|
||||
getColorScheme() {
|
||||
return this._colorScheme;
|
||||
getCurrentColorScheme() {
|
||||
return this._currentColorScheme;
|
||||
},
|
||||
setColorScheme(newValue) {
|
||||
this._colorScheme = newValue;
|
||||
setCurrentColorScheme(newValue) {
|
||||
this._currentColorScheme = newValue;
|
||||
},
|
||||
isColorSchemeInit() {
|
||||
return this._initializeColorScheme;
|
||||
},
|
||||
setColorSchemeInit(newValue) {
|
||||
this._initializeColorScheme = newValue;
|
||||
applyColorScheme() {
|
||||
const newColorScheme = ThemeUtils.applyColorScheme(this.options, this.getCurrentColorScheme(), this.defaults);
|
||||
|
||||
this.setCurrentColorScheme(newColorScheme);
|
||||
|
||||
return newColorScheme;
|
||||
},
|
||||
toggleColorScheme() {
|
||||
this._colorScheme = this._colorScheme === 'dark' ? 'light' : 'dark';
|
||||
const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined;
|
||||
const newColorScheme = ThemeUtils.toggleColorScheme(this.options, this.getCurrentColorScheme(), this.defaults);
|
||||
|
||||
if (defaultDocument) {
|
||||
//@todo
|
||||
const { colorScheme } = this._pConfig?.theme?.options;
|
||||
let options = {
|
||||
light: {
|
||||
class: '',
|
||||
rule: `:root{[CSS]}`,
|
||||
default: false
|
||||
},
|
||||
dark: {
|
||||
class: 'p-dark',
|
||||
rule: `.p-dark{[CSS]}`,
|
||||
default: false
|
||||
}
|
||||
};
|
||||
this.setCurrentColorScheme(newColorScheme);
|
||||
|
||||
if (colorScheme) {
|
||||
if (SharedUtils.object.isObject(colorScheme)) {
|
||||
options.light = { ...options.light, ...colorScheme.light };
|
||||
options.dark = { ...options.dark, ...colorScheme.dark };
|
||||
} else {
|
||||
options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
|
||||
options.dark = { ...options.dark, default: colorScheme === 'dark' };
|
||||
}
|
||||
}
|
||||
return newColorScheme;
|
||||
},
|
||||
getCommonCSS(name = '', theme, params) {
|
||||
return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults });
|
||||
},
|
||||
getComponentCSS(name = '', theme, params) {
|
||||
const options = { name, theme: theme || this.theme, params, defaults: this.defaults };
|
||||
|
||||
SharedUtils.dom.removeMultipleClasses(defaultDocument.documentElement, [options.dark.class, options.light.class]);
|
||||
SharedUtils.dom.addClass(defaultDocument.documentElement, this._colorScheme === 'dark' ? options.dark.class : options.light.class);
|
||||
}
|
||||
return {
|
||||
style: ThemeUtils.getBaseC(options),
|
||||
variables: ThemeUtils.getPresetC(options)
|
||||
};
|
||||
},
|
||||
getDirectiveCSS(name = '', theme, params) {
|
||||
const options = { name, theme: theme || this.theme, params, defaults: this.defaults };
|
||||
|
||||
return this._colorMode;
|
||||
return {
|
||||
style: ThemeUtils.getBaseD(options),
|
||||
variables: ThemeUtils.getPresetD(options)
|
||||
};
|
||||
},
|
||||
getCommonStyleSheet(name = '', theme, params, props = {}) {
|
||||
return ThemeUtils.getCommonStyleSheet(name, theme, params, props);
|
||||
},
|
||||
getStyleSheet(name, theme = {}, params, props = {}) {
|
||||
return ThemeUtils.getStyleSheet(name, theme, params, props);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Theme, { SharedUtils } from 'primevue/themes';
|
||||
|
||||
const EXCLUDED_KEY_REGEX = /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states)$/gi;
|
||||
const VARIABLE = Theme.defaults.variable;
|
||||
|
||||
export const $dt = (tokenPath) => {
|
||||
const config = Theme.getPConfig();
|
||||
|
|
@ -15,7 +15,7 @@ export const dt = (theme = {}, tokenPath) => {
|
|||
const token = SharedUtils.object.test(regex, tokenPath) ? tokenPath : `{${tokenPath}}`;
|
||||
const isStrictTransform = transform === 'strict'; // @todo - TRANSFORM: strict | lenient
|
||||
|
||||
return isStrictTransform ? SharedUtils.object.getComputedValue(theme?.preset, token, [EXCLUDED_KEY_REGEX]) : SharedUtils.object.getVariableValue(token, undefined, prefix, [EXCLUDED_KEY_REGEX]);
|
||||
return isStrictTransform ? SharedUtils.object.getComputedValue(theme?.preset, token, [VARIABLE.excludedKeyRegex]) : SharedUtils.object.getVariableValue(token, undefined, prefix, [VARIABLE.excludedKeyRegex]);
|
||||
}
|
||||
|
||||
return '';
|
||||
|
|
|
|||
|
|
@ -2,5 +2,6 @@ export * from './color';
|
|||
export * from './dt';
|
||||
export { default as ThemeService } from './service';
|
||||
export { default as SharedUtils } from './sharedUtils';
|
||||
export { default as ThemeUtils } from './themeUtils';
|
||||
export { default as toVariables } from './toVariables';
|
||||
export { default as useColorScheme } from './useColorScheme';
|
||||
|
|
|
|||
|
|
@ -138,6 +138,17 @@ export default {
|
|||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
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;
|
||||
}
|
||||
},
|
||||
dom: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,179 @@
|
|||
import { SharedUtils, dt, toVariables } from 'primevue/themes';
|
||||
|
||||
export default {
|
||||
getCommon({ name = '', theme = {}, params, defaults }) {
|
||||
const { base, preset } = theme;
|
||||
let primitive_css, semantic_css, global_css;
|
||||
|
||||
if (SharedUtils.object.isNotEmpty(preset)) {
|
||||
const { options, extend } = theme;
|
||||
const { primitive, semantic } = preset;
|
||||
const { colorScheme, ...sRest } = semantic || {};
|
||||
const { dark, ...csRest } = colorScheme || {};
|
||||
const { primitive: primitiveExt, semantic: semanticExt } = extend || {};
|
||||
const { colorScheme: colorSchemeExt, ...sRestExt } = semanticExt || {};
|
||||
const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
|
||||
const prim_css = SharedUtils.object.isNotEmpty(primitive) ? this._toVariables({ primitive: { ...primitive, ...primitiveExt } }, options).declarations : '';
|
||||
const sRest_css = SharedUtils.object.isNotEmpty(sRest) ? this._toVariables({ semantic: { ...sRest, ...sRestExt } }, options).declarations : '';
|
||||
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : '';
|
||||
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : '';
|
||||
|
||||
primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, defaults);
|
||||
semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, defaults)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, defaults)}`;
|
||||
}
|
||||
|
||||
global_css = SharedUtils.object.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
|
||||
|
||||
return {
|
||||
primitive: primitive_css,
|
||||
semantic: semantic_css,
|
||||
global: global_css
|
||||
};
|
||||
},
|
||||
getPresetC({ name = '', theme = {}, params, defaults }) {
|
||||
const { preset, options, extend } = theme;
|
||||
const { colorScheme, ...vRest } = preset?.components?.[name] || {};
|
||||
const { dark, ...csRest } = colorScheme || {};
|
||||
const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.components?.[name] || {};
|
||||
const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
|
||||
const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : '';
|
||||
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : '';
|
||||
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : '';
|
||||
|
||||
return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`;
|
||||
},
|
||||
getBaseC({ name = '', theme = {}, params, defaults }) {
|
||||
const { base, options } = theme;
|
||||
const { css } = base?.components?.[name] || {};
|
||||
const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
|
||||
|
||||
return this._transformCSS(name, computed_css, undefined, 'style', options, defaults);
|
||||
},
|
||||
getPresetD({ name = '', theme = {}, params, defaults }) {
|
||||
const { preset, options, extend } = theme;
|
||||
const { colorScheme, ...vRest } = preset?.directives?.[name] || {};
|
||||
const { dark, ...csRest } = colorScheme || {};
|
||||
const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.directives?.[name] || {};
|
||||
const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
|
||||
const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : '';
|
||||
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : '';
|
||||
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : '';
|
||||
|
||||
return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`;
|
||||
},
|
||||
getBaseD({ name = '', theme = {}, params, defaults }) {
|
||||
const { base, options } = theme;
|
||||
const { css } = base?.directives?.[name] || {};
|
||||
const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
|
||||
|
||||
return this._transformCSS(name, computed_css, undefined, 'style', options, defaults);
|
||||
},
|
||||
getColorSchemeOption(colorScheme, defaults) {
|
||||
let options = { ...defaults.colorScheme };
|
||||
|
||||
if (colorScheme) {
|
||||
if (SharedUtils.object.isObject(colorScheme)) {
|
||||
options.light = { ...options.light, ...colorScheme.light };
|
||||
options.dark = { ...options.dark, ...colorScheme.dark };
|
||||
} else {
|
||||
options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
|
||||
options.dark = { ...options.dark, default: colorScheme === 'dark' };
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
applyColorScheme(options = {}, currentColorScheme, defaults) {
|
||||
if (options.colorScheme) {
|
||||
const colorSchemeOption = this.getColorSchemeOption(options.colorScheme, defaults);
|
||||
const isClient = SharedUtils.dom.isClient();
|
||||
const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default;
|
||||
const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)').matches : colorSchemeOption.dark?.default;
|
||||
const defaultDocument = isClient ? window.document : undefined;
|
||||
|
||||
if (isDark && defaultDocument) {
|
||||
SharedUtils.dom.addClass(defaultDocument.documentElement, colorSchemeOption.dark?.class);
|
||||
}
|
||||
|
||||
return isDark ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
return currentColorScheme;
|
||||
},
|
||||
toggleColorScheme(options = {}, currentColorScheme, defaults) {
|
||||
const newColorScheme = currentColorScheme === 'dark' ? 'light' : 'dark';
|
||||
const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined;
|
||||
|
||||
if (defaultDocument) {
|
||||
const colorSchemeOption = this.getColorSchemeOption(options.colorScheme, defaults);
|
||||
const [lightClass, darkClass] = [colorSchemeOption.light.class, colorSchemeOption.dark.class];
|
||||
|
||||
SharedUtils.dom.removeMultipleClasses(defaultDocument.documentElement, [lightClass, darkClass]);
|
||||
SharedUtils.dom.addClass(defaultDocument.documentElement, newColorScheme === 'dark' ? darkClass : lightClass);
|
||||
}
|
||||
|
||||
return newColorScheme;
|
||||
},
|
||||
getCommonStyleSheet(name, theme = {}, params, props = {}) {
|
||||
const { preset, base } = theme;
|
||||
const common_css = this.getCommon(preset, base, params, theme);
|
||||
const _props = Object.entries(props)
|
||||
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
|
||||
.join(' ');
|
||||
|
||||
return Object.entries(common_css || {})
|
||||
.reduce((acc, [key, value]) => {
|
||||
if (value) {
|
||||
const _css = SharedUtils.object.minifyCSS(value);
|
||||
|
||||
acc.push(`<style type="text/css" data-primevue-style-id="${key}" ${_props}>${_css}</style>`);
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, [])
|
||||
.join('');
|
||||
},
|
||||
getStyleSheet(name, theme = {}, params, props = {}) {
|
||||
const { preset, base } = theme;
|
||||
const presetCTheme = preset?.components?.[name];
|
||||
const baseCTheme = base?.components?.[name];
|
||||
const presetC_css = this.getPresetC(name, presetCTheme, theme);
|
||||
const baseC_css = this.getBaseC(name, baseCTheme, params, theme);
|
||||
const _props = Object.entries(props)
|
||||
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
|
||||
.join(' ');
|
||||
|
||||
let css = [];
|
||||
|
||||
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('');
|
||||
},
|
||||
_toVariables(theme, options) {
|
||||
return toVariables(theme, { prefix: options?.prefix });
|
||||
},
|
||||
_transformCSS(name, css, mode, type, options = {}, defaults) {
|
||||
if (SharedUtils.object.isNotEmpty(css)) {
|
||||
const { layer, colorScheme } = options;
|
||||
|
||||
if (type !== 'style') {
|
||||
const colorSchemeOption = this.getColorSchemeOption(colorScheme, defaults);
|
||||
|
||||
mode = mode === 'dark' ? 'dark' : 'light';
|
||||
css = colorSchemeOption[mode]?.rule?.replace('[CSS]', css);
|
||||
}
|
||||
|
||||
if (layer) {
|
||||
let layerOptions = { ...defaults.layer };
|
||||
|
||||
SharedUtils.object.isObject(layer) && (layerOptions.name = SharedUtils.object.getItemValue(layer.name, { name, type }));
|
||||
css = SharedUtils.object.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
|
||||
}
|
||||
|
||||
return css;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
|
@ -1,13 +1,9 @@
|
|||
import SharedUtils from './sharedUtils';
|
||||
import Theme, { SharedUtils } from 'primevue/themes';
|
||||
|
||||
const VARIABLE = {
|
||||
PREFIX: '',
|
||||
SELECTOR: ':root',
|
||||
EXCLUDED_KEY_REGEX: /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states)$/gi
|
||||
};
|
||||
const VARIABLE = Theme.defaults.variable;
|
||||
|
||||
export default function (theme, options = {}) {
|
||||
const { prefix = VARIABLE.PREFIX, selector = VARIABLE.SELECTOR, excludedKeyRegex = VARIABLE.EXCLUDED_KEY_REGEX } = options;
|
||||
const { prefix = VARIABLE.prefix, selector = VARIABLE.selector, excludedKeyRegex = VARIABLE.excludedKeyRegex } = options;
|
||||
|
||||
const _toVariables = (_theme, _prefix = '') => {
|
||||
return Object.entries(_theme).reduce((acc, [key, value]) => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Theme from 'primevue/themes';
|
|||
|
||||
export default () => {
|
||||
return {
|
||||
colorScheme: Theme.getColorScheme(),
|
||||
colorScheme: Theme.getCurrentColorScheme(),
|
||||
toggleColorScheme() {
|
||||
this.colorScheme = Theme.toggleColorScheme();
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import path from 'path';
|
|||
|
||||
const STYLE_ALIAS = {
|
||||
'primevue/base/style': path.resolve(__dirname, './components/lib/base/style/BaseStyle.js'),
|
||||
'primevue/basetheme/style': path.resolve(__dirname, './components/lib/basetheme/style/BaseThemeStyle.js'),
|
||||
'primevue/basecomponent/style': path.resolve(__dirname, './components/lib/basecomponent/style/BaseComponentStyle.js'),
|
||||
'primevue/accordion/style': path.resolve(__dirname, './components/lib/accordion/style/AccordionStyle.js'),
|
||||
'primevue/accordiontab/style': path.resolve(__dirname, './components/lib/accordiontab/style/AccordionTabStyle.js'),
|
||||
|
|
@ -272,7 +271,6 @@ export default {
|
|||
...STYLE_ALIAS,
|
||||
...THEME_ALIAS,
|
||||
'primevue/base': path.resolve(__dirname, './components/lib/base/Base.js'),
|
||||
'primevue/basetheme': path.resolve(__dirname, './components/lib/basetheme/BaseTheme.js'),
|
||||
'primevue/basedirective': path.resolve(__dirname, './components/lib/basedirective/BaseDirective.js'),
|
||||
'primevue/ripple': path.resolve(__dirname, './components/lib/ripple/Ripple.js'),
|
||||
'primevue/tooltip': path.resolve(__dirname, './components/lib/tooltip/Tooltip.js'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue