vexip-ui/lib/components/collapse/collapse-panel.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../collapse-transition/index.cjs");require("../icon/index.cjs");const s=require("@vexip-ui/config"),_=require("./props.cjs"),y=require("./symbol.cjs"),g=require("../icon/icon.cjs"),w=require("./collapse-transition.cjs"),S=["id","aria-expanded","aria-controls","aria-describedby"],q=["id","aria-labelledby"],z=e.defineComponent({name:"CollapsePanel",__name:"collapse-panel",props:_.collapsePanelProps,emits:["update:expanded"],setup(h,{expose:x,emit:C}){const P=h,n=s.useProps("collapsePanel",P,{label:{default:null,static:!0},title:"",disabled:!1,contentStyle:null,expanded:!1,card:!1,arrowType:{default:"right",validator:a=>["right","left","none"].includes(a)},icon:s.createIconProp(),ghost:!1}),E=C,l=e.inject(y.COLLAPSE_STATE,null),t=s.useNameHelper("collapse"),N=s.useIcons(),r=e.ref(n.expanded),c=e.ref(n.label),u=e.ref(),p=y.getIndexId(),d=e.computed(()=>`${t.be("tab")}-${p}`),i=e.computed(()=>`${t.be("body")}-${p}`),b=e.computed(()=>l?!1:n.card),k=e.computed(()=>l?!1:n.ghost),T=e.computed(()=>l?l.arrowType:n.arrowType),V=e.computed(()=>[t.be("panel"),t.bs("vars"),t.bem("panel",`arrow-${T.value}`),{[t.bem("panel","inherit")]:l||n.inherit,[t.bem("panel","card")]:b.value,[t.bem("panel","ghost")]:!b.value&&k.value,[t.bem("panel","expanded")]:r.value,[t.bem("panel","disabled")]:n.disabled}]);if(l){const a=e.reactive({tab:u,label:c,expanded:r,setExpanded:m});e.watch(()=>n.label,o=>{const v=c.value;c.value=o||o===0?o:v}),l.registerPanel(a),e.onBeforeUnmount(()=>{l.unregisterPanel(a)})}else e.watch(()=>n.expanded,a=>{r.value=a});function m(a){r.value=a,E("update:expanded",a),s.emitEvent(n.onToggle,a)}function f(a=!r.value){n.disabled||(l?l.expandPanel(c.value,a):m(a))}return x({currentExpanded:r,tab:u,tabId:d,bodyId:i,handleToggle:f}),(a,o)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(V.value)},[e.createElementVNode("button",{id:d.value,ref_key:"tab",ref:u,class:e.normalizeClass(e.unref(t).be("header")),type:"button",role:"tab","aria-expanded":r.value,"aria-controls":i.value,"aria-describedby":i.value,onClick:o[0]||(o[0]=v=>f())},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).be("arrow"))},[e.createVNode(e.unref(g),e.normalizeProps(e.guardReactiveProps(e.unref(N).angleRight)),null,16)],2),e.renderSlot(a.$slots,"title",{},()=>[e.unref(n).icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(t).be("icon"))},[e.createVNode(e.unref(g),{icon:e.unref(n).icon},null,8,["icon"])],2)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(e.unref(n).title),1)])],10,S),e.createVNode(e.unref(w),null,{default:e.withCtx(()=>[r.value?(e.openBlock(),e.createElementBlock("div",{key:0,id:i.value,class:e.normalizeClass(e.unref(t).be("body")),role:"tabpanel",tabindex:"0","aria-labelledby":d.value},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).be("content")),style:e.normalizeStyle(e.unref(n).contentStyle)},[e.renderSlot(a.$slots,"default")],6)],10,q)):e.createCommentVNode("",!0)]),_:3})],2))}});module.exports=z;
//# sourceMappingURL=collapse-panel.vue2.cjs.map