primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 7.19 kB
JavaScript
import e from"primevue/basecomponent";import t from"primevue/icons/chevrondown";import n from"primevue/icons/chevronright";import a from"primevue/ripple";import{UniqueComponentId as i,DomHandler as o}from"primevue/utils";import{openBlock as r,createElementBlock as d,mergeProps as s,Fragment as c,renderList as l,createElementVNode as h,createBlock as p,resolveDynamicComponent as b,toDisplayString as u,createCommentVNode as T,createVNode as g,Transition as v,withCtx as m,withDirectives as f,vShow as x}from"vue";var y={name:"Accordion",extends:e,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()},activeIndex(e){this.d_activeIndex=e}},mounted(){this.id=this.id||i()},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=o.findSingle(n,".p-accordion-header");return a?o.hasClass(a,"p-disabled")?this.findNextHeaderAction(a.parentElement):o.findSingle(a,".p-accordion-header-action"):null},findPrevHeaderAction(e,t=!1){const n=t?e:e.previousElementSibling,a=o.findSingle(n,".p-accordion-header");return a?o.hasClass(a,"p-disabled")?this.findPrevHeaderAction(a.parentElement):o.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&&(o.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:t,ChevronRightIcon:n},directives:{ripple:a}};const A=["data-index"],I=["id","tabindex","aria-disabled","aria-expanded","aria-controls","onClick","onKeydown"],C=["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"),y.render=function(e,t,n,a,i,o){return r(),d("div",s({class:"p-accordion p-component"},e.ptm("root")),[(r(!0),d(c,null,l(o.tabs,((e,t)=>(r(),d("div",s({key:o.getKey(e,t),class:o.getTabClass(t),"data-index":t},o.getTabPT(e,"root")),[h("div",s({style:o.getTabProp(e,"headerStyle"),class:o.getTabHeaderClass(e,t)},{...o.getTabProp(e,"headerProps"),...o.getTabPT(e,"header")}),[h("a",s({id:o.getTabHeaderActionId(t),class:"p-accordion-header-link p-accordion-header-action",tabindex:o.getTabProp(e,"disabled")?-1:n.tabindex,role:"button","aria-disabled":o.getTabProp(e,"disabled"),"aria-expanded":o.isTabActive(t),"aria-controls":o.getTabContentId(t),onClick:n=>o.onTabClick(n,e,t),onKeydown:n=>o.onTabKeyDown(n,e,t)},{...o.getTabProp(e,"headeractionprops"),...o.getTabPT(e,"headeraction")}),[e.children&&e.children.headericon?(r(),p(b(e.children.headericon),{key:0,isTabActive:o.isTabActive(t),index:t},null,8,["isTabActive","index"])):o.isTabActive(t)?(r(),p(b(n.collapseIcon?"span":"ChevronDownIcon"),s({key:1,class:["p-accordion-toggle-icon",n.collapseIcon],"aria-hidden":"true"},o.getTabPT(e,"headericon")),null,16,["class"])):(r(),p(b(n.expandIcon?"span":"ChevronRightIcon"),s({key:2,class:["p-accordion-toggle-icon",n.expandIcon],"aria-hidden":"true"},o.getTabPT(e,"headericon")),null,16,["class"])),e.props&&e.props.header?(r(),d("span",s({key:3,class:"p-accordion-header-text"},o.getTabPT(e,"headertitle")),u(e.props.header),17)):T("",!0),e.children&&e.children.header?(r(),p(b(e.children.header),{key:4})):T("",!0)],16,I)],16),g(v,{name:"p-toggleable-content"},{default:m((()=>[!n.lazy||o.isTabActive(t)?f((r(),d("div",s({key:0,id:o.getTabContentId(t),style:o.getTabProp(e,"contentStyle"),class:o.getTabContentClass(e),role:"region","aria-labelledby":o.getTabHeaderActionId(t)},{...o.getTabProp(e,"contentProps"),...o.getTabPT(e,"toggleablecontent")}),[h("div",s({class:"p-accordion-content"},o.getTabPT(e,"content")),[(r(),p(b(e)))],16)],16,C)),[[x,!!n.lazy||o.isTabActive(t)]]):T("",!0)])),_:2},1024)],16,A)))),128))],16)};export{y as default};