vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
3 lines (2 loc) • 1.52 kB
JavaScript
;const e=require("vue"),c=require("@vexip-ui/config"),h=require("./props.cjs"),y=require("./symbol.cjs"),z=["aria-hidden"],_=e.defineComponent({name:"TabPanel",__name:"tab-panel",props:h.tabPanelProps,setup(i){const d=i,n=c.useProps("tabPanel",d,{lazy:null,lazyLoad:null}),m=e.useSlots(),l=e.inject(y.TABS_STATE,null),v=c.useNameHelper("tabs"),o=e.ref(!1),t=e.ref(n.label),r=e.ref(!1),u=e.computed(()=>n.lazy??(l==null?void 0:l.lazy)??!1),p=e.computed(()=>n.lazyLoad??(l==null?void 0:l.lazyLoad)??!1),b=e.computed(()=>{const a=v.be("panel");return{[a]:!0,[`${a}--disabled`]:n.disabled,[`${a}--lazy`]:u.value,[`${a}--active`]:!n.disabled&&o.value}});if(e.watch(()=>n.label,a=>{t.value=a,l==null||l.refreshLabels()}),e.watch(o,a=>{c.emitEvent(n.onToggle,a)}),l){const a=e.reactive({label:t,name:e.toRef(n,"name"),icon:e.toRef(n,"icon"),disabled:e.toRef(n,"disabled"),closable:e.toRef(n,"closable"),labelRenderer:null});e.watch(()=>m.label,s=>{a.labelRenderer=s?f=>s(f):null},{immediate:!0}),e.watch(t,()=>{o.value=t.value===l.currentActive}),e.watch(()=>l.currentActive,s=>{o.value=t.value===s,!r.value&&o.value&&(r.value=!0)},{immediate:!0}),l.increaseItem(a),e.onBeforeUnmount(()=>{l.decreaseItem(a)})}return(a,s)=>!(u.value||p.value&&!r.value)||o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(b.value),role:"tabpanel","aria-hidden":!o.value},[e.renderSlot(a.$slots,"default")],10,z)):e.createCommentVNode("",!0)}});module.exports=_;
//# sourceMappingURL=tab-panel.vue2.cjs.map