@vuesimple/vs-accordion/dist/index.umd.js

A simple vue accordion.

(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-accordion{list-style:none;margin:0;padding:0}.vs-accordion__item:last-child{border-bottom:none}.vs-accordion{--vs-accordion-border-color: #d8dcde;--vs-accordion-border-radius: 4px;--vs-accordion-padding: 20px;--vs-accordion-compact-padding: 10px}.vs-accordion__item{border-bottom:1px solid var(--vs-accordion-border-color);position:relative}.vs-accordion__item.vs-accordion--box{border:1px solid var(--vs-accordion-border-color);border-radius:var(--vs-accordion-border-radius);margin-bottom:10px}.vs-accordion__trigger{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--vs-accordion-padding);transition:all .25s ease-in-out 0s}.vs-accordion__non-clickable{padding:0 var(--vs-accordion-padding) var(--vs-accordion-padding) var(--vs-accordion-padding)}.vs-accordion--compact .vs-accordion__trigger{padding:var(--vs-accordion-compact-padding)}.vs-accordion--compact .vs-accordion__non-clickable{padding:0 var(--vs-accordion-compact-padding) var(--vs-accordion-compact-padding) var(--vs-accordion-compact-padding)}.vs-accordion--compact .vs-accordion__content-wrapper{padding:0 var(--vs-accordion-compact-padding) var(--vs-accordion-compact-padding)}.vs-accordion--icon-active{transform:rotate(180deg)}.vs-accordion__button{background:transparent;border:0;outline:none;padding:0;color:inherit;font:inherit;cursor:pointer;width:100%;text-align:left}.vs-accordion--icon{flex:0 0 16px;width:16px;height:16px;vertical-align:middle;color:#68737d;transition:all .25s ease-in-out 0s}.vs-accordion.vs-accordion--disable-animate .vs-accordion--icon{transition:none}.vs-accordion__content-wrapper{padding:0 var(--vs-accordion-padding) var(--vs-accordion-padding)}.vs-accordion:not(.vs-accordion--disable-animate) .vs-accordion-enter-active,.vs-accordion:not(.vs-accordion--disable-animate) .vs-accordion-leave-active{will-change:height,opacity;transition:height .3s ease,opacity .3s ease;overflow:hidden}.vs-accordion-enter-from,.vs-accordion-leave-to{height:0!important;opacity:0}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.VsAccordion={},t.Vue))})(this,function(t,e){"use strict";const B="",a=(i,s)=>{const c=i.__vccOpts||i;for(const[l,o]of s)c[l]=o;return c},h={name:"VsAccordion",props:{active:{type:Number},isBox:{type:Boolean},isExpandable:{type:Boolean},level:{type:Number},isCompact:{type:Boolean,default:!1},disableAnimate:{type:Boolean,default:!1}},data(){return{Accordion:{count:0,active:this.active,isBox:this.isBox,isExpandable:this.isExpandable,level:this.level,isCompact:this.isCompact}}},provide(){return{Accordion:this.Accordion}},watch:{active(i){this.Accordion.active=i}}};function p(i,s,c,l,o,n){return e.openBlock(),e.createElementBlock("ul",{class:e.normalizeClass(["vs-accordion",{"vs-accordion--disable-animate":c.disableAnimate}])},[e.renderSlot(i.$slots,"default")],2)}const r=a(h,[["render",p]]),y="",_={name:"VsAccordionItem",props:{},inject:["Accordion"],data(){return{index:null,isBox:!1,isExpandable:!1,isExpandableToggle:!1,level:null,hasNonClickableContent:this.$slots["accordion-non-clickable"]}},computed:{visible(){return this.index==this.Accordion.active}},created(){this.index=this.Accordion.count++,this.isBox=this.Accordion.isBox,this.level=this.Accordion.level,this.isCompact=this.Accordion.isCompact,this.isExpandable=this.Accordion.isExpandable,this.isExpandable&&(this.isExpandableToggle=this.index===this.Accordion.active)},methods:{open(){if(this.isExpandable){this.isExpandableToggle=!this.isExpandableToggle,this.$emit("change",{visible:this.isExpandableToggle,index:this.index});return}this.visible?this.Accordion.active=null:this.Accordion.active=this.index,this.$emit("change",{visible:this.visible,index:this.index})},start(i){i.style.height=i.scrollHeight+"px"},onEnter(i){this.$emit("open"),i.style.height=""},onLeave(i){this.$emit("hide"),i.style.height=""}}},b=["aria-level"],m=["id","aria-expanded"],v=[e.createElementVNode("path",{fill:"currentColor",d:"M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"},null,-1)],f={key:0,class:"vs-accordion__non-clickable"},x=["aria-labelledby","aria-hidden"],g={class:"vs-accordion__content-wrapper"};function E(i,s,c,l,o,n){return e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["vs-accordion__item",[{"vs-accordion--box":o.isBox},{"vs-accordion--compact":i.isCompact},{"vs-accordion__active":o.isExpandable?o.isExpandableToggle:n.visible}]])},[e.createElementVNode("div",{class:"vs-accordion__trigger",role:"heading","aria-level":o.level,onClick:s[0]||(s[0]=(...u)=>n.open&&n.open(...u))},[e.createElementVNode("button",{class:"vs-accordion__button",id:`accordion-${o.index+1}`,tabindex:"0","aria-expanded":n.visible?"true":"false"},[e.renderSlot(i.$slots,"accordion-trigger")],8,m),e.renderSlot(i.$slots,"accordion-icon",{},()=>[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",focusable:"false",role:"presentation",class:e.normalizeClass(["vs-accordion--icon",{"vs-accordion--icon-active":o.isExpandable?o.isExpandableToggle:n.visible}])},v,2))])],8,b),o.hasNonClickableContent?(e.openBlock(),e.createElementBlock("div",f,[e.renderSlot(i.$slots,"accordion-non-clickable")])):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"vs-accordion",onEnter:n.start,onAfterEnter:n.onEnter,onBeforeLeave:n.start,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"vs-accordion__content","aria-labelledby":`accordion-${o.index+1}`,"aria-hidden":n.visible?"false":"true"},[e.createElementVNode("div",g,[e.renderSlot(i.$slots,"default")])],8,x),[[e.vShow,o.isExpandable?o.isExpandableToggle:n.visible]])]),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onAfterLeave"])],2)}const d=a(_,[["render",E]]),A={install(i){i.component("VsAccordion",r),i.component("VsAccordionItem",d)}};t.VsAccordion=r,t.VsAccordionItem=d,t.plugin=A,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});