primevue 3.16.0 → 3.17.0

package/accordion/accordion.js

@@ -1,17 +1,21 @@
 this.primevue = this.primevue || {};
-this.primevue.accordion = (function (utils, vue) {
+this.primevue.accordion = (function (utils, Ripple, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+
     var script = {
         name: 'Accordion',
-        emits: ['tab-close', 'tab-open', 'update:activeIndex'],
+        emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
         props: {
             multiple: {
                 type: Boolean,
                 default: false
             },
             activeIndex: {
-                type: [Number,Array],
+                type: [Number, Array],
                 default: null
             },
             lazy: {
@@ -25,12 +29,20 @@ this.primevue.accordion = (function (utils, vue) {
             collapseIcon: {
                 type: String,
                 default: 'pi-chevron-down'
+            },
+            tabindex: {
+                type: Number,
+                default: 0
+            },
+            selectOnFocus: {
+                type: Boolean,
+                default: false
             }
         },
         data() {
             return {
                 d_activeIndex: this.activeIndex
-            }
+            };
         },
         watch: {
             activeIndex(newValue) {
@@ -38,155 +50,248 @@ this.primevue.accordion = (function (utils, vue) {
             }
         },
         methods: {
-            onTabClick(event, tab, i) {
-                if (!this.isTabDisabled(tab)) {
-                    const active = this.isTabActive(i);
+            isAccordionTab(child) {
+                return child.type.name === 'AccordionTab';
+            },
+            isTabActive(index) {
+                return this.multiple ? this.d_activeIndex && this.d_activeIndex.includes(index) : this.d_activeIndex === index;
+            },
+            getTabProp(tab, name) {
+                return tab.props ? tab.props[name] : undefined;
+            },
+            getKey(tab, index) {
+                return this.getTabProp(tab, 'header') || index;
+            },
+            getTabHeaderActionId(index) {
+                return `${this.id}_${index}_header_action`;
+            },
+            getTabContentId(index) {
+                return `${this.id}_${index}_content`;
+            },
+            onTabClick(event, tab, index) {
+                this.changeActiveIndex(event, tab, index);
+                this.$emit('tab-click', { originalEvent: event, index });
+            },
+            onTabKeyDown(event, tab, index) {
+                switch (event.code) {
+                    case 'ArrowDown':
+                        this.onTabArrowDownKey(event);
+                        break;
+
+                    case 'ArrowUp':
+                        this.onTabArrowUpKey(event);
+                        break;
+
+                    case 'Home':
+                        this.onTabHomeKey(event);
+                        break;
+
+                    case 'End':
+                        this.onTabEndKey(event);
+                        break;
+
+                    case 'Enter':
+                    case 'Space':
+                        this.onTabEnterKey(event, tab, index);
+                        break;
+                }
+            },
+            onTabArrowDownKey(event) {
+                const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement);
+
+                nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction) : this.onTabHomeKey(event);
+                event.preventDefault();
+            },
+            onTabArrowUpKey(event) {
+                const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement);
+
+                prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction) : this.onTabEndKey(event);
+                event.preventDefault();
+            },
+            onTabHomeKey(event) {
+                const firstHeaderAction = this.findFirstHeaderAction();
+
+                this.changeFocusedTab(event, firstHeaderAction);
+                event.preventDefault();
+            },
+            onTabEndKey(event) {
+                const lastHeaderAction = this.findLastHeaderAction();
+
+                this.changeFocusedTab(event, lastHeaderAction);
+                event.preventDefault();
+            },
+            onTabEnterKey(event, tab, index) {
+                this.changeActiveIndex(event, tab, index);
+
+                event.preventDefault();
+            },
+            findNextHeaderAction(tabElement, selfCheck = false) {
+                const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+                const headerElement = utils.DomHandler.findSingle(nextTabElement, '.p-accordion-header');
+
+                return headerElement ? (utils.DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
+            },
+            findPrevHeaderAction(tabElement, selfCheck = false) {
+                const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+                const headerElement = utils.DomHandler.findSingle(prevTabElement, '.p-accordion-header');
+
+                return headerElement ? (utils.DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
+            },
+            findFirstHeaderAction() {
+                return this.findNextHeaderAction(this.$el.firstElementChild, true);
+            },
+            findLastHeaderAction() {
+                return this.findPrevHeaderAction(this.$el.lastElementChild, true);
+            },
+            changeActiveIndex(event, tab, index) {
+                if (!this.getTabProp(tab, 'disabled')) {
+                    const active = this.isTabActive(index);
                     const eventName = active ? 'tab-close' : 'tab-open';
 
                     if (this.multiple) {
                         if (active) {
-                            this.d_activeIndex = this.d_activeIndex.filter(index => index !== i);
+                            this.d_activeIndex = this.d_activeIndex.filter((i) => i !== index);
+                        } else {
+                            if (this.d_activeIndex) this.d_activeIndex.push(index);
+                            else this.d_activeIndex = [index];
                         }
-                        else {
-                            if (this.d_activeIndex)
-                                this.d_activeIndex.push(i);
-                            else
-                                this.d_activeIndex = [i];
-                        }
-                    }
-                    else {
-                        this.d_activeIndex = this.d_activeIndex === i ? null : i;
+                    } else {
+                        this.d_activeIndex = this.d_activeIndex === index ? null : index;
                     }
 
                     this.$emit('update:activeIndex', this.d_activeIndex);
-
-                    this.$emit(eventName, {
-                        originalEvent: event,
-                        index: i
-                    });
+                    this.$emit(eventName, { originalEvent: event, index });
                 }
             },
-            onTabKeydown(event, tab, i) {
-                if (event.which === 13) {
-                    this.onTabClick(event, tab, i);
+            changeFocusedTab(event, element) {
+                if (element) {
+                    utils.DomHandler.focus(element);
+
+                    if (this.selectOnFocus) {
+                        const index = parseInt(element.parentElement.parentElement.dataset.index, 10);
+                        const tab = this.tabs[index];
+
+                        this.changeActiveIndex(event, tab, index);
+                    }
                 }
             },
-            isTabActive(index) {
-                if (this.multiple)
-                    return this.d_activeIndex && this.d_activeIndex.includes(index);
-                else
-                    return index === this.d_activeIndex;
-            },
-            getKey(tab, i) {
-                return (tab.props && tab.props.header) ? tab.props.header : i;
-            },
-            isTabDisabled(tab) {
-                return tab.props && tab.props.disabled;
-            },
             getTabClass(i) {
-                return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];
+                return [
+                    'p-accordion-tab',
+                    {
+                        'p-accordion-tab-active': this.isTabActive(i)
+                    }
+                ];
             },
             getTabHeaderClass(tab, i) {
-                return ['p-accordion-header', {'p-highlight': this.isTabActive(i), 'p-disabled': this.isTabDisabled(tab)}];
-            },
-            getTabAriaId(i) {
-                return this.ariaId + '_' + i;
-            },
-            getHeaderCollapseIcon() {
-                return ['p-accordion-toggle-icon pi', this.collapseIcon];
+                return [
+                    'p-accordion-header',
+                    this.getTabProp(tab, 'headerClass'),
+                    {
+                        'p-highlight': this.isTabActive(i),
+                        'p-disabled': this.getTabProp(tab, 'disabled')
+                    }
+                ];
             },
-            getHeaderExpandIcon() {
-                return ['p-accordion-toggle-icon pi', this.expandIcon];
+            getTabHeaderIconClass(i) {
+                return ['p-accordion-toggle-icon pi', this.isTabActive(i) ? this.collapseIcon : this.expandIcon];
             },
-            isAccordionTab(child) {
-                return child.type.name === 'AccordionTab';
+            getTabContentClass(tab) {
+                return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
             }
         },
         computed: {
             tabs() {
-                const tabs = [];
-                this.$slots.default().forEach(child => {
-                        if (this.isAccordionTab(child)) {
-                            tabs.push(child);
-                        }
-                        else if (child.children && child.children instanceof Array) {
-                            child.children.forEach(nestedChild => {
-                                if (this.isAccordionTab(nestedChild)) {
-                                    tabs.push(nestedChild);
-                                }
-                            });
-                        }
+                return this.$slots.default().reduce((tabs, child) => {
+                    if (this.isAccordionTab(child)) {
+                        tabs.push(child);
+                    } else if (child.children && child.children instanceof Array) {
+                        child.children.forEach((nestedChild) => {
+                            if (this.isAccordionTab(nestedChild)) {
+                                tabs.push(nestedChild);
+                            }
+                        });
                     }
-                );
-                return tabs;
+
+                    return tabs;
+                }, []);
             },
-            ariaId() {
-                return utils.UniqueComponentId();
+            id() {
+                return this.$attrs.id || utils.UniqueComponentId();
             }
+        },
+        directives: {
+            ripple: Ripple__default["default"]
         }
     };
 
     const _hoisted_1 = { class: "p-accordion p-component" };
-    const _hoisted_2 = ["onClick", "onKeydown", "tabindex", "aria-expanded", "id", "aria-controls"];
-    const _hoisted_3 = {
+    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_4 = ["id", "aria-labelledby"];
-    const _hoisted_5 = { class: "p-accordion-content" };
+    const _hoisted_5 = ["id", "aria-labelledby"];
+    const _hoisted_6 = { class: "p-accordion-content" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.tabs, (tab, i) => {
           return (vue.openBlock(), vue.createElementBlock("div", {
-            key: $options.getKey(tab,i),
-            class: vue.normalizeClass($options.getTabClass(i))
+            key: $options.getKey(tab, i),
+            class: vue.normalizeClass($options.getTabClass(i)),
+            "data-index": i
           }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass($options.getTabHeaderClass(tab, i))
-            }, [
-              vue.createElementVNode("a", {
-                role: "tab",
-                class: "p-accordion-header-link",
-                onClick: $event => ($options.onTabClick($event, tab, i)),
-                onKeydown: $event => ($options.onTabKeydown($event, tab, i)),
-                tabindex: $options.isTabDisabled(tab) ? null : '0',
+            vue.createElementVNode("div", vue.mergeProps({
+              style: $options.getTabProp(tab, 'headerStyle'),
+              class: $options.getTabHeaderClass(tab, i)
+            }, $options.getTabProp(tab, 'headerProps')), [
+              vue.createElementVNode("a", vue.mergeProps({
+                id: $options.getTabHeaderActionId(i),
+                class: "p-accordion-header-link p-accordion-header-action",
+                tabindex: $options.getTabProp(tab, 'disabled') ? -1 : $props.tabindex,
+                role: "button",
+                "aria-disabled": $options.getTabProp(tab, 'disabled'),
                 "aria-expanded": $options.isTabActive(i),
-                id: $options.getTabAriaId(i) + '_header',
-                "aria-controls": $options.getTabAriaId(i) + '_content'
-              }, [
+                "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.isTabActive(i) ? $options.getHeaderCollapseIcon() : $options.getHeaderExpandIcon())
+                  class: vue.normalizeClass($options.getTabHeaderIconClass(i)),
+                  "aria-hidden": "true"
                 }, null, 2),
                 (tab.props && tab.props.header)
-                  ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(tab.props.header), 1))
+                  ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(tab.props.header), 1))
                   : vue.createCommentVNode("", true),
                 (tab.children && tab.children.header)
                   ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab.children.header), { key: 1 }))
                   : vue.createCommentVNode("", true)
-              ], 40, _hoisted_2)
-            ], 2),
+              ], 16, _hoisted_3)
+            ], 16),
             vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
               default: vue.withCtx(() => [
                 ($props.lazy ? $options.isTabActive(i) : true)
-                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                       key: 0,
-                      class: "p-toggleable-content",
+                      id: $options.getTabContentId(i),
+                      style: $options.getTabProp(tab, 'contentStyle'),
+                      class: $options.getTabContentClass(tab),
                       role: "region",
-                      id: $options.getTabAriaId(i) + '_content',
-                      "aria-labelledby": $options.getTabAriaId(i) + '_header'
-                    }, [
-                      vue.createElementVNode("div", _hoisted_5, [
+                      "aria-labelledby": $options.getTabHeaderActionId(i)
+                    }, $options.getTabProp(tab, 'contentProps')), [
+                      vue.createElementVNode("div", _hoisted_6, [
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab)))
                       ])
-                    ], 8, _hoisted_4)), [
-                      [vue.vShow, $props.lazy ? true: $options.isTabActive(i)]
+                    ], 16, _hoisted_5)), [
+                      [vue.vShow, $props.lazy ? true : $options.isTabActive(i)]
                     ])
                   : vue.createCommentVNode("", true)
               ]),
               _: 2
             }, 1024)
