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