Skip to content

Commit 542a420

Browse files
AkryumAkryum
committed
Merge branch 'v1'
2 parents fe72c43 + 332d045 commit 542a420

24 files changed

+1126
-3870
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,6 @@ module.exports = {
3131
ignorePatterns: [
3232
'node_modules/',
3333
'dist/',
34+
'!.*',
3435
],
3536
}

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@ node_modules/
22
.temp/
33
.cache/
44
dist/
5-

‎packages/demo/README.md

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,16 @@
1-
# demo
1+
# vue-virtual-scroller-demos
22

3-
## Project setup
4-
```
5-
yarn install
6-
```
3+
> Demos for vue-virtual-scroller
74
8-
### Compiles and hot-reloads for development
9-
```
10-
yarn serve
11-
```
5+
## Build Setup
126

13-
### Compiles and minifies for production
14-
```
15-
yarn build
16-
```
7+
``` bash
8+
# install dependencies
9+
yarn install
1710

18-
### Run your end-to-end tests
19-
```
20-
yarn test:e2e
21-
```
11+
# serve with hot reload at localhost:8080
12+
yarn run dev
2213

23-
### Lints and fixes files
24-
```
25-
yarn lint
14+
# build for production with minification
15+
yarn run build
2616
```
27-
28-
### Customize configuration
29-
See [Configuration Reference](https://cli.vuejs.org/config/).

‎packages/demo/babel.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
presets: [
3-
'@vue/cli-plugin-babel/preset',
3+
[require('@babel/preset-env'), { modules: false }],
44
],
55
}

‎packages/demo/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-virtual-scroller</title>
6+
<link rel="icon" href="/favicon.png">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="./src/main.js"></script>
11+
</body>
12+
</html>

‎packages/demo/package.json

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
{
2-
"name": "demo",
3-
"version": "0.1.0",
2+
"name": "vue-virtual-scroller-docs",
3+
"description": "Demos for vue-virtual-scroller",
4+
"version": "1.0.0",
5+
"author": "Guillaume Chau <[email protected]>",
46
"private": true,
57
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build",
8-
"test:e2e": "vue-cli-service test:e2e"
8+
"dev": "vite dev --port 8080",
9+
"build": "vite build",
10+
"preview": "vite preview"
911
},
1012
"dependencies": {
11-
"core-js": "^3.6.5",
12-
"faker": "^5.5.3",
13-
"vue": "^3.0.0",
14-
"vue-router": "^4.0.0-0",
13+
"@faker-js/faker": "^7.6.0",
14+
"vue": "^3.2.41",
15+
"vue-router": "^4.1.5",
1516
"vue-virtual-scroller": "^2.0.0-alpha.1"
1617
},
1718
"devDependencies": {
18-
"@vue/cli-plugin-babel": "~4.5.0",
19-
"@vue/cli-plugin-e2e-cypress": "~4.5.0",
20-
"@vue/cli-plugin-router": "~4.5.0",
21-
"@vue/cli-service": "~4.5.0",
22-
"@vue/compiler-sfc": "^3.0.0"
23-
}
19+
"@vitejs/plugin-vue": "^3.1.2",
20+
"vue-template-compiler": "^2.5.17",
21+
"vite": "^3.1.8"
22+
},
23+
"browserslist": [
24+
"> 1%",
25+
"last 2 versions",
26+
"not ie <= 8"
27+
]
2428
}

‎packages/demo/public/favicon.png

3.37 KB
Loading

‎packages/demo/src/App.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@
2828
<router-link :to="{ name: 'chat' }">
2929
Chat demo
3030
</router-link>
31+
<router-link :to="{ name: 'grid' }">
32+
Grid demo
33+
</router-link>
3134
</nav>
3235
<router-view />
3336
</template>
@@ -58,6 +61,9 @@ body {
5861
5962
.menu {
6063
flex: auto 0 0;
64+
display: flex;
65+
align-items: center;
66+
gap: 2px;
6167
}
6268
6369
.menu,

‎packages/demo/src/components/DynamicScrollerDemo.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@
55
v-model="search"
66
placeholder="Filter..."
77
>
8+
<span>({{ updateParts.viewStartIdx }} - [{{ updateParts.visibleStartIdx }} - {{ updateParts.visibleEndIdx }}] - {{ updateParts.viewEndIdx }})</span>
89
</div>
910

1011
<DynamicScroller
1112
:items="filteredItems"
1213
:min-item-size="54"
14+
:emit-update="true"
1315
class="scroller"
1416
@resize="onResize"
17+
@update="onUpdate"
1518
>
1619
<template #before>
1720
<div class="notice">
@@ -73,6 +76,7 @@ export default {
7376
return {
7477
items,
7578
search: '',
79+
updateParts: { viewStartIdx: 0, viewEndIdx: 0, visibleStartIdx: 0, visibleEndIdx: 0 },
7680
}
7781
},
7882
@@ -93,6 +97,13 @@ export default {
9397
onResize () {
9498
console.log('resize')
9599
},
100+
101+
onUpdate (viewStartIndex, viewEndIndex, visibleStartIndex, visibleEndIndex) {
102+
this.updateParts.viewStartIdx = viewStartIndex
103+
this.updateParts.viewEndIdx = viewEndIndex
104+
this.updateParts.visibleStartIdx = visibleStartIndex
105+
this.updateParts.visibleEndIdx = visibleEndIndex
106+
},
96107
},
97108
}
98109
</script>
@@ -109,6 +120,19 @@ export default {
109120
flex: auto 1 1;
110121
}
111122
123+
.scroller {
124+
border: solid 1px #42b983;
125+
}
126+
127+
.toolbar {
128+
flex: auto 0 0;
129+
text-align: center;
130+
}
131+
132+
.toolbar > *:not(:last-child) {
133+
margin-right: 24px;
134+
}
135+
112136
.notice {
113137
padding: 24px;
114138
font-size: 20px;

‎packages/demo/src/components/GridDemo.vue

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<script>
2+
import { getData } from '../data'
3+
4+
export default {
5+
data () {
6+
return {
7+
list: [],
8+
gridItems: 6,
9+
scrollTo: 500,
10+
}
11+
},
12+
13+
mounted () {
14+
this.list = getData(5000)
15+
},
16+
}
17+
</script>
18+
19+
<template>
20+
<div class="wrapper">
21+
<div class="toolbar">
22+
<label>
23+
Grid items per row
24+
<input
25+
v-model.number="gridItems"
26+
type="number"
27+
min="2"
28+
max="20"
29+
>
30+
</label>
31+
<input
32+
v-model.number="gridItems"
33+
type="range"
34+
min="2"
35+
max="20"
36+
>
37+
<span>
38+
<button @mousedown="$refs.scroller.scrollToItem(scrollTo)">Scroll To: </button>
39+
<input
40+
v-model.number="scrollTo"
41+
type="number"
42+
min="0"
43+
:max="list.length - 1"
44+
>
45+
</span>
46+
</div>
47+
48+
<RecycleScroller
49+
ref="scroller"
50+
class="scroller"
51+
:items="list"
52+
:item-size="128"
53+
:grid-items="gridItems"
54+
:item-secondary-size="100"
55+
>
56+
<template #default="{ item, index }">
57+
<div class="item">
58+
<img
59+
:key="item.id"
60+
:src="item.value.avatar"
61+
>
62+
<div class="index">
63+
{{ index }}
64+
</div>
65+
</div>
66+
</template>
67+
</RecycleScroller>
68+
</div>
69+
</template>
70+
71+
<style scoped>
72+
.wrapper,
73+
.scroller {
74+
height: 100%;
75+
}
76+
77+
.wrapper {
78+
display: flex;
79+
flex-direction: column;
80+
}
81+
82+
.toolbar {
83+
flex: none;
84+
}
85+
86+
.scroller {
87+
flex: 1;
88+
}
89+
90+
.scroller >>> .hover img {
91+
opacity: 0.5;
92+
}
93+
94+
.item {
95+
position: relative;
96+
height: 100%;
97+
}
98+
99+
.index {
100+
position: absolute;
101+
top: 2px;
102+
left: 2px;
103+
padding: 4px;
104+
border-radius: 4px;
105+
background-color: rgba(255, 255, 255, 0.85);
106+
color: black;
107+
}
108+
109+
img {
110+
width: 100%;
111+
height: 100%;
112+
background: #eee;
113+
object-fit: cover;
114+
}
115+
</style>

0 commit comments

Comments
 (0)