sci-pro/lib/src/tabs/tabs.vue.js

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("./style/index.css");const $={class:"sci-tabs-container"},R={class:"tabs-lists"},W=["onClick"],w={class:"tabs-operation"},S={key:0,class:"sci-tabs-panel"},T=e.defineComponent({name:"sci-tabs"}),I=e.defineComponent({...T,props:{tabsInfo:{default:()=>[]},bgColor:{default:"#f6f6f9"},highlight:{default:"#409eff"},height:{default:"32px"},padding:{default:"0px"}},emits:["tabClick"],setup(k,{emit:C}){const g=k,_=C;let o=0;const v=e.ref(0),h=e.ref(0),i=e.ref([]),r=e.ref(0),c=e.ref(null),l=e.ref(),f=e.ref(0);let b=null,d=0;e.watch(()=>g.tabsInfo,t=>{e.nextTick(()=>{var n,u;o=t.findIndex(a=>a.choose),v.value=(n=i.value[o])==null?void 0:n.getBoundingClientRect().width,h.value=(u=i.value[o])==null?void 0:u.offsetLeft,f.value=d*o;const s=i.value[o];if(c.value&&s){const a=c.value,m=a.clientWidth,p=s.offsetLeft,B=s.offsetWidth,E=p-m/2+B/2;a.scrollTo({left:E,behavior:"smooth"})}})},{immediate:!0,deep:!0});const y=t=>{_("tabClick",t)};return e.onMounted(()=>{var s;o=g.tabsInfo.findIndex(n=>n.choose);const t=i.value[o];v.value=t==null?void 0:t.getBoundingClientRect().width,h.value=t==null?void 0:t.offsetLeft,e.nextTick(()=>{if(c.value&&t){const n=c.value,u=n.clientWidth,a=t.offsetLeft,m=t.offsetWidth,p=a-u/2+m/2;n.scrollTo({left:p})}}),l.value&&(d=(s=l.value)==null?void 0:s.getBoundingClientRect().width,f.value=d*o,b=new ResizeObserver(()=>{var n;r.value=0,d=(n=l.value)==null?void 0:n.getBoundingClientRect().width,f.value=d*o,setTimeout(()=>{r.value=.2})}),b.observe(l.value)),setTimeout(()=>{r.value=.2})}),e.onUnmounted(()=>{l.value&&b.unobserve(l.value)}),(t,s)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",{class:"tabs",style:e.normalizeStyle({backgroundColor:t.bgColor,height:t.height,padding:`0 ${t.padding}`,"--highlight":t.highlight})},[e.createElementVNode("div",{class:"tabs-content",ref_key:"tabsContentRef",ref:c},[e.createElementVNode("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabsInfo,n=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["tabs-item",{active:n.choose,disabled:n.disabled}]),key:n.name,ref_for:!0,ref_key:"itemRefs",ref:i,onClick:u=>y(n)},e.toDisplayString(n.name),11,W))),128))]),e.createElementVNode("div",{class:"tabs-active-bar",style:e.normalizeStyle({width:`${v.value}px`,transform:`translateX(${h.value}px)`,transitionDuration:`${r.value}s`})},null,4)],512),e.createElementVNode("div",w,[e.renderSlot(t.$slots,"operation")])],4),t.$slots.default?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("div",{class:"sci-tabs-panel-content",ref_key:"panelOuter",ref:l,style:e.normalizeStyle({transform:`translateX(-${f.value}px)`,transitionDuration:`${r.value}s`})},[e.renderSlot(t.$slots,"default")],4)])):e.createCommentVNode("",!0)]))}});exports.default=I;