Theming API: Add `dt` props to all component
parent
3589ef9e38
commit
7c299f55f9
|
@ -49,6 +49,9 @@ export default {
|
||||||
getDirectiveThemeCSS(params) {
|
getDirectiveThemeCSS(params) {
|
||||||
return Theme.getDirectiveCSS(this.name, params);
|
return Theme.getDirectiveCSS(this.name, params);
|
||||||
},
|
},
|
||||||
|
getPresetThemeCSS(preset, selector, params) {
|
||||||
|
return Theme.getPresetCSS(this.name, preset, selector, params);
|
||||||
|
},
|
||||||
getLayerOrderThemeCSS() {
|
getLayerOrderThemeCSS() {
|
||||||
return Theme.getLayerOrderCSS(this.name);
|
return Theme.getLayerOrderCSS(this.name);
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
import Theme, { ThemeService } from 'primevue/themes';
|
import Theme, { ThemeService } from 'primevue/themes';
|
||||||
import { ObjectUtils } from 'primevue/utils';
|
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
||||||
import { mergeProps } from 'vue';
|
import { mergeProps } from 'vue';
|
||||||
import BaseComponentStyle from './style/BaseComponentStyle';
|
import BaseComponentStyle from './style/BaseComponentStyle';
|
||||||
|
|
||||||
|
@ -19,6 +19,10 @@ export default {
|
||||||
unstyled: {
|
unstyled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: undefined
|
default: undefined
|
||||||
|
},
|
||||||
|
dt: {
|
||||||
|
type: Object,
|
||||||
|
default: undefined
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
inject: {
|
inject: {
|
||||||
|
@ -38,8 +42,17 @@ export default {
|
||||||
this._loadThemeStyles();
|
this._loadThemeStyles();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
dt: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newValue) {
|
||||||
|
if (newValue) {
|
||||||
|
this._loadScopedThemeStyles(newValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
scopedStyleEl: undefined,
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
const _usept = this.pt?.['_usept'];
|
const _usept = this.pt?.['_usept'];
|
||||||
const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
|
const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
|
||||||
|
@ -61,6 +74,9 @@ export default {
|
||||||
this._hook('onBeforeMount');
|
this._hook('onBeforeMount');
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
const rootElement = DomHandler.findSingle(this.$el, `[data-pc-name="${ObjectUtils.toFlatCase(this.$.type.name)}"]`);
|
||||||
|
|
||||||
|
rootElement?.setAttribute(this.$attrSelector, '');
|
||||||
this._hook('onMounted');
|
this._hook('onMounted');
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
beforeUpdate() {
|
||||||
|
@ -73,6 +89,7 @@ export default {
|
||||||
this._hook('onBeforeUnmount');
|
this._hook('onBeforeUnmount');
|
||||||
},
|
},
|
||||||
unmounted() {
|
unmounted() {
|
||||||
|
this.scopedStyleEl?.value?.remove();
|
||||||
this._hook('onUnmounted');
|
this._hook('onUnmounted');
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -143,6 +160,12 @@ export default {
|
||||||
Theme.setLoadedStyleName('layer-order');
|
Theme.setLoadedStyleName('layer-order');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
_loadScopedThemeStyles(preset) {
|
||||||
|
const variables = this.$style?.getPresetThemeCSS?.(preset, `[${this.$attrSelector}]`) || {};
|
||||||
|
const scopedStyle = this.$style?.loadTheme(variables, { name: `${this.$attrSelector}-${this.$style.name}`, ...this.$styleOptions });
|
||||||
|
|
||||||
|
this.scopedStyleEl = scopedStyle.el;
|
||||||
|
},
|
||||||
_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;
|
||||||
},
|
},
|
||||||
|
@ -322,6 +345,9 @@ export default {
|
||||||
|
|
||||||
return acc;
|
return acc;
|
||||||
}, {});
|
}, {});
|
||||||
|
},
|
||||||
|
$attrSelector() {
|
||||||
|
return UniqueComponentId('pc');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -108,6 +108,11 @@ export default {
|
||||||
variables: ThemeUtils.getPresetD(options)
|
variables: ThemeUtils.getPresetD(options)
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
getPresetCSS(name = '', preset, selector, params) {
|
||||||
|
const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
|
||||||
|
|
||||||
|
return 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);
|
||||||
},
|
},
|
||||||
|
|
|
@ -71,19 +71,24 @@ export default {
|
||||||
global: global_css
|
global: global_css
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getPresetC({ name = '', theme = {}, params, set, defaults }) {
|
getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
|
||||||
const { preset, options } = theme;
|
const { colorScheme, ...vRest } = preset;
|
||||||
const { colorScheme, ...vRest } = preset?.components?.[name] || {};
|
|
||||||
const { dark, ...csRest } = colorScheme || {};
|
const { dark, ...csRest } = colorScheme || {};
|
||||||
const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: vRest }, options).declarations : '';
|
const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: vRest }, options).declarations : '';
|
||||||
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);
|
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);
|
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}`;
|
||||||
},
|
},
|
||||||
|
getPresetC({ name = '', theme = {}, params, set, defaults }) {
|
||||||
|
const { preset, options } = theme;
|
||||||
|
const cPreset = preset?.components?.[name];
|
||||||
|
|
||||||
|
return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
|
||||||
|
},
|
||||||
getBaseC({ name = '', theme = {}, params, set, defaults }) {
|
getBaseC({ name = '', theme = {}, params, set, defaults }) {
|
||||||
const { base, options } = theme;
|
const { base, options } = theme;
|
||||||
const { css } = base?.components?.[name] || {};
|
const { css } = base?.components?.[name] || {};
|
||||||
|
@ -94,16 +99,9 @@ export default {
|
||||||
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;
|
||||||
const { colorScheme, ...vRest } = preset?.directives?.[dName] || {};
|
const dPreset = preset?.directives?.[dName];
|
||||||
const { dark, ...csRest } = colorScheme || {};
|
|
||||||
const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [dName]: vRest }, options).declarations : '';
|
|
||||||
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [dName]: csRest }, options).declarations : '';
|
|
||||||
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [dName]: dark }, options).declarations : '';
|
|
||||||
|
|
||||||
const light_variable_css = this._transformCSS(dName, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults);
|
return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
|
||||||
const dark_variable_css = this._transformCSS(dName, dark_css, 'dark', 'variable', options, set, defaults);
|
|
||||||
|
|
||||||
return `${light_variable_css}${dark_variable_css}`;
|
|
||||||
},
|
},
|
||||||
getBaseD({ name = '', theme = {}, params, set, defaults }) {
|
getBaseD({ name = '', theme = {}, params, set, defaults }) {
|
||||||
const dName = name.replace('-directive', '');
|
const dName = name.replace('-directive', '');
|
||||||
|
@ -235,23 +233,24 @@ export default {
|
||||||
_toVariables(theme, options) {
|
_toVariables(theme, options) {
|
||||||
return toVariables(theme, { prefix: options?.prefix });
|
return toVariables(theme, { prefix: options?.prefix });
|
||||||
},
|
},
|
||||||
_transformCSS(name, css, mode, type, options = {}, set, defaults) {
|
_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;
|
||||||
|
|
||||||
if (type !== 'style') {
|
if (type !== 'style') {
|
||||||
const colorSchemeOption = this.getColorSchemeOption(options, defaults);
|
const colorSchemeOption = this.getColorSchemeOption(options, defaults);
|
||||||
|
const _css = selector ? SharedUtils.object.getRule(selector, css) : css;
|
||||||
|
|
||||||
css =
|
css =
|
||||||
mode === 'dark'
|
mode === 'dark'
|
||||||
? colorSchemeOption.reduce((acc, { selector }) => {
|
? colorSchemeOption.reduce((acc, { selector: _selector }) => {
|
||||||
if (SharedUtils.object.isNotEmpty(selector)) {
|
if (SharedUtils.object.isNotEmpty(_selector)) {
|
||||||
acc += selector.includes('[CSS]') ? selector.replace('[CSS]', css) : SharedUtils.object.getRule(selector, css);
|
acc += _selector.includes('[CSS]') ? _selector.replace('[CSS]', _css) : SharedUtils.object.getRule(_selector, _css);
|
||||||
}
|
}
|
||||||
|
|
||||||
return acc;
|
return acc;
|
||||||
}, '')
|
}, '')
|
||||||
: SharedUtils.object.getRule(':root', css);
|
: SharedUtils.object.getRule(selector ?? ':root', css);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (cssLayer) {
|
if (cssLayer) {
|
||||||
|
|
|
@ -180,7 +180,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
findSingle(element, selector) {
|
findSingle(element, selector) {
|
||||||
return this.isElement(element) ? element.querySelector(selector) : null;
|
return this.isElement(element) ? (element.matches(selector) ? element : element.querySelector(selector)) : null;
|
||||||
},
|
},
|
||||||
|
|
||||||
createElement(type, attributes = {}, ...children) {
|
createElement(type, attributes = {}, ...children) {
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
var lastId = 0;
|
const lastIds = {};
|
||||||
|
|
||||||
export default function (prefix = 'pv_id_') {
|
export default function (prefix = 'pv_id_') {
|
||||||
lastId++;
|
if (!lastIds.hasOwnProperty(prefix)) {
|
||||||
|
lastIds[prefix] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
return `${prefix}${lastId}`;
|
lastIds[prefix]++;
|
||||||
|
|
||||||
|
return `${prefix}${lastIds[prefix]}`;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue