Skip to content

Commit c744d6f

Browse files
benjamincanacbenjamincanac
authored
feat(components): implement virtualization (#5162)
1 parent 27b8f0d commit c744d6f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+2091
-959
lines changed

‎docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ const groups = [
3636
target: '_blank'
3737
},
3838
{
39-
label: 'Sylvain Marroufin',
40-
suffix: 'smarroufin',
41-
to: 'https://github.com/smarroufin',
39+
label: 'Romain Hamel',
40+
suffix: 'romhml',
41+
to: 'https://github.com/romhml',
4242
target: '_blank'
4343
},
4444
{
@@ -48,15 +48,15 @@ const groups = [
4848
target: '_blank'
4949
},
5050
{
51-
label: 'Romain Hamel',
52-
suffix: 'romhml',
53-
to: 'https://github.com/romhml',
51+
label: 'Hugo Richard',
52+
suffix: 'HugoRCD',
53+
to: 'https://github.com/HugoRCD',
5454
target: '_blank'
5555
},
5656
{
57-
label: 'Haytham A. Salama',
58-
suffix: 'Haythamasalama',
59-
to: 'https://github.com/Haythamasalama',
57+
label: 'Sandro Circi',
58+
suffix: 'sandros94',
59+
to: 'https://github.com/sandros94',
6060
target: '_blank'
6161
},
6262
{
@@ -66,9 +66,15 @@ const groups = [
6666
target: '_blank'
6767
},
6868
{
69-
label: 'Neil Richter',
70-
suffix: 'noook',
71-
to: 'https://github.com/noook',
69+
label: 'Jakub Michálek',
70+
suffix: 'J-Michalek',
71+
to: 'https://github.com/J-Michalek',
72+
target: '_blank'
73+
},
74+
{
75+
label: 'Eugen Istoc',
76+
suffix: 'genu',
77+
to: 'https://github.com/genu',
7278
target: '_blank'
7379
}
7480
]

‎docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ const users = [
1212
}
1313
},
1414
{
15-
label: 'Sylvain Marroufin',
16-
suffix: 'smarroufin',
17-
to: 'https://github.com/smarroufin',
15+
label: 'Romain Hamel',
16+
suffix: 'romhml',
17+
to: 'https://github.com/romhml',
1818
target: '_blank',
1919
avatar: {
20-
src: 'https://github.com/smarroufin.png'
20+
src: 'https://github.com/romhml.png'
2121
}
2222
},
2323
{
@@ -30,21 +30,21 @@ const users = [
3030
}
3131
},
3232
{
33-
label: 'Romain Hamel',
34-
suffix: 'romhml',
35-
to: 'https://github.com/romhml',
33+
label: 'Hugo Richard',
34+
suffix: 'HugoRCD',
35+
to: 'https://github.com/HugoRCD',
3636
target: '_blank',
3737
avatar: {
38-
src: 'https://github.com/romhml.png'
38+
src: 'https://github.com/HugoRCD.png'
3939
}
4040
},
4141
{
42-
label: 'Haytham A. Salama',
43-
suffix: 'Haythamasalama',
44-
to: 'https://github.com/Haythamasalama',
42+
label: 'Sandro Circi',
43+
suffix: 'sandros94',
44+
to: 'https://github.com/sandros94',
4545
target: '_blank',
4646
avatar: {
47-
src: 'https://github.com/Haythamasalama.png'
47+
src: 'https://github.com/sandros94.png'
4848
}
4949
},
5050
{
@@ -57,12 +57,21 @@ const users = [
5757
}
5858
},
5959
{
60-
label: 'Neil Richter',
61-
suffix: 'noook',
62-
to: 'https://github.com/noook',
60+
label: 'Jakub Michálek',
61+
suffix: 'J-Michalek',
62+
to: 'https://github.com/J-Michalek',
63+
target: '_blank',
64+
avatar: {
65+
src: 'https://github.com/J-Michalek.png'
66+
}
67+
},
68+
{
69+
label: 'Eugen Istoc',
70+
suffix: 'genu',
71+
to: 'https://github.com/genu',
6372
target: '_blank',
6473
avatar: {
65-
src: 'https://github.com/noook.png'
74+
src: 'https://github.com/genu.png'
6675
}
6776
}
6877
]

