refactor: #7090 for TabView

packages/primevue/src/tabview/TabView.vue

@@ -91,8 +91,7 @@
 </template>
 
 <script>
-import { UniqueComponentId } from '@primevue/core/utils';
+import { findSingle, focus, getAttribute, getOffset, getWidth } from '@primeuix/utils/dom';
-import { getWidth, getAttribute, findSingle, focus, getOffset } from '@primeuix/utils/dom';
 import ChevronLeftIcon from '@primevue/icons/chevronleft';
 import ChevronRightIcon from '@primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
@@ -106,16 +105,12 @@ export default {
     emits: ['update:activeIndex', 'tab-change', 'tab-click'],
     data() {
         return {
-            id: this.$attrs.id,
             d_activeIndex: this.activeIndex,
             isPrevButtonDisabled: true,
             isNextButtonDisabled: false
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
 
@@ -125,7 +120,6 @@ export default {
     mounted() {
         console.warn('Deprecated since v4. Use Tabs component instead.');
 
-        this.id = this.id || UniqueComponentId();
         this.updateInkBar();
         this.scrollable && this.updateButtonState();
     },
@@ -147,10 +141,10 @@ export default {
             return this.getTabProp(tab, 'header') || index;
         },
         getTabHeaderActionId(index) {
-            return `${this.id}_${index}_header_action`;
+            return `${this.$id}_${index}_header_action`;
         },
         getTabContentId(index) {
-            return `${this.id}_${index}_content`;
+            return `${this.$id}_${index}_content`;
         },
         getTabPT(tab, key, index) {
             const count = this.tabs.length;