vexip-ui/lib/components/tab-nav/tab-nav.vue2.cjs

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

"use strict";const e=require("vue");require("../icon/index.cjs");require("../renderer/index.cjs");require("../resize-observer/index.cjs");require("../scroll/index.cjs");require("../tab-nav-item/index.cjs");const u=require("@vexip-ui/config"),P=require("@vexip-ui/hooks"),b=require("@vexip-ui/utils"),F=require("./props.cjs"),_=require("./symbol.cjs"),h=require("../resize-observer/resize-observer.cjs"),f=require("../renderer/renderer.cjs"),I=require("../scroll/scroll.vue2.cjs"),L=require("./tab-nav-item.vue2.cjs"),D=require("../icon/icon.cjs"),H=e.defineComponent({name:"TabNav",__name:"tab-nav",props:F.tabNavProps,emits:["update:active"],setup(y,{expose:g,emit:z}){const V=y,t=u.useProps("tabNav",V,{active:{default:null,static:!0},card:!1,options:{default:()=>[],static:!0},align:"left",placement:"top",closable:!1,showAdd:!1,slots:()=>({})}),q=z,m=e.useSlots(),l=u.useNameHelper("tab-nav"),v=u.useIcons(),a=e.ref(t.active),i=e.ref(0),d=e.ref(0),c=new Set,k=P.useDisplay(o),N=e.ref(),E=e.computed(()=>({[l.b()]:!0,[l.bs("vars")]:!0,[l.bm("inherit")]:t.inherit,[l.bm(`align-${t.align}`)]:!0,[l.bm(t.placement)]:!0,[l.bm("card")]:t.card})),A=e.computed(()=>{const[r,s]=_.trackStyleMap[t.placement];return{[r]:`${i.value}px`,[s]:`${d.value}px`}}),x=e.computed(()=>t.options.map(r=>typeof r=="string"||typeof r=="number"?{label:r}:r)),B=e.computed(()=>t.placement==="top"||t.placement==="bottom"?"horizontal-exact":"vertical"),p=b.debounceMinor(()=>{const r=c.size;Array.from(c).forEach((s,n)=>{s.index=n+1,s.total=r,b.isNull(s.label)&&(s.label=n+1)}),c.size>=1&&S()&&(a.value=Array.from(c)[0].label)});e.provide(_.TAB_NAV_STATE,e.reactive({currentActive:a,closable:e.toRef(t,"closable"),increaseItem:w,decreaseItem:T,handleActive:$,handleClose:M,refreshLabels:p})),e.watch(()=>t.active,r=>{a.value=r,o()}),e.watch(()=>t.placement,()=>{requestAnimationFrame(o)}),e.onMounted(o),g({items:x,wrapper:k,scroll:N,updateMarkerPosition:o,handleAdd:C});function S(){return b.isNull(a.value)||a.value===""}function w(r){c.add(r),p()}function T(r){c.delete(r),p()}function $(r){a.value=r,o(),q("update:active",r),u.emitEvent(t.onChange,r)}function C(){u.emitEvent(t.onAdd)}function M(r){u.emitEvent(t.onClose,r),requestAnimationFrame(o)}function o(){const r=Array.from(c).find(s=>s.label===a.value);r!=null&&r.el?t.placement==="top"||t.placement==="bottom"?(i.value=r.el.offsetLeft,d.value=r.el.offsetWidth):(i.value=r.el.offsetTop,d.value=r.el.offsetHeight):(i.value=0,d.value=0)}return(r,s)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:k,class:e.normalizeClass(E.value),tabindex:"-1"},[e.createVNode(e.unref(h),{"on-resize":o},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([e.unref(l).be("extra"),e.unref(l).bem("extra","prefix")])},[m.prefix||e.unref(t).slots.prefix?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(l).be("prefix"))},[e.renderSlot(r.$slots,"prefix",{},()=>[e.createVNode(e.unref(f),{renderer:e.unref(t).slots.prefix},null,8,["renderer"])])],2)):e.createCommentVNode("",!0)],2)]),_:3}),e.createVNode(e.unref(I),{ref_key:"scroll",ref:N,class:e.normalizeClass(e.unref(l).be("scroll")),mode:B.value,"delta-x":40,"delta-y":40,"scroll-tag":"ul","scroll-class":e.unref(l).be("list"),"scroll-attrs":{role:"tablist"}},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,n=>(e.openBlock(),e.createBlock(e.unref(L),{key:n.label,label:n.label,icon:n.icon,disabled:n.disabled,closable:n.closable,onToggle:n.onToggle},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.content||n.label),1)]),_:2},1032,["label","icon","disabled","closable","onToggle"]))),128))]),e.unref(t).showAdd||m.add||e.unref(t).slots.add?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass(e.unref(l).be("item")),role:"none"},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(l).be("pad"))},null,2),e.createElementVNode("button",{type:"button",class:e.normalizeClass(e.unref(l).be("add")),onClick:C},[e.renderSlot(r.$slots,"add",{},()=>[e.createVNode(e.unref(f),{renderer:e.unref(t).slots.add},{default:e.withCtx(()=>[e.createVNode(e.unref(D),e.mergeProps(e.unref(v).plus,{scale:+(e.unref(v).plus.scale||1)*1.2}),null,16,["scale"])]),_:1},8,["renderer"])])],2)],2)):e.createCommentVNode("",!0),e.unref(t).card?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(l).be("track")),role:"none",style:e.normalizeStyle(A.value)},[e.renderSlot(r.$slots,"marker",{},()=>[e.createVNode(e.unref(f),{renderer:e.unref(t).slots.marker},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(l).be("marker"))},null,2)]),_:1},8,["renderer"])])],6))]),_:3},8,["class","mode","scroll-class"]),e.createVNode(e.unref(h),{"on-resize":o},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([e.unref(l).be("extra"),e.unref(l).bem("extra","suffix")])},[m.suffix||e.unref(t).slots.suffix?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(l).be("suffix"))},[e.renderSlot(r.$slots,"suffix",{},()=>[e.createVNode(e.unref(f),{renderer:e.unref(t).slots.suffix},null,8,["renderer"])])],2)):e.createCommentVNode("",!0)],2)]),_:3})],2))}});module.exports=H;
//# sourceMappingURL=tab-nav.vue2.cjs.map