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