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