Skip to content

Commit 4c087e8

Browse files
derpdeadderpdead
committed
- update dependencies
- improve nested and expanding components - improve rendering performance
1 parent 975fb03 commit 4c087e8

File tree

9 files changed

+328
-395
lines changed

9 files changed

+328
-395
lines changed

‎README.md‎

Lines changed: 72 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,18 @@ Example:
5050
:items="items"
5151
:render-ahead="renderAhead"
5252
:estimated-height="estimatedHeight">
53-
<template #item="{ item, index}">
53+
<template #header>
54+
<!-- Might be added sticky / floating header -->
55+
</template>
56+
<template #body>
57+
<!-- Might be added custom body which will overwrite DOM virtualization - useful for presenting placeholders in case that there is no data -->
58+
</template>
59+
<template #item="{ item, index }">
5460
<div v-text="item" />
5561
</template>
62+
<template #footer>
63+
<!-- Might be added sticky / floating footer -->
64+
</template>
5665
</VirtualScroll>
5766
</template>
5867
@@ -71,7 +80,7 @@ export default {
7180

7281
## NestedList
7382

74-
Wrapper for VirtualScroll. It adds simple functionality of flattening passed items.
83+
Wrapper for VirtualScroll. It adds simple functionality of flattening passed items. Allowing to render tree data structures.
7584

7685
Example:
7786

@@ -82,23 +91,43 @@ Example:
8291
:items="items"
8392
:render-ahead="renderAhead"
8493
:estimated-height="estimatedHeight">
85-
<template #group="{ item, index }">
86-
<h3 v-text="item" />
94+
<template #header>
95+
<!-- Might be added sticky / floating header -->
96+
</template>
97+
<template #body>
98+
<!-- Might be added custom body which will overwrite DOM virtualization - useful for presenting placeholders in case that there is no data -->
8799
</template>
88100
<template #item="{ item, index }">
89101
<div v-text="item" />
90102
</template>
103+
<template #footer>
104+
<!-- Might be added sticky / floating footer -->
105+
</template>
91106
</NestedList>
92107
</template>
93108
94109
<script>
95110
export default {
96111
data() {
97112
return {
98-
items: {
99-
numberGroup: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
100-
stringGroup: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'],
101-
},
113+
items: [
114+
{
115+
id: 'root',
116+
children: [
117+
{
118+
id: 'firstLevel - 1',
119+
children: [
120+
{
121+
id: 'secondLevel - 1',
122+
}
123+
],
124+
},
125+
{
126+
id: 'firstLevel - 2',
127+
}
128+
]
129+
}
130+
],
102131
renderAhead: 2, // Buffer, +2 at top / bottom in queue
103132
estimatedHeight: 20, // We need to assume that there is some default height for each row which will be recalculated later
104133
};
@@ -109,7 +138,7 @@ export default {
109138

110139
## ExpandingList
111140

112-
Wrapper for VirtualScroll. It adds simple functionality of flattening passed items and toggling visibility of groups.
141+
Wrapper for VirtualScroll. It adds simple functionality of flattening passed items and toggling visibility of groups. Allowing to render tree data structures.
113142

114143
Example:
115144

@@ -120,13 +149,18 @@ Example:
120149
:items="items"
121150
:render-ahead="renderAhead"
122151
:estimated-height="estimatedHeight"
123-
:expanded-group="expandedGroup"
124152
@expand="onExpandGroup">
125-
<template #group="{ item, index }">
126-
<div v-text="item" />
153+
<template #header>
154+
<!-- Might be added sticky / floating header -->
127155
</template>
128-
<template #item="{ item, index }">
129-
<div v-text="item" />
156+
<template #body>
157+
<!-- Might be added custom body which will overwrite DOM virtualization - useful for presenting placeholders in case that there is no data -->
158+
</template>
159+
<template #item="{ item, index, onExpand }">
160+
<div v-text="item" @click="onExpand" />
161+
</template>
162+
<template #footer>
163+
<!-- Might be added sticky / floating footer -->
130164
</template>
131165
</ExpandingList>
132166
</template>
@@ -135,23 +169,33 @@ Example:
135169
export default {
136170
data() {
137171
return {
138-
items: {
139-
numberGroup: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
140-
stringGroup: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'],
141-
},
172+
items: [
173+
{
174+
id: 'root',
175+
children: [
176+
{
177+
id: 'firstLevel - 1',
178+
children: [
179+
{
180+
id: 'secondLevel - 1',
181+
}
182+
],
183+
},
184+
{
185+
id: 'firstLevel - 2',
186+
}
187+
]
188+
}
189+
],
142190
renderAhead: 2, // Buffer, +2 at top / bottom in queue
143191
estimatedHeight: 20, // We need to assume that there is some default height for each row which will be recalculated later
144-
expandedGroup: '',
145192
};
146193
},
147194
methods: {
148-
onExpandGroup(group) {
149-
// You may fetch data here and mutate items object
150-
// this.items[group] = ['a', 'b', 'c', 'd'];
151-
152-
this.expandedGroup = group;
195+
onExpandGroup(item) {
196+
// We might want to asynchronously prefetch data for expanded group
153197
}
154-
}
198+
}
155199
}
156200
</script>
157201
```
@@ -163,34 +207,18 @@ Props:
163207
| items | list of items | [] or {} for Nested/Expanding List |
164208
| renderAhead | number of buffered items at the top/bottom | 2 |
165209
| estimatedHeight | approximated value of each row height | 30 |
166-
| expandedGroup | key of expanded group - only for ExpandingList | '' |
210+
| expanded | the flag which toggles between state of all items - only for ExpandingList | '' |
167211

168212
Events:
169213

170214
- expand: click event for group element which toggles between visible state of group items - only for ExpandingList
171215

172216
### Tips
173217

174-
Do not use margin directly for styling node items! Height won't be measured well.
175-
{: .alert .alert-danger}
218+
> :error: Do not use margin directly for styling node items! Height won't be measured well.
176219
177-
Each virtualized component by default will expand height by 100%, to override it and make things happening you either have to set height / max-height of component or by implementing dynamic height content with flexbox / grid.
178-
{: .alert .alert-info}
220+
> :information_source: Each virtualized component by default will fully expand, to make things happening you either have to set height / max-height of component or by implementing dynamic height content with flexbox / grid.
179221
180222
## License
181223

182224
[MIT](http://opensource.org/licenses/MIT)
183-
184-
<style>
185-
.alert-info {
186-
color: rgb(49,112,143) !important;
187-
}
188-
189-
.alert-green {
190-
color: rgb(60,118,61) !important;
191-
}
192-
193-
.alert-danger {
194-
color: rgb(169,68,66) !important;
195-
}
196-
</style>

‎dev/serve.vue‎

Lines changed: 3 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,14 @@
11
<script>
22
import Vue from 'vue';
3-
import ExpandingList from '@/components/ExpandingList';
4-
import VirtualScroll from '@/components/VirtualScroll';
53
64
export default Vue.extend({
75
name: 'ServeDev',
8-
components: {
9-
ExpandingList,
10-
VirtualScroll,
11-
},
12-
data() {
13-
return {
14-
expandedGroup: -1,
15-
flatItems: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
16-
items: {
17-
number: [
18-
1,
19-
2,
20-
3,
21-
4,
22-
5,
23-
6,
24-
7,
25-
8,
26-
9,
27-
4,
28-
21,
29-
3,
30-
213,
31-
32,
32-
123,
33-
312,
34-
231,
35-
321,
36-
321,
37-
321,
38-
321,
39-
1,
40-
2,
41-
3,
42-
4,
43-
5,
44-
6,
45-
7,
46-
8,
47-
9,
48-
4,
49-
21,
50-
3,
51-
213,
52-
32,
53-
123,
54-
312,
55-
231,
56-
321,
57-
321,
58-
321,
59-
321,
60-
1,
61-
2,
62-
3,
63-
4,
64-
5,
65-
6,
66-
7,
67-
8,
68-
9,
69-
4,
70-
21,
71-
3,
72-
213,
73-
32,
74-
123,
75-
312,
76-
231,
77-
321,
78-
321,
79-
321,
80-
321,
81-
],
82-
string: [],
83-
},
84-
title: 'Take an action',
85-
isVisible: false,
86-
};
87-
},
88-
methods: {
89-
onExpandGroup(key) {
90-
this.expandedGroup = key;
91-
92-
if (key === 'string') {
93-
this.items.string = [
94-
'ads',
95-
'add',
96-
'asasa',
97-
'dasasd',
98-
'adsadsdsa',
99-
'12asdasdsad',
100-
'ads',
101-
'add',
102-
'asasa',
103-
'dasasd',
104-
'adsadsdsa',
105-
'12asdasdsad',
106-
'ads',
107-
'add',
108-
'asasa',
109-
'dasasd',
110-
'adsadsdsa',
111-
'12asdasdsad',
112-
'ads',
113-
'add',
114-
'asasa',
115-
'dasasd',
116-
'adsadsdsa',
117-
'12asdasdsad',
118-
];
119-
}
120-
},
121-
},
6+
components: {},
1227
});
1238
</script>
1249

12510
<template>
126-
<div id="app">
127-
<div class="horizontal-wrapper">
128-
<button @click="isVisible = !isVisible">On visibility change</button>
129-
<ExpandingList
130-
style="height: 100px"
131-
:items="items"
132-
:expanded-group="expandedGroup"
133-
@expand="onExpandGroup">
134-
<template #group="{ item }">
135-
<span v-text="item" />
136-
</template>
137-
<template #item="{ item }">
138-
<li v-text="item" />
139-
</template>
140-
</ExpandingList>
141-
<VirtualScroll style="height: 100px" v-show="isVisible" :items="flatItems">
142-
<template #item="{ item }">
143-
<li v-text="item" />
144-
</template>
145-
</VirtualScroll>
146-
</div>
147-
</div>
11+
<div id="app" />
14812
</template>
14913

150-
<style lang="scss" scoped>
151-
.horizontal-wrapper {
152-
display: grid;
153-
grid-column-gap: 24px;
154-
grid-template-columns: max-content max-content;
155-
}
156-
</style>
14+
<style lang="scss" scoped />

0 commit comments

Comments
 (0)