Fixed #6408 - Scoped style (dt props) does not attach to page with correct selector
parent
886f5f3cf5
commit
335c6d862d
|
@ -2,9 +2,9 @@
|
||||||
import { Theme, ThemeService } from '@primeuix/styled';
|
import { Theme, ThemeService } from '@primeuix/styled';
|
||||||
import { findSingle } from '@primeuix/utils/dom';
|
import { findSingle } from '@primeuix/utils/dom';
|
||||||
import { getKeyValue, isArray, isFunction, isNotEmpty, isString, resolve, toFlatCase } from '@primeuix/utils/object';
|
import { getKeyValue, isArray, isFunction, isNotEmpty, isString, resolve, toFlatCase } from '@primeuix/utils/object';
|
||||||
|
import { uuid } from '@primeuix/utils/uuid';
|
||||||
import Base from '@primevue/core/base';
|
import Base from '@primevue/core/base';
|
||||||
import BaseStyle from '@primevue/core/base/style';
|
import BaseStyle from '@primevue/core/base/style';
|
||||||
import { UniqueComponentId } from '@primevue/core/utils';
|
|
||||||
import { mergeProps } from 'vue';
|
import { mergeProps } from 'vue';
|
||||||
import BaseComponentStyle from './style/BaseComponentStyle';
|
import BaseComponentStyle from './style/BaseComponentStyle';
|
||||||
|
|
||||||
|
@ -57,7 +57,9 @@ export default {
|
||||||
},
|
},
|
||||||
scopedStyleEl: undefined,
|
scopedStyleEl: undefined,
|
||||||
rootEl: undefined,
|
rootEl: undefined,
|
||||||
|
$attrSelector: undefined,
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
|
this.$attrSelector = uuid('pc');
|
||||||
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;
|
||||||
const value = _usept ? this.pt?.value?.[this.$.type.name] : this.pt;
|
const value = _usept ? this.pt?.value?.[this.$.type.name] : this.pt;
|
||||||
|
@ -83,7 +85,7 @@ export default {
|
||||||
|
|
||||||
if (this.rootEl) {
|
if (this.rootEl) {
|
||||||
this.rootEl.setAttribute(this.$attrSelector, '');
|
this.rootEl.setAttribute(this.$attrSelector, '');
|
||||||
this.rootEl.$pc = { name: this.$.type.name, ...this.$params };
|
this.rootEl.$pc = { name: this.$.type.name, attrSelector: this.$attrSelector, ...this.$params };
|
||||||
}
|
}
|
||||||
|
|
||||||
this._hook('onMounted');
|
this._hook('onMounted');
|
||||||
|
@ -370,9 +372,6 @@ export default {
|
||||||
|
|
||||||
return acc;
|
return acc;
|
||||||
}, {});
|
}, {});
|
||||||
},
|
|
||||||
$attrSelector() {
|
|
||||||
return UniqueComponentId('pc');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import { Theme, ThemeService } from '@primeuix/styled';
|
import { Theme, ThemeService } from '@primeuix/styled';
|
||||||
import { getKeyValue, isArray, isEmpty, isFunction, isObject, isString, resolve, toCapitalCase, toFlatCase } from '@primeuix/utils/object';
|
import { getKeyValue, isArray, isEmpty, isFunction, isObject, isString, resolve, toCapitalCase, toFlatCase } from '@primeuix/utils/object';
|
||||||
|
import { uuid } from '@primeuix/utils/uuid';
|
||||||
import Base from '@primevue/core/base';
|
import Base from '@primevue/core/base';
|
||||||
import BaseStyle from '@primevue/core/base/style';
|
import BaseStyle from '@primevue/core/base/style';
|
||||||
import PrimeVueService from '@primevue/core/service';
|
import PrimeVueService from '@primevue/core/service';
|
||||||
import { UniqueComponentId } from '@primevue/core/utils';
|
|
||||||
import { mergeProps } from 'vue';
|
import { mergeProps } from 'vue';
|
||||||
|
|
||||||
const BaseDirective = {
|
const BaseDirective = {
|
||||||
|
@ -166,7 +166,7 @@ const BaseDirective = {
|
||||||
$el: $prevInstance['$el'] || el || undefined,
|
$el: $prevInstance['$el'] || el || undefined,
|
||||||
$style: { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...options?.style },
|
$style: { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...options?.style },
|
||||||
$primevueConfig: config,
|
$primevueConfig: config,
|
||||||
$attrSelector: el.$attrSelector,
|
$attrSelector: el.$pd?.[name]?.attrSelector,
|
||||||
/* computed instance variables */
|
/* computed instance variables */
|
||||||
defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
|
defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
|
||||||
isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
|
isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
|
||||||
|
@ -203,10 +203,11 @@ const BaseDirective = {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
created: (el, binding, vnode, prevVnode) => {
|
created: (el, binding, vnode, prevVnode) => {
|
||||||
|
el.$pd ||= {};
|
||||||
|
el.$pd[name] = { name, attrSelector: uuid('pd') };
|
||||||
handleHook('created', el, binding, vnode, prevVnode);
|
handleHook('created', el, binding, vnode, prevVnode);
|
||||||
},
|
},
|
||||||
beforeMount: (el, binding, vnode, prevVnode) => {
|
beforeMount: (el, binding, vnode, prevVnode) => {
|
||||||
el.$attrSelector = UniqueComponentId('pd');
|
|
||||||
BaseDirective._loadStyles(el, binding, vnode);
|
BaseDirective._loadStyles(el, binding, vnode);
|
||||||
handleHook('beforeMount', el, binding, vnode, prevVnode);
|
handleHook('beforeMount', el, binding, vnode, prevVnode);
|
||||||
handleWatch(el);
|
handleWatch(el);
|
||||||
|
|
Loading…
Reference in New Issue