@dialpad/dialtone/dist/vue3/lib/scroller/scroller.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),I=require("../../common/utils/index.cjs"),he=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),se={__name:"core_scroller",props:{items:{type:Array,required:!0},keyField:{type:String,default:"id"},direction:{type:String,default:"vertical",validator:e=>["vertical","horizontal"].includes(e)},itemSize:{type:Number,default:null},minItemSize:{type:[Number,String],default:null},sizeField:{type:String,default:"size"},buffer:{type:Number,default:200},skipHover:{type:Boolean,default:!1},listTag:{type:String,default:"div"},itemTag:{type:String,default:"div"},listClass:{type:[String,Object,Array],default:""},itemClass:{type:[String,Object,Array],default:""}},emits:["user-position"],setup(e,{expose:s,emit:n}){const i=e,y=n,m=t.reactive(new Map),z=t.reactive(new Map),h=t.ref([]),S=t.ref(null),g=t.ref(!1),p=t.ref(null),B=t.ref("top");let F=0,A=!1,P=0,U=null,M=null,j=0,le=0;const N=t.computed(()=>{if(i.itemSize===null){const o={"-1":{accumulator:0}},a=i.items,l=i.sizeField,D=i.minItemSize;let v=1e4,w=0,u;for(let k=0,O=a.length;k<O;k++)u=a[k][l]||D,u<v&&(v=u),w+=u,o[k]={accumulator:w,size:u};return M=v,o}return[]}),re=t.computed(()=>i.items.length&&typeof i.items[0]!="object"),oe=t.computed(()=>{const o={};for(let a=0,l=i.items.length;a<l;a++)o[i.items[a][i.keyField]]=a;return o});t.watch(N,()=>{V(!1)},{deep:!0}),t.onMounted(()=>{t.nextTick(()=>{V(!0),g.value=!0})});const L=(o,a,l,D,v)=>{const w=t.markRaw({id:le++,index:a,used:!0,key:D,type:v}),u=t.shallowReactive({item:l,position:0,nr:w});return o.value.push(u),u},W=(o,a=!1)=>{const l=z,D=o.nr.type;let v=l.get(D);v||(v=[],l.set(D,v)),v.push(o),a||(o.nr.used=!1,o.position=-9999)},ne=()=>{const o=i.direction==="vertical";let a;return o?a={start:p.value.scrollTop,end:p.value.scrollTop+p.value.clientHeight}:a={start:p.value.scrollLeft,end:p.value.scrollLeft+p.value.clientWidth},a},ae=()=>{throw setTimeout(()=>{console.error("It seems the scroller element isn't scrolling, so it tries to render all the items at once.","Scroller:",p),console.error("Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.")}),new Error("Rendered items limit reached")},ce=()=>{h.value.sort((o,a)=>o.nr.index-a.nr.index)},V=(o,a=!1)=>{var X,G,J,Q,Z,ee;const l=i.itemSize,D=M,v=re.value?null:i.keyField,w=i.items,u=w.length,k=N.value,O=m,K=z,H=h,fe=oe;let $,f,q;if(!u)$=f=q=0;else{const c=ne();if(a){let d=c.start-P.value;if(d<0&&(d=-d),l===null&&d<D.value||d<l)return{continuous:!0}}P=c.start;const _=i.buffer;if(c.start-=_,c.end+=_,l===null){let d,R=0,te=u-1,b=~~(u/2),ie;do ie=b,d=(X=k[b])==null?void 0:X.accumulator,d<c.start?R=b:b<u-1&&((G=k[b+1])==null?void 0:G.accumulator)>c.start&&(te=b),b=~~((R+te)/2);while(b!==ie);for(b<0&&(b=0),$=b,q=(J=k[u-1])==null?void 0:J.accumulator,f=b;f<u&&((Q=k[f])==null?void 0:Q.accumulator)<c.end;f++);f===-1?f=w.length-1:(f++,f>u&&(f=u))}else{$=~~(c.start/l);const d=$%1;$-=d,f=Math.ceil(c.end/l),$<0&&($=0),f>u&&(f=u),q=Math.ceil(u/1)*l}}f-$>1e3&&ae(),j=q;let r;const C=$<=F&&f>=$;if(C)for(let c=0,_=H.value.length;c<_;c++)r=H.value[c],r!=null&&r.nr.used&&(o&&(r.nr.index=fe[r.item[v]]),(r.nr.index==null||r.nr.index<$||r.nr.index>=f)&&W(r));const Y=C?null:new Map;let T,x,E;for(let c=$;c<f;c++){T=w[c];const _=v?T==null?void 0:T[v]:T;if(_==null)throw new Error(`Key is ${_} on item (keyField is '${v}')`);if(r=O.get(_),!l&&!((Z=k[c])!=null&&Z.size)){r&&W(r);continue}x=T.type;let d=K.get(x);if(!r)C?d&&d.length?r=d.pop():r=L(H,c,T,_,x):(E=Y.get(x)||0,(!d||E>=d.length)&&(r=L(H,c,T,_,x),W(r,!0),d=K.get(x)),r=d[E],Y.set(x,E+1)),O.delete(r.nr.key),r.nr.used=!0,r.nr.index=c,r.nr.key=_,r.nr.type=x,O.set(_,r);else if(!r.nr.used&&(r.nr.used=!0,d)){const R=d.indexOf(r);R!==-1&&d.splice(R,1)}r.item=T,l===null?(r.position=(ee=k[c-1])==null?void 0:ee.accumulator,r.offset=0):(r.position=Math.floor(c)*l,r.offset=c%1*l)}return F=f,clearTimeout(U),U=setTimeout(ce,300),{continuous:C}},de=o=>{const a=i.direction==="vertical"?{scroll:"scrollTop"}:{scroll:"scrollLeft"},l=p.value,D=a.scroll;l[D]=o},ue=o=>{var l;let a;i.itemSize===null?a=o>0?(l=N.value[o-1])==null?void 0:l.accumulator:0:a=Math.floor(o)*i.itemSize,de(a)},me=()=>{const o=p.value;B.value!=="middle"&&(B.value="middle",y("user-position","middle")),o.scrollTop===0&&(B.value="top",y("user-position","top")),o.scrollTop+o.clientHeight===o.scrollHeight&&(B.value="bottom",y("user-position","bottom")),A||(A=!0,requestAnimationFrame(()=>{A=!1,V(!1,!0)}))};return s({scrollToItem:ue,_updateVisibleItems:V}),(o,a)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"scroller",ref:p,class:t.normalizeClass(["vue-recycle-scroller",{ready:g.value,[`direction-${e.direction}`]:!0}]),onScrollPassive:me},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.listTag),{ref:"wrapper",style:t.normalizeStyle({[e.direction==="vertical"?"minHeight":"minWidth"]:`${t.unref(j)}px`}),class:t.normalizeClass(["vue-recycle-scroller__item-wrapper",e.listClass])},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(h.value,l=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.itemTag),t.mergeProps({key:l.nr.id,style:g.value?{transform:`translate${e.direction==="vertical"?"Y":"X"}(${l.position}px) translate${e.direction==="vertical"?"X":"Y"}(${l.offset}px)`,width:void 0,height:void 0}:null,class:["vue-recycle-scroller__item-view",[e.itemClass,{hover:!e.skipHover&&S.value===l.nr.key}]]},t.toHandlers(e.skipHover?{}:{mouseenter:()=>{S.value=l.nr.key},mouseleave:()=>{S.value=null}})),{default:t.withCtx(()=>[t.renderSlot(o.$slots,"default",{item:l.item,index:l.nr.index,active:l.nr.used})]),_:2},1040,["style","class"]))),128))]),_:3},8,["style","class"]))],34))}},pe={name:"DtScrollerItem",inject:["vscrollData","vscrollParent","vscrollResizeObserver"],props:{item:{required:!0},watchData:{type:Boolean,default:!1},active:{type:Boolean,required:!0},index:{type:Number,default:void 0},sizeDependencies:{type:[Array,Object],default:null},tag:{type:String,default:"div"}},computed:{id(){if(this.vscrollData.simpleArray)return this.index;if(this.vscrollData.keyField in this.item)return this.item[this.vscrollData.keyField];throw new Error(`keyField '${this.vscrollData.keyField}' not found in your item. You should set a valid keyField prop on your Scroller`)},size(){return this.vscrollData.sizes[this.id]||0},finalActive(){return this.active&&this.vscrollData.active}},watch:{watchData:"updateWatchData",id(e,s){if(I.returnFirstEl(this.$el).$_vs_id=this.id,this.size||this.onDataUpdate(),this.$_sizeObserved){const n=this.vscrollData.sizes[s],i=this.vscrollData.sizes[e];n!=null&&n!==i&&this.applySize(n)}},finalActive(e){this.size||(e?this.vscrollParent.$_undefinedMap[this.id]||(this.vscrollParent.$_undefinedSizes++,this.vscrollParent.$_undefinedMap[this.id]=!0):this.vscrollParent.$_undefinedMap[this.id]&&(this.vscrollParent.$_undefinedSizes--,this.vscrollParent.$_undefinedMap[this.id]=!1)),this.vscrollResizeObserver?e?this.observeSize():this.unobserveSize():e&&this.$_pendingVScrollUpdate===this.id&&this.updateSize()}},created(){if(!this.$isServer&&(this.$_forceNextVScrollUpdate=null,this.updateWatchData(),!this.vscrollResizeObserver))for(const e in this.sizeDependencies)this.$watch(()=>this.sizeDependencies[e],this.onDataUpdate)},mounted(){this.finalActive&&(this.updateSize(),this.observeSize())},beforeUnmount(){this.unobserveSize()},methods:{updateSize(){this.finalActive?this.$_pendingSizeUpdate!==this.id&&(this.$_pendingSizeUpdate=this.id,this.$_forceNextVScrollUpdate=null,this.$_pendingVScrollUpdate=null,this.computeSize(this.id)):this.$_forceNextVScrollUpdate=this.id},updateWatchData(){this.watchData&&!this.vscrollResizeObserver?this.$_watchData=this.$watch("item",()=>{this.onDataUpdate()},{deep:!0}):this.$_watchData&&(this.$_watchData(),this.$_watchData=null)},onVscrollUpdate({force:e}){!this.finalActive&&e&&(this.$_pendingVScrollUpdate=this.id),(this.$_forceNextVScrollUpdate===this.id||e||!this.size)&&this.updateSize()},onDataUpdate(){this.updateSize()},computeSize(e){this.$nextTick(()=>{if(this.id===e){const s=I.returnFirstEl(this.$el).offsetWidth,n=I.returnFirstEl(this.$el).offsetHeight;this.applyWidthHeight(s,n)}this.$_pendingSizeUpdate=null})},applyWidthHeight(e,s){const n=~~(this.vscrollParent.direction==="vertical"?s:e);n&&this.size!==n&&this.applySize(n)},applySize(e){this.vscrollParent.$_undefinedMap[this.id]&&(this.vscrollParent.$_undefinedSizes--,this.vscrollParent.$_undefinedMap[this.id]=void 0),this.vscrollData.sizes[this.id]=e},observeSize(){this.vscrollResizeObserver&&(this.$_sizeObserved||(this.vscrollResizeObserver.observe(I.returnFirstEl(this.$el)),this.$el.$_vs_id=this.id,this.$el.$_vs_onResize=this.onResize,this.$_sizeObserved=!0))},unobserveSize(){this.vscrollResizeObserver&&this.$_sizeObserved&&(this.vscrollResizeObserver.unobserve(I.returnFirstEl(this.$el)),this.$el.$_vs_onResize=void 0,this.$_sizeObserved=!1)},onResize(e,s,n){this.id===e&&this.applyWidthHeight(s,n)}},render(){return t.h(this.tag,this.$slots.default())}},ve={name:"DynamicScroller",components:{CoreScroller:se,DtScrollerItem:pe},provide(){return typeof ResizeObserver<"u"&&(this.$_resizeObserver=new ResizeObserver(e=>{requestAnimationFrame(()=>{if(Array.isArray(e)){for(const s of e)if(s.target&&s.target.$_vs_onResize){let n,i;if(s.borderBoxSize){const y=s.borderBoxSize[0];n=y.inlineSize,i=y.blockSize}else n=s.contentRect.width,i=s.contentRect.height;s.target.$_vs_onResize(s.target.$_vs_id,n,i)}}})})),{vscrollData:this.vscrollData,vscrollParent:this,vscrollResizeObserver:this.$_resizeObserver}},inheritAttrs:!1,props:{items:{type:Array,required:!0},dynamic:{type:Boolean,default:!1},keyField:{type:String,default:"id"},direction:{type:String,default:"vertical",validator:e=>["vertical","horizontal"].includes(e)},listTag:{type:String,default:"div"},itemTag:{type:String,default:"div"},minItemSize:{type:[Number,String]}},data(){return{vscrollData:{active:!0,sizes:{},keyField:this.keyField,simpleArray:!1}}},computed:{simpleArray(){return this.items.length&&typeof this.items[0]!="object"},itemsWithSize(){const e=[],{items:s,keyField:n,simpleArray:i}=this,y=this.vscrollData.sizes,m=s.length;for(let z=0;z<m;z++){const h=s[z],S=i?z:h[n];let g=y[S];typeof g>"u"&&!this.$_undefinedMap[S]&&(g=0),e.push({item:h,[n]:S,size:g})}return e}},watch:{simpleArray:{handler(e){this.vscrollData.simpleArray=e},immediate:!0},itemsWithSize(e,s){const n=I.returnFirstEl(this.$el).scrollTop;let i=0,y=0;const m=Math.min(e.length,s.length);for(let h=0;h<m&&!(i>=n);h++)i+=s[h].size||this.minItemSize,y+=e[h].size||this.minItemSize;const z=y-i;z!==0&&(I.returnFirstEl(this.$el).scrollTop+=z)}},beforeCreate(){this.$_updates=[],this.$_undefinedSizes=0,this.$_undefinedMap={}},activated(){this.vscrollData.active=!0},deactivated(){this.vscrollData.active=!1},methods:{dynamicScrollerUpdateItems(){const e=this.$refs.scroller;e&&e._updateVisibleItems(!0)},dynamicScrollerUpdateItemsFromBottom(){const e=this.$refs.scroller;e&&e._updateVisibleItems(!1,!0)},scrollToItem(e){const s=this.$refs.scroller;s&&s.scrollToItem(e)},scrollToBottom(){if(this.$_scrollingToBottom)return;this.$_scrollingToBottom=!0;const e=I.returnFirstEl(this.$el);this.$nextTick(()=>{e.scrollTop=e.scrollHeight+5e3;const s=()=>{e.scrollTop=e.scrollHeight+5e3,requestAnimationFrame(()=>{e.scrollTop=e.scrollHeight+5e3,this.$_undefinedSizes===0?this.$_scrollingToBottom=!1:requestAnimationFrame(s)})};requestAnimationFrame(s)})}}};function ye(e,s,n,i,y,m){const z=t.resolveComponent("dt-scroller-item"),h=t.resolveComponent("core-scroller");return t.openBlock(),t.createBlock(h,t.mergeProps({ref:"scroller",items:m.itemsWithSize,"min-item-size":n.minItemSize,direction:n.direction,"key-field":n.keyField,"list-tag":n.listTag,"item-tag":n.itemTag},e.$attrs),{default:t.withCtx(({item:S,index:g,active:p})=>[t.createVNode(z,{item:S,active:p,"size-dependencies":[S.message],"data-index":g},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default",t.normalizeProps(t.guardReactiveProps({item:S.item,index:g,active:p,itemWithSize:S})))]),_:2},1032,["item","active","size-dependencies","data-index"])]),_:3},16,["items","min-item-size","direction","key-field","list-tag","item-tag"])}const ze=he._(ve,[["render",ye]]),Se=Object.assign({name:"DtScroller"},{__name:"scroller",props:{direction:{type:String,default:"vertical",validator:e=>["vertical","horizontal"].includes(e)},dynamic:{type:Boolean,default:!1},itemSize:{type:Number,default:null},itemTag:{type:String,default:"div"},items:{type:Array,required:!0},keyField:{type:String,default:"id"},listTag:{type:String,default:"div"},minItemSize:{type:[Number,String],default:null},scrollerHeight:{type:[String,Number],default:"100%"},scrollerWidth:{type:[String,Number],default:"100%"}},emits:["user-position"],setup(e,{expose:s,emit:n}){const i=e,y=n;t.provide("emit",y);const m=t.ref(null),z=t.computed(()=>({width:typeof i.scrollerWidth=="number"?`${i.scrollerWidth}px`:i.scrollerWidth,height:typeof i.scrollerHeight=="number"?`${i.scrollerHeight}px`:i.scrollerHeight}));t.watch(i,()=>{B()},{deep:!0,immediate:!0});function h(){m.value&&m.value.scrollToBottom()}function S(F){m.value&&m.value.scrollToItem(F)}function g(){m.value&&(i.dynamic?m.value.dynamicScrollerUpdateItems():m.value._updateVisibleItems(!0))}function p(){m.value&&(i.dynamic?m.value.dynamicScrollerUpdateItemsFromBottom():m.value._updateVisibleItems(!1,!0))}function B(){i.dynamic&&!i.minItemSize&&console.error("scroller error: 'minItemSize' is required on 'dynamic' mode."),!i.dynamic&&!i.itemSize&&console.error("scroller error: 'itemSize' is required.")}return s({scrollToBottom:h,scrollToItem:S,updateItems:g,updateItemsFromBottom:p}),(F,A)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.dynamic?ze:se),{ref_key:"scroller",ref:m,"data-qa":"dt-scroller",items:e.items,"item-size":e.itemSize,"min-item-size":e.minItemSize,direction:e.direction,"key-field":e.keyField,"list-tag":e.listTag,"item-tag":e.itemTag,style:t.normalizeStyle(z.value),tabindex:"0",onUserPosition:A[0]||(A[0]=P=>F.$emit("user-position",P))},{default:t.withCtx(({item:P,index:U,active:M})=>[t.renderSlot(F.$slots,"default",t.normalizeProps(t.guardReactiveProps({item:P,index:U,active:M})))]),_:3},40,["items","item-size","min-item-size","direction","key-field","list-tag","item-tag","style"]))}});exports.default=Se;
//# sourceMappingURL=scroller.cjs.map