UNPKG

@wikimedia/codex

Version:

Codex Design System for Wikimedia

2 lines (1 loc) 2.31 kB
"use strict";const e=require("vue"),u=require("./Icon.js"),p=require("./CdxButton.cjs"),m=require("./useOptionalModelWrapper.js"),f=require("./_plugin-vue_export-helper.js"),_=e.defineComponent({name:"CdxAccordion",components:{CdxButton:p,CdxIcon:u.CdxIcon},props:{modelValue:{type:[Boolean,null],default:null},actionAlwaysVisible:{type:Boolean,default:!1},actionIcon:{type:[String,Object],default:null},actionButtonLabel:{type:String,default:""},headingLevel:{type:String,default:"h3"}},emits:["action-button-click","update:modelValue","toggle"],setup(o,{attrs:t,emit:l}){const s=e.ref("open"in t),n=m.useOptionalModelWrapper(s,e.toRef(o,"modelValue"),l),r=()=>{l("action-button-click")},i=d=>{n.value=d.newState==="open",l("toggle",n.value)},c=e.computed(()=>o.actionIcon?n.value?!0:!!o.actionAlwaysVisible:!1),a=e.computed(()=>({"cdx-accordion--has-icon":c.value}));return{emitActionButtonClick:r,rootClasses:a,shouldShowActionButton:c,onToggle:i,computedOpen:n}}}),C=["open"],g={class:"cdx-accordion__header__title"},h={class:"cdx-accordion__header__description"};function B(o,t,l,s,n,r){const i=e.resolveComponent("cdx-icon"),c=e.resolveComponent("cdx-button");return e.openBlock(),e.createElementBlock("details",{class:e.normalizeClass(["cdx-accordion",o.rootClasses]),open:o.computedOpen||void 0,onToggle:t[1]||(t[1]=(...a)=>o.onToggle&&o.onToggle(...a))},[e.createElementVNode("summary",null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.headingLevel),{class:"cdx-accordion__header"},{default:e.withCtx(()=>[e.createElementVNode("span",g,[e.renderSlot(o.$slots,"title")]),e.createElementVNode("span",h,[e.renderSlot(o.$slots,"description")])]),_:3})),o.shouldShowActionButton?(e.openBlock(),e.createBlock(c,{key:0,class:"cdx-accordion__action","aria-label":o.actionButtonLabel,type:"button",weight:"quiet",onClick:e.withModifiers(o.emitActionButtonClick,["stop"])},{default:e.withCtx(()=>[e.createVNode(i,{icon:o.actionIcon,"icon-label":o.actionButtonLabel,size:"medium"},null,8,["icon","icon-label"])]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("v-if",!0)]),e.createElementVNode("div",{class:"cdx-accordion__content",onClick:t[0]||(t[0]=e.withModifiers(()=>{},["stop"]))},[e.renderSlot(o.$slots,"default")])],42,C)}const b=f._export_sfc(_,[["render",B]]);module.exports=b;