-          ], 2))
+          ], 10, _hoisted_2))
         }), 128))
       ]))
     }
@@ -218,11 +323,11 @@ this.primevue.accordion = (function (utils, vue) {
       }
     }
 
-    var css_248z = "\n.p-accordion-header-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    position: relative;\n    text-decoration: none;\n}\n.p-accordion-header-link:focus {\n    z-index: 1;\n}\n.p-accordion-header-text {\n    line-height: 1;\n}\n";
+    var css_248z = "\n.p-accordion-header-action {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\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";
     styleInject(css_248z);
 
     script.render = render;
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.utils, primevue.ripple, Vue);

package/accordion/accordion.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.accordion=function(e,t){"use strict";var n={name:"Accordion",emits:["tab-close","tab-open","update:activeIndex"],props:{multiple:{type:Boolean,default:!1},activeIndex:{type:[Number,Array],default:null},lazy:{type:Boolean,default:!1},expandIcon:{type:String,default:"pi-chevron-right"},collapseIcon:{type:String,default:"pi-chevron-down"}},data(){return{d_activeIndex:this.activeIndex}},watch:{activeIndex(e){this.d_activeIndex=e}},methods:{onTabClick(e,t,n){if(!this.isTabDisabled(t)){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})}},onTabKeydown(e,t,n){13===e.which&&this.onTabClick(e,t,n)},isTabActive(e){return this.multiple?this.d_activeIndex&&this.d_activeIndex.includes(e):e===this.d_activeIndex},getKey:(e,t)=>e.props&&e.props.header?e.props.header:t,isTabDisabled:e=>e.props&&e.props.disabled,getTabClass(e){return["p-accordion-tab",{"p-accordion-tab-active":this.isTabActive(e)}]},getTabHeaderClass(e,t){return["p-accordion-header",{"p-highlight":this.isTabActive(t),"p-disabled":this.isTabDisabled(e)}]},getTabAriaId(e){return this.ariaId+"_"+e},getHeaderCollapseIcon(){return["p-accordion-toggle-icon pi",this.collapseIcon]},getHeaderExpandIcon(){return["p-accordion-toggle-icon pi",this.expandIcon]},isAccordionTab:e=>"AccordionTab"===e.type.name},computed:{tabs(){const e=[];return this.$slots.default().forEach((t=>{this.isAccordionTab(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isAccordionTab(t)&&e.push(t)}))})),e},ariaId:()=>e.UniqueComponentId()}};const a={class:"p-accordion p-component"},i=["onClick","onKeydown","tabindex","aria-expanded","id","aria-controls"],o={key:0,class:"p-accordion-header-text"},c=["id","aria-labelledby"],d={class:"p-accordion-content"};return 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-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    position: relative;\n    text-decoration: none;\n}\n.p-accordion-header-link:focus {\n    z-index: 1;\n}\n.p-accordion-header-text {\n    line-height: 1;\n}\n"),n.render=function(e,n,r,s,l,p){return t.openBlock(),t.createElementBlock("div",a,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(p.tabs,((e,n)=>(t.openBlock(),t.createElementBlock("div",{key:p.getKey(e,n),class:t.normalizeClass(p.getTabClass(n))},[t.createElementVNode("div",{class:t.normalizeClass(p.getTabHeaderClass(e,n))},[t.createElementVNode("a",{role:"tab",class:"p-accordion-header-link",onClick:t=>p.onTabClick(t,e,n),onKeydown:t=>p.onTabKeydown(t,e,n),tabindex:p.isTabDisabled(e)?null:"0","aria-expanded":p.isTabActive(n),id:p.getTabAriaId(n)+"_header","aria-controls":p.getTabAriaId(n)+"_content"},[t.createElementVNode("span",{class:t.normalizeClass(p.isTabActive(n)?p.getHeaderCollapseIcon():p.getHeaderExpandIcon())},null,2),e.props&&e.props.header?(t.openBlock(),t.createElementBlock("span",o,t.toDisplayString(e.props.header),1)):t.createCommentVNode("",!0),e.children&&e.children.header?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.children.header),{key:1})):t.createCommentVNode("",!0)],40,i)],2),t.createVNode(t.Transition,{name:"p-toggleable-content"},{default:t.withCtx((()=>[!r.lazy||p.isTabActive(n)?t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,class:"p-toggleable-content",role:"region",id:p.getTabAriaId(n)+"_content","aria-labelledby":p.getTabAriaId(n)+"_header"},[t.createElementVNode("div",d,[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e)))])],8,c)),[[t.vShow,!!r.lazy||p.isTabActive(n)]]):t.createCommentVNode("",!0)])),_:2},1024)],2)))),128))])},n}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.accordion=function(e,t,n){"use strict";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-chevron-right"},collapseIcon:{type:String,default:"pi-chevron-down"},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1}},data(){return{d_activeIndex:this.activeIndex}},watch:{activeIndex(e){this.d_activeIndex=e}},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(t,n=!1){const a=n?t:t.nextElementSibling,i=e.DomHandler.findSingle(a,".p-accordion-header");return i?e.DomHandler.hasClass(i,"p-disabled")?this.findNextHeaderAction(i.parentElement):e.DomHandler.findSingle(i,".p-accordion-header-action"):null},findPrevHeaderAction(t,n=!1){const a=n?t:t.previousElementSibling,i=e.DomHandler.findSingle(a,".p-accordion-header");return i?e.DomHandler.hasClass(i,"p-disabled")?this.findPrevHeaderAction(i.parentElement):e.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(t,n){if(n&&(e.DomHandler.focus(n),this.selectOnFocus)){const e=parseInt(n.parentElement.parentElement.dataset.index,10),a=this.tabs[e];this.changeActiveIndex(t,a,e)}},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 pi",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)),[])},id(){return this.$attrs.id||e.UniqueComponentId()}},directives:{ripple:a(t).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"};return 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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\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))])},i}(primevue.utils,primevue.ripple,Vue);

