├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── dist
    └── vue-collection-cluster.js
├── example
    ├── dist
    │   └── build.js
    ├── index.html
    ├── src
    │   ├── App.vue
    │   └── main.js
    └── webpack.config.js
├── package-lock.json
├── package.json
├── src
    └── vue-collection-cluster.vue
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": [
3 | 		"env"
4 | 	]
5 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | .DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Andrej Adamcik
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-collection-cluster
  2 | 
  3 | A vue component for displaying large data sets. Render 100000+ rows/columns easily with great performance.
  4 | 
  5 | 
  6 | [![npm](https://img.shields.io/npm/v/vue-collection-cluster.svg)
  7 | ![npm](https://img.shields.io/npm/dm/vue-collection-cluster.svg)](https://www.npmjs.com/package/vue-collection-cluster)
  8 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
  9 | [![license](https://img.shields.io/npm/l/express.svg)]()
 10 | 
 11 | ## Demo
 12 | 
 13 | - [Basic](https://jsfiddle.net/adamcikado/jv694b8c/)
 14 | - [Multiple columns](https://jsfiddle.net/adamcikado/eknhg2du/)
 15 | - [Automatic/dynamic height](https://jsfiddle.net/adamcikado/v9grvxvq/)
 16 | - [Multiple slots](https://jsfiddle.net/adamcikado/q6c7xteu/)
 17 | 
 18 | ## Installation
 19 | 
 20 | ```bash
 21 | npm install --save vue-collection-cluster
 22 | ```
 23 | 
 24 | ## Usage
 25 | 
 26 | ```html
 27 | <template>
 28 | 	<collection-cluster
 29 | 		v-bind="collection"
 30 | 		:items="items"
 31 | 	></collection-cluster>
 32 | </template>
 33 | ```
 34 | 
 35 | ```javascript
 36 | import CollectionCluster from 'vue-collection-cluster';
 37 | 
 38 | export default {
 39 | 	components: {CollectionCluster},
 40 | 	data() {
 41 | 		return {
 42 | 			collection: {
 43 | 
 44 | 			},
 45 | 			items: [{
 46 | 				type: 'header',
 47 | 				title: 'List',
 48 | 			}, {
 49 | 				type: 'letter',
 50 | 				value: 'A',
 51 | 			}]
 52 | 		}
 53 | 	}
 54 | }
 55 | ```
 56 | 
 57 | 
 58 | ### Scoped slots
 59 | 
 60 | Each item in the list must have type, by the type a correct slot is rendered for item.
 61 | 
 62 | ```html
 63 | <collection-cluster :items="items">
 64 | 	<div slot="header" 
 65 | 		slot-scope="{ cell, item }"
 66 | 		:key="cell.index"
 67 | 		class="item"
 68 | 	>
 69 | 		{{ item.title }}
 70 | 	</div>
 71 | 
 72 | 	<div slot="letter" 
 73 | 		slot-scope="{ cell, item }"
 74 | 		:key="cell.index"
 75 | 		class="item"
 76 | 	>
 77 | 		{{ item.value }}
 78 | 	</div>
 79 | </collection-cluster>
 80 | ```
 81 | 
 82 | ### Height Types
 83 | 
 84 | ### static
 85 | Each slot must have size set in the css, which must be equal to size set in `itemHeight` option.
 86 | 
 87 | ### dynamic
 88 | Each item in the list must have property (`heightField`) with the exact height of the slot for that item.
 89 | 
 90 | ### automatic
 91 | Size of slot is automaticaly calculated when rendered and set to `heightField` property of the item.
 92 | 
 93 | For dynamic/automatic types, the `itemHeight` option is used as estimate. It's **strongly recommended** to use it.
 94 | 
 95 | ## Options
 96 | 
 97 | ### items
 98 | Type: `Array`, Required
 99 | 
100 | List of items to display.
101 | 
102 | ### columns
103 | Type: `Number`, Default: `1`
104 | 
105 | Number of columns per row.
106 | 
107 | ### itemHeight
108 | Type: `Number`, Default: `100`
109 | 
110 | Height of the row.
111 | 
112 | ### typeField
113 | Type: `String`, Default: `type`
114 | 
115 | Item property's name for type.
116 | 
117 | ### heightField
118 | Type: `String`, Default: `height`
119 | 
120 | Item property's name for height.
121 | 
122 | ### heightType
123 | Type: `String`, Default: `static`, Options: `static`, `dynamic`, `automatic`
124 | 
125 | ### inset
126 | Type: `Object`, Default: `{top: 0, bottom: 0}`
127 | 
128 | Inset from top and bottom of the list.
129 | 
130 | ### scrollPastEnd
131 | Type: `Number`, Default: `0`
132 | 
133 | Renders space at the end of the list of size `height` * `scrollPastEnd`.
134 | 
135 | `0.5` = 50% of height
136 | 
137 | ### buffer
138 | Type: `Number`, Default: `200`
139 | 
140 | Pixels to pre-render around visible area.
141 | 
142 | ### threshold
143 | Type: `Number`, Default: `50`
144 | 
145 | Threshold for `scrollToTop` & `scrollToBottom` events.
146 | 
147 | ### autoResize
148 | Type: `Boolean`, Default: `true`
149 | 
150 | Sets whether the list should auto resize and render items when window resizes.
151 | 
152 | 
153 | ## Events
154 | 
155 | ### cellsChange
156 | Emitted when visible/rendered cells change. There is one argument with list of cells.
157 | 
158 | ### scrollToTop
159 | 
160 | ### scrollToBottom
161 | 
162 | ## Methods
163 | 
164 | ### isAtTop()
165 | Return: `Boolean`
166 | 
167 | Is list at the top?
168 | 
169 | ### isAtBottom()
170 | Return: `Boolean`
171 | 
172 | Is list at the bottom?
173 | 
174 | ### scrollTo(index, position)
175 | index: `Int`, position: `default|top|bottom|topInset|bottomInset'`
176 | 
177 | Scrolls to specified index at position.
178 | 
179 | ### scrollToBottom()
180 | Scrolls to bottom of list.
181 | 
182 | ### resizeItem(index)
183 | index: `Int`
184 | 
185 | Should be called whenever item with dynamic height did change height.
186 | 
187 | 
188 | ---
189 | 
190 | ## Example
191 | 
192 | ```html
193 | <template>
194 | 	<collection-cluster
195 | 		class="scroller"
196 | 		v-bind="collection"
197 | 		:items="items"
198 | 	>
199 | 		<Letter slot="letter" 
200 | 			slot-scope="{ cell, item }"
201 | 			:key="cell.index"
202 | 			:item="item"
203 | 		/>
204 | 
205 | 		<Name slot="name" 
206 | 			slot-scope="{ cell, item }"
207 | 			:key="cell.index"
208 | 			:item="item"
209 | 		/>
210 | 	</collection-cluster>
211 | </template>
212 | 
213 | <script>
214 | import Letter from './Letter';
215 | import Name from './Name';
216 | 
217 | export default {
218 | 	components: {Letter, Name},
219 | 	data() {
220 | 		return {
221 | 			collection: {
222 | 				heightType: 'automatic',
223 | 				itemHeight: 50,
224 | 			},
225 | 			items: [
226 | 				{ type: 'letter', value: 'J' },
227 | 				{ type: 'name', value: { name: 'Jack' } },
228 | 				{ type: 'name', value: { name: 'John' } },
229 | 			]
230 | 		};
231 | 	}
232 | };
233 | </script>
234 | ```
235 | 
236 | `Letter.vue` source:
237 | ```html
238 | <template>
239 |   <div class="letter">{{item.value}}</div>
240 | </template>
241 | 
242 | <script>
243 | export default {
244 |   props: ['item'],
245 | };
246 | </script>
247 | ```
248 | 
249 | `Name.vue` source:
250 | ```html
251 | <template>
252 |   <div class="name">{{item.value.name}}</div>
253 | </template>
254 | 
255 | <script>
256 | export default {
257 |   props: ['item'],
258 | };
259 | </script>
260 | ```
261 | 
262 | ---
263 | 
264 | ## License
265 | 
266 | [MIT](http://opensource.org/licenses/MIT)
267 | 
268 | Copyright (c) 2018 Andrej Adamcik


--------------------------------------------------------------------------------
/dist/vue-collection-cluster.js:
--------------------------------------------------------------------------------
1 | !function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("VueCollectionCluster",[],i):"object"==typeof exports?exports.VueCollectionCluster=i():t.VueCollectionCluster=i()}("undefined"!=typeof self?self:this,function(){return function(t){function i(s){if(e[s])return e[s].exports;var h=e[s]={i:s,l:!1,exports:{}};return t[s].call(h.exports,h,h.exports,i),h.l=!0,h.exports}var e={};return i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:s})},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,i){return Object.prototype.hasOwnProperty.call(t,i)},i.p="",i(i.s=1)}([function(t,i,e){"use strict";function s(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(i,"__esModule",{value:!0});var h={static:"static",dynamic:"dynamic",automatic:"automatic"},n={default:"default",top:"top",bottom:"bottom",topInset:"topInset",bottomInset:"bottomInset"},r=function t(i,e){s(this,t),this.item=i,this.offset=e};i.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:h.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.heightUpdateCounter=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 i=this.scrollTop+this.inset.top+this.height+this.buffer;if(this.heightType===h.static){var e=Math.floor(t/this.itemHeight)*this.columns;e<0&&(e=0),e>this.length&&(e=this.length);var s=Math.ceil(i/this.itemHeight)*this.columns;return s>this.length&&(s=this.length),{start:e,end:s}}var n=Math.floor(t/this.itemHeight);for(n>this.heightInvalidAfter&&(n=this.heightInvalidAfter);n>0&&(void 0===this.items[n][this.accumulatorProp]||this.items[n][this.accumulatorProp]>t);)n--;for(var r=0===n?0:this.items[n][this.accumulatorProp]||0;;){var o=this.items[n],l=o[this.heightField]||this.itemHeight;if(o[this.accumulatorProp]=r,(r+=l)>t||n>=this.length-1)break;n++}for(var a=n;a<this.length-1&&r<i;){var c=this.items[++a],u=c[this.heightField]||this.itemHeight;c[this.accumulatorProp]=r,r+=u}return a>this.heightInvalidAfter&&(this.heightInvalidAfter=a),a++,{start:n,end:a}},updateVisibleCells:function(){var t=this.getStartEnd(),i=t.start,e=t.end,s=void 0,n=void 0,r=i<this.currentEnd?i:this.currentEnd;for(s=this.currentStart;s<r;s++)n=this.visibleCells.shift();var o=e>this.currentStart?e:this.currentStart;for(s=o;s<this.currentEnd;s++)n=this.visibleCells.pop();var l=e<this.currentStart?e:this.currentStart;if(l>i){var a=[];for(s=i;s<l;s++)n={index:s,item:this.items[s]},a.push(n);if(this.visibleCells.length){var c;(c=this.visibleCells).unshift.apply(c,a)}else this.visibleCells=a}var u=i>this.currentEnd?i:this.currentEnd;if(u<e)for(s=u;s<e;s++)n={index:s,item:this.items[s]},this.visibleCells.push(n);var d=this.currentStart!==i||this.currentEnd!==e;this.currentStart=i,this.currentEnd=e,this.updateSizes(),this.verifyScrollPosition(),d&&(this.heightType===h.automatic&&this.scheduleUpdateHeights(),this.$emit("cellsChange",this.visibleCells))},verifyCells:function(){for(var t=0,i=!1,e=0;e<this.visibleCells.length;e++)t&&(this.visibleCells[e].index-=t),this.items.indexOf(this.visibleCells[e].item)!==this.visibleCells[e].index&&(0===e?this.invalidateHeightAfter(0):this.invalidateHeightAfter(this.currentStart+e),this.visibleCells.splice(e,1),e--,t++,i=!0);this.currentEnd-=t,this.heightInvalidAfter>=this.length&&this.invalidateHeightAfter(this.length-1),i&&(this.heightType===h.automatic&&this.scheduleUpdateHeights(),this.$emit("cellsChange",this.visibleCells))},isAtTop:function(){return this.scrollTop-this.inset.top<this.threshold},isAtBottom:function(){return this.scrollHeight-this.height-this.scrollTop-this.inset.bottom<this.threshold},verifyScrollPosition:function(){this.isAtTop()&&this.$emit("scrollToTop"),this.isAtBottom()&&this.$emit("scrollToBottom")},updateSizes:function(){if(this.heightType===h.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,i=this.inset.bottom+this.scrollPastEndSize,e=i+t,s=this.items[this.currentStart];s&&(t+=s[this.accumulatorProp]);var n=this.items[this.heightInvalidAfter];if(n){var r=n[this.accumulatorProp];r+=n[this.heightField]||this.itemHeight,r+=(this.length-1-this.heightInvalidAfter)*this.itemHeight;var o=this.items[this.currentEnd-1];i+=r-o[this.accumulatorProp]-(o[this.heightField]||this.itemHeight),e+=r}this.startHeight=t,this.endHeight=i,this.scrollHeight=e}},scheduleUpdateHeights:function(){var t=this,i=++this.heightUpdateCounter;this.$nextTick(function(){i===t.heightUpdateCounter&&t.updateHeights()})},updateHeights:function(){for(var t=!1,i=this.visibleCells.length-1;i>=0;i--){var e=this.visibleCells[i],s=this.$el.children[1+i],h=s.clientHeight;e.item[this.heightField]!==h&&(e.item[this.heightField]=h,t=!0,this.invalidateHeightAfter(this.currentStart+i))}t&&this.updateVisibleCells()},resizeItem:function(t){if(t<0||t>=this.length)throw new Error("Invalid index.");this.heightType===h.dynamic?(this.invalidateHeightAfter(t),this.updateVisibleCells()):this.heightType===h.automatic&&t>=this.currentStart&&t<this.currentEnd&&this.scheduleUpdateHeights()},getItemPosition:function(t){if(t<0||t>=this.length)throw new Error("Invalid index.");if(this.heightType===h.static)return t*this.itemHeight;var i=Math.min(t,this.heightInvalidAfter);return(this.items[i][this.accumulatorProp]||0)+(t-i)*this.itemHeight},scrollToPosition:function(t){this.$el.scrollTop=t,this.scrollTop=this.$el.scrollTop,this.updateVisibleCells()},storeScrollPosition:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.currentStart;if(t<0||t>=this.length)throw new Error("Invalid index.");return new r(this.items[t],this.getItemPosition(t)-this.scrollTop)},restoreScrollPosition:function(t){var i=this;if(!(t instanceof r))throw new Error("Invalid position.");var e=this.items.indexOf(t.item);if(-1!==e){var s=this.getItemPosition(e)-t.offset,h=Math.max(0,this.scrollHeight-this.height);s<0&&(s=0),s>h&&(s=h),this.scrollTop!==s&&(this.scrollToPosition(s),this.$nextTick(function(){i.restoreScrollPosition(t)}))}},scrollTo:function(t,i){var e=this;if(t<0||t>=this.length)throw new Error("Invalid index.");i=i||n.default;var s=this.getItemPosition(t),r=this.heightType===h.static?this.itemHeight:this.items[t][this.heightField]||this.itemHeight,o=r>this.height,l=s+r,a=void 0;switch(i!==n.topInset&&i!==n.bottomInset?(s+=this.inset.top,l+=this.inset.top):l+=this.inset.top+this.inset.bottom,i){case n.default:l>this.scrollTop+this.height&&!o?(a=Math.max(0,l-this.height),i=n.bottom):(s<this.scrollTop||o&&s>this.scrollTop)&&(a=s,i=n.top);break;case n.top:case n.topInset:a=Math.max(0,Math.min(s,this.scrollHeight-this.height));break;case n.bottom:case n.bottomInset:a=Math.max(0,Math.min(l-this.height,this.scrollHeight-this.height))}void 0!==a&&a!==this.scrollTop&&(this.scrollToPosition(a),this.$nextTick(function(){e.scrollTo(t,i)}))},scrollToBottom:function(){var t=this,i=this.scrollHeight-this.height;this.scrollTop===i||this.scrollHeight<this.height||(this.scrollToPosition(i),this.$nextTick(function(){t.scrollToBottom()}))}}}},function(t,i,e){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var s=e(2),h=e(0),n=e.n(h);for(var r in h)"default"!==r&&function(t){e.d(i,t,function(){return h[t]})}(r);var o=e(3),l=Object(s.a)(n.a,o.a,!1,null,null,null);i.default=l.exports},function(t,i,e){"use strict";function s(t,i,e,s,h,n){var r,o=t=t||{},l=typeof t.default;"object"!==l&&"function"!==l||(r=t,o=t.default);var a="function"==typeof o?o.options:o;i&&(a.render=i.render,a.staticRenderFns=i.staticRenderFns,a._compiled=!0),e&&(a.functional=!0),h&&(a._scopeId=h);var c;if(n?(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(n)},a._ssrRegister=c):s&&(c=s),c){var u=a.functional,d=u?a.render:a.beforeCreate;u?(a._injectStyles=c,a.render=function(t,i){return c.call(i),d(t,i)}):a.beforeCreate=d?[].concat(d,c):[c]}return{esModule:r,exports:o,options:a}}i.a=s},function(t,i,e){"use strict";var s=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"collection-cluster",on:{"&scroll":function(i){t.onScroll(i)}}},[e("div",{ref:"start",staticClass:"collection-space",style:{height:t.startHeight+"px",width:"100%"}}),t._v(" "),t._l(t.visibleCells,function(i){return t._t(i.item[t.typeField],null,{cell:i,item:i.item})}),t._v(" "),t.items.length?t._e():t._t("empty"),t._v(" "),e("div",{ref:"end",staticClass:"collection-space",style:{height:t.endHeight+"px",width:"100%"}})],2)},h=[],n={render:s,staticRenderFns:h};i.a=n}])});


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 |   	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 | 	<meta name="renderer" content="webkit">
 8 | 	<meta http-equiv="Cache-Control" content="no-siteapp"/>
 9 | 	<meta content="yes" name="apple-mobile-web-app-capable" />
