vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 2.8 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),T=require("@vuux/utils"),I=(r,x)=>{const e=a.reactive({showNavigation:!1,disableLeftScroll:!0,disableRightScroll:!1,scrollOffset:0}),s=a.ref([]),n=a.ref(null),c=a.ref(null),f=a.ref([]),d=a.ref([]),W=a.computed(()=>r.position==="top"?"is-top":"is-left"),M=a.computed(()=>e.showNavigation&&r.position==="top"),L=a.computed(()=>e.disableLeftScroll),p=t=>({"is-active":n.value?.id===t.id,"is-disabled":!!t.disabled,"is-close":r.remove}),u=T.Utils.debounce(()=>{const t=c.value;if(!t){e.showNavigation=!1;return}const i=t.offsetWidth,o=t.scrollWidth,l=Math.max(o-i,0);e.showNavigation=o>i,e.scrollOffset>l&&(e.scrollOffset=l),e.scrollOffset<0&&(e.scrollOffset=0),e.disableLeftScroll=e.scrollOffset<=0,e.disableRightScroll=e.scrollOffset>=l},50),v=T.Utils.debounce(()=>{const t=c.value,i=n.value;if(!t||!i)return;const o=t.offsetWidth,l=Math.max(t.scrollWidth-o,0),h=s.value.findIndex(A=>A.id===i.id);if(h===-1)return;const b=f.value[h]?.offsetLeft??0,w=b+(d.value[h]??f.value[h]?.offsetWidth??0);let O=e.scrollOffset;b<e.scrollOffset?O=b:w>e.scrollOffset+o&&(O=Math.min(w-o+20,l)),e.scrollOffset=Math.max(0,Math.min(O,l)),e.disableLeftScroll=e.scrollOffset<=0,e.disableRightScroll=e.scrollOffset>=l},50),m=t=>{t.disabled||n.value?.id!==t.id&&(n.value=t,x("select",t),a.nextTick(()=>{v()}))},g=()=>{if(s.value.length)if(r.active){const t="name",i=s.value.find(o=>String(o[t])===String(r.active));m(i||s.value[0])}else m(s.value[0])},N=t=>{const i=Array.isArray(t)?t:[t];a.nextTick(()=>{for(const o of i)s.value.some(l=>l.id===o.id)||s.value.push(o);d.value=f.value.map(o=>o.offsetWidth),u(),v(),g()})},R=t=>{if(s.value.length<=1)return;const i=s.value.findIndex(l=>l.id===t.id);if(i===-1)return;const o=n.value?.id===t.id;if(s.value.splice(i,1),d.value.splice(i,1),o){const l=s.value[i]??s.value[i-1]??s.value[0];l&&(n.value=l)}else if(i<s.value.findIndex(l=>l.id===n.value?.id)){const l=d.value[i]??0;e.scrollOffset=Math.max(e.scrollOffset-l,0)}x("remove",t),a.nextTick(()=>{f.value.length>s.value.length&&(f.value.length=s.value.length),u(),v()})},y=t=>{if(!c.value)return;const i=c.value.offsetWidth,o=c.value.scrollWidth-i,l=e.scrollOffset+t*300;e.scrollOffset=Math.min(Math.max(l,0),o),e.disableLeftScroll=e.scrollOffset===0,e.disableRightScroll=e.scrollOffset>=o},S=()=>{u(),v()};return a.provide("tabsContext",{addTabs:N,activeTab:n}),a.watch(()=>s.value.length,()=>{!n.value&&s.value.length>0&&g()}),a.onMounted(()=>{g(),u(),window.addEventListener("resize",S)}),a.onBeforeUnmount(()=>{window.removeEventListener("resize",S)}),{state:e,list:s,headDataEl:c,headItemEl:f,classNames:W,isArrow:M,isDisabled:L,tabClassNames:p,handleSelectTab:m,handleRemoveTab:R,handleScrollTabs:y}};exports.useTabs=I;