package/accordiontab/AccordionTab.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { AnchorHTMLAttributes, HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface AccordionTabProps {
@@ -6,6 +6,34 @@ export interface AccordionTabProps {
      * Orientation of tab headers.
      */
     header?: string | undefined;
+    /**
+     * Inline style of the tab header.
+     */
+    headerStyle?: any;
+    /**
+     * Style class of the tab header.
+     */
+    headerClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the tab header.
+     */
+    headerProps?: HTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     */
+    headerActionProps?: AnchorHTMLAttributes | undefined;
+    /**
+     * Inline style of the tab content.
+     */
+    contentStyle?: any;
+    /**
+     * Style class of the tab content.
+     */
+    contentClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the tab content.
+     */
+    contentProps?: HTMLAttributes | undefined;
     /**
      * Whether the tab is disabled.
      */
@@ -23,13 +51,13 @@ export interface AccordionTabSlots {
     header: () => VNode[];
 }
 
-export declare type AccordionTabEmits = { }
+export declare type AccordionTabEmits = {};
 
-declare class AccordionTab extends ClassComponent<AccordionTabProps, AccordionTabSlots, AccordionTabEmits> { }
+declare class AccordionTab extends ClassComponent<AccordionTabProps, AccordionTabSlots, AccordionTabEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        AccordionTab: GlobalComponentConstructor<AccordionTab>
+        AccordionTab: GlobalComponentConstructor<AccordionTab>;
     }
 }
 
@@ -39,7 +67,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Accordion](https://www.primefaces.org/primevue/showcase/#/accordion)
+ * - [Accordion](https://www.primefaces.org/primevue/accordion)
  *
  */
 export default AccordionTab;

package/accordiontab/AccordionTab.vue

@@ -7,7 +7,14 @@ export default {
     name: 'AccordionTab',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
-}
+};
 </script>

package/accordiontab/accordiontab.cjs.js

@@ -6,6 +6,13 @@ var script = {
     name: 'AccordionTab',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
 };

package/accordiontab/accordiontab.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),r={name:"AccordionTab",props:{header:null,disabled:Boolean}};r.render=function(r,o,n,d,l,t){return e.renderSlot(r.$slots,"default")},module.exports=r;
+"use strict";var e=require("vue"),l={name:"AccordionTab",props:{header:null,headerStyle:null,headerClass:null,headerProps:null,headerActionProps:null,contentStyle:null,contentClass:null,contentProps:null,disabled:Boolean}};l.render=function(l,n,r,o,t,u){return e.renderSlot(l.$slots,"default")},module.exports=l;