10 | 	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
11 | 	<meta name="format-detection" content="telephone=no" />
12 | 	<meta name="apple-mobile-web-app-capable" content="yes" />
13 | 	<meta name="full-screen" content="yes">
14 | 	<meta name="x5-fullscreen" content="true">
15 | 	<title>vue-collection-cluster</title>
16 | 
17 | 	<style>
18 | 		html, body {
19 | 			padding: 0;
20 | 			margin: 0;
21 | 		}
22 | 
23 | 		.collection-cluster {
24 | 			margin: 50px auto;
25 | 			width: 800px;
26 | 			height: 600px;
27 | 			background: #fafafa;
28 | 			overflow: auto;
29 | 			/* display: flex;
30 | 			flex-wrap: wrap; */
31 | 		}
32 | 
33 | 		.item {
34 | 			/* height: 40px; */
35 | 		}
36 | 
37 | 		.item img {
38 | 			display: block;
39 | 			height: 50px;
40 | 		}
41 | 	</style>
42 | </head>
43 | <body>
44 | 	<div class="app"></div>
45 | 	<script src="dist/build.js"></script>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/example/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="app">
 3 | 		<collection-cluster class="scroller"
 4 | 			ref="list"
 5 | 			:items="items"
 6 | 			v-bind="collection"
 7 | 			@scrollToTop="onScrollToTop"
 8 | 			@scrollToBottom="onScrollToBottom"
 9 | 		>
