vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Theming API: Add dt props to all component

Browse source
This commit is contained in:
mertsincan 2024-04-01 14:08:53 +01:00
parent 3589ef9e38
commit 7c299f55f9
6 changed files with 61 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components/lib/basecomponent/BaseComponent.vue
View file

@ -1,7 +1,7 @@
<script>
import BaseStyle from 'primevue/base/style';
import Theme, { ThemeService } from 'primevue/themes';
import { ObjectUtils } from 'primevue/utils';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle';
@ -19,6 +19,10 @@ export default {
unstyled: {
type: Boolean,
default: undefined
},
dt: {
type: Object,
default: undefined
}
},
inject: {
@ -38,8 +42,17 @@ export default {
this._loadThemeStyles();
}
}
},
dt: {
immediate: true,
handler(newValue) {
if (newValue) {
this._loadScopedThemeStyles(newValue);
}
}
}
},
scopedStyleEl: undefined,
beforeCreate() {
const _usept = this.pt?.['_usept'];
const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
@ -61,6 +74,9 @@ export default {
this._hook('onBeforeMount');
},
mounted() {
const rootElement = DomHandler.findSingle(this.$el, `[data-pc-name="${ObjectUtils.toFlatCase(this.$.type.name)}"]`);
rootElement?.setAttribute(this.$attrSelector, '');
this._hook('onMounted');
},
beforeUpdate() {
@ -73,6 +89,7 @@ export default {
this._hook('onBeforeUnmount');
},
unmounted() {
this.scopedStyleEl?.value?.remove();
this._hook('onUnmounted');
},
methods: {
@ -143,6 +160,12 @@ export default {
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) {
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;
}, {});
},
$attrSelector() {
return UniqueComponentId('pc');
}
}
};