From dcf57813fe4f18e5272bae37970be5d2059eeb30 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Fri, 2 Feb 2024 15:47:37 +0000
Subject: [PATCH] Refactor #4953 - For Panel

---
 components/lib/panel/Panel.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index 6f41af515..ea5c99723 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -1,20 +1,20 @@
 <template>
     <div :class="cx('root')" v-bind="ptm('root')">
         <div :class="cx('header')" v-bind="ptm('header')">
-            <slot :id="ariaId + '_header'" name="header" :class="cx('title')">
-                <span v-if="header" :id="ariaId + '_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('icons')" v-bind="ptm('icons')">
                 <slot name="icons"></slot>
                 <button
                     v-if="toggleable"
-                    :id="ariaId + '_header'"
+                    :id="id + '_header'"
                     v-ripple
                     type="button"
                     role="button"
                     :class="cx('toggler')"
                     :aria-label="buttonAriaLabel"
-                    :aria-controls="ariaId + '_content'"
+                    :aria-controls="id + '_content'"
                     :aria-expanded="!d_collapsed"
                     @click="toggle"
                     @keydown="onKeyDown"
@@ -27,7 +27,7 @@
             </div>
         </div>
         <transition name="p-toggleable-content" v-bind="ptm('transition')">
-            <div v-show="!d_collapsed" :id="ariaId + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
+            <div v-show="!d_collapsed" :id="id + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('toggleablecontent')">
                 <div :class="cx('content')" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
@@ -52,14 +52,21 @@ 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;
@@ -77,9 +84,6 @@ export default {
         }
     },
     computed: {
-        ariaId() {
-            return UniqueComponentId();
-        },
         buttonAriaLabel() {
             return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;
         }