UNPKG

v-endless-list

Version:

Minimalistic and tiny Vue.js scroll list components for an endless amount of data

2 lines 6.52 kB
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vEndlessList",[],e):"object"==typeof exports?exports.vEndlessList=e():t.vEndlessList=e()}(window,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=1)}([function(t,e,i){var n,o,r;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,o=[e],void 0===(r="function"==typeof(n=function(t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.mixin=t.SCROLL_TARGETS=t.EVENTS=void 0;var e={reachedTop:"reached-top",reachedBottom:"reached-bottom",scrollTo:"scroll-to"};t.EVENTS=e;var i={top:"top",bottom:"bottom"};t.SCROLL_TARGETS=i;var n={props:{items:{type:Array,default:function(){return[]}},height:{type:String,default:"100%"}},methods:{isAlmostEqual:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;return Math.abs(t-e)<i}}};t.mixin=n})?n.apply(e,o):n)||(t.exports=r)},function(t,e,i){t.exports=i(2)},function(t,e,i){var n,o,r;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,o=[e,i(3),i(4)],void 0===(r="function"==typeof(n=function(i,n,o){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(i,"__esModule",{value:!0}),i.default=void 0,n=r(n),o=r(o);var s={install:function(t,e){var i=e.h;t.component("v-endless-virtual-list",(0,n.default)(i)),t.component("v-endless-lazy-list",(0,o.default)(i))}};i.default=s,t.exports=e.default})?n.apply(e,o):n)||(t.exports=r)},function(t,e,i){var n,o,r;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,o=[e,i(0)],void 0===(r="function"==typeof(n=function(i,n){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.default=void 0;var o=function(t){return{mixins:[n.mixin],props:{itemHeight:{type:[Number,String],required:!0,validator:function(t){return!isNaN(+t)&&+t>=0}}},emits:[n.EVENTS.reachedTop,n.EVENTS.reachedBottom],data:function(){return{itemsStartIndex:0,itemsEndIndex:0,paddingTop:0}},computed:{itemStyle:function(){return{style:{height:this.itemHeight+"px",overflow:"hidden"}}}},mounted:function(){this.$refs.container.addEventListener("scroll",this._onScroll),this._onScroll(!0)},methods:{_onScroll:function(t){var e=this.$refs.container.scrollTop,i=this.$refs.container.clientHeight;if(this.itemsStartIndex=Math.floor(e/this.itemHeight),this.itemsEndIndex=this.itemsStartIndex+Math.ceil(i/this.itemHeight),this.paddingTop=this.itemsStartIndex*this.itemHeight,0===e)!0!==t&&this.$emit(n.EVENTS.reachedTop);else{var o=this.itemHeight*this.items.length;this.isAlmostEqual(o,e+i)&&this.$emit(n.EVENTS.reachedBottom)}},scrollTo:function(t){t===n.SCROLL_TARGETS.top?this.$refs.container.scrollTop=0:t===n.SCROLL_TARGETS.bottom?this.$refs.container.scrollTop=(this.items.length-1)*this.itemHeight:!isNaN(+t)&&t>=0&&t<this.items.length&&(this.$refs.container.scrollTop=t*this.itemHeight)}},render:function(){var e,i=this;if(0===this.items.length)e=[(0,this.$slots["empty-list"])()];else{var n=this.$slots.default||function(){},o=this.items.slice(this.itemsStartIndex,this.itemsEndIndex+1).map((function(e){return t("div",i.itemStyle,[n(e)])}));e=[t("div",{style:{boxSizing:"border-box",paddingTop:this.paddingTop+"px",height:this.itemHeight*this.items.length+"px"}},o)]}return t("div",{ref:"container",style:{height:this.height,overflowY:"scroll"}},e)}}};i.default=o,t.exports=e.default})?n.apply(e,o):n)||(t.exports=r)},function(t,e,i){var n,o,r;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,o=[e,i(0)],void 0===(r="function"==typeof(n=function(i,n){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.default=void 0;var o=function(t){return{mixins:[n.mixin],props:{increment:{type:[Number,String],default:10,validator:function(t){return!isNaN(+t)&&+t>=0}},loadingThreshold:{type:[Number,String],default:10,validator:function(t){return!isNaN(+t)&&+t>=0}},listChangeBehavior:{type:String,default:"reset",validator:function(t){return["reset","keep"].includes(t)}}},emits:[n.EVENTS.reachedTop,n.EVENTS.reachedBottom],data:function(){return{limitIndex:+this.increment}},computed:{numberOfItems:function(){return this.items.length}},watch:{numberOfItems:function(t){"reset"===this.listChangeBehavior?(this.limitIndex=Math.min(t,+this.increment),this.$refs.container.scrollTop=0):this.limitIndex=Math.max(+this.increment,Math.min(t,this.limitIndex))}},mounted:function(){this.$refs.container.addEventListener("scroll",this._onScroll)},methods:{_onScroll:function(){var t=this.$refs.container;this.isAlmostEqual(t.scrollTop,t.scrollHeight-t.offsetHeight,+this.loadingThreshold)?(this.limitIndex=Math.min(this.numberOfItems,+this.increment+this.limitIndex),this.$emit(n.EVENTS.reachedBottom)):0===t.scrollTop&&this.$emit(n.EVENTS.reachedTop)},scrollTo:function(t){var e=this.$refs.container;t===n.SCROLL_TARGETS.top?e.scrollTop=0:t===n.SCROLL_TARGETS.bottom?(this.limitIndex=this.items.length,this.$nextTick((function(){return e.scrollTop=e.scrollHeight}))):!isNaN(+t)&&t>=0&&t<this.items.length&&(t>=this.limitIndex-this.increment&&(this.limitIndex=Math.min(this.numberOfItems,+this.increment+t)),this.$nextTick((function(){return e.children[t].scrollIntoView()})))}},render:function(){var e;if(0===this.items.length)e=[(0,this.$slots["empty-list"])()];else{var i=this.$slots.default||function(){};e=this.items.slice(0,this.limitIndex).map((function(e){return t("div",{},[i(e)])}))}return t("div",{ref:"container",style:{height:this.height,overflowY:"scroll"}},e)}}};i.default=o,t.exports=e.default})?n.apply(e,o):n)||(t.exports=r)}])})); //# sourceMappingURL=vEndlessList.min.js.map