10 | 			<div slot="row" 
11 | 				slot-scope="{ cell, item }"
12 | 				:key="cell.index"
13 | 				class="item"
14 | 			>
15 | 				<div v-for="(line, i) in item.lines" :key="i">Row: {{ item.value }}</div>
16 | 			</div>
17 | 		</collection-cluster>
18 | 
19 | 	</div>
20 | </template>
21 | 
22 | <script>
23 | import CollectionCluster from '../../src/vue-collection-cluster.vue';
24 | 
25 | export default {
26 | 	components: { CollectionCluster },
27 | 	data() {
28 | 		return {
29 | 			collection: {
30 | 				itemHeight: 40,
31 | 				heightType: 'automatic',
32 | 				inset: { 
33 | 					top: 20,
34 | 					bottom: 20,
35 | 				},
36 | 			},
37 | 			items: Array.from(Array(100), (item, i) => {
38 | 				const lines = Math.ceil(Math.random() * 12) + 1;
39 | 
40 | 				return {type: 'row', value: i, lines: Array.from(Array(lines)).map(line => i)};
41 | 			}),
42 | 		};
43 | 	},
44 | 	mounted() {
45 | 		window.app = this;
46 | 	},
47 | 	methods: {
48 | 		onScrollToTop() {
49 | 			console.log('at top');
50 | 		},
51 | 		onScrollToBottom() {
52 | 			console.log('at bottom');
53 | 		},
54 | 	}
55 | }
56 | </script>


