From 1095fecced0fa86df0e7219629511f4d2be44425 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Tue, 14 Jan 2025 11:12:15 +0000
Subject: [PATCH] refactor: #7090 for PanelMenu

---
 packages/primevue/src/panel/Panel.vue | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/primevue/src/panel/Panel.vue b/packages/primevue/src/panel/Panel.vue
index 4d92865fe..9f4ec24c3 100755
--- a/packages/primevue/src/panel/Panel.vue
+++ b/packages/primevue/src/panel/Panel.vue
@@ -1,17 +1,17 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
         <div :class="cx('header')" v-bind="ptm('header')">
-            <slot :id="id + '_header'" name="header" :class="cx('title')">
-                <span v-if="header" :id="id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
+            <slot :id="$id + '_header'" name="header" :class="cx('title')">
+                <span v-if="header" :id="$id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
             </slot>
             <div :class="cx('headerActions')" v-bind="ptm('headerActions')">
                 <slot name="icons"></slot>
                 <Button
                     v-if="toggleable"
-                    :id="id + '_header'"
+                    :id="$id + '_header'"
                     :class="cx('pcToggleButton')"
                     :aria-label="buttonAriaLabel"
-                    :aria-controls="id + '_content'"
+                    :aria-controls="$id + '_content'"
                     :aria-expanded="!d_collapsed"
                     :unstyled="unstyled"
                     @click="toggle"
@@ -29,7 +29,7 @@
             </div>
         </div>
         <transition name="p-toggleable-content" v-bind="ptm('transition')">
-            <div v-show="!d_collapsed" :id="id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')">
+            <div v-show="!d_collapsed" :id="$id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="$id + '_header'" v-bind="ptm('contentContainer')">
                 <div :class="cx('content')" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
@@ -42,7 +42,6 @@
 </template>
 
 <script>
-import { UniqueComponentId } from '@primevue/core/utils';
 import MinusIcon from '@primevue/icons/minus';
 import PlusIcon from '@primevue/icons/plus';
 import Button from 'primevue/button';
@@ -56,21 +55,14 @@ export default {
     emits: ['update:collapsed', 'toggle'],
     data() {
         return {
-            id: this.$attrs.id,
             d_collapsed: this.collapsed
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        },
         collapsed(newValue) {
             this.d_collapsed = newValue;
         }
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
     methods: {
         toggle(event) {
             this.d_collapsed = !this.d_collapsed;