‎docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ const users = [
1010
}
1111
},
1212
{
13-
label: 'Sylvain Marroufin',
14-
suffix: 'smarroufin',
15-
to: 'https://github.com/smarroufin',
13+
label: 'Romain Hamel',
14+
suffix: 'romhml',
15+
to: 'https://github.com/romhml',
1616
target: '_blank',
1717
avatar: {
18-
src: 'https://github.com/smarroufin.png'
18+
src: 'https://github.com/romhml.png'
1919
}
2020
},
2121
{
@@ -28,21 +28,21 @@ const users = [
2828
}
2929
},
3030
{
31-
label: 'Romain Hamel',
32-
suffix: 'romhml',
33-
to: 'https://github.com/romhml',
31+
label: 'Hugo Richard',
32+
suffix: 'HugoRCD',
33+
to: 'https://github.com/HugoRCD',
3434
target: '_blank',
3535
avatar: {
36-
src: 'https://github.com/romhml.png'
36+
src: 'https://github.com/HugoRCD.png'
3737
}
3838
},
3939
{
40-
label: 'Haytham A. Salama',
41-
suffix: 'Haythamasalama',
42-
to: 'https://github.com/Haythamasalama',
40+
label: 'Sandro Circi',
41+
suffix: 'sandros94',
42+
to: 'https://github.com/sandros94',
4343
target: '_blank',
4444
avatar: {
45-
src: 'https://github.com/Haythamasalama.png'
45+
src: 'https://github.com/sandros94.png'
4646
}
4747
},
4848
{
@@ -55,12 +55,21 @@ const users = [
5555
}
5656
},
5757
{
58-
label: 'Neil Richter',
59-
suffix: 'noook',
60-
to: 'https://github.com/noook',
58+
label: 'Jakub Michálek',
59+
suffix: 'J-Michalek',
60+
to: 'https://github.com/J-Michalek',
61+
target: '_blank',
62+
avatar: {
63+
src: 'https://github.com/J-Michalek.png'
64+
}
65+
},
66+
{
67+
label: 'Eugen Istoc',
68+
suffix: 'genu',
69+
to: 'https://github.com/genu',
6170
target: '_blank',
6271
avatar: {
63-
src: 'https://github.com/noook.png'
72+
src: 'https://github.com/genu.png'
6473
}
6574
}
6675
]

