primevue 4.2.5 → 4.3.0

package/paginator/style/index.mjs

@@ -1,17 +1,14 @@
+import { style } from '@primeuix/styles/paginator';
 import BaseStyle from '@primevue/core/base/style';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-paginator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    background: ".concat(dt('paginator.background'), ";\n    color: ").concat(dt('paginator.color'), ";\n    padding: ").concat(dt('paginator.padding'), ";\n    border-radius: ").concat(dt('paginator.border.radius'), ";\n    gap: ").concat(dt('paginator.gap'), ";\n}\n\n.p-paginator-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: ").concat(dt('paginator.gap'), ";\n}\n\n.p-paginator-content-start {\n    margin-inline-end: auto;\n}\n\n.p-paginator-content-end {\n    margin-inline-start: auto;\n}\n\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    user-select: none;\n    overflow: hidden;\n    position: relative;\n    background: ").concat(dt('paginator.nav.button.background'), ";\n    border: 0 none;\n    color: ").concat(dt('paginator.nav.button.color'), ";\n    min-width: ").concat(dt('paginator.nav.button.width'), ";\n    height: ").concat(dt('paginator.nav.button.height'), ";\n    transition: background ").concat(dt('paginator.transition.duration'), ", color ").concat(dt('paginator.transition.duration'), ", outline-color ").concat(dt('paginator.transition.duration'), ", box-shadow ").concat(dt('paginator.transition.duration'), ";\n    border-radius: ").concat(dt('paginator.nav.button.border.radius'), ";\n    padding: 0;\n    margin: 0;\n}\n\n.p-paginator-page:focus-visible,\n.p-paginator-next:focus-visible,\n.p-paginator-last:focus-visible,\n.p-paginator-first:focus-visible,\n.p-paginator-prev:focus-visible {\n    box-shadow: ").concat(dt('paginator.nav.button.focus.ring.shadow'), ";\n    outline: ").concat(dt('paginator.nav.button.focus.ring.width'), " ").concat(dt('paginator.nav.button.focus.ring.style'), " ").concat(dt('paginator.nav.button.focus.ring.color'), ";\n    outline-offset: ").concat(dt('paginator.nav.button.focus.ring.offset'), ";\n}\n\n.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,\n.p-paginator-first:not(.p-disabled):hover,\n.p-paginator-prev:not(.p-disabled):hover,\n.p-paginator-next:not(.p-disabled):hover,\n.p-paginator-last:not(.p-disabled):hover {\n    background: ").concat(dt('paginator.nav.button.hover.background'), ";\n    color: ").concat(dt('paginator.nav.button.hover.color'), ";\n}\n\n.p-paginator-page.p-paginator-page-selected {\n    background: ").concat(dt('paginator.nav.button.selected.background'), ";\n    color: ").concat(dt('paginator.nav.button.selected.color'), ";\n}\n\n.p-paginator-current {\n    color: ").concat(dt('paginator.current.page.report.color'), ";\n}\n\n.p-paginator-pages {\n    display: flex;\n    align-items: center;\n    gap: ").concat(dt('paginator.gap'), ";\n}\n\n.p-paginator-jtp-input .p-inputtext {\n    max-width: ").concat(dt('paginator.jump.to.page.input.max.width'), ";\n}\n\n.p-paginator-first:dir(rtl),\n.p-paginator-prev:dir(rtl),\n.p-paginator-next:dir(rtl),\n.p-paginator-last:dir(rtl) {\n    transform: rotate(180deg);\n}\n");
