vue-collection-cluster - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/vue-collection-cluster.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueCollectionCluster=e():t.VueCollectionCluster=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s={static:"static",dynamic:"dynamic",automatic:"automatic"};e.default={props:{items:{type:Array,required:!0},columns:{type:Number,default:1},itemWidth:{type:Number,default:null},itemHeight:{type:Number,default:100},typeField:{type:String,default:"type"},heightField:{type:String,default:"height"},heightType:{type:String,default:s.static},inset:{type:Object,default:function(){return{top:0,bottom:0}}},scrollPastEnd:{type:Number,default:0},buffer:{type:Number,default:200},threshold:{type:Number,default:50},autoResize:{type:Boolean,default:!0},prerender:{type:Number,default:0}},data:function(){return{visibleCells:[],totalHeight:0,startHeight:0,endHeight:0}},computed:{length:function(){return this.items.length},scrollPastEndSize:function(){var t=this.scrollPastEnd*this.height;return t-=this.inset.top+this.inset.bottom+this.itemHeight,t<0?0:t}},watch:{items:function(){this.verifyCells(),this.updateVisibleCells()},columns:function(){this.updateVisibleCells()},autoResize:function(){this.autoResize?window.addEventListener("resize",this.onResize):window.removeEventListener("resize",this.onResize)}},mounted:function(){this.scrollTop=0,this.currentStart=0,this.currentEnd=0,this.startHeight=0,this.endHeight=0,this.height=this.$el.clientHeight,this.scrollHeight=0,this.updateVisibleCells(),this.autoResize&&window.addEventListener("resize",this.onResize)},beforeDestroy:function(){this.autoResize&&window.removeEventListener("resize",this.onResize)},methods:{onScroll:function(t){this.scrollTop=this.$el.scrollTop,this.$emit("scroll",t),this.updateVisibleCells()},onResize:function(){this.height=this.$el.clientHeight,this.updateVisibleCells()},getStart:function(){if(this.heightType===s.static){var t=this.scrollTop-this.buffer;t=t<0?0:t;var e=Math.floor(t/this.itemHeight)*this.columns;return e>this.length&&(e=this.length),e}return 0},getEnd:function(){if(this.heightType===s.static){var t=Math.ceil((this.scrollTop+this.height+this.buffer)/this.itemHeight)*this.columns;return t>this.length&&(t=this.length),t}return 0},updateVisibleCells:function(){var t=this.getStart(),e=this.getEnd(),i=void 0,s=void 0,n=t<this.currentEnd?t:this.currentEnd;for(i=this.currentStart;i<n;i++)s=this.visibleCells.shift();var r=e>this.currentStart?e:this.currentStart;for(i=r;i<this.currentEnd;i++)s=this.visibleCells.pop();var l=e<this.currentStart?e:this.currentStart;if(l>t){var o=[];for(i=t;i<l;i++)s={index:i,item:this.items[i]},o.push(s);if(this.visibleCells.length){var h;(h=this.visibleCells).unshift.apply(h,o)}else this.visibleCells=o}var u=t>this.currentEnd?t:this.currentEnd;if(u<e)for(i=u;i<e;i++)s={index:i,item:this.items[i]},this.visibleCells.push(s);var c=this.currentStart!==t||this.currentEnd!==e;this.currentStart=t,this.currentEnd=e,this.startHeight=this.inset.top+this.currentStart/this.columns*this.itemHeight,this.endHeight=this.inset.bottom+this.scrollPastEndSize+Math.ceil((this.length-this.currentEnd)/this.columns)*this.itemHeight,this.scrollHeight=this.inset.top+this.inset.bottom+Math.ceil(this.length/this.columns)*this.itemHeight+this.scrollPastEndSize,this.verifyScrollPosition(),c&&this.$emit("cellsChange",this.visibleCells)},verifyCells:function(){for(var t=0,e=!1,i=0;i<this.visibleCells.length;i++)t&&(this.visibleCells[i].index-=t),this.items.indexOf(this.visibleCells[i].item)!==this.visibleCells[i].index&&(this.visibleCells.splice(i,1),i--,t++,e=!0);this.currentEnd-=t,e&&this.$emit("cellsChange",this.visibleCells)},verifyScrollPosition:function(){this.scrollTop<this.threshold&&this.$emit("scrollToTop"),this.scrollHeight-this.height-this.scrollTop<this.threshold&&this.$emit("scrollToBottom")}}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=i(2),n=i(0),r=i.n(n);for(var l in n)"default"!==l&&function(t){i.d(e,t,function(){return n[t]})}(l);var o=i(3),h=Object(s.a)(r.a,o.a,!1,null,null,null);e.default=h.exports},function(t,e,i){"use strict";function s(t,e,i,s,n,r){var l,o=t=t||{},h=typeof t.default;"object"!==h&&"function"!==h||(l=t,o=t.default);var u="function"==typeof o?o.options:o;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),n&&(u._scopeId=n);var c;if(r?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},u._ssrRegister=c):s&&(c=s),c){var a=u.functional,d=a?u.render:u.beforeCreate;a?(u._injectStyles=c,u.render=function(t,e){return c.call(e),d(t,e)}):u.beforeCreate=d?[].concat(d,c):[c]}return{esModule:l,exports:o,options:u}}e.a=s},function(t,e,i){"use strict";var s=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"collection-cluster",on:{"&scroll":function(e){t.onScroll(e)}}},[i("div",{ref:"start",staticClass:"collection-space",style:{height:t.startHeight+"px",width:"100%"}}),t._v(" "),t._l(t.visibleCells,function(e){return t._t(e.item[t.typeField],null,{cell:e,item:e.item})}),t._v(" "),i("div",{ref:"end",staticClass:"collection-space",style:{height:t.endHeight+"px",width:"100%"}})],2)},n=[],r={render:s,staticRenderFns:n};e.a=r}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueCollectionCluster=e():t.VueCollectionCluster=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var h=i[s]={i:s,l:!1,exports:{}};return t[s].call(h.exports,h,h.exports,e),h.l=!0,h.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s={static:"static",dynamic:"dynamic",automatic:"automatic"};e.default={props:{items:{type:Array,required:!0},columns:{type:Number,default:1},itemWidth:{type:Number,default:null},itemHeight:{type:Number,default:100},typeField:{type:String,default:"type"},heightField:{type:String,default:"height"},heightType:{type:String,default:s.static},inset:{type:Object,default:function(){return{top:0,bottom:0}}},scrollPastEnd:{type:Number,default:0},buffer:{type:Number,default:200},threshold:{type:Number,default:50},autoResize:{type:Boolean,default:!0},prerender:{type:Number,default:0}},data:function(){return{visibleCells:[],totalHeight:0,startHeight:0,endHeight:0}},computed:{length:function(){return this.items.length},scrollPastEndSize:function(){var t=this.scrollPastEnd*this.height;return t-=this.inset.top+this.inset.bottom+this.itemHeight,t<0?0:t}},watch:{items:function(){this.verifyCells(),this.updateVisibleCells()},columns:function(){this.updateVisibleCells()},autoResize:function(){this.autoResize?window.addEventListener("resize",this.onResize):window.removeEventListener("resize",this.onResize)}},mounted:function(){this.scrollTop=0,this.currentStart=0,this.currentEnd=0,this.startHeight=0,this.endHeight=0,this.heightInvalidAfter=0,this.accumulatorProp=Symbol(),this.height=this.$el.clientHeight,this.scrollHeight=0,this.updateVisibleCells(),this.autoResize&&window.addEventListener("resize",this.onResize)},beforeDestroy:function(){this.autoResize&&window.removeEventListener("resize",this.onResize)},methods:{onScroll:function(t){this.scrollTop=this.$el.scrollTop,this.$emit("scroll",t),this.updateVisibleCells()},onResize:function(){this.height=this.$el.clientHeight,this.updateVisibleCells()},invalidateHeightAfter:function(t){t<0&&(t=0),t<this.heightInvalidAfter&&(this.heightInvalidAfter=t)},getStartEnd:function(){if(!this.length)return{start:0,end:0};var t=this.scrollTop-this.inset.top-this.buffer;t<0&&(t=0);var e=this.scrollTop+this.inset.top+this.height+this.buffer;if(this.heightType===s.static){var i=Math.floor(t/this.itemHeight)*this.columns;i<0&&(i=0),i>this.length&&(i=this.length);var h=Math.ceil(e/this.itemHeight)*this.columns;return h>this.length&&(h=this.length),{start:i,end:h}}var r=Math.floor(t/this.itemHeight);for(r>this.heightInvalidAfter&&(r=this.heightInvalidAfter),console.log(t,e),console.log("last approx accumulated item",r,this.items[r][this.accumulatorProp]);r>0&&(void 0===this.items[r][this.accumulatorProp]||this.items[r][this.accumulatorProp]>t);)r--;console.log("last before scroll",r);for(var n=this.items[r][this.accumulatorProp]||0;;){var l=this.items[r],o=l[this.heightField]||this.itemHeight;if(l[this.accumulatorProp]=n,(n+=o)>t||r>=this.length-1)break;r++}var a=r;for(console.log("start",r,n);a<this.length-1&&n<e;){var u=this.items[++a],c=u[this.heightField]||this.itemHeight;u[this.accumulatorProp]=n,n+=c}return console.log("end",a,n),a>this.heightInvalidAfter&&(this.heightInvalidAfter=a),a++,{start:r,end:a}},updateVisibleCells:function(){var t=this,e=this.getStartEnd(),i=e.start,h=e.end,r=void 0,n=void 0;console.log("bounds",i,h);var l=i<this.currentEnd?i:this.currentEnd;for(r=this.currentStart;r<l;r++)n=this.visibleCells.shift();var o=h>this.currentStart?h:this.currentStart;for(r=o;r<this.currentEnd;r++)n=this.visibleCells.pop();var a=h<this.currentStart?h:this.currentStart;if(a>i){var u=[];for(r=i;r<a;r++)n={index:r,item:this.items[r]},u.push(n);if(this.visibleCells.length){var c;(c=this.visibleCells).unshift.apply(c,u)}else this.visibleCells=u}var d=i>this.currentEnd?i:this.currentEnd;if(d<h)for(r=d;r<h;r++)n={index:r,item:this.items[r]},this.visibleCells.push(n);var f=this.currentStart!==i||this.currentEnd!==h;this.currentStart=i,this.currentEnd=h,this.updateSizes(),this.verifyScrollPosition(),f&&(this.heightType===s.automatic&&this.$nextTick(function(){t.updateHeights()}),this.$emit("cellsChange",this.visibleCells))},verifyCells:function(){for(var t=this,e=0,i=!1,h=0;h<this.visibleCells.length;h++)e&&(this.visibleCells[h].index-=e),this.items.indexOf(this.visibleCells[h].item)!==this.visibleCells[h].index&&(0===h?this.invalidateHeightAfter(0):this.invalidateHeightAfter(this.currentStart+h),this.visibleCells.splice(h,1),h--,e++,i=!0);this.currentEnd-=e,this.heightInvalidAfter>=this.length&&this.invalidateHeightAfter(this.length-1),i&&(this.heightType===s.automatic&&this.$nextTick(function(){t.updateHeights()}),this.$emit("cellsChange",this.visibleCells))},verifyScrollPosition:function(){this.scrollTop-this.inset.top<this.threshold&&this.$emit("scrollToTop"),this.scrollHeight-this.height-this.scrollTop-this.inset.bottom<this.threshold&&this.$emit("scrollToBottom")},updateSizes:function(){if(this.heightType===s.static)this.startHeight=this.inset.top+this.currentStart/this.columns*this.itemHeight,this.endHeight=this.inset.bottom+this.scrollPastEndSize+Math.ceil((this.length-this.currentEnd)/this.columns)*this.itemHeight,this.scrollHeight=this.inset.top+this.inset.bottom+Math.ceil(this.length/this.columns)*this.itemHeight+this.scrollPastEndSize;else{var t=this.inset.top,e=this.inset.bottom+this.scrollPastEndSize,i=e+t,h=this.items[this.currentStart];h&&(t+=h[this.accumulatorProp]);var r=this.items[this.heightInvalidAfter];if(r){var n=r[this.accumulatorProp];n+=r[this.heightField]||this.itemHeight,n+=(this.length-1-this.heightInvalidAfter)*this.itemHeight;var l=this.items[this.currentEnd-1];e+=n-l[this.accumulatorProp]-(l[this.heightField]||this.itemHeight),i+=n}this.startHeight=t,this.endHeight=e,this.scrollHeight=i}},updateHeights:function(){for(var t=!1,e=this.visibleCells.length-1;e>=0;e--){var i=this.visibleCells[e],s=this.$el.children[1+e],h=s.clientHeight;i.item[this.heightField]!==h&&(i.item[this.heightField]=h,t=!0,this.invalidateHeightAfter(this.currentStart+e))}t&&this.updateVisibleCells()},resizeItem:function(t){this.heightType===s.dynamic?(this.invalidateHeightAfter(t),this.updateVisibleCells()):this.heightType===s.automatic&&t>=this.currentStart&&t<this.currentEnd&&this.updateHeights()}}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=i(2),h=i(0),r=i.n(h);for(var n in h)"default"!==n&&function(t){i.d(e,t,function(){return h[t]})}(n);var l=i(3),o=Object(s.a)(r.a,l.a,!1,null,null,null);e.default=o.exports},function(t,e,i){"use strict";function s(t,e,i,s,h,r){var n,l=t=t||{},o=typeof t.default;"object"!==o&&"function"!==o||(n=t,l=t.default);var a="function"==typeof l?l.options:l;e&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns,a._compiled=!0),i&&(a.functional=!0),h&&(a._scopeId=h);var u;if(r?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},a._ssrRegister=u):s&&(u=s),u){var c=a.functional,d=c?a.render:a.beforeCreate;c?(a._injectStyles=u,a.render=function(t,e){return u.call(e),d(t,e)}):a.beforeCreate=d?[].concat(d,u):[u]}return{esModule:n,exports:l,options:a}}e.a=s},function(t,e,i){"use strict";var s=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"collection-cluster",on:{"&scroll":function(e){t.onScroll(e)}}},[i("div",{ref:"start",staticClass:"collection-space",style:{height:t.startHeight+"px",width:"100%"}}),t._v(" "),t._l(t.visibleCells,function(e){return t._t(e.item[t.typeField],null,{cell:e,item:e.item})}),t._v(" "),i("div",{ref:"end",staticClass:"collection-space",style:{height:t.endHeight+"px",width:"100%"}})],2)},h=[],r={render:s,staticRenderFns:h};e.a=r}])});

package.json

 {
 	"name": "vue-collection-cluster",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"description": "A vue component that support big data list with high scroll performance.",
@@ -5,0 +5,0 @@ "main": "dist/vue-collection-cluster.js",

No alert changes

Improved metrics

Total package byte prevSize

9455

33.89%

No dependency changes