‎docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ const groups = ref([
1616
}
1717
},
1818
{
19-
label: 'Sylvain Marroufin',
20-
suffix: 'smarroufin',
21-
to: 'https://github.com/smarroufin',
19+
label: 'Romain Hamel',
20+
suffix: 'romhml',
21+
to: 'https://github.com/romhml',
2222
target: '_blank',
2323
avatar: {
24-
src: 'https://github.com/smarroufin.png'
24+
src: 'https://github.com/romhml.png'
2525
}
2626
},
2727
{
@@ -34,21 +34,21 @@ const groups = ref([
3434
}
3535
},
3636
{
37-
label: 'Romain Hamel',
38-
suffix: 'romhml',
39-
to: 'https://github.com/romhml',
37+
label: 'Hugo Richard',
38+
suffix: 'HugoRCD',
39+
to: 'https://github.com/HugoRCD',
4040
target: '_blank',
4141
avatar: {
42-
src: 'https://github.com/romhml.png'
42+
src: 'https://github.com/HugoRCD.png'
4343
}
4444
},
4545
{
46-
label: 'Haytham A. Salama',
47-
suffix: 'Haythamasalama',
48-
to: 'https://github.com/Haythamasalama',
46+
label: 'Sandro Circi',
47+
suffix: 'sandros94',
48+
to: 'https://github.com/sandros94',
4949
target: '_blank',
5050
avatar: {
51-
src: 'https://github.com/Haythamasalama.png'
51+
src: 'https://github.com/sandros94.png'
5252
}
5353
},
5454
{
@@ -61,12 +61,21 @@ const groups = ref([
6161
}
6262
},
6363
{
64-
label: 'Neil Richter',
65-
suffix: 'noook',
66-
to: 'https://github.com/noook',
64+
label: 'Jakub Michálek',
65+
suffix: 'J-Michalek',
66+
to: 'https://github.com/J-Michalek',
67+
target: '_blank',
68+
avatar: {
69+
src: 'https://github.com/J-Michalek.png'
70+
}
71+
},
72+
{
73+
label: 'Eugen Istoc',
74+
suffix: 'genu',
75+
to: 'https://github.com/genu',
6776
target: '_blank',
6877
avatar: {
69-
src: 'https://github.com/noook.png'
78+
src: 'https://github.com/genu.png'
7079
}
7180
}
7281
]

‎docs/app/components/content/examples/command-palette/CommandPaletteVirtualizeExample.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
import type { CommandPaletteItem } from '@nuxt/ui'
3+
4+
const items: CommandPaletteItem[] = Array(1000)
5+
.fill(0)
6+
.map((_, value) => ({
7+
label: `item-${value}`,
8+
value
9+
}))
10+
11+
const groups = [
12+
{
13+
id: 'items',
14+
items
15+
}
16+
]
17+
</script>
18+
19+
<template>
20+
<UCommandPalette
21+
virtualize
22+
:fuse="{ resultLimit: 1000 }"
23+
:groups="groups"
24+
class="flex-1 h-80"
25+
/>
26+
</template>

‎docs/app/components/content/examples/input-menu/InputMenuVirtualizeExample.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script setup lang="ts">
2+
import type { InputMenuItem } from '@nuxt/ui'
3+
4+
const items: InputMenuItem[] = Array(1000).fill(0).map((_, i) => ({
5+
label: `item-${i}`,
6+
value: i
7+
}))
8+
</script>
9+
10+
<template>
11+
<UInputMenu virtualize :items="items" class="w-48" />
12+
</template>

‎docs/app/components/content/examples/page/PageListDivideExample.vue‎

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ const users = ref([
1111
}
1212
},
1313
{
14-
name: 'Sylvain Marroufin',
15-
description: 'smarroufin',
16-
to: 'https://github.com/smarroufin',
14+
name: 'Romain Hamel',
15+
description: 'romhml',
16+
to: 'https://github.com/romhml',
1717
target: '_blank',
1818
avatar: {
19-
src: 'https://github.com/smarroufin.png',
20-
alt: 'smarroufin'
19+
src: 'https://github.com/romhml.png',
20+
alt: 'romhml'
2121
}
2222
},
2323
{
@@ -31,13 +31,53 @@ const users = ref([
3131
}
3232
},
3333
{
34-
name: 'Romain Hamel',
35-
description: 'romhml',
36-
to: 'https://github.com/romhml',
34+
name: 'Hugo Richard',
35+
description: 'HugoRCD',
36+
to: 'https://github.com/HugoRCD',
3737
target: '_blank',
3838
avatar: {
39-
src: 'https://github.com/romhml.png',
40-
alt: 'romhml'
39+
src: 'https://github.com/HugoRCD.png',
40+
alt: 'HugoRCD'
41+
}
42+
},
43+
{
44+
name: 'Sandro Circi',
45+
description: 'sandros94',
46+
to: 'https://github.com/sandros94',
47+
target: '_blank',
48+
avatar: {
49+
src: 'https://github.com/sandros94.png',
50+
alt: 'sandros94'
51+
}
52+
},
53+
{
54+
name: 'Daniel Roe',
55+
description: 'danielroe',
56+
to: 'https://github.com/danielroe',
57+
target: '_blank',
58+
avatar: {
59+
src: 'https://github.com/danielroe.png',
60+
alt: 'danielroe'
61+
}
62+
},
63+
{
64+
name: 'Jakub Michálek',
65+
description: 'J-Michalek',
66+
to: 'https://github.com/J-Michalek',
67+
target: '_blank',
68+
avatar: {
69+
src: 'https://github.com/J-Michalek.png',
70+
alt: 'J-Michalek'
71+
}
72+
},
73+
{
74+
name: 'Eugen Istoc',
75+
description: 'genu',
76+
to: 'https://github.com/genu',
77+
target: '_blank',
78+
avatar: {
79+
src: 'https://github.com/genu.png',
80+
alt: 'genu'
4181
}
4282
}
4383
])

0 commit comments

Comments
 (0)