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 k={class:"sci-tabs-container"},_={class:"tabs-content"},C={class:"tabs-lists"},y=["onClick"],B={class:"tabs-operation"},E={key:0,class:"sci-tabs-panel"},$=e.defineComponent({name:"sci-tabs"}),w=e.defineComponent({...$,props:{tabsInfo:{default:()=>[]},bgColor:{default:"#f6f6f9"},highlight:{default:"#409eff"},height:{default:"32px"},padding:{default:"0px"}},emits:["tabClick"],setup(m,{emit:p}){const h=m,b=p;let a=0;const c=e.ref(0),f=e.ref(0),i=e.ref([]),r=e.ref(0),l=e.ref(),d=e.ref(0);let v=null,u=0;e.watch(()=>h.tabsInfo,t=>{e.nextTick(()=>{var s,n;a=t.findIndex(o=>o.choose),c.value=(s=i.value[a])==null?void 0:s.getBoundingClientRect().width,f.value=(n=i.value[a])==null?void 0:n.offsetLeft,d.value=u*a})},{immediate:!0,deep:!0});const g=t=>{b("tabClick",t)};return e.onMounted(()=>{var t,s,n;a=h.tabsInfo.findIndex(o=>o.choose),c.value=(t=i.value[a])==null?void 0:t.getBoundingClientRect().width,f.value=(s=i.value[a])==null?void 0:s.offsetLeft,l.value&&(u=(n=l.value)==null?void 0:n.getBoundingClientRect().width,d.value=u*a,v=new ResizeObserver(()=>{var o;r.value=0,u=(o=l.value)==null?void 0:o.getBoundingClientRect().width,d.value=u*a,setTimeout(()=>{r.value=.2})}),v.observe(l.value)),setTimeout(()=>{r.value=.2})}),e.onUnmounted(()=>{l.value&&v.unobserve(l.value)}),(t,s)=>(e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("div",{class:"tabs",style:e.normalizeStyle({backgroundColor:t.bgColor,height:t.height,padding:`0 ${t.padding}`,"--highlight":t.highlight})},[e.createElementVNode("div",_,[e.createElementVNode("div",C,[(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:o=>g(n)},e.toDisplayString(n.name),11,y))),128))]),e.createElementVNode("div",B,[e.renderSlot(t.$slots,"operation")]),e.createElementVNode("div",{class:"tabs-active-bar",style:e.normalizeStyle({width:`${c.value}px`,transform:`translateX(${f.value}px)`,transitionDuration:`${r.value}s`})},null,4)])],4),t.$slots.default?(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",{class:"sci-tabs-panel-content",ref_key:"panelOuter",ref:l,style:e.normalizeStyle({transform:`translateX(-${d.value}px)`,transitionDuration:`${r.value}s`})},[e.renderSlot(t.$slots,"default")],4)])):e.createCommentVNode("",!0)]))}});exports.default=w;