From 335c6d862da08b6e87b89c1ef972001f66e3f754 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Mon, 16 Sep 2024 13:05:37 +0100
Subject: [PATCH] Fixed #6408 - Scoped style (dt props) does not attach to page
 with correct selector

---
 packages/core/src/basecomponent/BaseComponent.vue | 9 ++++-----
 packages/core/src/basedirective/BaseDirective.js  | 7 ++++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/basecomponent/BaseComponent.vue b/packages/core/src/basecomponent/BaseComponent.vue
index 28c941db2..eda960a14 100644
--- a/packages/core/src/basecomponent/BaseComponent.vue
+++ b/packages/core/src/basecomponent/BaseComponent.vue
@@ -2,9 +2,9 @@
 import { Theme, ThemeService } from '@primeuix/styled';
 import { findSingle } from '@primeuix/utils/dom';
 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 BaseStyle from '@primevue/core/base/style';
-import { UniqueComponentId } from '@primevue/core/utils';
 import { mergeProps } from 'vue';
 import BaseComponentStyle from './style/BaseComponentStyle';
 
@@ -57,7 +57,9 @@ export default {
     },
     scopedStyleEl: undefined,
     rootEl: undefined,
+    $attrSelector: undefined,
     beforeCreate() {
+        this.$attrSelector = uuid('pc');
         const _usept = this.pt?.['_usept'];
         const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
         const value = _usept ? this.pt?.value?.[this.$.type.name] : this.pt;
@@ -83,7 +85,7 @@ export default {
 
         if (this.rootEl) {
             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');
@@ -370,9 +372,6 @@ export default {
 
                     return acc;
                 }, {});
-        },
-        $attrSelector() {
-            return UniqueComponentId('pc');
         }
     }
 };
diff --git a/packages/core/src/basedirective/BaseDirective.js b/packages/core/src/basedirective/BaseDirective.js
index 416497da7..de5831c31 100644
--- a/packages/core/src/basedirective/BaseDirective.js
+++ b/packages/core/src/basedirective/BaseDirective.js
@@ -1,9 +1,9 @@
 import { Theme, ThemeService } from '@primeuix/styled';
 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 BaseStyle from '@primevue/core/base/style';
 import PrimeVueService from '@primevue/core/service';
-import { UniqueComponentId } from '@primevue/core/utils';
 import { mergeProps } from 'vue';
 
 const BaseDirective = {
@@ -166,7 +166,7 @@ const BaseDirective = {
                 $el: $prevInstance['$el'] || el || undefined,
                 $style: { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...options?.style },
                 $primevueConfig: config,
-                $attrSelector: el.$attrSelector,
+                $attrSelector: el.$pd?.[name]?.attrSelector,
                 /* 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),
@@ -203,10 +203,11 @@ const BaseDirective = {
 
         return {
             created: (el, binding, vnode, prevVnode) => {
+                el.$pd ||= {};
+                el.$pd[name] = { name, attrSelector: uuid('pd') };
                 handleHook('created', el, binding, vnode, prevVnode);
             },
             beforeMount: (el, binding, vnode, prevVnode) => {
-                el.$attrSelector = UniqueComponentId('pd');
                 BaseDirective._loadStyles(el, binding, vnode);
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
                 handleWatch(el);