Initial sources

Author: Akryum

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  env: {
+    browser: true,
+  },
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    // trailing comma
+    'comma-dangle': ['error', 'always-multiline'],
+    // beware of returning assignement
+    'no-return-assign': 'warn',
+    'no-extend-native': 'warn',
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

README.md

@@ -1,2 +1,54 @@
 # vue-virtual-scroller
 Smooth scroll with any amount of data
+
+```
+npm install --save vue-virtual-scroller
+```
+
+Use the component in your app. For example, register it as a global component:
+
+```javascript
+import { VirtualScroller } from 'vue-virtual-scroller'
+
+Vue.component('virtual-scroller', VirtualScroller)
+```
+
+```html
+<template>
+  <div class="demo">
+    <virtual-scroller
+      :items="items"
+      :renderers="renderers"
+      item-height="22"
+      type-field="type">
+    </virtual-scroller>
+  </div>
+</template>
+
+<script>
+// Data with a type field
+const items = [
+  { type: 'letter', value: 'A' },
+  { type: 'person', value: { name: 'Alan' } },
+  { type: 'person', value: { name: 'Alice' } },
+]
+
+import Letter from './Letter.vue'
+import Item from './Item.vue'
+
+// Bind the components to the item type
+const renderers = Object.freeze({
+  letter: Letter,
+  person: Item,
+})
+
+export default {
+  data: () => ({
+    items,
+    renderers,
+  }),
+}
+</script>
+```
+
+Finally, set the size of the virtual-scroller element (for example, with CSS).

demo/Demo.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="demo">
+    <virtual-scroller :items="items" :renderers="renderers" item-height="22"></virtual-scroller>
+  </div>
+</template>
+
+<script>
+import { getData } from './data.js'
+
+const count = 100000
+console.log('Generating ' + count + ' items...')
+let time = new Date().getTime()
+let time2
+const items = Object.freeze(getData(count))
+console.log('Generated ' + items.length + ' in ' + ((time2 = new Date().getTime()) - time))
+
+import Letter from './Letter.vue'
+import Item from './Item.vue'
+
+const renderers = {
+  letter: Letter,
+  person: Item,
+}
+
+export default {
+  data: () => ({
+    items,
+    renderers,
+  }),
+  mounted () {
+    console.log('app ready', new Date().getTime() - time2)
+  },
+}
+</script>
+
+<style>
+body {
+  font-family: sans-serif;
+}
+
+.virtual-scroller {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.item-container {
+  box-sizing: border-box;
+}
+
+.item {
+  height: 22px;
+  padding: 2px 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+.item:hover {
+  background: #4fc08d;
+  color: white;
+}
+
+.letter {
+  text-transform: uppercase;
+  color: grey;
+}
+</style>

demo/Item.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="person" @click="edit">({{item.index}}) {{item.value.name}}</div>
+</template>
+
+<script>
+export default {
+  props: ['item'],
+  methods: {
+    edit () {
+      this.item.value.name += '*'
+    },
+  },
+}
+</script>

demo/Letter.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="letter">({{item.index}}) {{item.value}}</div>
+</template>
+
+<script>
+export default {
+  props: ['item'],
+}
+</script>

demo/data.js

@@ -0,0 +1,40 @@
+import faker from 'faker'
+
+export function getData (count) {
+  const raw = {}
+
+  const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('')
+
+  for (var l of alphabet) {
+    raw[l] = []
+  }
+
+  for (var i = 0; i < count; i++) {
+    const item = {
+      name: faker.name.findName(),
+    }
+    const letter = item.name.charAt(0).toLowerCase()
+    raw[letter].push(item)
+  }
+
+  const data = []
+  let index = 0
+
+  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,
+    })
+    for (var item of raw[l]) {
+      data.push({
+        index: index++,
+        type: 'person',
+        value: item,
+      })
+    }
+  }
+
+  return data
+}

demo/main.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import VirtualScroller from '../src/VirtualScroller.vue'
+import * as Index from '../'
+
+console.log(Index)
+console.log(VirtualScroller)
+
+Vue.component('virtual-scroller', VirtualScroller)
+
+import Demo from './Demo.vue'
+
+const app = new Vue({
+  render: h => h(Demo),
+})
+app.$mount('#app')

index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Vue Virtual Scroller</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="dist/build.js"></script>
+  </body>
+</html>

index.js

@@ -0,0 +1 @@
+export { VirtualScroller } from './src/VirtualScroller.vue'