Update demo

Author: Guillaume Chau

docs-src/.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": [
-    ["es2015", { "modules": false }]
+    ["env", { "modules": false }]
   ]
 }

docs-src/package.json

@@ -10,20 +10,20 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "faker": "^3.1.0",
+    "faker": "^4.1.0",
     "vue": "^2.1.0"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-preset-es2015": "^6.0.0",
-    "cross-env": "^3.0.0",
-    "css-loader": "^0.25.0",
-    "file-loader": "^0.9.0",
-    "style-loader": "^0.13.1",
-    "vue-loader": "^10.0.0",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.6.1",
+    "cross-env": "^5.0.0",
+    "css-loader": "^0.28.0",
+    "file-loader": "^1.1.0",
+    "style-loader": "^0.19.0",
+    "vue-loader": "^13.0.0",
     "vue-template-compiler": "^2.1.0",
-    "webpack": "^2.1.0-beta.25",
-    "webpack-dev-server": "^2.1.0-beta.9"
+    "webpack": "^3.8.0",
+    "webpack-dev-server": "^2.9.3"
   }
 }

docs-src/src/App.vue

@@ -8,24 +8,28 @@
         <input v-model="enableLetters" type="checkbox" /> variable height
       </label>
       <span>
-        <input v-model="buffer" type="number" min="1" max="500000" /> buffer
+        <input v-model.number="buffer" type="number" min="1" max="500000" /> buffer
       </span>
       <span>
-        <input v-model="poolSize" type="number" min="1" max="500000" /> poolSize
+        <input v-model.number="poolSize" type="number" min="1" max="500000" /> poolSize
       </span>
       <span v-if="generateTime !== null">
         Items generation: {{ generateTime }} ms
       </span>
+      <span>
+        Updates: {{ updateCount }}
+      </span>
       <span>
         <button @mousedown="showScroller = !showScroller">Toggle scroller</button>
         <label><input type="checkbox" v-model="scopedSlots" /> Scoped slots</label>
       </span>
+
     </div>
     <div class="content" v-if="showScroller">
       <div class="wrapper">
         <!-- Scoped slots -->
-        <virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize">
-          <template scope="props">
+        <virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize" emit-update @update="onUpdate">
+          <template slot-scope="props">
             <!-- <letter v-if="props.item.type === 'letter'" :item="props.item"></letter>-->
             <tr v-if="props.item.type === 'letter'" class="letter" :key="props.itemKey">
               <td class="index">
@@ -40,7 +44,7 @@
         </virtual-scroller>
 
         <!-- Renderers -->
-        <virtual-scroller v-else class="scroller" :item-height="itemHeight" :items="items" :renderers="renderers" type-field="type" key-field="index" main-tag="section" content-tag="table"></virtual-scroller>
+        <virtual-scroller v-else class="scroller" :item-height="itemHeight" :items="items" :renderers="renderers" type-field="type" key-field="index" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize" emit-update @update="onUpdate"/>
       </div>
     </div>
   </div>
@@ -71,9 +75,10 @@ export default {
     updateTime: null,
     showScroller: true,
     scopedSlots: false,
-    buffer: 0,
-    poolSize: 1,
+    buffer: 200,
+    poolSize: 2000,
     enableLetters: true,
+    updateCount: 0,
   }),
 
   watch: {
@@ -101,7 +106,7 @@ export default {
     },
 
     itemHeight () {
-      return this.enableLetters ? null : 42
+      return this.enableLetters ? null : 50
     },
   },
 
@@ -116,6 +121,10 @@ export default {
       this._dirty = true
       this.items = items
     },
+
+    onUpdate (startIndex, endIndex) {
+      this.updateCount++
+    },
   },
 
   updated () {
@@ -192,8 +201,7 @@ body {
 }
 
 .item {
-  height: 42px;
-  box-sizing: border-box;
+  height: 50px;
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
@@ -211,6 +219,12 @@ body {
   font-weight: bold;
 }
 
+.letter td {
+  padding: 12px;
+  height: 200px;
+  box-sizing: border-box;
+}
+
 .index {
   color: rgba(0, 0, 0, 0.2);
   width: 55px;
@@ -221,7 +235,19 @@ table {
   border-collapse: collapse;
 }
 
-td {
+.person td:first-child {
   padding: 12px;
 }
+
+.person .info {
+  display: flex;
+  align-items: center;
+  height: 48px;
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+  margin-right: 12px;
+}
 </style>

docs-src/src/Item.vue

@@ -4,7 +4,14 @@
       {{item.index}}
     </td>
     <td>
-      {{item.value.name}}
+      <div class="info">
+        <img
+          class="avatar"
+          :src="item.value.avatar"
+          :key="item.value.avatar"
+        />
+        <span>{{item.value.name}}</span>
+      </div>
     </td>
   </tr>
 </template>

docs-src/src/data.js

@@ -12,6 +12,7 @@ export function getData (count, letters) {
   for (var i = 0; i < count; i++) {
     const item = {
       name: faker.name.findName(),
+      avatar: faker.internet.avatar(),
     }
     const letter = item.name.charAt(0).toLowerCase()
     raw[letter].push(item)
@@ -35,7 +36,7 @@ export function getData (count, letters) {
         index: index++,
         type: 'person',
         value: item,
-        height: 42,
+        height: 50,
       })
     }
   }

docs-src/src/main.js

@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import VirtualScroller, { VirtualScroller as Comp } from '../../'
+import '../../dist/vue-virtual-scroller.css'
+import App from './App.vue'
 
 console.log(VirtualScroller, Comp)
 
 Vue.use(VirtualScroller)
 
-import App from './App.vue'
-
 /* eslint-disable no-new */
 new Vue({
   el: '#app',