vexip-ui/lib/components/scroll/hooks.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),$=require("@vexip-ui/hooks"),p=require("@vexip-ui/utils");function z({mode:i,disabled:W,width:m,height:w,scrollX:g,scrollY:d,onResize:M,onBeforeRefresh:L,onAfterRefresh:P}){const{manualRef:c,triggerUpdate:q}=$.useManualRef(),x=a.ref(),S=a.ref(),e=a.reactive({el:x,width:p.toNumber(m.value),height:p.toNumber(w.value)}),u=a.reactive({el:S,width:0,height:0}),l=c(-g.value),n=c(-d.value),o=a.ref(!1),v=c(0),f=c(0),b=a.computed(()=>e.width?e.width-u.width:0),y=a.computed(()=>e.height?e.height-u.height:0),U=a.computed(()=>!W.value&&i.value!=="vertical"&&!!e.width&&u.width-e.width>1),j=a.computed(()=>!W.value&&i.value!=="horizontal"&&!!e.height&&u.height-e.height>1),B=a.computed(()=>e.width?Math.max(Math.min(e.width/(u.width||1)*100,99),5):35),H=a.computed(()=>e.height?Math.max(Math.min(e.height/(u.height||1)*100,99),5):35);a.watch(x,()=>{s()}),a.watch(S,()=>{E()}),a.watch(g,t=>{l.value=-t,r()}),a.watch(d,t=>{n.value=-t,r()}),a.watch(m,()=>{s().then(r)}),a.watch(w,()=>{s().then(r)});function C(t){return a.nextTick(()=>{if(!e.el)return;const h=t==="width"?m.value:w.value,O=t.slice(0,1).toUpperCase()+t.slice(1);typeof h=="string"?!h.endsWith("px")&&(!h||Number.isNaN(Number(h)))?e[t]=e.el[`offset${O}`]:e[t]=parseInt(h):e[t]=h})}async function s(){const t=[];i.value!=="vertical"&&t.push(C("width")),i.value!=="horizontal"&&t.push(C("height")),await Promise.all(t)}let k;function E(){return clearTimeout(k),new Promise(t=>{o.value=!1,k=setTimeout(()=>{if(!u.el){t();return}i.value!=="vertical"&&(u.width=u.el.offsetWidth,e.width>=u.width?l.value=0:l.value===0&&(l.value=-g.value)),i.value!=="horizontal"&&(u.height=u.el.offsetHeight,e.height>=u.height?n.value=0:n.value===0&&(n.value=-d.value)),setTimeout(()=>{o.value=!0,r(),t()},1)},0)})}function r(){o.value&&(i.value!=="vertical"&&(l.value=Math.min(0,Math.max(l.value,b.value)),i.value!=="both"&&(n.value=0)),i.value!=="horizontal"&&(n.value=Math.min(0,Math.max(n.value,y.value)),i.value!=="both"&&(l.value=0)),F(),q())}function F(){v.value=p.multipleFixed(l.value/(b.value||-1),100,2),f.value=p.multipleFixed(n.value/(y.value||-1),100,2),v.value=Math.max(0,Math.min(v.value,100)),f.value=Math.max(0,Math.min(f.value,100))}function I(t){N(),M==null||M(t)}let T=!1;a.onMounted(()=>{N(),T=!0});async function N(){typeof L=="function"&&L(),s(),await E().then(()=>{setTimeout(()=>{r(),typeof P=="function"&&P()},T?20:100)})}return{wrapperEl:x,contentEl:S,wrapper:e,content:u,isReady:o,x:l,y:n,percentX:v,percentY:f,xScrollLimit:b,yScrollLimit:y,enableXScroll:U,enableYScroll:j,xBarLength:B,yBarLength:H,handleResize:I,verifyScroll:r,computePercent:F,refresh:N,triggerUpdate:q}}exports.useScrollWrapper=z;
//# sourceMappingURL=hooks.cjs.map