--------------------------------------------------------------------------------
/example/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | 
3 | import App from './App.vue';
4 | 
5 | new Vue({
6 | 	render: h => h(App)
7 | }).$mount('.app');


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 | 	entry: path.resolve(__dirname, './src/main.js'),
 6 | 	output: {
 7 | 		path: path.resolve(__dirname, './dist'),
 8 | 		publicPath: '/dist/',
 9 | 		filename: 'build.js'
10 | 	},
11 | 	resolve: {
12 | 		extensions: ['.js', '.vue']
13 | 	},
14 | 	module: {
15 | 		loaders: [{
16 | 				test: /\.vue$/,
17 | 				loader: 'vue-loader',
18 | 				options: {
19 | 					hmr: false,
20 | 					preserveWhitespace: false,
21 | 					optimizeSSR: false,
22 | 					hotReload: false,
23 | 					loaders: {
24 | 						js: {
25 | 							loader: 'babel-loader',
26 | 							options: {
27 | 								highlightCode: false,
28 | 							}
29 | 						},
30 | 					},
31 | 				}
32 | 		}, {
33 | 				test: /\.js$/,
34 | 				loader: 'babel-loader',
35 | 				exclude: /node_modules/
36 | 		}]
37 | 	},
38 | 	devServer: {
39 | 		historyApiFallback: true,
40 | 		port: 9000,
41 | 		noInfo: true
42 | 	},
43 | 	devtool: '#inline-source-map'
44 | }
45 | 
46 | if (process.env.NODE_ENV === 'production') {
47 | 	module.exports.devtool = '#source-map'
48 | 	// http://vue-loader.vuejs.org/en/workflow/production.html
49 | 	module.exports.plugins = (module.exports.plugins || []).concat([
50 | 		new webpack.DefinePlugin({
51 | 			'process.env': {
52 | 				NODE_ENV: '"production"'
53 | 			}
54 | 		}),
55 | 		new webpack.optimize.UglifyJsPlugin({
56 | 			compress: {
57 | 				warnings: false
58 | 			}
59 | 		})
60 | 	])
61 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vue-collection-cluster",
 3 | 	"version": "1.1.0",
 4 | 	"description": "A vue component for displaying large data sets easily with great performance.",
 5 | 	"main": "dist/vue-collection-cluster.js",
 6 | 	"files": [
 7 | 		"dist/*"
 8 | 	],
 9 | 	"scripts": {
10 | 		"build": "webpack",
11 | 		"prepublish": "npm run build",
12 | 		"dev": "webpack --watch --hide-modules --config ./example/webpack.config.js"
13 | 	},
14 | 	"keywords": [
15 | 		"vue",
16 | 		"component",
17 | 		"big-data",
18 | 		"big-list",
19 | 		"scroll-list",
20 | 		"virtual-list",
21 | 		"collection",
22 | 		"uitableview"
23 | 	],
24 | 	"repository": {
25 | 		"type": "git",
26 | 		"url": "https://github.com/adamcikado/vue-collection-cluster.git"
27 | 	},
28 | 	"homepage": "https://github.com/adamcikado/vue-collection-cluster#readme",
29 | 	"author": "adamcikado",
30 | 	"license": "MIT",
31 | 	"devDependencies": {
32 | 		"babel-core": "^6.26.0",
33 | 		"babel-loader": "^7.1.2",
34 | 		"babel-preset-env": "^1.6.1",
35 | 		"uglify-es": "^3.3.9",
36 | 		"vue": "^2.5.13",
37 | 		"vue-loader": "^14.0.3",
38 | 		"vue-template-compiler": "^2.5.13",
39 | 		"webpack": "^3.10.0"
40 | 	}
41 | }
42 | 


