1 line
8.2 KiB
JavaScript
1 line
8.2 KiB
JavaScript
import{N as x,w as O,Q as L,o as oe,a1 as U,aS as re,aN as ie,b8 as ne,bC as ue,bD as ce,O as se,a as v,R as ve,c as i,aT as he,aU as fe,aV as be,U as f,aw as de,I as Q,bE as M,bF as E}from"./index-3a2b6cd5.js";import{Q as B}from"./QResizeObserver-889eb2e3.js";import{T as F}from"./TouchPan-3cb133b6.js";import{b as q}from"./format-312d1398.js";const{passive:N}=ne,ze=["both","horizontal","vertical"],me=x({name:"QScrollObserver",props:{axis:{type:String,validator:a=>ze.includes(a),default:"vertical"},debounce:[String,Number],scrollTarget:{default:void 0}},emits:["scroll"],setup(a,{emit:P}){const n={position:{top:0,left:0},direction:"down",directionChanged:!1,delta:{top:0,left:0},inflectionPoint:{top:0,left:0}};let u=null,c,d;O(()=>a.scrollTarget,()=>{b(),e()});function o(){u!==null&&u();const z=Math.max(0,ue(c)),s=ce(c),h={top:z-n.position.top,left:s-n.position.left};if(a.axis==="vertical"&&h.top===0||a.axis==="horizontal"&&h.left===0)return;const y=Math.abs(h.top)>=Math.abs(h.left)?h.top<0?"up":"down":h.left<0?"left":"right";n.position={top:z,left:s},n.directionChanged=n.direction!==y,n.delta=h,n.directionChanged===!0&&(n.direction=y,n.inflectionPoint=n.position),P("scroll",{...n})}function e(){c=ie(d,a.scrollTarget),c.addEventListener("scroll",S,N),S(!0)}function b(){c!==void 0&&(c.removeEventListener("scroll",S,N),c=void 0)}function S(z){if(z===!0||a.debounce===0||a.debounce==="0")o();else if(u===null){const[s,h]=a.debounce?[setTimeout(o,a.debounce),clearTimeout]:[requestAnimationFrame(o),cancelAnimationFrame];u=()=>{h(s),u=null}}}const{proxy:g}=L();return O(()=>g.$q.lang.rtl,o),oe(()=>{d=g.$el.parentNode,e()}),U(()=>{u!==null&&u(),b()}),Object.assign(g,{trigger:S,getPosition:()=>n}),re}}),R=["vertical","horizontal"],C={vertical:{offset:"offsetY",scroll:"scrollTop",dir:"down",dist:"y"},horizontal:{offset:"offsetX",scroll:"scrollLeft",dir:"right",dist:"x"}},V={prevent:!0,mouse:!0,mouseAllDir:!0},k=a=>a>=250?50:Math.ceil(a/5),_e=x({name:"QScrollArea",props:{...se,thumbStyle:Object,verticalThumbStyle:Object,horizontalThumbStyle:Object,barStyle:[Array,String,Object],verticalBarStyle:[Array,String,Object],horizontalBarStyle:[Array,String,Object],contentStyle:[Array,String,Object],contentActiveStyle:[Array,String,Object],delay:{type:[String,Number],default:1e3},visible:{type:Boolean,default:null},tabindex:[String,Number],onScroll:Function},setup(a,{slots:P,emit:n}){const u=v(!1),c=v(!1),d=v(!1),o={vertical:v(0),horizontal:v(0)},e={vertical:{ref:v(null),position:v(0),size:v(0)},horizontal:{ref:v(null),position:v(0),size:v(0)}},{proxy:b}=L(),S=ve(a,b.$q);let g,z;const s=v(null),h=i(()=>"q-scrollarea"+(S.value===!0?" q-scrollarea--dark":""));e.vertical.percentage=i(()=>{const t=e.vertical.size.value-o.vertical.value;if(t<=0)return 0;const l=q(e.vertical.position.value/t,0,1);return Math.round(l*1e4)/1e4}),e.vertical.thumbHidden=i(()=>(a.visible===null?d.value:a.visible)!==!0&&u.value===!1&&c.value===!1||e.vertical.size.value<=o.vertical.value+1),e.vertical.thumbStart=i(()=>e.vertical.percentage.value*(o.vertical.value-e.vertical.thumbSize.value)),e.vertical.thumbSize=i(()=>Math.round(q(o.vertical.value*o.vertical.value/e.vertical.size.value,k(o.vertical.value),o.vertical.value))),e.vertical.style=i(()=>({...a.thumbStyle,...a.verticalThumbStyle,top:`${e.vertical.thumbStart.value}px`,height:`${e.vertical.thumbSize.value}px`})),e.vertical.thumbClass=i(()=>"q-scrollarea__thumb q-scrollarea__thumb--v absolute-right"+(e.vertical.thumbHidden.value===!0?" q-scrollarea__thumb--invisible":"")),e.vertical.barClass=i(()=>"q-scrollarea__bar q-scrollarea__bar--v absolute-right"+(e.vertical.thumbHidden.value===!0?" q-scrollarea__bar--invisible":"")),e.horizontal.percentage=i(()=>{const t=e.horizontal.size.value-o.horizontal.value;if(t<=0)return 0;const l=q(Math.abs(e.horizontal.position.value)/t,0,1);return Math.round(l*1e4)/1e4}),e.horizontal.thumbHidden=i(()=>(a.visible===null?d.value:a.visible)!==!0&&u.value===!1&&c.value===!1||e.horizontal.size.value<=o.horizontal.value+1),e.horizontal.thumbStart=i(()=>e.horizontal.percentage.value*(o.horizontal.value-e.horizontal.thumbSize.value)),e.horizontal.thumbSize=i(()=>Math.round(q(o.horizontal.value*o.horizontal.value/e.horizontal.size.value,k(o.horizontal.value),o.horizontal.value))),e.horizontal.style=i(()=>({...a.thumbStyle,...a.horizontalThumbStyle,[b.$q.lang.rtl===!0?"right":"left"]:`${e.horizontal.thumbStart.value}px`,width:`${e.horizontal.thumbSize.value}px`})),e.horizontal.thumbClass=i(()=>"q-scrollarea__thumb q-scrollarea__thumb--h absolute-bottom"+(e.horizontal.thumbHidden.value===!0?" q-scrollarea__thumb--invisible":"")),e.horizontal.barClass=i(()=>"q-scrollarea__bar q-scrollarea__bar--h absolute-bottom"+(e.horizontal.thumbHidden.value===!0?" q-scrollarea__bar--invisible":""));const y=i(()=>e.vertical.thumbHidden.value===!0&&e.horizontal.thumbHidden.value===!0?a.contentStyle:a.contentActiveStyle),I=[[F,t=>{j(t,"vertical")},void 0,{vertical:!0,...V}]],X=[[F,t=>{j(t,"horizontal")},void 0,{horizontal:!0,...V}]];function w(){const t={};return R.forEach(l=>{const r=e[l];t[l+"Position"]=r.position.value,t[l+"Percentage"]=r.percentage.value,t[l+"Size"]=r.size.value,t[l+"ContainerSize"]=o[l].value}),t}const A=he(()=>{const t=w();t.ref=b,n("scroll",t)},0);function H(t,l,r){if(R.includes(t)===!1){console.error("[QScrollArea]: wrong first param of setScrollPosition (vertical/horizontal)");return}(t==="vertical"?E:M)(s.value,l,r)}function Y({height:t,width:l}){let r=!1;o.vertical.value!==t&&(o.vertical.value=t,r=!0),o.horizontal.value!==l&&(o.horizontal.value=l,r=!0),r===!0&&p()}function G({position:t}){let l=!1;e.vertical.position.value!==t.top&&(e.vertical.position.value=t.top,l=!0),e.horizontal.position.value!==t.left&&(e.horizontal.position.value=t.left,l=!0),l===!0&&p()}function J({height:t,width:l}){e.horizontal.size.value!==l&&(e.horizontal.size.value=l,p()),e.vertical.size.value!==t&&(e.vertical.size.value=t,p())}function j(t,l){const r=e[l];if(t.isFirst===!0){if(r.thumbHidden.value===!0)return;z=r.position.value,c.value=!0}else if(c.value!==!0)return;t.isFinal===!0&&(c.value=!1);const m=C[l],T=o[l].value,te=(r.size.value-T)/(T-r.thumbSize.value),le=t.distance[m.dist],ae=z+(t.direction===m.dir?1:-1)*le*te;$(ae,l)}function D(t,l){const r=e[l];if(r.thumbHidden.value!==!0){const m=t[C[l].offset];if(m<r.thumbStart.value||m>r.thumbStart.value+r.thumbSize.value){const T=m-r.thumbSize.value/2;$(T/o[l].value*r.size.value,l)}r.ref.value!==null&&r.ref.value.dispatchEvent(new MouseEvent(t.type,t))}}function K(t){D(t,"vertical")}function W(t){D(t,"horizontal")}function p(){u.value===!0?clearTimeout(g):u.value=!0,g=setTimeout(()=>{u.value=!1},a.delay),a.onScroll!==void 0&&A()}function $(t,l){s.value[C[l].scroll]=t}function Z(){d.value=!0}function ee(){d.value=!1}let _=null;return O(()=>b.$q.lang.rtl,t=>{s.value!==null&&M(s.value,Math.abs(e.horizontal.position.value)*(t===!0?-1:1))}),fe(()=>{_={top:e.vertical.position.value,left:e.horizontal.position.value}}),be(()=>{if(_===null)return;const t=s.value;t!==null&&(M(t,_.left),E(t,_.top))}),U(A.cancel),Object.assign(b,{getScrollTarget:()=>s.value,getScroll:w,getScrollPosition:()=>({top:e.vertical.position.value,left:e.horizontal.position.value}),getScrollPercentage:()=>({top:e.vertical.percentage.value,left:e.horizontal.percentage.value}),setScrollPosition:H,setScrollPercentage(t,l,r){H(t,l*(e[t].size.value-o[t].value)*(t==="horizontal"&&b.$q.lang.rtl===!0?-1:1),r)}}),()=>f("div",{class:h.value,onMouseenter:Z,onMouseleave:ee},[f("div",{ref:s,class:"q-scrollarea__container scroll relative-position fit hide-scrollbar",tabindex:a.tabindex!==void 0?a.tabindex:void 0},[f("div",{class:"q-scrollarea__content absolute",style:y.value},de(P.default,[f(B,{debounce:0,onResize:J})])),f(me,{axis:"both",onScroll:G})]),f(B,{debounce:0,onResize:Y}),f("div",{class:e.vertical.barClass.value,style:[a.barStyle,a.verticalBarStyle],"aria-hidden":"true",onMousedown:K}),f("div",{class:e.horizontal.barClass.value,style:[a.barStyle,a.horizontalBarStyle],"aria-hidden":"true",onMousedown:W}),Q(f("div",{ref:e.vertical.ref,class:e.vertical.thumbClass.value,style:e.vertical.style.value,"aria-hidden":"true"}),I),Q(f("div",{ref:e.horizontal.ref,class:e.horizontal.thumbClass.value,style:e.horizontal.style.value,"aria-hidden":"true"}),X)])}});export{_e as Q,me as a};
|