vue-amazing-ui/lib/tabs/Tabs.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),P=require("../utils/index.cjs"),Q={key:0,class:"tabs-prefix"},U=["onClick"],Z={key:1,class:"tabs-suffix"},_=e.defineComponent({__name:"Tabs",props:{items:{default:()=>[]},prefix:{default:void 0},suffix:{default:void 0},animated:{type:Boolean,default:!0},centered:{type:Boolean,default:!1},size:{default:"middle"},type:{default:"line"},tabGutter:{default:void 0},tabStyle:{default:()=>({})},tabPosition:{default:"top"},contentStyle:{default:()=>({})},activeKey:{default:void 0}},emits:["update:activeKey","change"],setup(E,{emit:C}){const o=E,k=e.ref(),f=e.ref(0),d=e.ref(0),b=e.ref(0),y=e.ref(0),m=e.ref(),S=e.ref(),h=e.ref(),g=e.ref(),B=e.ref(),z=e.ref(),r=e.ref(!1),u=e.ref(0),n=e.ref(0),s=e.ref(0),p=e.ref(!1),{colorPalettes:T}=P.useInject("Tabs"),$=C,N=P.useSlotsExist(["prefix","suffix"]),v=e.computed(()=>o.items.findIndex((t,a)=>c(t.key,a)===o.activeKey)),D=e.computed(()=>!!(N.prefix||o.prefix)),H=e.computed(()=>!!(N.suffix||o.suffix)),K=e.computed(()=>["top","bottom"].includes(o.tabPosition)?r.value&&n.value>0:r.value&&s.value>0),W=e.computed(()=>["top","bottom"].includes(o.tabPosition)?r.value&&n.value<u.value:r.value&&s.value<u.value),L=e.computed(()=>["top","bottom"].includes(o.tabPosition)?{transform:`translate(${-n.value}px, 0)`}:{transform:`translate(0, ${-s.value}px)`}),R=e.computed(()=>["top","bottom"].includes(o.tabPosition)?{marginLeft:`${o.tabGutter}px`}:{marginTop:`${o.tabGutter}px`}),x=e.computed(()=>["top","bottom"].includes(o.tabPosition)?{left:`${f.value}px`,width:`${b.value}px`}:{top:`${d.value}px`,height:`${y.value}px`}),G=e.computed(()=>o.animated&&["top","bottom"].includes(o.tabPosition)?{marginLeft:`-${100*(v.value!==-1?v.value:0)}%`}:{}),Y=e.computed(()=>o.animated&&["top","bottom"].includes(o.tabPosition)?{visibility:"hidden",height:"0px",overflowY:"hidden"}:{display:"none"});e.watch(()=>o.activeKey,()=>{w()},{flush:"post"}),e.onMounted(()=>{V()}),P.useResizeObserver([m,g],()=>{V()});function V(){["top","bottom"].includes(o.tabPosition)?M():X()}function M(){S.value=m.value.offsetWidth,B.value=g.value.offsetWidth,B.value>S.value?(r.value=!0,u.value=B.value-S.value,n.value=u.value):(r.value=!1,n.value=0),w()}function X(){h.value=m.value.offsetHeight,z.value=g.value.offsetHeight,z.value>h.value?(r.value=!0,u.value=z.value-h.value,s.value=u.value):(r.value=!1,s.value=0),w()}function w(){["top","bottom"].includes(o.tabPosition)?I():j()}function I(){const t=v.value!==-1?k.value[v.value]:null;if(t){if(f.value=t.offsetLeft,b.value=t.offsetWidth,r.value){f.value<n.value&&(p.value=!0,n.value=f.value);const a=f.value+b.value-S.value;a>n.value&&(p.value=!0,n.value=a)}}else f.value=0,b.value=0}function j(){const t=v.value!==-1?k.value[v.value]:null;if(t){if(d.value=t.offsetTop,y.value=t.offsetHeight,r.value){d.value<s.value&&(p.value=!0,s.value=d.value);const a=d.value+y.value-h.value;a>s.value&&(p.value=!0,s.value=a)}}else d.value=0,y.value=0}function c(t,a){return t===void 0?a:t}function q(t){$("update:activeKey",t),$("change",t)}function F(t){t.stopPropagation(),t.preventDefault(),(t.deltaX||t.deltaY)&&(["top","bottom"].includes(o.tabPosition)?O(t):A(t))}function O(t){const a=(t.deltaX||t.deltaY)*1;n.value+a>u.value?n.value=u.value:n.value+a<0?n.value=0:n.value+=a}function A(t){const a=(t.deltaX||t.deltaY)*1;s.value+a>u.value?s.value=u.value:s.value+a<0?s.value=0:s.value+=a}function J(t,a){return o.activeKey!==c(t,a)?Y.value:{}}return(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["tabs-wrap",[`tabs-${t.tabPosition} tabs-${t.size}`,{"tabs-card":t.type==="card"}]]),style:e.normalizeStyle(`--tabs-primary-color: ${e.unref(T)[5]};`)},[e.createElementVNode("div",{class:"tabs-nav-container",style:e.normalizeStyle(t.tabStyle)},[D.value?(e.openBlock(),e.createElementBlock("div",Q,[e.renderSlot(t.$slots,"prefix",{},()=>[e.createTextVNode(e.toDisplayString(t.prefix),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"wrapRef",ref:m,class:e.normalizeClass(["tabs-nav-wrap",{"tabs-center":t.centered,"before-shadow-active":K.value,"after-shadow-active":W.value}])},[e.createElementVNode("div",{ref_key:"navRef",ref:g,class:e.normalizeClass(["tabs-nav-list",{"nav-transition":p.value}]),onTransitionend:a[0]||(a[0]=l=>p.value=!1),style:e.normalizeStyle(L.value),onWheel:a[1]||(a[1]=l=>r.value?F(l):()=>!1)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(l,i)=>(e.openBlock(),e.createElementBlock("div",{ref_for:!0,ref_key:"tabsRef",ref:k,class:e.normalizeClass(["tab-item",{"tab-line-active":t.type==="line"&&t.activeKey===c(l.key,i),"tab-card-active":t.type==="card"&&t.activeKey===c(l.key,i),"tab-disabled":l.disabled}]),style:e.normalizeStyle(i>0&&t.tabGutter!==void 0?R.value:{}),onClick:ee=>l.disabled?()=>!1:q(c(l.key,i)),key:i},[e.renderSlot(t.$slots,"tab",{item:l,tab:l.tab,key:c(l.key,i)},()=>[l.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.icon),{key:0})):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(l.tab),1)],!0)],14,U))),128)),e.createElementVNode("div",{class:e.normalizeClass(["tab-bar",{"tab-bar-disabled":t.items[v.value]?.disabled,"card-hidden":t.type==="card"}]),style:e.normalizeStyle(x.value)},null,6)],38)],2),H.value?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(t.$slots,"suffix",{},()=>[e.createTextVNode(e.toDisplayString(t.suffix),1)],!0)])):e.createCommentVNode("",!0)],4),e.createElementVNode("div",{class:"tabs-page-container",style:e.normalizeStyle(t.contentStyle)},[e.createElementVNode("div",{class:e.normalizeClass(["tabs-content-wrap",{"tabs-content-animated":t.animated&&["top","bottom"].includes(t.tabPosition)}]),style:e.normalizeStyle(G.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:"tabs-content",style:e.normalizeStyle(J(l.key,i)),key:l.key||i},[e.renderSlot(t.$slots,"content",{item:l,content:l.content,key:c(l.key,i)},()=>[e.createTextVNode(e.toDisplayString(l.content),1)],!0)],4))),128))],6)],4)],6))}});exports.default=_;