New variable height mode & Updated deps

Author: Akryum

README.md

@@ -111,7 +111,7 @@ Vue.component('virtual-scroller', VirtualScroller)
 The virtual scroller has three main props:
 
 - `items` is the list of items you want to display in the scroller. There can be several types of item.
-- `itemHeight` is the display height of the items in pixels used to calculate the scroll height and position.
+- `itemHeight` is the display height of the items in pixels used to calculate the scroll height and position. If it set to null (default value), it will use [variable height mode](#variable-height-mode).
 - `renderers` is a map of component definitions objects or names for each item type ([more details](#renderers)). If you don't define `renderers`, the scroller will use *scoped slots* ([see below](#scoped-slots)).
 
 You need to set the size of the virtual-scroller element and the items elements (for example, with CSS). All items should have the same height to prevent display glitches.
@@ -173,6 +173,38 @@ The page mode expand the virtual-scroller and use the page viewport to compute w
 </footer>
 ```
 
+## Variable height mode
+
+**⚠️ This mode can be performance heavy with a lot of items. Use with caution.**
+
+If the `itemHeight` prop is not set or set to `null`, the virtual scroller will switch to Variable height mode. You then need to expose a number field on the item objects with the height of the item element.
+
+**⚠️ You still need to set the height of the items with CSS correctly (with classes for example).**
+
+Use the `heightField` prop (default is `'height'`) to set the field used by the scroller to get the height for each item.
+
+Example:
+
+```javascript
+const items = [
+  {
+    id: 1,
+    label: 'Title',
+    height: 64,
+  },
+  {
+    id: 2,
+    label: 'Foo',
+    height: 32,
+  },
+  {
+    id: 3,
+    label: 'Bar',
+    height: 32,
+  },
+]
+```
+
 ## Customizing the tags
 
 These are optional props you can use to change the DOM tags used in the virtual scroller:

config/webpack.base.config.js

@@ -1,4 +1,5 @@
 var webpack = require('webpack')
+var path = require('path')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 var outputFile = 'vue-virtual-scroller'
@@ -9,7 +10,7 @@ var config = require('../package.json')
 module.exports = {
   entry: './src/index.js',
   output: {
-    path: './dist',
+    path: path.resolve(__dirname, '../dist'),
     filename: outputFile + '.js',
     library: globalName,
     libraryTarget: 'umd',

dist/vue-virtual-scroller.css

@@ -22,7 +22,8 @@
   background-color: transparent;
   pointer-events: none;
   display: block;
-  overflow: hidden;
+  overflow: hidden;
+  opacity: 0;
 }
 
 .test h1[data-v-5ee0142a] {

dist/vue-virtual-scroller.js

@@ -6,6 +6,7 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
+    "devp": "cross-env NODE_ENV=production webpack-dev-server --open --inline --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {

docs-src/package.json

@@ -4,12 +4,15 @@
       <span>
         <input v-model="countInput" type="number" min="0" max="500000" /> items
       </span>
+      <span>
+        <input v-model="buffer" type="number" min="1" max="500000" /> buffer
+      </span>
+      <span>
+        <input v-model="poolSize" type="number" min="1" max="500000" /> poolSize
+      </span>
       <span v-if="generateTime !== null">
         Items generation: {{ generateTime }} ms
       </span>
-      <span v-if="updateTime !== null">
-        Virtual scroller update: {{ updateTime }} ms
-      </span>
       <span>
         <button @mousedown="showScroller = !showScroller">Toggle scroller</button>
         <label><input type="checkbox" v-model="scopedSlots" /> Scoped slots</label>
@@ -18,23 +21,23 @@
     <div class="content" v-if="showScroller">
       <div class="wrapper">
         <!-- Scoped slots -->
-        <virtual-scroller v-if="scopedSlots" class="scroller" :items="items" item-height="42" main-tag="section" content-tag="table">
+        <virtual-scroller v-if="scopedSlots" class="scroller" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize">
           <template scope="props">
             <!-- <letter v-if="props.item.type === 'letter'" :item="props.item"></letter>-->
-            <tr v-if="props.item.type === 'letter'" class="letter">
+            <tr v-if="props.item.type === 'letter'" class="letter" :key="props.itemKey">
               <td class="index">
                 {{props.item.index}}
               </td>
               <td>
                 {{props.item.value}} Scoped
               </td>
             </tr>
-            <item v-if="props.item.type === 'person'" :item="props.item"></item>
+            <item v-if="props.item.type === 'person'" :item="props.item" :key="props.itemKey"></item>
           </template>
         </virtual-scroller>
 
         <!-- Renderers -->
-        <virtual-scroller v-else class="scroller" :items="items" :renderers="renderers" item-height="42" type-field="type" key-field="index" main-tag="section" content-tag="table"></virtual-scroller>
+        <virtual-scroller v-else class="scroller" :items="items" :renderers="renderers" type-field="type" key-field="index" main-tag="section" content-tag="table"></virtual-scroller>
       </div>
     </div>
   </div>
@@ -65,6 +68,8 @@ export default {
     updateTime: null,
     showScroller: true,
     scopedSlots: false,
+    buffer: 0,
+    poolSize: 1,
   }),
 
   watch: {
@@ -191,7 +196,12 @@ body {
 .letter {
   text-transform: uppercase;
   color: grey;
-  font-weight: bold;
+  font-weight: lighter;
+  height: 200px;
+}
+
+.letter .value {
+  font-size: 120px;
 }
 
 .index {

docs-src/src/App.vue

@@ -17,5 +17,12 @@ export default {
       this.item.value.name += '#'
     },
   },
+  /* beforeCreate () {
+    let d = 0
+    for (let i = 0; i < 9999999; i++) {
+      d++
+    }
+    return d
+  }, */
 }
 </script>

docs-src/src/Item.vue

@@ -3,7 +3,7 @@
     <td class="index">
       {{item.index}}
     </td>
-    <td>
+    <td class="value">
       {{item.value}}
     </td>
   </tr>

docs-src/src/Letter.vue

@@ -18,20 +18,22 @@ export function getData (count) {
   }
 
   const data = []
-  let index = 0
+  let index = 1
 
   for (const l of alphabet) {
     raw[l] = raw[l].sort((a, b) => a.name < b.name ? -1 : 1)
     data.push({
       index: index++,
       type: 'letter',
       value: l,
+      height: 200,
     })
     for (var item of raw[l]) {
       data.push({
         index: index++,
         type: 'person',
         value: item,
+        height: 42,
       })
     }
   }