@dialpad/dialtone/dist/vue3/scroller-CjAsgjl9.cjs

Dialpad's Dialtone design system monorepo

require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/utils/index.cjs`),t=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`);let n=require(`vue`);var r={__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:t,emit:r}){let i=e,a=r,o=(0,n.reactive)(new Map),s=(0,n.reactive)(new Map),c=(0,n.ref)([]),l=(0,n.ref)(null),u=(0,n.ref)(!1),d=(0,n.ref)(null),f=(0,n.ref)(`top`),p=0,m=0,h=!1,g=0,_=null,v=null,y=0,b=0,x=(0,n.computed)(()=>{if(i.itemSize===null){let e={"-1":{accumulator:0}},t=i.items,n=i.sizeField,r=i.minItemSize,a=1e4,o=0,s;for(let i=0,c=t.length;i<c;i++)s=t[i][n]||r,s<a&&(a=s),o+=s,e[i]={accumulator:o,size:s};return v=a,e}return[]}),S=(0,n.computed)(()=>i.items.length&&typeof i.items[0]!=`object`),C=(0,n.computed)(()=>{let e={};for(let t=0,n=i.items.length;t<n;t++)e[i.items[t][i.keyField]]=t;return e});(0,n.watch)(x,()=>{k(!1)},{deep:!0}),(0,n.onMounted)(()=>{(0,n.nextTick)(()=>{k(!0),u.value=!0})});let w=(e,t,r,i,a)=>{let o=(0,n.shallowReactive)({item:r,position:0,nr:(0,n.markRaw)({id:b++,index:t,used:!0,key:i,type:a})});return e.value.push(o),o},T=(e,t=!1)=>{let n=s,r=e.nr.type,i=n.get(r);i||(i=[],n.set(r,i)),i.push(e),t||(e.nr.used=!1,e.position=-9999)},E=()=>{let e=i.direction===`vertical`,t;return t=e?{start:d.value.scrollTop,end:d.value.scrollTop+d.value.clientHeight}:{start:d.value.scrollLeft,end:d.value.scrollLeft+d.value.clientWidth},t},D=()=>{throw setTimeout(()=>{console.error(`It seems the scroller element isn't scrolling, so it tries to render all the items at once.`,`Scroller:`,d),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.`)}),Error(`Rendered items limit reached`)},O=()=>{c.value.sort((e,t)=>e.nr.index-t.nr.index)},k=(e,t=!1)=>{let n=i.itemSize,r=v,a=S.value?null:i.keyField,l=i.items,u=l.length,d=x.value,f=o,h=s,b=c,k=C,A,j,M,N,P;if(!u)A=j=N=P=M=0;else{let e=E();if(t){let t=e.start-g.value;if(t<0&&(t=-t),n===null&&t<r.value||t<n)return{continuous:!0}}g=e.start;let a=i.buffer;if(e.start-=a,e.end+=a,n===null){let t,n=0,r=u-1,i=~~(u/2),a;do a=i,t=d[i]?.accumulator,t<e.start?n=i:i<u-1&&d[i+1]?.accumulator>e.start&&(r=i),i=~~((n+r)/2);while(i!==a);for(i<0&&(i=0),A=i,M=d[u-1]?.accumulator,j=i;j<u&&d[j]?.accumulator<e.end;j++);for(j===-1?j=l.length-1:(j++,j>u&&(j=u)),N=p;N<u&&d[N]?.accumulator<e.start;N++);for(P=N;P<u&&d[P]?.accumulator<e.end;P++);}else{A=~~(e.start/n);let t=A%1;A-=t,j=Math.ceil(e.end/n),N=Math.max(0,Math.floor(e.start/n)),P=Math.floor(e.end/n),A<0&&(A=0),j>u&&(j=u),N<0&&(N=0),P>u&&(P=u),M=Math.ceil(u/1)*n}}j-A>1e3&&D(),y=M;let F,I=A<=m&&j>=A;if(I)for(let t=0,n=b.value.length;t<n;t++)F=b.value[t],F?.nr.used&&(e&&(F.nr.index=k[F.item[a]]),(F.nr.index==null||F.nr.index<A||F.nr.index>=j)&&T(F));let L=I?null:new Map,R,z,B;for(let e=A;e<j;e++){R=l[e];let t=a?R?.[a]:R;if(t==null)throw Error(`Key is ${t} on item (keyField is '${a}')`);if(F=f.get(t),!n&&!d[e]?.size){F&&T(F);continue}z=R.type;let r=h.get(z);if(!F)I?F=r&&r.length?r.pop():w(b,e,R,t,z):(B=L.get(z)||0,(!r||B>=r.length)&&(F=w(b,e,R,t,z),T(F,!0),r=h.get(z)),F=r[B],L.set(z,B+1)),f.delete(F.nr.key),F.nr.used=!0,F.nr.index=e,F.nr.key=t,F.nr.type=z,f.set(t,F);else if(!F.nr.used&&(F.nr.used=!0,r)){let e=r.indexOf(F);e!==-1&&r.splice(e,1)}F.item=R,n===null?(F.position=d[e-1]?.accumulator,F.offset=0):(F.position=Math.floor(e)*n,F.offset=e%1*n)}return p=A,m=j,clearTimeout(_),_=setTimeout(O,300),{continuous:I}},A=e=>{let t=i.direction===`vertical`?{scroll:`scrollTop`,start:`top`}:{scroll:`scrollLeft`,start:`left`},n=d.value,r=t.scroll;n[r]=e},j=e=>{let t;t=i.itemSize===null?e>0?x.value[e-1]?.accumulator:0:Math.floor(e)*i.itemSize,A(t)},M=()=>{let e=d.value;f.value!==`middle`&&(f.value=`middle`,a(`user-position`,`middle`)),e.scrollTop===0&&(f.value=`top`,a(`user-position`,`top`)),e.scrollTop+e.clientHeight===e.scrollHeight&&(f.value=`bottom`,a(`user-position`,`bottom`)),h||(h=!0,requestAnimationFrame(()=>{h=!1,k(!1,!0)}))};return t({scrollToItem:j,_updateVisibleItems:k}),(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`scroller`,ref:d,class:(0,n.normalizeClass)([`vue-recycle-scroller`,{ready:u.value,[`direction-${e.direction}`]:!0}]),onScrollPassive:M},[((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e.listTag),{ref:`wrapper`,style:(0,n.normalizeStyle)({[e.direction===`vertical`?`minHeight`:`minWidth`]:`${(0,n.unref)(y)}px`}),class:(0,n.normalizeClass)([`vue-recycle-scroller__item-wrapper`,e.listClass])},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(c.value,r=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e.itemTag),(0,n.mergeProps)({key:r.nr.id,style:u.value?{transform:`translate${e.direction===`vertical`?`Y`:`X`}(${r.position}px) translate${e.direction===`vertical`?`X`:`Y`}(${r.offset}px)`,width:void 0,height:void 0}:null,class:[`vue-recycle-scroller__item-view`,[e.itemClass,{hover:!e.skipHover&&l.value===r.nr.key}]]},(0,n.toHandlers)(e.skipHover?{}:{mouseenter:()=>{l.value=r.nr.key},mouseleave:()=>{l.value=null}})),{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(t.$slots,`default`,{item:r.item,index:r.nr.index,active:r.nr.used})]),_:2},1040,[`style`,`class`]))),128))]),_:3},8,[`style`,`class`]))],34))}},i={name:`DynamicScroller`,components:{CoreScroller:r,DtScrollerItem:{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 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(t,n){if(e.returnFirstEl(this.$el).$_vs_id=this.id,this.size||this.onDataUpdate(),this.$_sizeObserved){let e=this.vscrollData.sizes[n],r=this.vscrollData.sizes[t];e!=null&&e!==r&&this.applySize(e)}},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(let 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(t){this.$nextTick(()=>{if(this.id===t){let t=e.returnFirstEl(this.$el).offsetWidth,n=e.returnFirstEl(this.$el).offsetHeight;this.applyWidthHeight(t,n)}this.$_pendingSizeUpdate=null})},applyWidthHeight(e,t){let n=~~(this.vscrollParent.direction===`vertical`?t: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(e.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(e.returnFirstEl(this.$el)),this.$el.$_vs_onResize=void 0,this.$_sizeObserved=!1)},onResize(e,t,n){this.id===e&&this.applyWidthHeight(t,n)}},render(){return(0,n.h)(this.tag,this.$slots.default())}}},provide(){return typeof ResizeObserver<`u`&&(this.$_resizeObserver=new ResizeObserver(e=>{requestAnimationFrame(()=>{if(Array.isArray(e)){for(let t of e)if(t.target&&t.target.$_vs_onResize){let e,n;if(t.borderBoxSize){let r=t.borderBoxSize[0];e=r.inlineSize,n=r.blockSize}else e=t.contentRect.width,n=t.contentRect.height;t.target.$_vs_onResize(t.target.$_vs_id,e,n)}}})})),{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(){let e=[],{items:t,keyField:n,simpleArray:r}=this,i=this.vscrollData.sizes,a=t.length;for(let o=0;o<a;o++){let a=t[o],s=r?o:a[n],c=i[s];c===void 0&&!this.$_undefinedMap[s]&&(c=0),e.push({item:a,[n]:s,size:c})}return e}},watch:{simpleArray:{handler(e){this.vscrollData.simpleArray=e},immediate:!0},itemsWithSize(t,n){let r=e.returnFirstEl(this.$el).scrollTop,i=0,a=0,o=Math.min(t.length,n.length);for(let e=0;e<o&&!(i>=r);e++)i+=n[e].size||this.minItemSize,a+=t[e].size||this.minItemSize;let s=a-i;s!==0&&(e.returnFirstEl(this.$el).scrollTop+=s)}},beforeCreate(){this.$_updates=[],this.$_undefinedSizes=0,this.$_undefinedMap={}},activated(){this.vscrollData.active=!0},deactivated(){this.vscrollData.active=!1},methods:{dynamicScrollerUpdateItems(){let e=this.$refs.scroller;e&&e._updateVisibleItems(!0)},dynamicScrollerUpdateItemsFromBottom(){let e=this.$refs.scroller;e&&e._updateVisibleItems(!1,!0)},scrollToItem(e){let t=this.$refs.scroller;t&&t.scrollToItem(e)},scrollToBottom(){if(this.$_scrollingToBottom)return;this.$_scrollingToBottom=!0;let t=e.returnFirstEl(this.$el);this.$nextTick(()=>{t.scrollTop=t.scrollHeight+5e3;let e=()=>{t.scrollTop=t.scrollHeight+5e3,requestAnimationFrame(()=>{t.scrollTop=t.scrollHeight+5e3,this.$_undefinedSizes===0?this.$_scrollingToBottom=!1:requestAnimationFrame(e)})};requestAnimationFrame(e)})}}};function a(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-scroller-item`),c=(0,n.resolveComponent)(`core-scroller`);return(0,n.openBlock)(),(0,n.createBlock)(c,(0,n.mergeProps)({ref:`scroller`,items:o.itemsWithSize,"min-item-size":r.minItemSize,direction:r.direction,"key-field":r.keyField,"list-tag":r.listTag,"item-tag":r.itemTag},e.$attrs),{default:(0,n.withCtx)(({item:t,index:r,active:i})=>[(0,n.createVNode)(s,{item:t,active:i,"size-dependencies":[t.message],"data-index":r},{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`,(0,n.normalizeProps)((0,n.guardReactiveProps)({item:t.item,index:r,active:i,itemWithSize:t})))]),_:2},1032,[`item`,`active`,`size-dependencies`,`data-index`])]),_:3},16,[`items`,`min-item-size`,`direction`,`key-field`,`list-tag`,`item-tag`])}var o=t.t(i,[[`render`,a]]),s=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:t,emit:i}){let a=e;(0,n.provide)(`emit`,i);let s=(0,n.ref)(null),c=(0,n.computed)(()=>({width:typeof a.scrollerWidth==`number`?`${a.scrollerWidth}px`:a.scrollerWidth,height:typeof a.scrollerHeight==`number`?`${a.scrollerHeight}px`:a.scrollerHeight}));(0,n.watch)(a,()=>{p()},{deep:!0,immediate:!0});function l(){s.value&&s.value.scrollToBottom()}function u(e){s.value&&s.value.scrollToItem(e)}function d(){s.value&&(a.dynamic?s.value.dynamicScrollerUpdateItems():s.value._updateVisibleItems(!0))}function f(){s.value&&(a.dynamic?s.value.dynamicScrollerUpdateItemsFromBottom():s.value._updateVisibleItems(!1,!0))}function p(){a.dynamic&&!a.minItemSize&&console.error(`scroller error: 'minItemSize' is required on 'dynamic' mode.`),!a.dynamic&&!a.itemSize&&console.error(`scroller error: 'itemSize' is required.`)}return t({scrollToBottom:l,scrollToItem:u,updateItems:d,updateItemsFromBottom:f}),(t,i)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e.dynamic?o:r),{ref_key:`scroller`,ref:s,"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:(0,n.normalizeStyle)(c.value),tabindex:`0`,onUserPosition:i[0]||(i[0]=e=>t.$emit(`user-position`,e))},{default:(0,n.withCtx)(({item:e,index:r,active:i})=>[(0,n.renderSlot)(t.$slots,`default`,(0,n.normalizeProps)((0,n.guardReactiveProps)({item:e,index:r,active:i})))]),_:3},40,[`items`,`item-size`,`min-item-size`,`direction`,`key-field`,`list-tag`,`item-tag`,`style`]))}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
//# sourceMappingURL=scroller-CjAsgjl9.cjs.map