vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
3 lines (2 loc) • 2.41 kB
JavaScript
"use strict";const e=require("vue");require("../icon/index.cjs");const t=require("@vexip-ui/config"),w=require("@vexip-ui/utils"),_=require("./props.cjs"),y=require("./symbol.cjs"),m=require("../icon/icon.cjs"),B=["aria-disabled","aria-setsize","aria-posinset","onKeydown"],q=e.defineComponent({name:"TabNavItem",__name:"tab-nav-item",props:_.tabNavItemProps,setup(p){const b=p,s=t.useProps("tabNavItem",b,{label:{static:!0,default:null},disabled:!1,icon:t.createIconProp(),closable:null}),n=e.inject(y.TAB_NAV_STATE,null),r=t.useNameHelper("tab-nav"),v=t.useIcons(),a=e.ref(!1),o=e.ref(s.label),c=e.ref(0),i=e.ref(0),u=e.ref(),h=e.computed(()=>{const l=r.be("content");return{[l]:!0,[`${l}--disabled`]:s.disabled,[`${l}--active`]:!s.disabled&&a.value}}),C=e.computed(()=>w.isDefined(s.closable)?s.closable:(n==null?void 0:n.closable)??!1);if(e.watch(()=>s.label,l=>{o.value=l,n==null||n.refreshLabels()}),e.watch(a,l=>{t.emitEvent(s.onToggle,l)}),n){const l=e.reactive({el:u,label:o,index:c,total:i});e.watch(o,()=>{a.value=o.value===n.currentActive}),e.watch(()=>n.currentActive,f=>{a.value=o.value===f},{immediate:!0}),n.increaseItem(l),e.onBeforeUnmount(()=>{n.decreaseItem(l)})}function d(){s.disabled||n==null||n.handleActive(o.value)}function k(){s.disabled||n==null||n.handleClose(o.value)}return(l,f)=>(e.openBlock(),e.createElementBlock("li",{ref_key:"wrapper",ref:u,class:e.normalizeClass(e.unref(r).be("item")),role:"none"},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).be("pad"))},null,2),e.createElementVNode("div",{class:e.normalizeClass(h.value),role:"tab",tabindex:"0","aria-disabled":e.unref(s).disabled,"aria-setsize":i.value||void 0,"aria-posinset":c.value||void 0,onClick:d,onKeydown:e.withKeys(e.withModifiers(d,["stop"]),["enter"])},[e.unref(s).icon?(e.openBlock(),e.createBlock(e.unref(m),{key:0,class:e.normalizeClass(e.unref(r).be("icon")),icon:e.unref(s).icon},null,8,["class","icon"])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(s).label),1)]),C.value?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:e.normalizeClass(e.unref(r).be("close")),onClick:e.withModifiers(k,["stop"])},[e.createVNode(e.unref(m),e.mergeProps(e.unref(v).close,{label:"close"}),null,16)],2)):e.createCommentVNode("",!0)],42,B)],2))}});module.exports=q;
//# sourceMappingURL=tab-nav-item.vue2.cjs.map