Merge branch 'master' of https://github.com/primefaces/primevue

Author: cagataycivici

apps/showcase/components/layout/designer/editor/DesignTokenField.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import { UniqueComponentId } from '@primevue/core/utils';
+import { uuid } from '@primeuix/utils';
 import { $dt } from '@primevue/themes';
 
 export default {
@@ -85,7 +85,7 @@ export default {
         };
     },
     created() {
-        this.id = 'dt_field_' + UniqueComponentId();
+        this.id = uuid('dt_field_');
     },
     methods: {
         onOptionSelect(event) {

apps/showcase/doc/common/apidoc/index.json

@@ -13463,7 +13463,7 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "true",
+                            "default": "false",
                             "description": "Displays a button to clear the column filtering."
                         },
                         {
@@ -23073,14 +23073,6 @@
                             "default": "body",
                             "description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
                         },
-                        {
-                            "name": "id",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Identifier of the element."
-                        },
                         {
                             "name": "inputId",
                             "optional": true,

apps/showcase/rollup.config.js

@@ -273,7 +273,7 @@ function addPackageJson() {
         "*.vue"
     ],
     "peerDependencies": {
-        "vue": "^3.0.0"
+        "vue": "^3.5.0"
     },
     "engines": {
         "node": ">=12.11.0"

packages/core/package.json

@@ -18,6 +18,7 @@
     "types": "./src/index.d.ts",
     "exports": {
         "./api": "./src/api/Api.js",
+        "./useid": "./src/useid/UseId.js",
         "./base/style": "./src/base/style/BaseStyle.js",
         "./base": "./src/base/Base.js",
         "./basecomponent/style": "./src/basecomponent/style/BaseComponentStyle.js",
@@ -27,6 +28,7 @@
         "./baseinput": "./src/baseinput/BaseInput.vue",
         "./config": "./src/config/PrimeVue.js",
         "./service": "./src/service/PrimeVueService.js",
+        "./useattrselector": "./src/useattrselector/UseAttrSelector.js",
         "./usestyle": "./src/usestyle/UseStyle.js",
         "./utils": "./src/utils/Utils.js"
     },
@@ -62,9 +64,9 @@
         "@primeuix/utils": "catalog:"
     },
     "peerDependencies": {
-        "vue": "^3.3.0"
+        "vue": "^3.5.0"
     },
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}

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 || {});
 

packages/core/src/index.d.ts

@@ -52,5 +52,7 @@ export * from '@primevue/core/baseinput';
 export * from '@primevue/core/config';
 export { default as PrimeVue } from '@primevue/core/config';
 export * from '@primevue/core/service';
+export * from '@primevue/core/useattrselector';
+export * from '@primevue/core/useid';
 export * from '@primevue/core/usestyle';
 export * from '@primevue/core/utils';

packages/core/src/index.js

@@ -25,6 +25,12 @@ export { default as PrimeVue } from '@primevue/core/config';
 // PrimeVueService
 export { default as PrimeVueService } from '@primevue/core/service';
 
+// UseAttrSelector
+export * from '@primevue/core/useattrselector';
+
+// UseId
+export * from '@primevue/core/useid';
+
 // UseStyle
 export * from '@primevue/core/usestyle';
 

packages/core/src/useattrselector/UseAttrSelector.d.ts

@@ -0,0 +1 @@
+export declare function useAttrSelector(prefix?: string): string;

packages/core/src/useattrselector/UseAttrSelector.js

@@ -0,0 +1,7 @@
+import { useId } from 'vue';
+
+export function useAttrSelector(prefix = 'pc') {
+    const idx = useId();
+
+    return `${prefix}${idx.replace('v-', '').replaceAll('-', '_')}`;
+}

packages/core/src/useattrselector/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./UseAttrSelector.js",
+    "module": "./UseAttrSelector.js",
+    "types": "./UseAttrSelector.d.ts"
+}