refactor: #7090 for BaseComponent

packages/core/src/basecomponent/BaseComponent.vue

@@ -1,10 +1,10 @@
 <script>
 import { Theme, ThemeService } from '@primeuix/styled';
-import { findSingle, isClient } from '@primeuix/utils/dom';
+import { findSingle, isElement } 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 { useAttrSelector } from '@primevue/core/useattrselector';
 import { mergeProps } from 'vue';
 import BaseComponentStyle from './style/BaseComponentStyle';
 
@@ -62,6 +62,7 @@ export default {
     },
     scopedStyleEl: undefined,
     rootEl: undefined,
+    uid: undefined,
     $attrSelector: undefined,
     beforeCreate() {
         const _usept = this.pt?.['_usept'];
@@ -75,17 +76,18 @@ export default {
         const valueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.value : this.$primevue?.config?.pt;
 
         (valueInConfig || originalValueInConfig)?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.();
-        this.$attrSelector = uuid('pc');
+
+        this.$attrSelector = useAttrSelector();
+        this.uid = this.$attrs.id || this.$attrSelector.replace('pc', 'pv_id_');
     },
     created() {
         this._hook('onCreated');
     },
     beforeMount() {
-        // @todo - improve performance
-        this.rootEl = findSingle(this.$el, `[data-pc-name="${toFlatCase(this.$.type.name)}"]`);
+        // @deprecated - remove in v5
+        this.rootEl = findSingle(isElement(this.$el) ? this.$el : this.$el?.parentElement, `[${this.$attrSelector}]`);
 
         if (this.rootEl) {
-            this.$attrSelector && !this.rootEl.hasAttribute(this.$attrSelector) && this.rootEl.setAttribute(this.$attrSelector, '');
             this.rootEl.$pc = { name: this.$.type.name, attrSelector: this.$attrSelector, ...this.$params };
         }
 
@@ -245,7 +247,7 @@ export default {
                     ...(key === 'root' && {
                         [`${datasetPrefix}name`]: toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
                         ...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) }),
-                        ...(isClient() && { [`${this.$attrSelector}`]: '' })
+                        [`${this.$attrSelector}`]: ''
                     }),
                     [`${datasetPrefix}section`]: toFlatCase(key)
                 }
@@ -301,7 +303,11 @@ export default {
         },
         ptmi(key = '', params = {}) {
             // inheritAttrs:true
-            return mergeProps(this.$_attrsWithoutPT, this.ptm(key, params));
+            const attrs = mergeProps(this.$_attrsWithoutPT, this.ptm(key, params));
+
+            attrs?.hasOwnProperty('id') && (attrs.id ??= this.$id);
+
+            return attrs;
         },
         ptmo(obj = {}, key = '', params = {}) {
             return this._getPTValue(obj, key, { instance: this, ...params }, false);
@@ -330,6 +336,9 @@ export default {
         isUnstyled() {
             return this.unstyled !== undefined ? this.unstyled : this.$primevueConfig?.unstyled;
         },
+        $id() {
+            return this.$attrs.id || this.uid;
+        },
         $inProps() {
             const nodePropKeys = Object.keys(this.$.vnode?.props || {});