chore: update demo

Author: Guillaume Chau

docs-src/.babelrc

@@ -0,0 +1,5 @@
+module.exports = {
+  'presets': [
+    [require('@babel/preset-env'), { 'modules': false }],
+  ],
+}

docs-src/babel.config.js

@@ -5,26 +5,27 @@
   "author": "Guillaume Chau <[email protected]>",
   "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",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --progress",
+    "devp": "cross-env NODE_ENV=production webpack-dev-server --open --inline --hot --progress",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
     "faker": "^4.1.0",
-    "vue": "^2.1.0"
+    "vue": "^2.5.17"
   },
   "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^7.0.0",
-    "babel-preset-env": "^1.6.1",
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "autoprefixer": "^9.1.5",
+    "babel-loader": "^8.0.4",
     "cross-env": "^5.0.0",
-    "css-loader": "^0.28.0",
-    "file-loader": "^1.1.0",
-    "postcss-loader": "^2.1.5",
+    "css-loader": "^1.0.0",
+    "file-loader": "^2.0.0",
+    "postcss-loader": "^3.0.0",
     "vue-loader": "^15.2.0",
-    "vue-template-compiler": "^2.1.0",
+    "vue-template-compiler": "^2.5.17",
     "webpack": "^4.10.0",
-    "webpack-cli": "^2.1.5",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.0"
   },
   "browserslist": [

docs-src/package.json

@@ -27,13 +27,18 @@
         <input v-model.number="poolSize" type="number" min="1" max="500000" /> poolSize
       </span>
       <span>
-        <button @mousedown="showScroller = !showScroller">Toggle scroller</button>
+        <button @mousedown="renderScroller = !renderScroller">Toggle render</button>
+        <button @mousedown="showScroller = !showScroller">Toggle visibility</button>
         <label v-if="!recycleList"><input type="checkbox" v-model="scopedSlots" :disabled="recycleList" /> Scoped slots</label>
         <label><input type="checkbox" v-model="recycleList" /> Use recycle list</label>
       </span>
     </div>
 
-    <div class="content" v-if="showScroller">
+    <div
+      v-if="renderScroller"
+      v-show="showScroller"
+      class="content"
+    >
       <div class="wrapper">
         <template v-if="!recycleList">
           <!-- Scoped slots -->
@@ -92,6 +97,8 @@
             :buffer="buffer"
             :page-mode="pageMode"
             key-field="id"
+            @visible="onVisible"
+            @hidden="onHidden"
           >
             <template slot-scope="props">
               <tr
@@ -136,6 +143,7 @@ export default {
     items: [],
     renderers,
     count: 10000,
+    renderScroller: true,
     showScroller: true,
     scopedSlots: false,
     buffer: 200,
@@ -205,6 +213,14 @@ export default {
     onUpdate (startIndex, endIndex) {
       this.updateCount++
     },
+
+    onVisible () {
+      console.log('visible')
+    },
+
+    onHidden () {
+      console.log('hidden')
+    },
   },
 }
 </script>