-};
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var classes = {
-  paginator: function paginator(_ref2) {
-    var instance = _ref2.instance,
-      key = _ref2.key;
+  paginator: function paginator(_ref) {
+    var instance = _ref.instance,
+      key = _ref.key;
     return ['p-paginator p-component', _defineProperty({
       'p-paginator-default': !instance.hasBreakpoints()
     }, "p-paginator-".concat(key), instance.hasBreakpoints())];
@@ -19,38 +16,38 @@ var classes = {
   content: 'p-paginator-content',
   contentStart: 'p-paginator-content-start',
   contentEnd: 'p-paginator-content-end',
-  first: function first(_ref4) {
-    var instance = _ref4.instance;
+  first: function first(_ref3) {
+    var instance = _ref3.instance;
     return ['p-paginator-first', {
       'p-disabled': instance.$attrs.disabled
     }];
   },
   firstIcon: 'p-paginator-first-icon',
-  prev: function prev(_ref5) {
-    var instance = _ref5.instance;
+  prev: function prev(_ref4) {
+    var instance = _ref4.instance;
     return ['p-paginator-prev', {
       'p-disabled': instance.$attrs.disabled
     }];
   },
   prevIcon: 'p-paginator-prev-icon',
-  next: function next(_ref6) {
-    var instance = _ref6.instance;
+  next: function next(_ref5) {
+    var instance = _ref5.instance;
     return ['p-paginator-next', {
       'p-disabled': instance.$attrs.disabled
     }];
   },
   nextIcon: 'p-paginator-next-icon',
-  last: function last(_ref7) {
-    var instance = _ref7.instance;
+  last: function last(_ref6) {
+    var instance = _ref6.instance;
     return ['p-paginator-last', {
       'p-disabled': instance.$attrs.disabled
     }];
   },
   lastIcon: 'p-paginator-last-icon',
   pages: 'p-paginator-pages',
-  page: function page(_ref8) {
-    var props = _ref8.props,
-      pageLink = _ref8.pageLink;
+  page: function page(_ref7) {
+    var props = _ref7.props,
+      pageLink = _ref7.pageLink;
     return ['p-paginator-page', {
       'p-paginator-page-selected': pageLink - 1 === props.page
     }];
@@ -62,7 +59,7 @@ var classes = {
 };
 var PaginatorStyle = BaseStyle.extend({
   name: 'paginator',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/paginator/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/paginator/style/PaginatorStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-paginator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    background: ${dt('paginator.background')};\n    color: ${dt('paginator.color')};\n    padding: ${dt('paginator.padding')};\n    border-radius: ${dt('paginator.border.radius')};\n    gap: ${dt('paginator.gap')};\n}\n\n.p-paginator-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: ${dt('paginator.gap')};\n}\n\n.p-paginator-content-start {\n    margin-inline-end: auto;\n}\n\n.p-paginator-content-end {\n    margin-inline-start: auto;\n}\n\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    user-select: none;\n    overflow: hidden;\n    position: relative;\n    background: ${dt('paginator.nav.button.background')};\n    border: 0 none;\n    color: ${dt('paginator.nav.button.color')};\n    min-width: ${dt('paginator.nav.button.width')};\n    height: ${dt('paginator.nav.button.height')};\n    transition: background ${dt('paginator.transition.duration')}, color ${dt('paginator.transition.duration')}, outline-color ${dt('paginator.transition.duration')}, box-shadow ${dt('paginator.transition.duration')};\n    border-radius: ${dt('paginator.nav.button.border.radius')};\n    padding: 0;\n    margin: 0;\n}\n\n.p-paginator-page:focus-visible,\n.p-paginator-next:focus-visible,\n.p-paginator-last:focus-visible,\n.p-paginator-first:focus-visible,\n.p-paginator-prev:focus-visible {\n    box-shadow: ${dt('paginator.nav.button.focus.ring.shadow')};\n    outline: ${dt('paginator.nav.button.focus.ring.width')} ${dt('paginator.nav.button.focus.ring.style')} ${dt('paginator.nav.button.focus.ring.color')};\n    outline-offset: ${dt('paginator.nav.button.focus.ring.offset')};\n}\n\n.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,\n.p-paginator-first:not(.p-disabled):hover,\n.p-paginator-prev:not(.p-disabled):hover,\n.p-paginator-next:not(.p-disabled):hover,\n.p-paginator-last:not(.p-disabled):hover {\n    background: ${dt('paginator.nav.button.hover.background')};\n    color: ${dt('paginator.nav.button.hover.color')};\n}\n\n.p-paginator-page.p-paginator-page-selected {\n    background: ${dt('paginator.nav.button.selected.background')};\n    color: ${dt('paginator.nav.button.selected.color')};\n}\n\n.p-paginator-current {\n    color: ${dt('paginator.current.page.report.color')};\n}\n\n.p-paginator-pages {\n    display: flex;\n    align-items: center;\n    gap: ${dt('paginator.gap')};\n}\n\n.p-paginator-jtp-input .p-inputtext {\n    max-width: ${dt('paginator.jump.to.page.input.max.width')};\n}\n\n.p-paginator-first:dir(rtl),\n.p-paginator-prev:dir(rtl),\n.p-paginator-next:dir(rtl),\n.p-paginator-last:dir(rtl) {\n    transform: rotate(180deg);\n}\n`;\n\nconst classes = {\n    paginator: ({ instance, key }) => [\n        'p-paginator p-component',\n        {\n            'p-paginator-default': !instance.hasBreakpoints(),\n            [`p-paginator-${key}`]: instance.hasBreakpoints()\n        }\n    ],\n    content: 'p-paginator-content',\n    contentStart: 'p-paginator-content-start',\n    contentEnd: 'p-paginator-content-end',\n    first: ({ instance }) => [\n        'p-paginator-first',\n        {\n            'p-disabled': instance.$attrs.disabled\n        }\n    ],\n    firstIcon: 'p-paginator-first-icon',\n    prev: ({ instance }) => [\n        'p-paginator-prev',\n        {\n            'p-disabled': instance.$attrs.disabled\n        }\n    ],\n    prevIcon: 'p-paginator-prev-icon',\n    next: ({ instance }) => [\n        'p-paginator-next',\n        {\n            'p-disabled': instance.$attrs.disabled\n        }\n    ],\n    nextIcon: 'p-paginator-next-icon',\n    last: ({ instance }) => [\n        'p-paginator-last',\n        {\n            'p-disabled': instance.$attrs.disabled\n        }\n    ],\n    lastIcon: 'p-paginator-last-icon',\n    pages: 'p-paginator-pages',\n    page: ({ props, pageLink }) => [\n        'p-paginator-page',\n        {\n            'p-paginator-page-selected': pageLink - 1 === props.page\n        }\n    ],\n    current: 'p-paginator-current',\n    pcRowPerPageDropdown: 'p-paginator-rpp-dropdown',\n    pcJumpToPageDropdown: 'p-paginator-jtp-dropdown',\n    pcJumpToPageInputText: 'p-paginator-jtp-input'\n};\n\nexport default BaseStyle.extend({\n    name: 'paginator',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","paginator","_ref2","instance","key","_defineProperty","hasBreakpoints","content","contentStart","contentEnd","first","_ref4","$attrs","disabled","firstIcon","prev","_ref5","prevIcon","next","_ref6","nextIcon","last","_ref7","lastIcon","pages","page","_ref8","props","pageLink","current","pcRowPerPageDropdown","pcJumpToPageDropdown","pcJumpToPageInputText","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/paginator/style/PaginatorStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/paginator';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    paginator: ({ instance, key }) => [\n        'p-paginator p-component',\n        {\n            'p-paginator-default': !instance.hasBreakpoints(),\n            [`p-paginator-${key}`]: instance.hasBreakpoints()\n        }\n    ],\n    content: 'p-paginator-content',\n    contentStart: 'p-paginator-content-start',\n    contentEnd: 'p-paginator-content-end',\n    first: ({ instance }) => [\n        'p-paginator-first',\n        {\n            'p-disabled': instance.$attrs.disabled\n        }\n    ],\n    firstIcon: 'p-paginator-first-icon',\n    prev: ({ instance }) => [\n        'p-paginator-prev',\n        {\n            'p-disabled': instance.$attrs.disabled\n        }\n    ],\n    prevIcon: 'p-paginator-prev-icon',\n    next: ({ instance }) => [\n        'p-paginator-next',\n        {\n            'p-disabled': instance.$attrs.disabled\n        }\n    ],\n    nextIcon: 'p-paginator-next-icon',\n    last: ({ instance }) => [\n        'p-paginator-last',\n        {\n            'p-disabled': instance.$attrs.disabled\n        }\n    ],\n    lastIcon: 'p-paginator-last-icon',\n    pages: 'p-paginator-pages',\n    page: ({ props, pageLink }) => [\n        'p-paginator-page',\n        {\n            'p-paginator-page-selected': pageLink - 1 === props.page\n        }\n    ],\n    current: 'p-paginator-current',\n    pcRowPerPageDropdown: 'p-paginator-rpp-dropdown',\n    pcJumpToPageDropdown: 'p-paginator-jtp-dropdown',\n    pcJumpToPageInputText: 'p-paginator-jtp-input'\n};\n\nexport default BaseStyle.extend({\n    name: 'paginator',\n    style,\n    classes\n});\n"],"names":["classes","paginator","_ref","instance","key","_defineProperty","hasBreakpoints","concat","content","contentStart","contentEnd","first","_ref3","$attrs","disabled","firstIcon","prev","_ref4","prevIcon","next","_ref5","nextIcon","last","_ref6","lastIcon","pages","page","_ref7","props","pageLink","current","pcRowPerPageDropdown","pcJumpToPageDropdown","pcJumpToPageInputText","BaseStyle","extend","name","style"],"mappings":";;;;;;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,SAAS,EAAE,SAAXA,SAASA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;MAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAA,OAAO,CAC9B,yBAAyB,EAAAC,eAAA,CAAA;AAErB,MAAA,qBAAqB,EAAE,CAACF,QAAQ,CAACG,cAAc;KAAEC,EAAAA,cAAAA,CAAAA,MAAA,CACjCH,GAAG,CAAA,EAAKD,QAAQ,CAACG,cAAc,EAAE,CAExD,CAAA;AAAA,GAAA;AACDE,EAAAA,OAAO,EAAE,qBAAqB;AAC9BC,EAAAA,YAAY,EAAE,2BAA2B;AACzCC,EAAAA,UAAU,EAAE,yBAAyB;AACrCC,EAAAA,KAAK,EAAE,SAAPA,KAAKA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKT,QAAQ,GAAAS,KAAA,CAART,QAAQ;IAAA,OAAO,CACrB,mBAAmB,EACnB;AACI,MAAA,YAAY,EAAEA,QAAQ,CAACU,MAAM,CAACC;AAClC,KAAC,CACJ;AAAA,GAAA;AACDC,EAAAA,SAAS,EAAE,wBAAwB;AACnCC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKd,QAAQ,GAAAc,KAAA,CAARd,QAAQ;IAAA,OAAO,CACpB,kBAAkB,EAClB;AACI,MAAA,YAAY,EAAEA,QAAQ,CAACU,MAAM,CAACC;AAClC,KAAC,CACJ;AAAA,GAAA;AACDI,EAAAA,QAAQ,EAAE,uBAAuB;AACjCC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKjB,QAAQ,GAAAiB,KAAA,CAARjB,QAAQ;IAAA,OAAO,CACpB,kBAAkB,EAClB;AACI,MAAA,YAAY,EAAEA,QAAQ,CAACU,MAAM,CAACC;AAClC,KAAC,CACJ;AAAA,GAAA;AACDO,EAAAA,QAAQ,EAAE,uBAAuB;AACjCC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKpB,QAAQ,GAAAoB,KAAA,CAARpB,QAAQ;IAAA,OAAO,CACpB,kBAAkB,EAClB;AACI,MAAA,YAAY,EAAEA,QAAQ,CAACU,MAAM,CAACC;AAClC,KAAC,CACJ;AAAA,GAAA;AACDU,EAAAA,QAAQ,EAAE,uBAAuB;AACjCC,EAAAA,KAAK,EAAE,mBAAmB;AAC1BC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,KAAA,CAALC,KAAK;MAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAA,OAAO,CAC3B,kBAAkB,EAClB;AACI,MAAA,2BAA2B,EAAEA,QAAQ,GAAG,CAAC,KAAKD,KAAK,CAACF;AACxD,KAAC,CACJ;AAAA,GAAA;AACDI,EAAAA,OAAO,EAAE,qBAAqB;AAC9BC,EAAAA,oBAAoB,EAAE,0BAA0B;AAChDC,EAAAA,oBAAoB,EAAE,0BAA0B;AAChDC,EAAAA,qBAAqB,EAAE;AAC3B,CAAC;AAED,qBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,KAAK,EAALA,KAAK;AACLrC,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/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;

package/panel/index.mjs

@@ -1,11 +1,10 @@
-import { UniqueComponentId } from '@primevue/core/utils';
 import MinusIcon from '@primevue/icons/minus';
 import PlusIcon from '@primevue/icons/plus';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 import BaseComponent from '@primevue/core/basecomponent';
 import PanelStyle from 'primevue/panel/style';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, toDisplayString, createCommentVNode, createBlock, withCtx, resolveDynamicComponent, createVNode, Transition, withDirectives, vShow } from 'vue';
+import { resolveComponent, createElementBlock, openBlock, mergeProps, createElementVNode, createVNode, renderSlot, normalizeClass, createCommentVNode, toDisplayString, createBlock, withCtx, resolveDynamicComponent, Transition, withDirectives, vShow } from 'vue';
 
 var script$1 = {
   name: 'BasePanel',
@@ -41,21 +40,14 @@ var script = {
   emits: ['update:collapsed', 'toggle'],
   data: function data() {
     return {
-      id: this.$attrs.id,
       d_collapsed: this.collapsed
     };
   },
   watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    },
     collapsed: function collapsed(newValue) {
       this.d_collapsed = newValue;
     }
   },
-  mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
-  },
   methods: {
     toggle: function toggle(event) {
       this.d_collapsed = !this.d_collapsed;
@@ -96,22 +88,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptmi('root')), [createElementVNode("div", mergeProps({
     "class": _ctx.cx('header')
   }, _ctx.ptm('header')), [renderSlot(_ctx.$slots, "header", {
-    id: $data.id + '_header',
+    id: _ctx.$id + '_header',
     "class": normalizeClass(_ctx.cx('title'))
   }, function () {
     return [_ctx.header ? (openBlock(), createElementBlock("span", mergeProps({
       key: 0,
-      id: $data.id + '_header',
+      id: _ctx.$id + '_header',
       "class": _ctx.cx('title')
     }, _ctx.ptm('title')), toDisplayString(_ctx.header), 17, _hoisted_1)) : createCommentVNode("", true)];
   }), createElementVNode("div", mergeProps({
     "class": _ctx.cx('headerActions')
   }, _ctx.ptm('headerActions')), [renderSlot(_ctx.$slots, "icons"), _ctx.toggleable ? (openBlock(), createBlock(_component_Button, mergeProps({
     key: 0,
-    id: $data.id + '_header',
+    id: _ctx.$id + '_header',
     "class": _ctx.cx('pcToggleButton'),
     "aria-label": $options.buttonAriaLabel,
-    "aria-controls": $data.id + '_content',
+    "aria-controls": _ctx.$id + '_content',
     "aria-expanded": !$data.d_collapsed,
     unstyled: _ctx.unstyled,
     onClick: $options.toggle,
@@ -134,10 +126,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('transition')), {
     "default": withCtx(function () {
       return [withDirectives(createElementVNode("div", mergeProps({
-        id: $data.id + '_content',
+        id: _ctx.$id + '_content',
         "class": _ctx.cx('contentContainer'),
         role: "region",
-        "aria-labelledby": $data.id + '_header'
+        "aria-labelledby": _ctx.$id + '_header'
       }, _ctx.ptm('contentContainer')), [createElementVNode("div", mergeProps({
         "class": _ctx.cx('content')
       }, _ctx.ptm('content')), [renderSlot(_ctx.$slots, "default")], 16), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", mergeProps({

package/panel/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/panel/BasePanel.vue","../../src/panel/Panel.vue","../../src/panel/Panel.vue?vue&type=template&id=13108902&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport PanelStyle from 'primevue/panel/style';\n\nexport default {\n    name: 'BasePanel',\n    extends: BaseComponent,\n    props: {\n        header: String,\n        toggleable: Boolean,\n        collapsed: Boolean,\n        toggleButtonProps: {\n            type: Object,\n            default: () => {\n                return {\n                    severity: 'secondary',\n                    text: true,\n                    rounded: true\n                };\n            }\n        }\n    },\n    style: PanelStyle,\n    provide() {\n        return {\n            $pcPanel: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div :class=\"cx('header')\" v-bind=\"ptm('header')\">\n            <slot :id=\"id + '_header'\" name=\"header\" :class=\"cx('title')\">\n                <span v-if=\"header\" :id=\"id + '_header'\" :class=\"cx('title')\" v-bind=\"ptm('title')\">{{ header }}</span>\n            </slot>\n            <div :class=\"cx('headerActions')\" v-bind=\"ptm('headerActions')\">\n                <slot name=\"icons\"></slot>\n                <Button\n                    v-if=\"toggleable\"\n                    :id=\"id + '_header'\"\n                    :class=\"cx('pcToggleButton')\"\n                    :aria-label=\"buttonAriaLabel\"\n                    :aria-controls=\"id + '_content'\"\n                    :aria-expanded=\"!d_collapsed\"\n                    :unstyled=\"unstyled\"\n                    @click=\"toggle\"\n                    @keydown=\"onKeyDown\"\n                    v-bind=\"toggleButtonProps\"\n                    :pt=\"ptm('pcToggleButton')\"\n                >\n                    <template #icon=\"slotProps\">\n                        <!--TODO: togglericon deprecated since v4.0-->\n                        <slot :name=\"$slots.toggleicon ? 'toggleicon' : 'togglericon'\" :collapsed=\"d_collapsed\">\n                            <component :is=\"d_collapsed ? 'PlusIcon' : 'MinusIcon'\" :class=\"slotProps.class\" v-bind=\"ptm('pcToggleButton')['icon']\" />\n                        </slot>\n                    </template>\n                </Button>\n            </div>\n        </div>\n        <transition name=\"p-toggleable-content\" v-bind=\"ptm('transition')\">\n            <div v-show=\"!d_collapsed\" :id=\"id + '_content'\" :class=\"cx('contentContainer')\" role=\"region\" :aria-labelledby=\"id + '_header'\" v-bind=\"ptm('contentContainer')\">\n                <div :class=\"cx('content')\" v-bind=\"ptm('content')\">\n                    <slot></slot>\n                </div>\n                <div v-if=\"$slots.footer\" :class=\"cx('footer')\" v-bind=\"ptm('footer')\">\n                    <slot name=\"footer\"></slot>\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script>\nimport { UniqueComponentId } from '@primevue/core/utils';\nimport MinusIcon from '@primevue/icons/minus';\nimport PlusIcon from '@primevue/icons/plus';\nimport Button from 'primevue/button';\nimport Ripple from 'primevue/ripple';\nimport BasePanel from './BasePanel.vue';\n\nexport default {\n    name: 'Panel',\n    extends: BasePanel,\n    inheritAttrs: false,\n    emits: ['update:collapsed', 'toggle'],\n    data() {\n        return {\n            id: this.$attrs.id,\n            d_collapsed: this.collapsed\n        };\n    },\n    watch: {\n        '$attrs.id': function (newValue) {\n            this.id = newValue || UniqueComponentId();\n        },\n        collapsed(newValue) {\n            this.d_collapsed = newValue;\n        }\n    },\n    mounted() {\n        this.id = this.id || UniqueComponentId();\n    },\n    methods: {\n        toggle(event) {\n            this.d_collapsed = !this.d_collapsed;\n            this.$emit('update:collapsed', this.d_collapsed);\n            this.$emit('toggle', {\n                originalEvent: event,\n                value: this.d_collapsed\n            });\n        },\n        onKeyDown(event) {\n            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {\n                this.toggle(event);\n                event.preventDefault();\n            }\n        }\n    },\n    computed: {\n        buttonAriaLabel() {\n            return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;\n        }\n    },\n    components: {\n        PlusIcon,\n        MinusIcon,\n        Button\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div :class=\"cx('header')\" v-bind=\"ptm('header')\">\n            <slot :id=\"id + '_header'\" name=\"header\" :class=\"cx('title')\">\n                <span v-if=\"header\" :id=\"id + '_header'\" :class=\"cx('title')\" v-bind=\"ptm('title')\">{{ header }}</span>\n            </slot>\n            <div :class=\"cx('headerActions')\" v-bind=\"ptm('headerActions')\">\n                <slot name=\"icons\"></slot>\n                <Button\n                    v-if=\"toggleable\"\n                    :id=\"id + '_header'\"\n                    :class=\"cx('pcToggleButton')\"\n                    :aria-label=\"buttonAriaLabel\"\n                    :aria-controls=\"id + '_content'\"\n                    :aria-expanded=\"!d_collapsed\"\n                    :unstyled=\"unstyled\"\n                    @click=\"toggle\"\n                    @keydown=\"onKeyDown\"\n                    v-bind=\"toggleButtonProps\"\n                    :pt=\"ptm('pcToggleButton')\"\n                >\n                    <template #icon=\"slotProps\">\n                        <!--TODO: togglericon deprecated since v4.0-->\n                        <slot :name=\"$slots.toggleicon ? 'toggleicon' : 'togglericon'\" :collapsed=\"d_collapsed\">\n                            <component :is=\"d_collapsed ? 'PlusIcon' : 'MinusIcon'\" :class=\"slotProps.class\" v-bind=\"ptm('pcToggleButton')['icon']\" />\n                        </slot>\n                    </template>\n                </Button>\n            </div>\n        </div>\n        <transition name=\"p-toggleable-content\" v-bind=\"ptm('transition')\">\n            <div v-show=\"!d_collapsed\" :id=\"id + '_content'\" :class=\"cx('contentContainer')\" role=\"region\" :aria-labelledby=\"id + '_header'\" v-bind=\"ptm('contentContainer')\">\n                <div :class=\"cx('content')\" v-bind=\"ptm('content')\">\n                    <slot></slot>\n                </div>\n                <div v-if=\"$slots.footer\" :class=\"cx('footer')\" v-bind=\"ptm('footer')\">\n                    <slot name=\"footer\"></slot>\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script>\nimport { UniqueComponentId } from '@primevue/core/utils';\nimport MinusIcon from '@primevue/icons/minus';\nimport PlusIcon from '@primevue/icons/plus';\nimport Button from 'primevue/button';\nimport Ripple from 'primevue/ripple';\nimport BasePanel from './BasePanel.vue';\n\nexport default {\n    name: 'Panel',\n    extends: BasePanel,\n    inheritAttrs: false,\n    emits: ['update:collapsed', 'toggle'],\n    data() {\n        return {\n            id: this.$attrs.id,\n            d_collapsed: this.collapsed\n        };\n    },\n    watch: {\n        '$attrs.id': function (newValue) {\n            this.id = newValue || UniqueComponentId();\n        },\n        collapsed(newValue) {\n            this.d_collapsed = newValue;\n        }\n    },\n    mounted() {\n        this.id = this.id || UniqueComponentId();\n    },\n    methods: {\n        toggle(event) {\n            this.d_collapsed = !this.d_collapsed;\n            this.$emit('update:collapsed', this.d_collapsed);\n            this.$emit('toggle', {\n                originalEvent: event,\n                value: this.d_collapsed\n            });\n        },\n        onKeyDown(event) {\n            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {\n                this.toggle(event);\n                event.preventDefault();\n            }\n        }\n    },\n    computed: {\n        buttonAriaLabel() {\n            return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;\n        }\n    },\n    components: {\n        PlusIcon,\n        MinusIcon,\n        Button\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","header","String","toggleable","Boolean","collapsed","toggleButtonProps","type","Object","default","severity","text","rounded","style","PanelStyle","provide","$pcPanel","$parentInstance","BasePanel","inheritAttrs","emits","data","id","$attrs","d_collapsed","watch","$attrsId","newValue","UniqueComponentId","mounted","methods","toggle","event","$emit","originalEvent","value","onKeyDown","code","preventDefault","computed","buttonAriaLabel","ariaLabel","components","PlusIcon","MinusIcon","Button","directives","ripple","Ripple","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptmi","_createElementVNode","ptm","_renderSlot","$slots","$data","_hoisted_1","_createBlock","_component_Button","$options","unstyled","onClick","onKeydown","pt","icon","_withCtx","slotProps","toggleicon","_resolveDynamicComponent","_createVNode","_Transition","_withDirectives","role","footer"],"mappings":";;;;;;;;;AAIA,eAAe;AACXA,EAAAA,IAAI,EAAE,WAAW;AACjB,EAAA,SAAA,EAASC,aAAa;AACtBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,MAAM,EAAEC,MAAM;AACdC,IAAAA,UAAU,EAAEC,OAAO;AACnBC,IAAAA,SAAS,EAAED,OAAO;AAClBE,IAAAA,iBAAiB,EAAE;AACfC,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA,SAATC,QAAOA,GAAQ;QACX,OAAO;AACHC,UAAAA,QAAQ,EAAE,WAAW;AACrBC,UAAAA,IAAI,EAAE,IAAI;AACVC,UAAAA,OAAO,EAAE;SACZ;AACL;AACJ;GACH;AACDC,EAAAA,KAAK,EAAEC,UAAU;EACjBC,OAAO,EAAA,SAAPA,OAAOA,GAAG;IACN,OAAO;AACHC,MAAAA,QAAQ,EAAE,IAAI;AACdC,MAAAA,eAAe,EAAE;KACpB;AACL;AACJ,CAAC;;ACsBD,aAAe;AACXnB,EAAAA,IAAI,EAAE,OAAO;AACb,EAAA,SAAA,EAASoB,QAAS;AAClBC,EAAAA,YAAY,EAAE,KAAK;AACnBC,EAAAA,KAAK,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC;EACrCC,IAAI,EAAA,SAAJA,IAAIA,GAAG;IACH,OAAO;AACHC,MAAAA,EAAE,EAAE,IAAI,CAACC,MAAM,CAACD,EAAE;MAClBE,WAAW,EAAE,IAAI,CAACnB;KACrB;GACJ;AACDoB,EAAAA,KAAK,EAAE;AACH,IAAA,WAAW,EAAE,SAAbC,QAAWA,CAAYC,QAAQ,EAAE;AAC7B,MAAA,IAAI,CAACL,EAAG,GAAEK,YAAYC,iBAAiB,EAAE;KAC5C;AACDvB,IAAAA,SAAS,EAATA,SAAAA,SAASA,CAACsB,QAAQ,EAAE;MAChB,IAAI,CAACH,WAAY,GAAEG,QAAQ;AAC/B;GACH;EACDE,OAAO,EAAA,SAAPA,OAAOA,GAAG;IACN,IAAI,CAACP,EAAG,GAAE,IAAI,CAACA,EAAC,IAAKM,iBAAiB,EAAE;GAC3C;AACDE,EAAAA,OAAO,EAAE;AACLC,IAAAA,MAAM,EAANA,SAAAA,MAAMA,CAACC,KAAK,EAAE;AACV,MAAA,IAAI,CAACR,WAAY,GAAE,CAAC,IAAI,CAACA,WAAW;MACpC,IAAI,CAACS,KAAK,CAAC,kBAAkB,EAAE,IAAI,CAACT,WAAW,CAAC;AAChD,MAAA,IAAI,CAACS,KAAK,CAAC,QAAQ,EAAE;AACjBC,QAAAA,aAAa,EAAEF,KAAK;QACpBG,KAAK,EAAE,IAAI,CAACX;AAChB,OAAC,CAAC;KACL;AACDY,IAAAA,SAAS,EAATA,SAAAA,SAASA,CAACJ,KAAK,EAAE;AACb,MAAA,IAAIA,KAAK,CAACK,IAAG,KAAM,OAAQ,IAAGL,KAAK,CAACK,SAAS,aAAY,IAAKL,KAAK,CAACK,SAAS,OAAO,EAAE;AAClF,QAAA,IAAI,CAACN,MAAM,CAACC,KAAK,CAAC;QAClBA,KAAK,CAACM,cAAc,EAAE;AAC1B;AACJ;GACH;AACDC,EAAAA,QAAQ,EAAE;IACNC,eAAe,EAAA,SAAfA,eAAeA,GAAG;AACd,MAAA,OAAO,IAAI,CAAClC,iBAAkB,IAAG,IAAI,CAACA,iBAAiB,CAACmC,SAAQ,GAAI,IAAI,CAACnC,iBAAiB,CAACmC,YAAY,IAAI,CAACxC,MAAM;AACtH;GACH;AACDyC,EAAAA,UAAU,EAAE;AACRC,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,SAAS,EAATA,SAAS;AACTC,IAAAA,MAAK,EAALA;GACH;AACDC,EAAAA,UAAU,EAAE;AACRC,IAAAA,MAAM,EAAEC;AACZ;AACJ,CAAC;;;;;;ECrGG,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAuCK,OAvCLC,UAuCK,CAAA;AAvCC,IAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,MAAA;KAAkBD,IAAI,CAAAE,IAAA,CAAA,MAAA,CAAA,CAAA,EAAA,CACjCC,kBAAA,CA2BK,OA3BLJ,UA2BK,CAAA;AA3BC,IAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,QAAA;KAAoBD,IAAG,CAAAI,GAAA,CAAA,QAAA,CAAA,CAAA,EAAA,CAClCC,UAEM,CAAAL,IAAA,CAAAM,MAAA,EAAA,QAAA,EAAA;AAFCpC,IAAAA,EAAE,EAAEqC,KAAG,CAAArC,EAAA,GAAA,SAAA;AAA4B,IAAA,OAAA,iBAAO8B,IAAE,CAAAC,EAAA,CAAA,OAAA,CAAA;KAAnD,YAAA;AAAA,IAAA,OAEM,CADUD,IAAM,CAAAnD,MAAA,IAAlBgD,SAAA,EAAA,EAAAC,kBAAA,CAAsG,QAAtGC,UAAsG,CAAA;;AAAjF7B,MAAAA,EAAE,EAAEqC,KAAG,CAAArC,EAAA,GAAA,SAAA;AAAc,MAAA,OAAA,EAAO8B,IAAE,CAAAC,EAAA,CAAA,OAAA;KAAmB,EAAAD,IAAA,CAAAI,GAAG,4BAAcJ,IAAK,CAAAnD,MAAA,CAAA,EAAA,EAAA,EAAA2D,UAAA,CAAA;MAEhGL,kBAAA,CAsBK,OAtBLJ,UAsBK,CAAA;AAtBC,IAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,eAAA;KAA2BD,IAAG,CAAAI,GAAA,CAAA,eAAA,CAAA,CAAA,EAAA,CACzCC,UAAyB,CAAAL,IAAA,CAAAM,MAAA,EAAA,OAAA,CAAA,EAEfN,IAAU,CAAAjD,UAAA,IADpB8C,SAAA,EAAA,EAAAY,WAAA,CAmBQC,mBAnBRX,UAmBQ,CAAA;;AAjBH7B,IAAAA,EAAE,EAAEqC,KAAG,CAAArC,EAAA,GAAA,SAAA;AACP,IAAA,OAAA,EAAO8B,IAAE,CAAAC,EAAA,CAAA,gBAAA,CAAA;IACT,YAAU,EAAEU,QAAe,CAAAvB,eAAA;AAC3B,IAAA,eAAa,EAAEmB,KAAC,CAAArC,EAAA,GAAA,UAAA;AAChB,IAAA,eAAa,GAAGqC,KAAW,CAAAnC,WAAA;IAC3BwC,QAAQ,EAAEZ,IAAQ,CAAAY,QAAA;IAClBC,OAAK,EAAEF,QAAM,CAAAhC,MAAA;IACbmC,SAAO,EAAEH,QAAS,CAAA3B;KACXgB,IAAiB,CAAA9C,iBAAA,EAAA;AACxB6D,IAAAA,EAAE,EAAEf,IAAG,CAAAI,GAAA,CAAA,gBAAA;;AAEGY,IAAAA,IAAI,EAAAC,OAAA,CAEX,UAEMC,SAJgB,EAAA;AAAA,MAAA,OAAA,CAEtBb,UAEM,CAAAL,IAAA,CAAAM,MAAA,EAFON,WAAM,CAACmB,UAAS;QAAmClE,SAAS,EAAEsD,KAAW,CAAAnC;AAAA,OAAA,EAAtF,YAAA;AAAA,QAAA,OAEM,eADFqC,WAAyH,CAAAW,uBAAA,CAAzGb,KAAY,CAAAnC,WAAA,GAAA,UAAA,GAAA,WAAA,CAAA,EAA5B2B,UAAyH,CAAA;AAAhE,UAAA,OAAA,EAAOmB,SAAS,CAAA,OAAA;WAAgBlB,IAAG,CAAAI,GAAA,CAAA,gBAAA,CAAA,CAAA,MAAA,CAAA,CAAA,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA,OAAA,CAAA,CAAA;;;;iKAMhHiB,WAAA,CASYC,YATZvB,UASY,CAAA;AATArD,IAAAA,IAAI,EAAC;KAA+BsD,IAAG,CAAAI,GAAA,CAAA,YAAA,CAAA,CAAA,EAAA;uBAC/C,YAAA;MAAA,OAOK,CAPLmB,cAAA,CAAApB,kBAAA,CAOK,OAPLJ,UAOK,CAAA;AAPuB7B,QAAAA,EAAE,EAAEqC,KAAC,CAAArC,EAAA,GAAA,UAAA;AAAiB,QAAA,OAAA,EAAO8B,IAAE,CAAAC,EAAA,CAAA,kBAAA,CAAA;AAAsBuB,QAAAA,IAAI,EAAC,QAAS;AAAC,QAAA,iBAAe,EAAEjB,KAAC,CAAArC,EAAA,GAAA;SAAuB8B,IAAG,CAAAI,GAAA,CAAA,kBAAA,CAAA,CAAA,EAAA,CACxID,kBAAA,CAEK,OAFLJ,UAEK,CAAA;AAFC,QAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,SAAA;SAAqBD,IAAG,CAAAI,GAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CACnCC,UAAY,CAAAL,IAAA,CAAAM,MAAA,EAAA,SAAA,CAAA,QAELN,IAAA,CAAAM,MAAM,CAACmB,MAAM,IAAxB5B,SAAA,EAAA,EAAAC,kBAAA,CAEK,OAFLC,UAEK,CAAA;;AAFsB,QAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,QAAA;SAAoBD,IAAG,CAAAI,GAAA,CAAA,QAAA,CAAA,CAAA,EAAA,CACvDC,UAA0B,CAAAL,IAAA,CAAAM,MAAA,EAAA,QAAA,CAAA,oEALpBC,KAAW,CAAAnC,WAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/panel/BasePanel.vue","../../src/panel/Panel.vue","../../src/panel/Panel.vue?vue&type=template&id=7d3373aa&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport PanelStyle from 'primevue/panel/style';\n\nexport default {\n    name: 'BasePanel',\n    extends: BaseComponent,\n    props: {\n        header: String,\n        toggleable: Boolean,\n        collapsed: Boolean,\n        toggleButtonProps: {\n            type: Object,\n            default: () => {\n                return {\n                    severity: 'secondary',\n                    text: true,\n                    rounded: true\n                };\n            }\n        }\n    },\n    style: PanelStyle,\n    provide() {\n        return {\n            $pcPanel: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div :class=\"cx('header')\" v-bind=\"ptm('header')\">\n            <slot :id=\"$id + '_header'\" name=\"header\" :class=\"cx('title')\">\n                <span v-if=\"header\" :id=\"$id + '_header'\" :class=\"cx('title')\" v-bind=\"ptm('title')\">{{ header }}</span>\n            </slot>\n            <div :class=\"cx('headerActions')\" v-bind=\"ptm('headerActions')\">\n                <slot name=\"icons\"></slot>\n                <Button\n                    v-if=\"toggleable\"\n                    :id=\"$id + '_header'\"\n                    :class=\"cx('pcToggleButton')\"\n                    :aria-label=\"buttonAriaLabel\"\n                    :aria-controls=\"$id + '_content'\"\n                    :aria-expanded=\"!d_collapsed\"\n                    :unstyled=\"unstyled\"\n                    @click=\"toggle\"\n                    @keydown=\"onKeyDown\"\n                    v-bind=\"toggleButtonProps\"\n                    :pt=\"ptm('pcToggleButton')\"\n                >\n                    <template #icon=\"slotProps\">\n                        <!--TODO: togglericon deprecated since v4.0-->\n                        <slot :name=\"$slots.toggleicon ? 'toggleicon' : 'togglericon'\" :collapsed=\"d_collapsed\">\n                            <component :is=\"d_collapsed ? 'PlusIcon' : 'MinusIcon'\" :class=\"slotProps.class\" v-bind=\"ptm('pcToggleButton')['icon']\" />\n                        </slot>\n                    </template>\n                </Button>\n            </div>\n        </div>\n        <transition name=\"p-toggleable-content\" v-bind=\"ptm('transition')\">\n            <div v-show=\"!d_collapsed\" :id=\"$id + '_content'\" :class=\"cx('contentContainer')\" role=\"region\" :aria-labelledby=\"$id + '_header'\" v-bind=\"ptm('contentContainer')\">\n                <div :class=\"cx('content')\" v-bind=\"ptm('content')\">\n                    <slot></slot>\n                </div>\n                <div v-if=\"$slots.footer\" :class=\"cx('footer')\" v-bind=\"ptm('footer')\">\n                    <slot name=\"footer\"></slot>\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script>\nimport MinusIcon from '@primevue/icons/minus';\nimport PlusIcon from '@primevue/icons/plus';\nimport Button from 'primevue/button';\nimport Ripple from 'primevue/ripple';\nimport BasePanel from './BasePanel.vue';\n\nexport default {\n    name: 'Panel',\n    extends: BasePanel,\n    inheritAttrs: false,\n    emits: ['update:collapsed', 'toggle'],\n    data() {\n        return {\n            d_collapsed: this.collapsed\n        };\n    },\n    watch: {\n        collapsed(newValue) {\n            this.d_collapsed = newValue;\n        }\n    },\n    methods: {\n        toggle(event) {\n            this.d_collapsed = !this.d_collapsed;\n            this.$emit('update:collapsed', this.d_collapsed);\n            this.$emit('toggle', {\n                originalEvent: event,\n                value: this.d_collapsed\n            });\n        },\n        onKeyDown(event) {\n            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {\n                this.toggle(event);\n                event.preventDefault();\n            }\n        }\n    },\n    computed: {\n        buttonAriaLabel() {\n            return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;\n        }\n    },\n    components: {\n        PlusIcon,\n        MinusIcon,\n        Button\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div :class=\"cx('header')\" v-bind=\"ptm('header')\">\n            <slot :id=\"$id + '_header'\" name=\"header\" :class=\"cx('title')\">\n                <span v-if=\"header\" :id=\"$id + '_header'\" :class=\"cx('title')\" v-bind=\"ptm('title')\">{{ header }}</span>\n            </slot>\n            <div :class=\"cx('headerActions')\" v-bind=\"ptm('headerActions')\">\n                <slot name=\"icons\"></slot>\n                <Button\n                    v-if=\"toggleable\"\n                    :id=\"$id + '_header'\"\n                    :class=\"cx('pcToggleButton')\"\n                    :aria-label=\"buttonAriaLabel\"\n                    :aria-controls=\"$id + '_content'\"\n                    :aria-expanded=\"!d_collapsed\"\n                    :unstyled=\"unstyled\"\n                    @click=\"toggle\"\n                    @keydown=\"onKeyDown\"\n                    v-bind=\"toggleButtonProps\"\n                    :pt=\"ptm('pcToggleButton')\"\n                >\n                    <template #icon=\"slotProps\">\n                        <!--TODO: togglericon deprecated since v4.0-->\n                        <slot :name=\"$slots.toggleicon ? 'toggleicon' : 'togglericon'\" :collapsed=\"d_collapsed\">\n                            <component :is=\"d_collapsed ? 'PlusIcon' : 'MinusIcon'\" :class=\"slotProps.class\" v-bind=\"ptm('pcToggleButton')['icon']\" />\n                        </slot>\n                    </template>\n                </Button>\n            </div>\n        </div>\n        <transition name=\"p-toggleable-content\" v-bind=\"ptm('transition')\">\n            <div v-show=\"!d_collapsed\" :id=\"$id + '_content'\" :class=\"cx('contentContainer')\" role=\"region\" :aria-labelledby=\"$id + '_header'\" v-bind=\"ptm('contentContainer')\">\n                <div :class=\"cx('content')\" v-bind=\"ptm('content')\">\n                    <slot></slot>\n                </div>\n                <div v-if=\"$slots.footer\" :class=\"cx('footer')\" v-bind=\"ptm('footer')\">\n                    <slot name=\"footer\"></slot>\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script>\nimport MinusIcon from '@primevue/icons/minus';\nimport PlusIcon from '@primevue/icons/plus';\nimport Button from 'primevue/button';\nimport Ripple from 'primevue/ripple';\nimport BasePanel from './BasePanel.vue';\n\nexport default {\n    name: 'Panel',\n    extends: BasePanel,\n    inheritAttrs: false,\n    emits: ['update:collapsed', 'toggle'],\n    data() {\n        return {\n            d_collapsed: this.collapsed\n        };\n    },\n    watch: {\n        collapsed(newValue) {\n            this.d_collapsed = newValue;\n        }\n    },\n    methods: {\n        toggle(event) {\n            this.d_collapsed = !this.d_collapsed;\n            this.$emit('update:collapsed', this.d_collapsed);\n            this.$emit('toggle', {\n                originalEvent: event,\n                value: this.d_collapsed\n            });\n        },\n        onKeyDown(event) {\n            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {\n                this.toggle(event);\n                event.preventDefault();\n            }\n        }\n    },\n    computed: {\n        buttonAriaLabel() {\n            return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;\n        }\n    },\n    components: {\n        PlusIcon,\n        MinusIcon,\n        Button\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","header","String","toggleable","Boolean","collapsed","toggleButtonProps","type","Object","default","severity","text","rounded","style","PanelStyle","provide","$pcPanel","$parentInstance","BasePanel","inheritAttrs","emits","data","d_collapsed","watch","newValue","methods","toggle","event","$emit","originalEvent","value","onKeyDown","code","preventDefault","computed","buttonAriaLabel","ariaLabel","components","PlusIcon","MinusIcon","Button","directives","ripple","Ripple","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptmi","_createElementVNode","ptm","_renderSlot","$slots","id","$id","_createBlock","_component_Button","$options","$data","unstyled","onClick","onKeydown","pt","icon","_withCtx","slotProps","toggleicon","_resolveDynamicComponent","_createVNode","_Transition","_withDirectives","role","footer"],"mappings":"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"}

package/panel/style/index.mjs

@@ -1,12 +1,9 @@
+import { style } from '@primeuix/styles/panel';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-panel {\n    border: 1px solid ".concat(dt('panel.border.color'), ";\n    border-radius: ").concat(dt('panel.border.radius'), ";\n    background: ").concat(dt('panel.background'), ";\n    color: ").concat(dt('panel.color'), ";\n}\n\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: ").concat(dt('panel.header.padding'), ";\n    background: ").concat(dt('panel.header.background'), ";\n    color: ").concat(dt('panel.header.color'), ";\n    border-style: solid;\n    border-width: ").concat(dt('panel.header.border.width'), ";\n    border-color: ").concat(dt('panel.header.border.color'), ";\n    border-radius: ").concat(dt('panel.header.border.radius'), ";\n}\n\n.p-panel-toggleable .p-panel-header {\n    padding: ").concat(dt('panel.toggleable.header.padding'), ";\n}\n\n.p-panel-title {\n    line-height: 1;\n    font-weight: ").concat(dt('panel.title.font.weight'), ";\n}\n\n.p-panel-content {\n    padding: ").concat(dt('panel.content.padding'), ";\n}\n\n.p-panel-footer {\n    padding: ").concat(dt('panel.footer.padding'), ";\n}\n");
-};
 var classes = {
-  root: function root(_ref2) {
-    var props = _ref2.props;
+  root: function root(_ref) {
+    var props = _ref.props;
     return ['p-panel p-component', {
       'p-panel-toggleable': props.toggleable
     }];
@@ -21,7 +18,7 @@ var classes = {
 };
 var PanelStyle = BaseStyle.extend({
   name: 'panel',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/panel/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/panel/style/PanelStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-panel {\n    border: 1px solid ${dt('panel.border.color')};\n    border-radius: ${dt('panel.border.radius')};\n    background: ${dt('panel.background')};\n    color: ${dt('panel.color')};\n}\n\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: ${dt('panel.header.padding')};\n    background: ${dt('panel.header.background')};\n    color: ${dt('panel.header.color')};\n    border-style: solid;\n    border-width: ${dt('panel.header.border.width')};\n    border-color: ${dt('panel.header.border.color')};\n    border-radius: ${dt('panel.header.border.radius')};\n}\n\n.p-panel-toggleable .p-panel-header {\n    padding: ${dt('panel.toggleable.header.padding')};\n}\n\n.p-panel-title {\n    line-height: 1;\n    font-weight: ${dt('panel.title.font.weight')};\n}\n\n.p-panel-content {\n    padding: ${dt('panel.content.padding')};\n}\n\n.p-panel-footer {\n    padding: ${dt('panel.footer.padding')};\n}\n`;\n\nconst classes = {\n    root: ({ props }) => [\n        'p-panel p-component',\n        {\n            'p-panel-toggleable': props.toggleable\n        }\n    ],\n    header: 'p-panel-header',\n    title: 'p-panel-title',\n    headerActions: 'p-panel-header-actions',\n    pcToggleButton: 'p-panel-toggle-button',\n    contentContainer: 'p-panel-content-container',\n    content: 'p-panel-content',\n    footer: 'p-panel-footer'\n};\n\nexport default BaseStyle.extend({\n    name: 'panel',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","toggleable","header","title","headerActions","pcToggleButton","contentContainer","content","footer","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,EAAE,GAAAD,IAAA,CAAFC,EAAE;EAAA,OAAAC,sCAAAA,CAAAA,MAAA,CAEKD,EAAE,CAAC,oBAAoB,CAAC,EAAA,wBAAA,CAAA,CAAAC,MAAA,CAC3BD,EAAE,CAAC,qBAAqB,CAAC,yBAAAC,MAAA,CAC5BD,EAAE,CAAC,kBAAkB,CAAC,EAAA,gBAAA,CAAA,CAAAC,MAAA,CAC3BD,EAAE,CAAC,aAAa,CAAC,EAAAC,6HAAAA,CAAAA,CAAAA,MAAA,CAOfD,EAAE,CAAC,sBAAsB,CAAC,EAAA,qBAAA,CAAA,CAAAC,MAAA,CACvBD,EAAE,CAAC,yBAAyB,CAAC,oBAAAC,MAAA,CAClCD,EAAE,CAAC,oBAAoB,CAAC,qDAAAC,MAAA,CAEjBD,EAAE,CAAC,2BAA2B,CAAC,EAAAC,uBAAAA,CAAAA,CAAAA,MAAA,CAC/BD,EAAE,CAAC,2BAA2B,CAAC,EAAA,wBAAA,CAAA,CAAAC,MAAA,CAC9BD,EAAE,CAAC,4BAA4B,CAAC,EAAAC,8DAAAA,CAAAA,CAAAA,MAAA,CAItCD,EAAE,CAAC,iCAAiC,CAAC,sEAAAC,MAAA,CAKjCD,EAAE,CAAC,yBAAyB,CAAC,EAAAC,2CAAAA,CAAAA,CAAAA,MAAA,CAIjCD,EAAE,CAAC,uBAAuB,CAAC,EAAA,0CAAA,CAAA,CAAAC,MAAA,CAI3BD,EAAE,CAAC,sBAAsB,CAAC,EAAA,QAAA,CAAA;AAAA,CAExC;AAED,IAAME,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAA,OAAO,CACjB,qBAAqB,EACrB;MACI,oBAAoB,EAAEA,KAAK,CAACC;AAChC,KAAC,CACJ;AAAA,GAAA;AACDC,EAAAA,MAAM,EAAE,gBAAgB;AACxBC,EAAAA,KAAK,EAAE,eAAe;AACtBC,EAAAA,aAAa,EAAE,wBAAwB;AACvCC,EAAAA,cAAc,EAAE,uBAAuB;AACvCC,EAAAA,gBAAgB,EAAE,2BAA2B;AAC7CC,EAAAA,OAAO,EAAE,iBAAiB;AAC1BC,EAAAA,MAAM,EAAE;AACZ,CAAC;AAED,iBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,OAAO;AACblB,EAAAA,KAAK,EAALA,KAAK;AACLI,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/panel/style/PanelStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/panel';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    root: ({ props }) => [\n        'p-panel p-component',\n        {\n            'p-panel-toggleable': props.toggleable\n        }\n    ],\n    header: 'p-panel-header',\n    title: 'p-panel-title',\n    headerActions: 'p-panel-header-actions',\n    pcToggleButton: 'p-panel-toggle-button',\n    contentContainer: 'p-panel-content-container',\n    content: 'p-panel-content',\n    footer: 'p-panel-footer'\n};\n\nexport default BaseStyle.extend({\n    name: 'panel',\n    style,\n    classes\n});\n"],"names":["classes","root","_ref","props","toggleable","header","title","headerActions","pcToggleButton","contentContainer","content","footer","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAA,OAAO,CACjB,qBAAqB,EACrB;MACI,oBAAoB,EAAEA,KAAK,CAACC;AAChC,KAAC,CACJ;AAAA,GAAA;AACDC,EAAAA,MAAM,EAAE,gBAAgB;AACxBC,EAAAA,KAAK,EAAE,eAAe;AACtBC,EAAAA,aAAa,EAAE,wBAAwB;AACvCC,EAAAA,cAAc,EAAE,uBAAuB;AACvCC,EAAAA,gBAAgB,EAAE,2BAA2B;AAC7CC,EAAAA,OAAO,EAAE,iBAAiB;AAC1BC,EAAAA,MAAM,EAAE;AACZ,CAAC;AAED,iBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,OAAO;AACbC,EAAAA,KAAK,EAALA,KAAK;AACLf,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/panelmenu/PanelMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" :class="cx('root')" v-bind="ptmi('root')">
+    <div :id="$id" :class="cx('root')" v-bind="ptmi('root')">
         <template v-for="(item, index) of model" :key="getPanelKey(index)">
             <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="[cx('panel'), getItemProp(item, 'class')]" v-bind="ptm('panel')">
                 <div
@@ -55,7 +55,6 @@
 <script>
 import { findSingle, focus, getAttribute } from '@primeuix/utils/dom';
 import { equals, isNotEmpty, resolve } from '@primeuix/utils/object';
-import { UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronRightIcon from '@primevue/icons/chevronright';
 import { mergeProps } from 'vue';
@@ -69,19 +68,10 @@ export default {
     emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
     data() {
         return {
-            id: this.$attrs.id,
             activeItem: null,
             activeItems: []
         };
     },
-    watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
     methods: {
         getItemProp(item, name) {
             return item ? resolve(item[name]) : undefined;
@@ -115,7 +105,7 @@ export default {
             return isNotEmpty(item.items);
         },
         getPanelId(index) {
-            return `${this.id}_${index}`;
+            return `${this.$id}_${index}`;
         },
         getPanelKey(index) {
             return this.getPanelId(index);

package/panelmenu/index.mjs

@@ -1,9 +1,8 @@
 import { findSingle, focus, getAttribute } from '@primeuix/utils/dom';
-import { resolve, isNotEmpty, isPrintableCharacter, findLast, isEmpty, equals } from '@primeuix/utils/object';
-import { UniqueComponentId } from '@primevue/core/utils';
+import { isNotEmpty, resolve, isEmpty, findLast, isPrintableCharacter, equals } from '@primeuix/utils/object';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronRightIcon from '@primevue/icons/chevronright';
-import { mergeProps, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, withDirectives, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString, createVNode, Transition, withCtx, vShow, renderSlot } from 'vue';
+import { mergeProps, resolveComponent, resolveDirective, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createCommentVNode, createElementVNode, createVNode, withDirectives, createBlock, resolveDynamicComponent, toDisplayString, Transition, withCtx, vShow, renderSlot } from 'vue';
 import BaseComponent from '@primevue/core/basecomponent';
 import PanelMenuStyle from 'primevue/panelmenu/style';
 import Ripple from 'primevue/ripple';
@@ -292,7 +291,7 @@ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLim
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = true, o = false; try { if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = true, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var script$1 = {
   name: 'PanelMenuList',
@@ -727,10 +726,10 @@ script$1.render = render$1;
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var script = {
   name: 'PanelMenu',
   "extends": script$3,
@@ -738,19 +737,10 @@ var script = {
   emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
   data: function data() {
     return {
-      id: this.$attrs.id,
       activeItem: null,
       activeItems: []
     };
   },
-  watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    }
-  },
-  mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
-  },
   methods: {
     getItemProp: function getItemProp(item, name) {
       return item ? resolve(item[name]) : undefined;
@@ -786,7 +776,7 @@ var script = {
       return isNotEmpty(item.items);
     },
     getPanelId: function getPanelId(index) {
-      return "".concat(this.id, "_").concat(index);
+      return "".concat(this.$id, "_").concat(index);
     },
     getPanelKey: function getPanelKey(index) {
       return this.getPanelId(index);
@@ -954,7 +944,7 @@ var _hoisted_4 = ["id", "aria-labelledby"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_PanelMenuList = resolveComponent("PanelMenuList");
   return openBlock(), createElementBlock("div", mergeProps({
-    id: $data.id,
+    id: _ctx.$id,
     "class": _ctx.cx('root')
   }, _ctx.ptmi('root')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model, function (item, index) {
     return openBlock(), createElementBlock(Fragment, {