primevue 3.26.0 → 3.27.0

package/README.md

@@ -15,10 +15,10 @@ PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
 
 ````
 // with npm
-npm install primevue primeicons
+npm install primevue
 
 // with yarn
-yarn add primevue primeicons
+yarn add primevue
 ````
 
 ## Plugin
@@ -44,9 +44,6 @@ import 'primevue/resources/themes/lara-light-blue/theme.css';
 
 // core
 import 'primevue/resources/primevue.min.css';
-
-// icons
-import 'primeicons/primeicons.css';
 ```
 
 Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.
@@ -96,8 +93,7 @@ Open the nuxt configuration file and add the css dependencies.
 export default defineNuxtConfig({
     css: [
         "primevue/resources/themes/lara-light-blue/theme.css",
-        "primevue/resources/primevue.css",
-        "primeicons/primeicons.css"
+        "primevue/resources/primevue.css"
     ],
 	build: {
 		transpile: ["primevue"]
@@ -142,7 +138,7 @@ We've created various samples for the popular options in the Vue ecosystem. Visi
 
 ### Astro
 <a href="https://github.com/primefaces/primevue-examples/tree/main/astro-quickstart">
-  <img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="astro" width="112" height="112">
+  <img src="https://primefaces.org/cdn/primevue/images/logos/astro.svg" alt="astro" width="112" height="112">
 </a>
 
 ## Contributors

package/accordion/Accordion.d.ts

@@ -10,6 +10,15 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionPassThroughMethodOptions {
+    props: AccordionProps;
+    state: AccordionState;
+}
 /**
  * Custom tab open event.
  * @see {@link AccordionEmits.tab-open}
@@ -40,6 +49,38 @@ export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
  */
 export interface AccordionClickEvent extends AccordionTabOpenEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionProps.pt}
+ */
+export interface AccordionPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AccordionPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Accordion component.
+ */
+export interface AccordionState {
+    /**
+     * Current id state as a string
+     */
+    id: string;
+    /**
+     * Current active index state.
+     */
+    d_activeIndex: number | number[];
+}
+
 /**
  * Defines valid properties in Accordion component.
  */
@@ -61,12 +102,10 @@ export interface AccordionProps {
     lazy?: boolean | undefined;
     /**
      * Icon of a collapsed tab.
-     * @defaultValue pi pi-chevron-right
      */
     expandIcon?: string | undefined;
     /**
      * Icon of an expanded tab.
-     * @defaultValue pi pi-chevron-down
      */
     collapseIcon?: string | undefined;
     /**
@@ -79,6 +118,11 @@ export interface AccordionProps {
      * @defaultValue false
      */
     selectOnFocus?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AccordionPassThroughOptions}
+     */
+    pt?: AccordionPassThroughOptions;
 }
 
 /**

package/accordion/Accordion.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="p-accordion p-component">
-        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i">
-            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="getTabProp(tab, 'headerProps')">
+    <div class="p-accordion p-component" v-bind="ptm('root')">
+        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root')">
+            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header') }">
                 <a
                     :id="getTabHeaderActionId(i)"
                     class="p-accordion-header-link p-accordion-header-action"
@@ -12,10 +12,12 @@
                     :aria-controls="getTabContentId(i)"
                     @click="onTabClick($event, tab, i)"
                     @keydown="onTabKeyDown($event, tab, i)"
-                    v-bind="getTabProp(tab, 'headerActionProps')"
+                    v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction') }"
                 >
-                    <span :class="getTabHeaderIconClass(i)" aria-hidden="true"></span>
-                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text">{{ tab.props.header }}</span>
+                    <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
+                    <component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="['p-accordion-toggle-icon', collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')" />
+                    <component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="['p-accordion-toggle-icon', expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')" />
+                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
                     <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                 </a>
             </div>
@@ -28,9 +30,9 @@
                     :class="getTabContentClass(tab)"
                     role="region"
                     :aria-labelledby="getTabHeaderActionId(i)"
-                    v-bind="getTabProp(tab, 'contentProps')"
+                    v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent') }"
                 >
-                    <div class="p-accordion-content">
+                    <div class="p-accordion-content" v-bind="getTabPT(tab, 'content')">
                         <component :is="tab"></component>
                     </div>
                 </div>
@@ -40,11 +42,15 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Accordion',
+    extends: BaseComponent,
     emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
     props: {
         multiple: {
@@ -61,11 +67,11 @@ export default {
         },
         expandIcon: {
             type: String,
-            default: 'pi pi-chevron-right'
+            default: undefined
         },
         collapseIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         tabindex: {
             type: Number,
@@ -112,6 +118,15 @@ export default {
         getTabContentId(index) {
             return `${this.id}_${index}_content`;
         },
+        getTabPT(tab, key) {
+            return this.ptmo(this.getTabProp(tab, 'pt'), key, {
+                props: tab.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
         onTabClick(event, tab, index) {
             this.changeActiveIndex(event, tab, index);
             this.$emit('tab-click', { originalEvent: event, index });
@@ -240,9 +255,6 @@ export default {
                 }
             ];
         },
-        getTabHeaderIconClass(i) {
-            return ['p-accordion-toggle-icon', this.isTabActive(i) ? this.collapseIcon : this.expandIcon];
-        },
         getTabContentClass(tab) {
             return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
         }
@@ -264,6 +276,10 @@ export default {
             }, []);
         }
     },
+    components: {
+        ChevronDownIcon,
+        ChevronRightIcon
+    },
     directives: {
         ripple: Ripple
     }

package/accordion/accordion.cjs.js

@@ -1,15 +1,22 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
+var ChevronDownIcon = require('primevue/icons/chevrondown');
+var ChevronRightIcon = require('primevue/icons/chevronright');
 var Ripple = require('primevue/ripple');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
+var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Accordion',
+    extends: BaseComponent__default["default"],
     emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
     props: {
         multiple: {
@@ -26,11 +33,11 @@ var script = {
         },
         expandIcon: {
             type: String,
-            default: 'pi pi-chevron-right'
+            default: undefined
         },
         collapseIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         tabindex: {
             type: Number,
@@ -77,6 +84,15 @@ var script = {
         getTabContentId(index) {
             return `${this.id}_${index}_content`;
         },
+        getTabPT(tab, key) {
+            return this.ptmo(this.getTabProp(tab, 'pt'), key, {
+                props: tab.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
         onTabClick(event, tab, index) {
             this.changeActiveIndex(event, tab, index);
             this.$emit('tab-click', { originalEvent: event, index });
@@ -202,9 +218,6 @@ var script = {
                 }
             ];
         },
-        getTabHeaderIconClass(i) {
-            return ['p-accordion-toggle-icon', this.isTabActive(i) ? this.collapseIcon : this.expandIcon];
-        },
         getTabContentClass(tab) {
             return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
         }
@@ -226,33 +239,31 @@ var script = {
             }, []);
         }
     },
+    components: {
+        ChevronDownIcon: ChevronDownIcon__default["default"],
+        ChevronRightIcon: ChevronRightIcon__default["default"]
+    },
     directives: {
         ripple: Ripple__default["default"]
     }
 };
 
-const _hoisted_1 = { class: "p-accordion p-component" };
-const _hoisted_2 = ["data-index"];
-const _hoisted_3 = ["id", "tabindex", "aria-disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown"];
-const _hoisted_4 = {
-  key: 0,
-  class: "p-accordion-header-text"
-};
-const _hoisted_5 = ["id", "aria-labelledby"];
-const _hoisted_6 = { class: "p-accordion-content" };
+const _hoisted_1 = ["data-index"];
+const _hoisted_2 = ["id", "tabindex", "aria-disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown"];
+const _hoisted_3 = ["id", "aria-labelledby"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-accordion p-component" }, _ctx.ptm('root')), [
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.tabs, (tab, i) => {
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         key: $options.getKey(tab, i),
-        class: vue.normalizeClass($options.getTabClass(i)),
+        class: $options.getTabClass(i),
         "data-index": i
-      }, [
+      }, $options.getTabPT(tab, 'root')), [
         vue.createElementVNode("div", vue.mergeProps({
           style: $options.getTabProp(tab, 'headerStyle'),
           class: $options.getTabHeaderClass(tab, i)
-        }, $options.getTabProp(tab, 'headerProps')), [
+        }, { ...$options.getTabProp(tab, 'headerProps'), ...$options.getTabPT(tab, 'header') }), [
           vue.createElementVNode("a", vue.mergeProps({
             id: $options.getTabHeaderActionId(i),
             class: "p-accordion-header-link p-accordion-header-action",
@@ -263,18 +274,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-controls": $options.getTabContentId(i),
             onClick: $event => ($options.onTabClick($event, tab, i)),
             onKeydown: $event => ($options.onTabKeyDown($event, tab, i))
-          }, $options.getTabProp(tab, 'headerActionProps')), [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass($options.getTabHeaderIconClass(i)),
-              "aria-hidden": "true"
-            }, null, 2),
+          }, { ...$options.getTabProp(tab, 'headeractionprops'), ...$options.getTabPT(tab, 'headeraction') }), [
+            (tab.children && tab.children.headericon)
+              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab.children.headericon), {
+                  key: 0,
+                  isTabActive: $options.isTabActive(i),
+                  index: i
+                }, null, 8, ["isTabActive", "index"]))
+              : ($options.isTabActive(i))
+                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.collapseIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
+                    key: 1,
+                    class: ['p-accordion-toggle-icon', $props.collapseIcon],
+                    "aria-hidden": "true"
+                  }, $options.getTabPT(tab, 'headericon')), null, 16, ["class"]))
+                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.expandIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
+                    key: 2,
+                    class: ['p-accordion-toggle-icon', $props.expandIcon],
+                    "aria-hidden": "true"
+                  }, $options.getTabPT(tab, 'headericon')), null, 16, ["class"])),
             (tab.props && tab.props.header)
-              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(tab.props.header), 1))
+              ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                  key: 3,
+                  class: "p-accordion-header-text"
+                }, $options.getTabPT(tab, 'headertitle')), vue.toDisplayString(tab.props.header), 17))
               : vue.createCommentVNode("", true),
             (tab.children && tab.children.header)
-              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab.children.header), { key: 1 }))
+              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab.children.header), { key: 4 }))
               : vue.createCommentVNode("", true)
-          ], 16, _hoisted_3)
+          ], 16, _hoisted_2)
         ], 16),
         vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
           default: vue.withCtx(() => [
@@ -286,20 +313,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   class: $options.getTabContentClass(tab),
                   role: "region",
                   "aria-labelledby": $options.getTabHeaderActionId(i)
-                }, $options.getTabProp(tab, 'contentProps')), [
-                  vue.createElementVNode("div", _hoisted_6, [
+                }, { ...$options.getTabProp(tab, 'contentProps'), ...$options.getTabPT(tab, 'toggleablecontent') }), [
+                  vue.createElementVNode("div", vue.mergeProps({ class: "p-accordion-content" }, $options.getTabPT(tab, 'content')), [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab)))
-                  ])
-                ], 16, _hoisted_5)), [
+                  ], 16)
+                ], 16, _hoisted_3)), [
                   [vue.vShow, $props.lazy ? true : $options.isTabActive(i)]
                 ])
               : vue.createCommentVNode("", true)
           ]),
           _: 2
         }, 1024)
-      ], 10, _hoisted_2))
+      ], 16, _hoisted_1))
     }), 128))
-  ]))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/accordion/accordion.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),n=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Accordion",emits:["update:activeIndex","tab-open","tab-close","tab-click"],props:{multiple:{type:Boolean,default:!1},activeIndex:{type:[Number,Array],default:null},lazy:{type:Boolean,default:!1},expandIcon:{type:String,default:"pi pi-chevron-right"},collapseIcon:{type:String,default:"pi pi-chevron-down"},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1}},data(){return{id:this.$attrs.id,d_activeIndex:this.activeIndex}},watch:{"$attrs.id":function(e){this.id=e||t.UniqueComponentId()},activeIndex(e){this.d_activeIndex=e}},mounted(){this.id=this.id||t.UniqueComponentId()},methods:{isAccordionTab:e=>"AccordionTab"===e.type.name,isTabActive(e){return this.multiple?this.d_activeIndex&&this.d_activeIndex.includes(e):this.d_activeIndex===e},getTabProp:(e,t)=>e.props?e.props[t]:void 0,getKey(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId(e){return`${this.id}_${e}_header_action`},getTabContentId(e){return`${this.id}_${e}_content`},onTabClick(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown(e,t,n){switch(e.code){case"ArrowDown":this.onTabArrowDownKey(e);break;case"ArrowUp":this.onTabArrowUpKey(e);break;case"Home":this.onTabHomeKey(e);break;case"End":this.onTabEndKey(e);break;case"Enter":case"Space":this.onTabEnterKey(e,t,n)}},onTabArrowDownKey(e){const t=this.findNextHeaderAction(e.target.parentElement.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowUpKey(e){const t=this.findPrevHeaderAction(e.target.parentElement.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey(e){const t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey(e){const t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEnterKey(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction(e,n=!1){const a=n?e:e.nextElementSibling,i=t.DomHandler.findSingle(a,".p-accordion-header");return i?t.DomHandler.hasClass(i,"p-disabled")?this.findNextHeaderAction(i.parentElement):t.DomHandler.findSingle(i,".p-accordion-header-action"):null},findPrevHeaderAction(e,n=!1){const a=n?e:e.previousElementSibling,i=t.DomHandler.findSingle(a,".p-accordion-header");return i?t.DomHandler.hasClass(i,"p-disabled")?this.findPrevHeaderAction(i.parentElement):t.DomHandler.findSingle(i,".p-accordion-header-action"):null},findFirstHeaderAction(){return this.findNextHeaderAction(this.$el.firstElementChild,!0)},findLastHeaderAction(){return this.findPrevHeaderAction(this.$el.lastElementChild,!0)},changeActiveIndex(e,t,n){if(!this.getTabProp(t,"disabled")){const t=this.isTabActive(n),a=t?"tab-close":"tab-open";this.multiple?t?this.d_activeIndex=this.d_activeIndex.filter((e=>e!==n)):this.d_activeIndex?this.d_activeIndex.push(n):this.d_activeIndex=[n]:this.d_activeIndex=this.d_activeIndex===n?null:n,this.$emit("update:activeIndex",this.d_activeIndex),this.$emit(a,{originalEvent:e,index:n})}},changeFocusedTab(e,n){if(n&&(t.DomHandler.focus(n),this.selectOnFocus)){const t=parseInt(n.parentElement.parentElement.dataset.index,10),a=this.tabs[t];this.changeActiveIndex(e,a,t)}},getTabClass(e){return["p-accordion-tab",{"p-accordion-tab-active":this.isTabActive(e)}]},getTabHeaderClass(e,t){return["p-accordion-header",this.getTabProp(e,"headerClass"),{"p-highlight":this.isTabActive(t),"p-disabled":this.getTabProp(e,"disabled")}]},getTabHeaderIconClass(e){return["p-accordion-toggle-icon",this.isTabActive(e)?this.collapseIcon:this.expandIcon]},getTabContentClass(e){return["p-toggleable-content",this.getTabProp(e,"contentClass")]}},computed:{tabs(){return this.$slots.default().reduce(((e,t)=>(this.isAccordionTab(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isAccordionTab(t)&&e.push(t)})),e)),[])}},directives:{ripple:a(e).default}};const o={class:"p-accordion p-component"},r=["data-index"],d=["id","tabindex","aria-disabled","aria-expanded","aria-controls","onClick","onKeydown"],c={key:0,class:"p-accordion-header-text"},s=["id","aria-labelledby"],l={class:"p-accordion-content"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-accordion-header-action {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    user-select: none;\n    position: relative;\n    text-decoration: none;\n}\n.p-accordion-header-action:focus {\n    z-index: 1;\n}\n.p-accordion-header-text {\n    line-height: 1;\n}\n"),i.render=function(e,t,a,i,p,h){return n.openBlock(),n.createElementBlock("div",o,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(h.tabs,((e,t)=>(n.openBlock(),n.createElementBlock("div",{key:h.getKey(e,t),class:n.normalizeClass(h.getTabClass(t)),"data-index":t},[n.createElementVNode("div",n.mergeProps({style:h.getTabProp(e,"headerStyle"),class:h.getTabHeaderClass(e,t)},h.getTabProp(e,"headerProps")),[n.createElementVNode("a",n.mergeProps({id:h.getTabHeaderActionId(t),class:"p-accordion-header-link p-accordion-header-action",tabindex:h.getTabProp(e,"disabled")?-1:a.tabindex,role:"button","aria-disabled":h.getTabProp(e,"disabled"),"aria-expanded":h.isTabActive(t),"aria-controls":h.getTabContentId(t),onClick:n=>h.onTabClick(n,e,t),onKeydown:n=>h.onTabKeyDown(n,e,t)},h.getTabProp(e,"headerActionProps")),[n.createElementVNode("span",{class:n.normalizeClass(h.getTabHeaderIconClass(t)),"aria-hidden":"true"},null,2),e.props&&e.props.header?(n.openBlock(),n.createElementBlock("span",c,n.toDisplayString(e.props.header),1)):n.createCommentVNode("",!0),e.children&&e.children.header?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.children.header),{key:1})):n.createCommentVNode("",!0)],16,d)],16),n.createVNode(n.Transition,{name:"p-toggleable-content"},{default:n.withCtx((()=>[!a.lazy||h.isTabActive(t)?n.withDirectives((n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,id:h.getTabContentId(t),style:h.getTabProp(e,"contentStyle"),class:h.getTabContentClass(e),role:"region","aria-labelledby":h.getTabHeaderActionId(t)},h.getTabProp(e,"contentProps")),[n.createElementVNode("div",l,[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e)))])],16,s)),[[n.vShow,!!a.lazy||h.isTabActive(t)]]):n.createCommentVNode("",!0)])),_:2},1024)],10,r)))),128))])},module.exports=i;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/icons/chevrondown"),n=require("primevue/icons/chevronright"),a=require("primevue/ripple"),i=require("primevue/utils"),o=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(e),c=r(t),s=r(n),l=r(a),p={name:"Accordion",extends:d.default,emits:["update:activeIndex","tab-open","tab-close","tab-click"],props:{multiple:{type:Boolean,default:!1},activeIndex:{type:[Number,Array],default:null},lazy:{type:Boolean,default:!1},expandIcon:{type:String,default:void 0},collapseIcon:{type:String,default:void 0},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1}},data(){return{id:this.$attrs.id,d_activeIndex:this.activeIndex}},watch:{"$attrs.id":function(e){this.id=e||i.UniqueComponentId()},activeIndex(e){this.d_activeIndex=e}},mounted(){this.id=this.id||i.UniqueComponentId()},methods:{isAccordionTab:e=>"AccordionTab"===e.type.name,isTabActive(e){return this.multiple?this.d_activeIndex&&this.d_activeIndex.includes(e):this.d_activeIndex===e},getTabProp:(e,t)=>e.props?e.props[t]:void 0,getKey(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId(e){return`${this.id}_${e}_header_action`},getTabContentId(e){return`${this.id}_${e}_content`},getTabPT(e,t){return this.ptmo(this.getTabProp(e,"pt"),t,{props:e.props,parent:{props:this.$props,state:this.$data}})},onTabClick(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown(e,t,n){switch(e.code){case"ArrowDown":this.onTabArrowDownKey(e);break;case"ArrowUp":this.onTabArrowUpKey(e);break;case"Home":this.onTabHomeKey(e);break;case"End":this.onTabEndKey(e);break;case"Enter":case"Space":this.onTabEnterKey(e,t,n)}},onTabArrowDownKey(e){const t=this.findNextHeaderAction(e.target.parentElement.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowUpKey(e){const t=this.findPrevHeaderAction(e.target.parentElement.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey(e){const t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey(e){const t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEnterKey(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction(e,t=!1){const n=t?e:e.nextElementSibling,a=i.DomHandler.findSingle(n,".p-accordion-header");return a?i.DomHandler.hasClass(a,"p-disabled")?this.findNextHeaderAction(a.parentElement):i.DomHandler.findSingle(a,".p-accordion-header-action"):null},findPrevHeaderAction(e,t=!1){const n=t?e:e.previousElementSibling,a=i.DomHandler.findSingle(n,".p-accordion-header");return a?i.DomHandler.hasClass(a,"p-disabled")?this.findPrevHeaderAction(a.parentElement):i.DomHandler.findSingle(a,".p-accordion-header-action"):null},findFirstHeaderAction(){return this.findNextHeaderAction(this.$el.firstElementChild,!0)},findLastHeaderAction(){return this.findPrevHeaderAction(this.$el.lastElementChild,!0)},changeActiveIndex(e,t,n){if(!this.getTabProp(t,"disabled")){const t=this.isTabActive(n),a=t?"tab-close":"tab-open";this.multiple?t?this.d_activeIndex=this.d_activeIndex.filter((e=>e!==n)):this.d_activeIndex?this.d_activeIndex.push(n):this.d_activeIndex=[n]:this.d_activeIndex=this.d_activeIndex===n?null:n,this.$emit("update:activeIndex",this.d_activeIndex),this.$emit(a,{originalEvent:e,index:n})}},changeFocusedTab(e,t){if(t&&(i.DomHandler.focus(t),this.selectOnFocus)){const n=parseInt(t.parentElement.parentElement.dataset.index,10),a=this.tabs[n];this.changeActiveIndex(e,a,n)}},getTabClass(e){return["p-accordion-tab",{"p-accordion-tab-active":this.isTabActive(e)}]},getTabHeaderClass(e,t){return["p-accordion-header",this.getTabProp(e,"headerClass"),{"p-highlight":this.isTabActive(t),"p-disabled":this.getTabProp(e,"disabled")}]},getTabContentClass(e){return["p-toggleable-content",this.getTabProp(e,"contentClass")]}},computed:{tabs(){return this.$slots.default().reduce(((e,t)=>(this.isAccordionTab(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isAccordionTab(t)&&e.push(t)})),e)),[])}},components:{ChevronDownIcon:c.default,ChevronRightIcon:s.default},directives:{ripple:l.default}};const h=["data-index"],b=["id","tabindex","aria-disabled","aria-expanded","aria-controls","onClick","onKeydown"],u=["id","aria-labelledby"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-accordion-header-action {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    user-select: none;\n    position: relative;\n    text-decoration: none;\n}\n.p-accordion-header-action:focus {\n    z-index: 1;\n}\n.p-accordion-header-text {\n    line-height: 1;\n}\n"),p.render=function(e,t,n,a,i,r){return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:"p-accordion p-component"},e.ptm("root")),[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(r.tabs,((e,t)=>(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:r.getKey(e,t),class:r.getTabClass(t),"data-index":t},r.getTabPT(e,"root")),[o.createElementVNode("div",o.mergeProps({style:r.getTabProp(e,"headerStyle"),class:r.getTabHeaderClass(e,t)},{...r.getTabProp(e,"headerProps"),...r.getTabPT(e,"header")}),[o.createElementVNode("a",o.mergeProps({id:r.getTabHeaderActionId(t),class:"p-accordion-header-link p-accordion-header-action",tabindex:r.getTabProp(e,"disabled")?-1:n.tabindex,role:"button","aria-disabled":r.getTabProp(e,"disabled"),"aria-expanded":r.isTabActive(t),"aria-controls":r.getTabContentId(t),onClick:n=>r.onTabClick(n,e,t),onKeydown:n=>r.onTabKeyDown(n,e,t)},{...r.getTabProp(e,"headeractionprops"),...r.getTabPT(e,"headeraction")}),[e.children&&e.children.headericon?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.children.headericon),{key:0,isTabActive:r.isTabActive(t),index:t},null,8,["isTabActive","index"])):r.isTabActive(t)?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(n.collapseIcon?"span":"ChevronDownIcon"),o.mergeProps({key:1,class:["p-accordion-toggle-icon",n.collapseIcon],"aria-hidden":"true"},r.getTabPT(e,"headericon")),null,16,["class"])):(o.openBlock(),o.createBlock(o.resolveDynamicComponent(n.expandIcon?"span":"ChevronRightIcon"),o.mergeProps({key:2,class:["p-accordion-toggle-icon",n.expandIcon],"aria-hidden":"true"},r.getTabPT(e,"headericon")),null,16,["class"])),e.props&&e.props.header?(o.openBlock(),o.createElementBlock("span",o.mergeProps({key:3,class:"p-accordion-header-text"},r.getTabPT(e,"headertitle")),o.toDisplayString(e.props.header),17)):o.createCommentVNode("",!0),e.children&&e.children.header?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.children.header),{key:4})):o.createCommentVNode("",!0)],16,b)],16),o.createVNode(o.Transition,{name:"p-toggleable-content"},{default:o.withCtx((()=>[!n.lazy||r.isTabActive(t)?o.withDirectives((o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,id:r.getTabContentId(t),style:r.getTabProp(e,"contentStyle"),class:r.getTabContentClass(e),role:"region","aria-labelledby":r.getTabHeaderActionId(t)},{...r.getTabProp(e,"contentProps"),...r.getTabPT(e,"toggleablecontent")}),[o.createElementVNode("div",o.mergeProps({class:"p-accordion-content"},r.getTabPT(e,"content")),[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e)))],16)],16,u)),[[o.vShow,!!n.lazy||r.isTabActive(t)]]):o.createCommentVNode("",!0)])),_:2},1024)],16,h)))),128))],16)},module.exports=p;

package/accordion/accordion.esm.js

@@ -1,9 +1,13 @@
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId, DomHandler } from 'primevue/utils';
-import { openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, mergeProps, toDisplayString, createCommentVNode, createBlock, resolveDynamicComponent, createVNode, Transition, withCtx, withDirectives, vShow } from 'vue';
+import { openBlock, createElementBlock, mergeProps, Fragment, renderList, createElementVNode, createBlock, resolveDynamicComponent, toDisplayString, createCommentVNode, createVNode, Transition, withCtx, withDirectives, vShow } from 'vue';
 
 var script = {
     name: 'Accordion',
+    extends: BaseComponent,
     emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
     props: {
         multiple: {
@@ -20,11 +24,11 @@ var script = {
         },
         expandIcon: {
             type: String,
-            default: 'pi pi-chevron-right'
+            default: undefined
         },
         collapseIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         tabindex: {
             type: Number,
@@ -71,6 +75,15 @@ var script = {
         getTabContentId(index) {
             return `${this.id}_${index}_content`;
         },
+        getTabPT(tab, key) {
+            return this.ptmo(this.getTabProp(tab, 'pt'), key, {
+                props: tab.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
         onTabClick(event, tab, index) {
             this.changeActiveIndex(event, tab, index);
             this.$emit('tab-click', { originalEvent: event, index });
@@ -196,9 +209,6 @@ var script = {
                 }
             ];
         },
-        getTabHeaderIconClass(i) {
-            return ['p-accordion-toggle-icon', this.isTabActive(i) ? this.collapseIcon : this.expandIcon];
-        },
         getTabContentClass(tab) {
             return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
         }
@@ -220,33 +230,31 @@ var script = {
             }, []);
         }
     },
+    components: {
+        ChevronDownIcon,
+        ChevronRightIcon
+    },
     directives: {
         ripple: Ripple
     }
 };
 
-const _hoisted_1 = { class: "p-accordion p-component" };
-const _hoisted_2 = ["data-index"];
-const _hoisted_3 = ["id", "tabindex", "aria-disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown"];
-const _hoisted_4 = {
-  key: 0,
-  class: "p-accordion-header-text"
-};
-const _hoisted_5 = ["id", "aria-labelledby"];
-const _hoisted_6 = { class: "p-accordion-content" };
+const _hoisted_1 = ["data-index"];
+const _hoisted_2 = ["id", "tabindex", "aria-disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown"];
+const _hoisted_3 = ["id", "aria-labelledby"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
+  return (openBlock(), createElementBlock("div", mergeProps({ class: "p-accordion p-component" }, _ctx.ptm('root')), [
     (openBlock(true), createElementBlock(Fragment, null, renderList($options.tabs, (tab, i) => {
-      return (openBlock(), createElementBlock("div", {
+      return (openBlock(), createElementBlock("div", mergeProps({
         key: $options.getKey(tab, i),
-        class: normalizeClass($options.getTabClass(i)),
+        class: $options.getTabClass(i),
         "data-index": i
-      }, [
+      }, $options.getTabPT(tab, 'root')), [
         createElementVNode("div", mergeProps({
           style: $options.getTabProp(tab, 'headerStyle'),
           class: $options.getTabHeaderClass(tab, i)
-        }, $options.getTabProp(tab, 'headerProps')), [
+        }, { ...$options.getTabProp(tab, 'headerProps'), ...$options.getTabPT(tab, 'header') }), [
           createElementVNode("a", mergeProps({
             id: $options.getTabHeaderActionId(i),
             class: "p-accordion-header-link p-accordion-header-action",
@@ -257,18 +265,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-controls": $options.getTabContentId(i),
             onClick: $event => ($options.onTabClick($event, tab, i)),
             onKeydown: $event => ($options.onTabKeyDown($event, tab, i))
-          }, $options.getTabProp(tab, 'headerActionProps')), [
-            createElementVNode("span", {
-              class: normalizeClass($options.getTabHeaderIconClass(i)),
-              "aria-hidden": "true"
-            }, null, 2),
+          }, { ...$options.getTabProp(tab, 'headeractionprops'), ...$options.getTabPT(tab, 'headeraction') }), [
+            (tab.children && tab.children.headericon)
+              ? (openBlock(), createBlock(resolveDynamicComponent(tab.children.headericon), {
+                  key: 0,
+                  isTabActive: $options.isTabActive(i),
+                  index: i
+                }, null, 8, ["isTabActive", "index"]))
+              : ($options.isTabActive(i))
+                ? (openBlock(), createBlock(resolveDynamicComponent($props.collapseIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
+                    key: 1,
+                    class: ['p-accordion-toggle-icon', $props.collapseIcon],
+                    "aria-hidden": "true"
+                  }, $options.getTabPT(tab, 'headericon')), null, 16, ["class"]))
+                : (openBlock(), createBlock(resolveDynamicComponent($props.expandIcon ? 'span' : 'ChevronRightIcon'), mergeProps({
+                    key: 2,
+                    class: ['p-accordion-toggle-icon', $props.expandIcon],
+                    "aria-hidden": "true"
+                  }, $options.getTabPT(tab, 'headericon')), null, 16, ["class"])),
             (tab.props && tab.props.header)
-              ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(tab.props.header), 1))
+              ? (openBlock(), createElementBlock("span", mergeProps({
+                  key: 3,
+                  class: "p-accordion-header-text"
+                }, $options.getTabPT(tab, 'headertitle')), toDisplayString(tab.props.header), 17))
               : createCommentVNode("", true),
             (tab.children && tab.children.header)
-              ? (openBlock(), createBlock(resolveDynamicComponent(tab.children.header), { key: 1 }))
+              ? (openBlock(), createBlock(resolveDynamicComponent(tab.children.header), { key: 4 }))
               : createCommentVNode("", true)
-          ], 16, _hoisted_3)
+          ], 16, _hoisted_2)
         ], 16),
         createVNode(Transition, { name: "p-toggleable-content" }, {
           default: withCtx(() => [
@@ -280,20 +304,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   class: $options.getTabContentClass(tab),
                   role: "region",
                   "aria-labelledby": $options.getTabHeaderActionId(i)
-                }, $options.getTabProp(tab, 'contentProps')), [
-                  createElementVNode("div", _hoisted_6, [
+                }, { ...$options.getTabProp(tab, 'contentProps'), ...$options.getTabPT(tab, 'toggleablecontent') }), [
+                  createElementVNode("div", mergeProps({ class: "p-accordion-content" }, $options.getTabPT(tab, 'content')), [
                     (openBlock(), createBlock(resolveDynamicComponent(tab)))
-                  ])
-                ], 16, _hoisted_5)), [
+                  ], 16)
+                ], 16, _hoisted_3)), [
                   [vShow, $props.lazy ? true : $options.isTabActive(i)]
                 ])
               : createCommentVNode("", true)
           ]),
           _: 2
         }, 1024)
-      ], 10, _hoisted_2))
+      ], 16, _hoisted_1))
     }), 128))
-  ]))
+  ], 16))
 }
 
 function styleInject(css, ref) {