Add some recycling

.gitignore

@@ -3,7 +3,7 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-js
+js/
 
 # Editor directories and files
 .idea

package-lock.json

@@ -11,7 +11,8 @@
 			"dependencies": {
 				"@nextcloud/l10n": "^1.6.0",
 				"@nextcloud/vue": "^5.4.0",
-				"vue": "^2.7.8"
+				"vue": "^2.7.8",
+				"vue-virtual-scroller": "^1.0.10"
 			},
 			"devDependencies": {
 				"@nextcloud/babel-config": "^1.0.0",
@@ -4424,27 +4425,6 @@
 				"vue": ">2.0.0"
 			}
 		},
-		"node_modules/emoji-mart-vue-fast/node_modules/vue-virtual-scroller": {
-			"version": "1.0.10",
-			"resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz",
-			"integrity": "sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==",
-			"dependencies": {
-				"scrollparent": "^2.0.1",
-				"vue-observe-visibility": "^0.4.4",
-				"vue-resize": "^0.4.5"
-			},
-			"peerDependencies": {
-				"vue": "^2.6.11"
-			}
-		},
-		"node_modules/emoji-mart-vue-fast/node_modules/vue-virtual-scroller/node_modules/vue-resize": {
-			"version": "0.4.5",
-			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
-			"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==",
-			"peerDependencies": {
-				"vue": "^2.3.0"
-			}
-		},
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -10754,6 +10734,14 @@
 			"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
 			"integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
 		},
+		"node_modules/vue-resize": {
+			"version": "0.4.5",
+			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+			"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==",
+			"peerDependencies": {
+				"vue": "^2.3.0"
+			}
+		},
 		"node_modules/vue-style-loader": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -10811,6 +10799,19 @@
 			"dev": true,
 			"peer": true
 		},
+		"node_modules/vue-virtual-scroller": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz",
+			"integrity": "sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==",
+			"dependencies": {
+				"scrollparent": "^2.0.1",
+				"vue-observe-visibility": "^0.4.4",
+				"vue-resize": "^0.4.5"
+			},
+			"peerDependencies": {
+				"vue": "^2.6.11"
+			}
+		},
 		"node_modules/watchpack": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -14709,26 +14710,6 @@
 				"@babel/polyfill": "^7.12.1",
 				"@babel/runtime": "^7.16.3",
 				"vue-virtual-scroller": "^1.0.10"
-			},
-			"dependencies": {
-				"vue-virtual-scroller": {
-					"version": "1.0.10",
-					"resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz",
-					"integrity": "sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==",
-					"requires": {
-						"scrollparent": "^2.0.1",
-						"vue-observe-visibility": "^0.4.4",
-						"vue-resize": "^0.4.5"
-					},
-					"dependencies": {
-						"vue-resize": {
-							"version": "0.4.5",
-							"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
-							"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==",
-							"requires": {}
-						}
-					}
-				}
 			}
 		},
 		"emoji-regex": {
@@ -19514,6 +19495,12 @@
 			"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
 			"integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
 		},
+		"vue-resize": {
+			"version": "0.4.5",
+			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+			"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==",
+			"requires": {}
+		},
 		"vue-style-loader": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -19567,6 +19554,16 @@
 			"dev": true,
 			"peer": true
 		},
+		"vue-virtual-scroller": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz",
+			"integrity": "sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==",
+			"requires": {
+				"scrollparent": "^2.0.1",
+				"vue-observe-visibility": "^0.4.4",
+				"vue-resize": "^0.4.5"
+			}
+		},
 		"watchpack": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -34,7 +34,8 @@
 	"dependencies": {
 		"@nextcloud/l10n": "^1.6.0",
 		"@nextcloud/vue": "^5.4.0",
-		"vue": "^2.7.8"
+		"vue": "^2.7.8",
+		"vue-virtual-scroller": "^1.0.10"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"

src/App.vue

@@ -8,16 +8,25 @@
 		</AppNavigation>
 
 		<AppContent>
-			<div>This is the s</div>
+			<div class="outer">
+				<Timeline />
+			</div>
 		</AppContent>
 	</Content>
 </template>
 
+<style scoped>
+.outer {
+    padding: 0px 44px 256px 44px;
+}
+</style>
+
 <script>
 import Content from '@nextcloud/vue/dist/Components/Content'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import Timeline from './Timeline.vue'
 
 export default {
 	name: 'App',
@@ -26,6 +35,7 @@ export default {
 		AppContent,
 		AppNavigation,
 		AppNavigationItem,
+		Timeline,
 	},
 	data() {
 		return {

src/Timeline.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <button @click="genList()">oka.</button><br/>
+        <RecycleScroller
+            class="scroller"
+            :items="list"
+            size-field="size"
+            key-field="id"
+            v-slot="{ item }"
+            :emit-update="true"
+            @update="scrollChange"
+        >
+            <h1 v-if="item.head" class="head">Vue is awesome!</h1>
+            <div v-else class="user">
+                {{ item.name }}
+            </div>
+        </RecycleScroller>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        const list = [];
+        for (let i = 0; i < 1000; i++) {
+            list.push({
+                id: i,
+                name: 'bla' + i,
+                size: 32,
+            })
+        }
+        return {
+            list: list,
+            count: list.length,
+        }
+    },
+
+    methods: {
+        genList() {
+            this.count++;
+            this.list[0].name = 'bloop' + this.count;
+            return;
+            this.list.splice(50, 0, {
+                id: this.count,
+                name: 'bla' + this.count,
+                size: 64,
+                head: true,
+            })
+        },
+        scrollChange(startIndex, endIndex) {
+            console.log('scrollChange', startIndex, endIndex);
+        },
+    },
+}
+</script>
+
+<style scoped>
+.scroller {
+    height: 300px;
+}
+
+.user {
+    height: 32px;
+}
+.head {
+    height: 64px;
+    font-size: 20px;
+    font-weight: bold;
+}
+</style>

src/main.js

@@ -20,6 +20,8 @@
  *
  */
 import Vue from 'vue'
+import VueVirtualScroller from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 import App from './App'
@@ -32,6 +34,8 @@ Vue.mixin({
 	},
 })
 
+Vue.use(VueVirtualScroller)
+
 export default new Vue({
 	el: '#content',
 	render: h => h(App),