--------------------------------------------------------------------------------
/src/vue-collection-cluster.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="collection-cluster" @scroll.passive="onScroll">
  3 | 		<div class="collection-space"
  4 | 			ref="start"
  5 | 			:style="{height: startHeight + 'px', width: '100%'}"
  6 | 		></div>
  7 | 
  8 | 		<slot v-for="cell in visibleCells"
  9 | 			:name="cell.item[typeField]"
 10 | 			:cell="cell"
 11 | 			:item="cell.item"
 12 | 		/>
 13 | 
 14 | 		<slot name="empty" v-if="!items.length" />
 15 | 
 16 | 		<div class="collection-space"
 17 | 			ref="end"
 18 | 			:style="{height: endHeight + 'px', width: '100%'}"
 19 | 		></div>
 20 | 	</div>
 21 | </template>
 22 | 
 23 | <script>
 24 | const HeightTypes = {
 25 | 	static: 'static',
 26 | 	dynamic: 'dynamic',
 27 | 	automatic: 'automatic',
 28 | };
 29 | 
 30 | const ScrollPositions = {
 31 | 	default: 'default',
 32 | 	top: 'top',
 33 | 	bottom: 'bottom',
 34 | 	topInset: 'topInset',
 35 | 	bottomInset: 'bottomInset',
 36 | };
 37 | 
 38 | class StoredScrollPosition {
 39 | 	constructor(item, offset) {
 40 | 		this.item = item;
 41 | 		this.offset = offset;
 42 | 	}
 43 | }
 44 | 
 45 | export default {
 46 | 	props: {
 47 | 		items: { type: Array, required: true, },
 48 | 		columns: { type: Number, default: 1, },
 49 | 		itemWidth: { type: Number, default: null, },
 50 | 		itemHeight: { type: Number, default: 100, },
 51 | 		typeField: { type: String, default: 'type', },
 52 | 		heightField: { type: String, default: 'height', },
 53 | 		heightType: {
 54 | 			type: String,
 55 | 			default: HeightTypes.static, // static, dynamic, automatic
 56 | 		},
 57 | 		inset: { type: Object, default: function() {
 58 | 			return {top: 0, bottom: 0};
 59 | 		}},
 60 | 		scrollPastEnd: { type: Number, default: 0, },
 61 | 		buffer: { type: Number, default: 200, },
 62 | 		threshold: { type: Number, default: 50, },
 63 | 		autoResize: { type: Boolean, default: true },
 64 | 		prerender: { type: Number, default: 0, }
 65 | 	},
 66 | 	data () {
 67 | 		return {
 68 | 			visibleCells: [],
 69 | 			totalHeight: 0,
 70 | 			startHeight: 0,
 71 | 			endHeight: 0,
 72 | 		};
 73 | 	},
 74 | 	computed: {
 75 | 		length() {
 76 | 			return this.items.length;
 77 | 		},
 78 | 		scrollPastEndSize() {
 79 | 			let size = this.scrollPastEnd * this.height;
 80 | 			
 81 | 			size -= this.inset.top + this.inset.bottom + this.itemHeight;
 82 | 			
 83 | 			return size < 0 ? 0 : size;
 84 | 		}
 85 | 	},
 86 | 	watch: {
 87 | 		items() {
 88 | 			this.verifyCells();
 89 | 			this.updateVisibleCells();
 90 | 		},
 91 | 		columns() {
 92 | 			this.updateVisibleCells();
 93 | 		},
 94 | 		autoResize() {
 95 | 			if (this.autoResize) {
 96 | 				window.addEventListener('resize', this.onResize);
 97 | 			} else {
 98 | 				window.removeEventListener('resize', this.onResize);
 99 | 			}
100 | 		}
101 | 	},
102 | 	mounted() {
103 | 		this.scrollTop = 0;
104 | 		this.currentStart = 0;
105 | 		this.currentEnd = 0;
106 | 		this.startHeight = 0;
107 | 		this.endHeight = 0;
108 | 		this.heightInvalidAfter = 0;
109 | 		this.heightUpdateCounter = 0;
110 | 		this.accumulatorProp = Symbol();
111 | 
112 | 		this.height = this.$el.clientHeight;
113 | 		this.scrollHeight = 0;
114 | 		
115 | 		this.updateVisibleCells();
116 | 
117 | 		if (this.autoResize) {
118 | 			window.addEventListener('resize', this.onResize);
119 | 		}
120 | 	},
121 | 	beforeDestroy() {
122 | 		if (this.autoResize) {
123 | 			window.removeEventListener('resize', this.onResize);
124 | 		}
125 | 	},
126 | 	activated() {
127 | 		this.onResize();
128 | 	},
129 | 	methods: {
130 | 		onScroll(event) {
131 | 			this.scrollTop = this.$el.scrollTop;
132 | 			this.$emit('scroll', event);
133 | 
134 | 			this.updateVisibleCells();
135 | 		},
136 | 		onResize() {
137 | 			this.height = this.$el.clientHeight;
138 | 
139 | 			this.updateVisibleCells();
140 | 		},
141 | 		invalidateHeightAfter(index) {
142 | 			index < 0 && (index = 0);
143 | 			
144 | 			if (index < this.heightInvalidAfter) {
145 | 				this.heightInvalidAfter = index;
146 | 			}
147 | 		},
148 | 		getStartEnd() {
149 | 			if (!this.length) {
150 | 				return {start: 0, end: 0};
151 | 			}
152 | 
153 | 			let y = this.scrollTop - this.inset.top - this.buffer;
154 | 			y < 0 && (y = 0);
155 | 
156 | 			let endY = this.scrollTop + this.inset.top + this.height + this.buffer;
157 | 
158 | 			if (this.heightType === HeightTypes.static) {		
159 | 				let start = Math.floor(y / this.itemHeight) * this.columns;
160 | 
161 | 				start < 0 && (start = 0);
162 | 				start > this.length && (start = this.length);
163 | 
164 | 				let end = Math.ceil(endY / this.itemHeight) * this.columns;
165 | 
166 | 				end > this.length && (end = this.length);
167 | 				
168 | 				return {start, end};
169 | 			}
170 | 			
171 | 			// dynamic/automatic height
172 | 			// calculate approx start
173 | 			let start = Math.floor(y / this.itemHeight);
174 | 			start > this.heightInvalidAfter && (start = this.heightInvalidAfter);
175 | 
176 | 			while (start > 0 && (
177 | 				this.items[start][this.accumulatorProp] === undefined ||
178 | 				this.items[start][this.accumulatorProp] > y
179 | 			)) {
180 | 				start--;
181 | 			}
182 | 
183 | 			let accumulator = start === 0 ? 0 : this.items[start][this.accumulatorProp] || 0;
184 | 
185 | 			while (true) {
186 | 				let item = this.items[start];
187 | 				let height = item[this.heightField] || this.itemHeight;
188 | 
189 | 				item[this.accumulatorProp] = accumulator;
190 | 				accumulator += height;
191 | 
192 | 				if (accumulator > y || start >= this.length-1) {
193 | 					break;
194 | 				}
195 | 
196 | 				start++;
197 | 			}
198 | 
199 | 			let end = start;
200 | 
201 | 			while (end < this.length-1 && accumulator < endY) {
202 | 				let item = this.items[++end];
203 | 				let height = item[this.heightField] || this.itemHeight;
204 | 
205 | 				item[this.accumulatorProp] = accumulator;
206 | 				accumulator += height;
207 | 			}
208 | 
209 | 			if (end > this.heightInvalidAfter) {
210 | 				this.heightInvalidAfter = end;
211 | 			}
212 | 
213 | 			end++;
214 | 
215 | 			return {start: start, end: end};
216 | 		},
217 | 		updateVisibleCells() {
218 | 			const {start, end} = this.getStartEnd();
219 | 			let i;
220 | 			let cell;
221 | 
222 | 			//delete cells at the benning
223 | 			let deleteEnd = start < this.currentEnd ? start : this.currentEnd;
224 | 			
225 | 			for (i = this.currentStart; i < deleteEnd; i++) {
226 | 				cell = this.visibleCells.shift();
227 | 				// cell.prepareForDelete()?
228 | 			}
229 | 			
230 | 			//detele cells at the end
231 | 			let deleteStart = end > this.currentStart ? end : this.currentStart;
232 | 			
233 | 			for (i = deleteStart; i < this.currentEnd; i++) {
234 | 				cell = this.visibleCells.pop();
235 | 				// cell.prepareForDelete()?
236 | 			}
237 | 			
238 | 			//insert from at the beginning
239 | 			let insertTo = end < this.currentStart ? end : this.currentStart;
240 | 			
241 | 			if (insertTo > start) {
242 | 				//temporary array for added cells
243 | 				let cells = [];
244 | 				
245 | 				for (i = start; i < insertTo; i++) {
246 | 					cell = {index: i, item: this.items[i]};
247 | 					//add cell to temporary array so it's sorted correctly, as we go backwards
248 | 					cells.push(cell);
249 | 				}
250 | 				
251 | 				if (this.visibleCells.length) {
252 | 					this.visibleCells.unshift(...cells);
253 | 				} else {
254 | 					this.visibleCells = cells;
255 | 				}
256 | 			}
257 | 			
258 | 			//insert from at the end
259 | 			let insertFrom = start > this.currentEnd ? start : this.currentEnd;
260 | 			
261 | 			if (insertFrom < end) {
262 | 				for (i = insertFrom; i < end; i++) {
263 | 					cell = {index: i, item: this.items[i]};
264 | 					this.visibleCells.push(cell);
265 | 				}
266 | 			}
267 | 
268 | 			let changed = this.currentStart !== start || this.currentEnd !== end;
269 | 			
270 | 			this.currentStart = start;
271 | 			this.currentEnd = end;
272 | 			
273 | 			this.updateSizes();
274 | 			this.verifyScrollPosition();
275 | 
276 | 			if (changed) {
277 | 				this.heightType === HeightTypes.automatic && this.scheduleUpdateHeights();
278 | 				this.$emit('cellsChange', this.visibleCells);
279 | 			}
280 | 		},
281 | 		verifyCells() {
282 | 			let decreaseIndexBy = 0;
283 | 			let changed = false;
284 | 
285 | 			for (let i = 0; i < this.visibleCells.length; i++) {
286 | 				if (decreaseIndexBy) {
287 | 					this.visibleCells[i].index -= decreaseIndexBy;
288 | 				}
289 | 
290 | 				if (this.items.indexOf(this.visibleCells[i].item) !== this.visibleCells[i].index) {
291 | 					if (i === 0) {
292 | 						this.invalidateHeightAfter(0);
293 | 					} else {
294 | 						this.invalidateHeightAfter(this.currentStart + i);
295 | 					}
296 | 
297 | 					this.visibleCells.splice(i, 1);
298 | 					i--;
299 | 
300 | 					decreaseIndexBy++;
301 | 					changed = true;
302 | 				}
303 | 			}
304 | 
305 | 			this.currentEnd -= decreaseIndexBy;
306 | 
307 | 			if (this.heightInvalidAfter >= this.length) {
308 | 				this.invalidateHeightAfter(this.length-1);
309 | 			}
310 | 
311 | 			if (changed) {
312 | 				this.heightType === HeightTypes.automatic && this.scheduleUpdateHeights();
313 | 
314 | 				this.$emit('cellsChange', this.visibleCells);
315 | 			}
316 | 		},
317 | 		isAtTop() {
318 | 			return this.scrollTop - this.inset.top < this.threshold;
319 | 		},
320 | 		isAtBottom() {
321 | 			return this.scrollHeight - this.height - this.scrollTop - this.inset.bottom < this.threshold;
322 | 		},
323 | 		verifyScrollPosition() {
324 | 			if (this.isAtTop()) {
325 | 				this.$emit('scrollToTop');
326 | 			}
327 | 
328 | 			if (this.isAtBottom()) {
329 | 				this.$emit('scrollToBottom');
330 | 			}
331 | 		},
332 | 		updateSizes() {
333 | 			if (this.heightType === HeightTypes.static) {
334 | 				this.startHeight = this.inset.top +
335 | 				((this.currentStart / this.columns) * this.itemHeight);
336 | 
337 | 				this.endHeight = this.inset.bottom + this.scrollPastEndSize +
338 | 				(Math.ceil((this.length - this.currentEnd) / this.columns) * this.itemHeight);
339 | 
340 | 				this.scrollHeight = this.inset.top + this.inset.bottom + (Math.ceil(this.length / this.columns) * this.itemHeight) + this.scrollPastEndSize;
341 | 			} else {
342 | 				let startHeight = this.inset.top;
343 | 				let endHeight = this.inset.bottom + this.scrollPastEndSize;
344 | 				let scrollHeight = endHeight + startHeight;
345 | 
346 | 				const startItem = this.items[this.currentStart];
347 | 
348 | 				if (startItem) {
349 | 					startHeight += startItem[this.accumulatorProp];
350 | 				}
351 | 
352 | 				const lastAccumulatedItem = this.items[this.heightInvalidAfter];
353 | 
354 | 				if (lastAccumulatedItem) {
355 | 					let totalHeight = lastAccumulatedItem[this.accumulatorProp];
356 | 					totalHeight += lastAccumulatedItem[this.heightField] || this.itemHeight;
357 | 
358 | 					totalHeight += (this.length - 1 - this.heightInvalidAfter) * this.itemHeight;
359 | 
360 | 					let endItem = this.items[this.currentEnd-1];
361 | 
362 | 					endHeight += totalHeight - endItem[this.accumulatorProp] - (endItem[this.heightField] || this.itemHeight);
363 | 					scrollHeight += totalHeight;
364 | 				}
365 | 
366 | 				this.startHeight = startHeight;
367 | 				this.endHeight = endHeight;
368 | 				this.scrollHeight = scrollHeight;
369 | 			}
370 | 		},
371 | 		scheduleUpdateHeights() {
372 | 			const counter = ++this.heightUpdateCounter;
373 | 
374 | 			this.$nextTick(() => {
375 | 				// only update heights once after render, to avoid conflicts
376 | 				counter === this.heightUpdateCounter && this.updateHeights();
377 | 			});
378 | 		},
379 | 		updateHeights() {
380 | 			let changed = false;
381 | 
382 | 			for (let i = this.visibleCells.length-1; i >= 0; i--) {
383 | 				let cell = this.visibleCells[i];
384 | 				let el = this.$el.children[1 + i];
385 | 				let height = el.clientHeight;
386 | 
387 | 				if (cell.item[this.heightField] === height) {
388 | 					continue;
389 | 				}
390 | 
391 | 				cell.item[this.heightField] = height;
392 | 				changed = true;
393 | 
394 | 				this.invalidateHeightAfter(this.currentStart + i);
395 | 			}
396 | 
397 | 			if (changed) {
398 | 				this.updateVisibleCells();
399 | 			}
400 | 		},
401 | 		resizeItem(index) {
402 | 			if (index < 0 || index >= this.length) {
403 | 				throw new Error('Invalid index.');
404 | 			}
405 | 
406 | 			if (this.heightType === HeightTypes.dynamic) {
407 | 				this.invalidateHeightAfter(index);
408 | 				this.updateVisibleCells();
409 | 			} else if (this.heightType === HeightTypes.automatic) {
410 | 				if (index >= this.currentStart && index < this.currentEnd) {
411 | 					this.scheduleUpdateHeights();
412 | 				}
413 | 			}
414 | 		},
415 | 		getItemPosition(index) {
416 | 			if (index < 0 || index >= this.length) {
417 | 				throw new Error('Invalid index.');
418 | 			}
419 | 
420 | 			if (this.heightType === HeightTypes.static) {
421 | 				return index * this.itemHeight;
422 | 			} else {
423 | 				let lastCalculatedIndex = Math.min(index, this.heightInvalidAfter);
424 | 				return (this.items[lastCalculatedIndex][this.accumulatorProp] || 0) + ((index - lastCalculatedIndex) * this.itemHeight);
425 | 			}
426 | 		},
427 | 		scrollToPosition(y) {
428 | 			this.$el.scrollTop = y;
429 | 			this.scrollTop = this.$el.scrollTop;
430 | 			this.updateVisibleCells();
431 | 		},
432 | 		storeScrollPosition(index = this.currentStart) {
433 | 			if (index < 0 || index >= this.length) {
434 | 				throw new Error('Invalid index.');
435 | 			}
436 | 
437 | 			return new StoredScrollPosition(this.items[index], this.getItemPosition(index) - this.scrollTop);
438 | 		},
439 | 		restoreScrollPosition(position) {
440 | 			if (!(position instanceof StoredScrollPosition)) {
441 | 				throw new Error('Invalid position.');
442 | 			}
443 | 
444 | 			const index = this.items.indexOf(position.item);
445 | 
446 | 			if (index === -1) {
447 | 				return;
448 | 			}
449 | 
450 | 			let y = this.getItemPosition(index) - position.offset;
451 | 			const maxY = Math.max(0, this.scrollHeight - this.height);
452 | 			y < 0 && (y = 0);
453 | 			y > maxY && (y = maxY);
454 | 
455 | 			if (this.scrollTop === y) {
456 | 				return;
457 | 			}
458 | 
459 | 			this.scrollToPosition(y);
460 | 
461 | 			this.$nextTick(() => {
462 | 				this.restoreScrollPosition(position);
463 | 			});
464 | 		},
465 | 		scrollTo(index, position) {
466 | 			if (index < 0 || index >= this.length) {
467 | 				throw new Error('Invalid index.');
468 | 			}
469 | 
470 | 			position = position || ScrollPositions.default;
471 | 
472 | 			let y = this.getItemPosition(index);
473 | 			let height = this.heightType === HeightTypes.static ? this.itemHeight :  this.items[index][this.heightField] || this.itemHeight;
474 | 			let isOversize = height > this.height;
475 | 			let endY = y + height;
476 | 
477 | 			let scrollToY;
478 | 
479 | 			if (position !== ScrollPositions.topInset && position !== ScrollPositions.bottomInset) {
480 | 				y += this.inset.top;
481 | 				endY += this.inset.top;
482 | 			} else {
483 | 				endY += this.inset.top + this.inset.bottom;
484 | 			}
485 | 
486 | 			switch (position) {
487 | 				case ScrollPositions.default:
488 | 					if (endY > this.scrollTop + this.height && !isOversize) {
489 | 						scrollToY = Math.max(0, endY - this.height);
490 | 						position = ScrollPositions.bottom;
491 | 					} else if (y < this.scrollTop || (isOversize && y > this.scrollTop)) {
492 | 						scrollToY = y;
493 | 						position = ScrollPositions.top;
494 | 					}
495 | 				break;
496 | 
497 | 				case ScrollPositions.top:
498 | 				case ScrollPositions.topInset:
499 | 					scrollToY = Math.max(0, Math.min(y, this.scrollHeight - this.height));
500 | 				break;
501 | 
502 | 				case ScrollPositions.bottom:
503 | 				case ScrollPositions.bottomInset:
504 | 					scrollToY = Math.max(0, Math.min(endY - this.height, this.scrollHeight - this.height));
505 | 				break;
506 | 			}
507 | 
508 | 			if (typeof scrollToY === 'undefined' || scrollToY === this.scrollTop) {
509 | 				return;
510 | 			}
511 | 
512 | 			this.scrollToPosition(scrollToY);
513 | 
514 | 			this.$nextTick(() => {
515 | 				this.scrollTo(index, position);
516 | 			});
517 | 		},
518 | 		scrollToBottom() {
519 | 			const bottomPosition = this.scrollHeight - this.height;
520 | 
521 | 			if (this.scrollTop === bottomPosition || this.scrollHeight < this.height) {
522 | 				return;
523 | 			}
524 | 
525 | 			this.scrollToPosition(bottomPosition);
526 | 
527 | 			this.$nextTick(() => {
528 | 				this.scrollToBottom();
529 | 			});
530 | 		}
531 | 	}
532 | };
533 | </script>
534 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack')
 2 | const path = require('path')
 3 | 
 4 | module.exports = {
 5 | 	devtool: 'cheap-module-source-map',
 6 | 	entry: './src/vue-collection-cluster.vue',
 7 | 	output: {
 8 | 		path: path.resolve(__dirname, './dist/'),
 9 | 		filename: 'vue-collection-cluster.js',
10 | 		library: 'VueCollectionCluster',
11 | 		libraryTarget: 'umd',
12 | 		umdNamedDefine: true,
13 | 	},
14 | 	resolve: {
15 | 		extensions: ['.js', '.vue'],
16 | 		alias: {
17 | 			'vue$': 'vue/dist/vue.common.js',
18 | 		}
19 | 	},
20 | 	module: {
21 | 		loaders: [{
22 | 				test: /\.js$/,
23 | 				loader: 'babel-loader',
24 | 				include: __dirname,
25 | 				exclude: /node_modules/
26 | 			},
27 | 			{
28 | 				test: /\.vue$/,
29 | 				loader: 'vue-loader',
30 | 				include: __dirname,
31 | 				exclude: /node_modules/,
32 | 			}
33 | 		]
34 | 	},
35 | 	plugins: [
36 | 		new webpack.LoaderOptionsPlugin({
37 | 			minimize: true
38 | 		}),
39 | 		new webpack.optimize.UglifyJsPlugin({
40 | 			beautify: false,
41 | 			comments: false,
42 | 			compress: {
43 | 				warnings: false
44 | 			}
45 | 		}),
46 | 		new webpack.DefinePlugin({
47 | 			'process.env': {
48 | 			  NODE_ENV: '"production"'
49 | 			}
50 | 		}),
51 | 	]
52 | }


--------------------------------------------------------------------------------