├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── index.d.ts
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── rollup.config.js
├── src
    ├── App.vue
    ├── index.ts
    ├── main.ts
    ├── shims-vue.d.ts
    ├── utils.ts
    └── vue3-virtual-list.vue
└── tsconfig.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/typescript/recommended",
10 |     "@vue/prettier",
11 |     "@vue/prettier/@typescript-eslint"
12 |   ],
13 |   parserOptions: {
14 |     ecmaVersion: 2020
15 |   },
16 |   rules: {
17 |     "@typescript-eslint/no-explicit-any": "off",
18 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
19 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
20 |   }
21 | };
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue3-virtual-list
 2 | 
 3 | [![npm](https://img.shields.io/npm/v/vue3-virtual-list.svg)](https://www.npmjs.com/package/vue3-virtual-list)
 4 | [![downloads](https://img.shields.io/npm/dm/vue3-virtual-list.svg)](https://www.npmjs.com/package/vue3-virtual-list)
 5 | [![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)
 6 | 
 7 | Scroll list for big acount of data. Based on Vue3.
 8 | 
 9 | [live demo](https://waningflow.com/vue3-virtual-list/)
10 | 
11 | ## Install
12 | 
13 | ```
14 | yarn add vue3-virtual-list
15 | ```
16 | 
17 | ## Example
18 | 
19 | ```html
20 | <template>
21 |   <div class="list-container">
22 |     <VirtualList :data="dataSource">
23 |       <template v-slot="{ item, index }">
24 |         <div class="item-container">
25 |           <div class="cell cell-index">{{ index + 1 }}</div>
26 |           <div class="cell">{{ item.name }}</div>
27 |           <div class="cell">{{ item.email }}</div>
28 |           <div class="cell">{{ item.address }}</div>
29 |         </div>
30 |       </template>
31 |     </VirtualList>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 |   import { VirtualList } from 'vue3-virtual-list';
37 |   import { mock } from './utils';
38 | 
39 |   export default {
40 |     data() {
41 |       return {
42 |         dataSource: mock(100000),
43 |       };
44 |     },
45 |     components: {
46 |       VirtualList,
47 |     },
48 |   };
49 | </script>
50 | 
51 | <style>
52 |   .list-container {
53 |     width: 800px;
54 |     height: 600px;
55 |     border: 2px solid #4caf50;
56 |     margin: 0 auto;
57 |   }
58 |   .item-container {
59 |     height: 40px;
60 |     display: flex;
61 |     flex-direction: row;
62 |     align-items: center;
63 |     border-bottom: 1px solid #ccc;
64 |   }
65 | </style>
66 | ```
67 | 
68 | ## Props
69 | 
70 | | name       | type   | description                                                 | required | default |
71 | | ---------- | ------ | ----------------------------------------------------------- | -------- | ------- |
72 | | data       | Array  | The array of data. Every item is a row.                     | Yes      |         |
73 | | dataKey    | String | Field as key.                                               | No       | id      |
74 | | itemSize   | Number | The height in pixels of each row.                           | No       | 40      |
75 | | poolBuffer | Number | How many rows will be rendered except for the visible ones. | No       | 50      |
76 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   // presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | 
 3 | declare class VirtualList extends Vue {
 4 |   data: any[];
 5 |   dataKey: string;
 6 |   itemSize: number;
 7 |   poolBuffer: number;
 8 | }
 9 | 
10 | export { VirtualList };
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-virtual-list",
 3 |   "version": "1.0.2",
 4 |   "keywords": [
 5 |     "vue",
 6 |     "vue3",
 7 |     "scroll",
 8 |     "list"
 9 |   ],
10 |   "author": "https://github.com/waningflow",
11 |   "license": "MIT",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/waningflow/vue3-virtual-list.git"
15 |   },
16 |   "publishConfig": {
17 |     "registry": "https://registry.npmjs.org"
18 |   },
19 |   "module": "dist/index.esm.js",
20 |   "main": "dist/index.cjs.js",
21 |   "unpkg": "dist/index.global.js",
22 |   "typings": "index.d.ts",
23 |   "scripts": {
24 |     "serve": "vue-cli-service serve",
25 |     "build": "vue-cli-service build",
26 |     "lint": "vue-cli-service lint",
27 |     "build-npm": "rollup -c rollup.config.js"
28 |   },
29 |   "files": [
30 |     "dist/",
31 |     "index.d.ts"
32 |   ],
33 |   "peerDependencies": {
34 |     "vue": "^3.0.0"
35 |   },
36 |   "devDependencies": {
37 |     "@babel/preset-typescript": "^7.12.7",
38 |     "@rollup/plugin-babel": "^5.2.2",
39 |     "@rollup/plugin-commonjs": "^17.0.0",
40 |     "@rollup/plugin-typescript": "^8.1.0",
41 |     "@types/faker": "^5.1.5",
42 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
43 |     "@typescript-eslint/parser": "^2.33.0",
44 |     "@vue/cli-plugin-babel": "~4.5.0",
45 |     "@vue/cli-plugin-eslint": "~4.5.0",
46 |     "@vue/cli-plugin-typescript": "~4.5.0",
47 |     "@vue/cli-service": "~4.5.0",
48 |     "@vue/compiler-sfc": "^3.0.0",
49 |     "@vue/eslint-config-prettier": "^6.0.0",
50 |     "@vue/eslint-config-typescript": "^5.0.2",
51 |     "eslint": "^6.7.2",
52 |     "eslint-plugin-prettier": "^3.1.3",
53 |     "eslint-plugin-vue": "^7.0.0-0",
54 |     "less": "^3.0.4",
55 |     "less-loader": "^5.0.0",
56 |     "lint-staged": "^9.5.0",
57 |     "postcss": "^8.2.1",
58 |     "prettier": "^1.19.1",
59 |     "rollup": "^2.35.1",
60 |     "rollup-plugin-postcss": "^4.0.0",
61 |     "rollup-plugin-vue": "^6.0.0",
62 |     "typescript": "~3.9.3"
63 |   },
64 |   "gitHooks": {
65 |     "pre-commit": "lint-staged"
66 |   },
67 |   "lint-staged": {
68 |     "*.{js,jsx,vue,ts,tsx}": [
69 |       "vue-cli-service lint",
70 |       "git add"
71 |     ]
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waningflow/vue3-virtual-list/8c6c1a0a945659630c48609b5f43fc9b06295238/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import fs from "fs";
 2 | import commonjs from "@rollup/plugin-commonjs";
 3 | import vue from "rollup-plugin-vue";
 4 | import babel from "@rollup/plugin-babel";
 5 | import PostCSS from "rollup-plugin-postcss";
 6 | import pkg from "./package.json"; // import our package.json file to re-use the naming
 7 | 
 8 | const esbrowserslist = fs
 9 |   .readFileSync("./.browserslistrc")
10 |   .toString()
11 |   .split("\n")
12 |   .filter(entry => entry && entry.substring(0, 2) !== "ie");
13 | 
14 | export default {
15 |   // this is the file containing all our exported components/functions
16 |   input: "src/index.ts",
17 |   // this is an array of outputed formats
18 |   output: [
19 |     {
20 |       file: pkg.module, // the name of our esm librry
21 |       format: "esm" // the format of choice
22 |       // sourcemap: true // ask rollup to include sourcemaps
23 |     },
24 |     {
25 |       file: pkg.main,
26 |       format: "cjs"
27 |       // sourcemap: true
28 |     },
29 |     {
30 |       file: pkg.unpkg,
31 |       format: "umd",
32 |       name: "Vue3VirtualList",
33 |       // sourcemap: true,
34 |       globals: {
35 |         vue: "Vue"
36 |       }
37 |     }
38 |   ],
39 |   // this is an array of the plugins that we are including
40 |   plugins: [
41 |     vue(),
42 |     PostCSS({
43 |       modules: {
44 |         generateScopedName: "[local]___[hash:base64:5]"
45 |       },
46 |       include: /&module=.*\.css$/
47 |     }),
48 |     // Process all `<style>` blocks except `<style module>`.
49 |     PostCSS({ include: /(?<!&module=.*)\.css$/ }),
50 |     babel({
51 |       exclude: "node_modules/**",
52 |       extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
53 |       babelHelpers: "bundled",
54 |       presets: [
55 |         [
56 |           "@babel/preset-env",
57 |           {
58 |             targets: esbrowserslist
59 |           }
60 |         ],
61 |         "@babel/preset-typescript"
62 |       ]
63 |     }),
64 |     commonjs()
65 |   ],
66 |   // ask rollup to not bundle Vue in the library
67 |   external: ["vue"]
68 | };
69 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="action-container">
 4 |       <input v-model="dataCount" />
 5 |       <button @click="updateDataSource">Update</button>
 6 |     </div>
 7 |     <div class="list-container">
 8 |       <VueVirtualList :data="dataSource">
 9 |         <template v-slot="{ item, index }">
10 |           <div class="item-container">
11 |             <div class="cell cell-index">{{ index + 1 }}</div>
12 |             <!-- <div class="cell cell-img"><img :src="item.img" /></div> -->
13 |             <div class="cell">{{ item.name }}</div>
14 |             <div class="cell">{{ item.email }}</div>
15 |             <div class="cell">{{ item.address }}</div>
16 |           </div>
17 |         </template>
18 |       </VueVirtualList>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script lang="ts">
24 | import { defineComponent } from "vue";
25 | import VueVirtualList from "./vue3-virtual-list.vue";
26 | import { mock } from "./utils";
27 | 
28 | export default defineComponent({
29 |   name: "App",
30 |   data() {
31 |     return {
32 |       dataCount: 10000,
33 |       dataSource: mock(10000)
34 |     };
35 |   },
36 |   components: {
37 |     VueVirtualList
38 |   },
39 |   methods: {
40 |     updateDataSource() {
41 |       this.dataSource = mock(this.dataCount);
42 |     }
43 |   }
44 | });
45 | </script>
46 | 
47 | <style lang="less">
48 | #app {
49 |   font-family: Avenir, Helvetica, Arial, sans-serif;
50 |   -webkit-font-smoothing: antialiased;
51 |   -moz-osx-font-smoothing: grayscale;
52 |   text-align: center;
53 |   color: #2c3e50;
54 |   margin-top: 60px;
55 | }
56 | .list-container {
57 |   width: 800px;
58 |   height: 600px;
59 |   border: 2px solid #4caf50;
60 |   margin: 0 auto;
61 | }
62 | .item-container {
63 |   height: 40px;
64 |   display: flex;
65 |   flex-direction: row;
66 |   align-items: center;
67 |   border-bottom: 1px solid #ccc;
68 | }
69 | .cell {
70 |   margin: 0 8px;
71 |   flex: 1;
72 |   overflow: hidden;
73 |   text-overflow: ellipsis;
74 |   text-align: left;
75 |   white-space: nowrap;
76 |   &.cell-index,
77 |   &.cell-img {
78 |     flex: none;
79 |     min-width: 60px;
80 |   }
81 | }
82 | .action-container {
83 |   margin-bottom: 16px;
84 |   button {
85 |     margin-left: 10px;
86 |   }
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import VirtualList from "./vue3-virtual-list.vue";
2 | 
3 | export { VirtualList };
4 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | 
4 | createApp(App).mount("#app");
5 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 |   const component: DefineComponent<{}, {}, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import faker from "faker";
 2 | 
 3 | export function uuid() {
 4 |   let d = Date.now();
 5 |   if (
 6 |     typeof performance !== "undefined" &&
 7 |     typeof performance.now === "function"
 8 |   ) {
 9 |     d += performance.now(); //use high-precision timer if available
10 |   }
11 |   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
12 |     const r = (d + Math.random() * 16) % 16 | 0;
13 |     d = Math.floor(d / 16);
14 |     return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
15 |   });
16 | }
17 | 
18 | export function mock(length = 1000) {
19 |   return Array.from({ length }, () => {
20 |     return {
21 |       id: uuid(),
22 |       name: faker.name.findName(),
23 |       email: faker.internet.email(),
24 |       address: faker.address.country(),
25 |       img: faker.image.imageUrl()
26 |     };
27 |   });
28 | }
29 | 


--------------------------------------------------------------------------------
/src/vue3-virtual-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="vue3-virtual-list-container"
  4 |     ref="root"
  5 |     @scroll.passive="handleScroll"
  6 |   >
  7 |     <div
  8 |       class="vue3-virtual-list-scroll"
  9 |       :style="`height: ${scrollHeight}px;padding-top: ${paddingTop}px`"
 10 |     >
 11 |       <div
 12 |         class="vue3-virtual-list-item-container"
 13 |         v-for="item in pool"
 14 |         :key="item[dataKey]"
 15 |         :style="`height: ${itemSize}px`"
 16 |       >
 17 |         <slot :item="item" :index="item._index"></slot>
 18 |       </div>
 19 |     </div>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script lang="ts">
 24 | import { ref, toRefs, defineComponent, onMounted, watch } from "vue";
 25 | 
 26 | interface Props {
 27 |   data: any[];
 28 |   dataKey: string;
 29 |   itemSize: number;
 30 |   poolBuffer: number;
 31 | }
 32 | 
 33 | export default defineComponent({
 34 |   name: "VirtualList",
 35 |   props: {
 36 |     data: {
 37 |       type: Array,
 38 |       default: () => []
 39 |     },
 40 |     dataKey: {
 41 |       type: String,
 42 |       default: () => "id"
 43 |     },
 44 |     itemSize: {
 45 |       type: Number,
 46 |       default: () => 40
 47 |     },
 48 |     poolBuffer: {
 49 |       type: Number,
 50 |       default: () => 50
 51 |     }
 52 |   },
 53 |   setup(props: Props): any {
 54 |     const { data, poolBuffer, itemSize } = toRefs(props);
 55 |     const root = ref<HTMLElement | null>(null);
 56 |     const pool = ref<any[]>([]);
 57 |     const scrollHeight = ref(data.value.length * itemSize.value);
 58 | 
 59 |     watch(data, cData => {
 60 |       scrollHeight.value = cData.length * itemSize.value;
 61 |     });
 62 | 
 63 |     watch(itemSize, cItemSize => {
 64 |       scrollHeight.value = data.value.length * cItemSize;
 65 |     });
 66 | 
 67 |     let containerSize = 0;
 68 |     const paddingTop = ref(0);
 69 |     let isScrollBusy = false;
 70 | 
 71 |     const handleScroll = () => {
 72 |       if (!root.value) return;
 73 |       if (isScrollBusy) return;
 74 |       isScrollBusy = true;
 75 | 
 76 |       requestAnimationFrame(() => {
 77 |         isScrollBusy = false;
 78 |         if (!root.value) return;
 79 |         const range: number[] = [];
 80 |         range[0] =
 81 |           Math.floor(root.value.scrollTop / itemSize.value) -
 82 |           Math.floor(poolBuffer.value / 2);
 83 |         range[0] = Math.max(range[0], 0);
 84 |         range[1] =
 85 |           range[0] +
 86 |           Math.floor(root.value.clientHeight / itemSize.value) +
 87 |           poolBuffer.value;
 88 |         range[1] = Math.min(range[1], data.value.length);
 89 |         pool.value = data.value
 90 |           .slice(range[0], range[1])
 91 |           .map((v, i) => ({ ...v, _index: range[0] + i }));
 92 |         paddingTop.value = range[0] * itemSize.value;
 93 |       });
 94 |     };
 95 | 
 96 |     onMounted(() => {
 97 |       if (!root.value) return;
 98 |       containerSize = root.value.clientHeight;
 99 |       const contentLines = Math.ceil(containerSize / itemSize.value);
100 |       const totalLines = contentLines + poolBuffer.value;
101 |       const range = [0, totalLines];
102 |       pool.value = data.value
103 |         .slice(range[0], range[0] + range[1])
104 |         .map((v, i) => ({ ...v, _index: range[0] + i }));
105 |     });
106 | 
107 |     return { pool, scrollHeight, root, handleScroll, paddingTop };
108 |   }
109 | });
110 | </script>
111 | 
112 | <style scoped>
113 | .vue3-virtual-list-container {
114 |   width: 100%;
115 |   height: 100%;
116 |   min-width: 100px;
117 |   min-height: 100px;
118 |   overflow: auto;
119 | }
120 | .vue3-virtual-list-scroll {
121 |   box-sizing: border-box;
122 | }
123 | .vue3-virtual-list-item-container {
124 |   overflow: hidden;
125 | }
126 | </style>
127 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------