package/accordiontab/accordiontab.esm.js

@@ -4,6 +4,13 @@ var script = {
     name: 'AccordionTab',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
 };

package/accordiontab/accordiontab.esm.min.js

@@ -1 +1 @@
-import{renderSlot as e}from"vue";var r={name:"AccordionTab",props:{header:null,disabled:Boolean}};r.render=function(r,o,a,n,d,l){return e(r.$slots,"default")};export{r as default};
+import{renderSlot as e}from"vue";var l={name:"AccordionTab",props:{header:null,headerStyle:null,headerClass:null,headerProps:null,headerActionProps:null,contentStyle:null,contentClass:null,contentProps:null,disabled:Boolean}};l.render=function(l,n,r,o,t,a){return e(l.$slots,"default")};export{l as default};

package/accordiontab/accordiontab.js

@@ -6,6 +6,13 @@ this.primevue.accordiontab = (function (vue) {
         name: 'AccordionTab',
         props: {
             header: null,
+            headerStyle: null,
+            headerClass: null,
+            headerProps: null,
+            headerActionProps: null,
+            contentStyle: null,
+            contentClass: null,
+            contentProps: null,
             disabled: Boolean
         }
     };

package/accordiontab/accordiontab.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.accordiontab=function(e){"use strict";var r={name:"AccordionTab",props:{header:null,disabled:Boolean}};return r.render=function(r,n,t,i,o,u){return e.renderSlot(r.$slots,"default")},r}(Vue);
+this.primevue=this.primevue||{},this.primevue.accordiontab=function(e){"use strict";var n={name:"AccordionTab",props:{header:null,headerStyle:null,headerClass:null,headerProps:null,headerActionProps:null,contentStyle:null,contentClass:null,contentProps:null,disabled:Boolean}};return n.render=function(n,l,r,t,o,u){return e.renderSlot(n.$slots,"default")},n}(Vue);

package/api/Api.d.ts

@@ -144,7 +144,7 @@ export interface PrimeIconsOptions {
     readonly ENVELOPE: string;
     readonly EURO: string;
     readonly EXCLAMATION_CIRCLE: string;
-    readonly EXCLAMATION_TRIANGLE : string;
+    readonly EXCLAMATION_TRIANGLE: string;
     readonly EXTERNAL_LINK: string;
     readonly EYE: string;
     readonly EYE_SLASH: string;