Skip to content

Commit a7fe198

Browse files
mfuumfuu
committed
docs: update examples
1 parent 79dd2c7 commit a7fe198

File tree

15 files changed

+60
-108
lines changed

15 files changed

+60
-108
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@ defaults:
1111
run:
1212
working-directory: ./docs
1313

14-
defaults:
15-
run:
16-
working-directory: ./docs
17-
1814
permissions:
1915
contents: write
2016

‎docs/.vitepress/config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@ export default defineConfig({
4545
'/demo/': {
4646
base: '/demo/',
4747
items: [
48-
{ text: 'Basic', link: 'index' },
48+
{ text: 'Basic', link: 'basic' },
4949
{ text: 'Group', link: 'group' },
5050
{ text: 'Infinity', link: 'infinity' },
5151
{ text: 'Horizontal', link: 'horizontal' },
52-
{ text: 'Customize scroller', link: 'scroller' },
5352
{ text: 'Scroll To', link: 'scrollto' },
5453
{ text: 'Table Mode', link: 'table' },
54+
{ text: 'Customize Scroller', link: 'scroller' },
5555
],
5656
},
5757
},

‎docs/components/basic.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
:keeps="15"
55
data-key="id"
66
handle=".handle"
7+
chosen-class="chosen"
78
class="basic-list"
89
>
910
<template v-slot:item="{ record, index, dateKey }">
@@ -37,9 +38,10 @@ export default {
3738
<style scoped>
3839
.basic-list {
3940
height: 500px;
41+
padding: 5px;
4042
}
4143
42-
.basic-list .list-item {
44+
.list-item {
4345
position: relative;
4446
border-radius: 5px;
4547
box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -59,4 +61,8 @@ export default {
5961
cursor: grab;
6062
text-align: right;
6163
}
64+
65+
.chosen {
66+
box-shadow: 0px 0px 0px 2px #30a46c;
67+
}
6268
</style>

‎docs/components/group.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
data-key="id"
77
handle=".handle"
88
:group="group"
9+
chosen-class="chosen"
910
class="virtual-list"
1011
>
1112
<template v-slot:item="{ record, index, dateKey }">
1213
<div class="list-item">
1314
<div class="item-title">
14-
<span class="index">#{{ index }}</span>
15+
<span class="index"># {{ index }}-{{ record.name }}</span>
1516
<span class="handle">☰</span>
1617
</div>
17-
<p>{{ record.desc }}</p>
1818
</div>
1919
</template>
2020
</virtual-list>
@@ -25,15 +25,15 @@
2525
data-key="id"
2626
handle=".handle"
2727
:group="group"
28+
chosen-class="chosen"
2829
class="virtual-list"
2930
>
3031
<template v-slot:item="{ record, index, dateKey }">
3132
<div class="list-item">
3233
<div class="item-title">
33-
<span class="index">#{{ index }}</span>
34+
<span class="index"># {{ index }}-{{ record.name }}</span>
3435
<span class="handle">☰</span>
3536
</div>
36-
<p>{{ record.desc }}</p>
3737
</div>
3838
</template>
3939
</virtual-list>
@@ -64,17 +64,20 @@ export default {
6464
justify-content: space-between;
6565
}
6666
67-
.group-list .virtual-list {
67+
.virtual-list {
6868
height: 500px;
6969
width: 49%;
70+
padding: 5px;
7071
display: inline-block;
7172
}
7273
73-
.group-list .list-item {
74+
.list-item {
7475
position: relative;
7576
border-radius: 5px;
7677
box-shadow: 0px 2px 10px -5px #57bbb4;
7778
padding: 16px;
79+
height: 50px;
80+
overflow: hidden;
7881
}
7982
8083
.item-title {
@@ -90,4 +93,8 @@ export default {
9093
cursor: grab;
9194
text-align: right;
9295
}
96+
97+
.chosen {
98+
box-shadow: 0px 0px 0px 2px #30a46c;
99+
}
93100
</style>

‎docs/components/horizontal.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
handle=".handle"
77
direction="horizontal"
88
class="horizontal-list"
9+
chosen-class="chosen"
910
:wrap-style="{ display: 'flex' }"
1011
>
1112
<template v-slot:item="{ record, index, dateKey }">
@@ -39,9 +40,11 @@ export default {
3940
<style scoped>
4041
.horizontal-list {
4142
height: 500px;
43+
display: flex;
44+
padding: 5px;
4245
}
4346
44-
.horizontal-list .list-item {
47+
.list-item {
4548
position: relative;
4649
border-radius: 5px;
4750
box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -62,4 +65,8 @@ export default {
6265
cursor: grab;
6366
text-align: right;
6467
}
68+
69+
.chosen {
70+
box-shadow: 0px 0px 0px 2px #30a46c;
71+
}
6572
</style>

‎docs/components/infinity.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
data-key="id"
66
handle=".handle"
77
class="infinity-list"
8+
chosen-class="chosen"
89
@bottom="bottomLoading"
910
>
1011
<template v-slot:item="{ record, index, dateKey }">
@@ -52,9 +53,10 @@ export default {
5253
<style scoped>
5354
.infinity-list {
5455
height: 500px;
56+
padding: 5px;
5557
}
5658
57-
.infinity-list .list-item {
59+
.list-item {
5860
position: relative;
5961
border-radius: 5px;
6062
box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -75,6 +77,10 @@ export default {
7577
text-align: right;
7678
}
7779
80+
.chosen {
81+
box-shadow: 0px 0px 0px 2px #30a46c;
82+
}
83+
7884
.footer {
7985
height: 50px;
8086
display: flex;

‎docs/components/scroller.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
data-key="id"
66
handle=".handle"
77
:scroller="scroller"
8+
chosen-class="chosen"
89
class="window-scroll"
910
>
1011
<template v-slot:item="{ record, index, dateKey }">
@@ -37,7 +38,7 @@ export default {
3738
</script>
3839

3940
<style scoped>
40-
.window-scroll .list-item {
41+
.list-item {
4142
position: relative;
4243
border-radius: 5px;
4344
box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -57,4 +58,8 @@ export default {
5758
cursor: grab;
5859
text-align: right;
5960
}
61+
62+
.chosen {
63+
box-shadow: 0px 0px 0px 2px #30a46c;
64+
}
6065
</style>

‎docs/components/scrollto.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
:keeps="15"
1616
data-key="id"
1717
handle=".handle"
18+
chosen-class="chosen"
1819
class="scrollto-list"
1920
>
2021
<template v-slot:item="{ record, index, dateKey }">
@@ -71,9 +72,10 @@ export default {
7172
7273
.scrollto-list {
7374
height: 500px;
75+
padding: 5px;
7476
}
7577
76-
.scrollto-list .list-item {
78+
.list-item {
7779
position: relative;
7880
border-radius: 5px;
7981
box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -94,6 +96,10 @@ export default {
9496
text-align: right;
9597
}
9698
99+
.chosen {
100+
box-shadow: 0px 0px 0px 2px #30a46c;
101+
}
102+
97103
input {
98104
width: 55px;
99105
border: 1px solid #aaa;

‎docs/components/table.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
data-key="id"
66
handle=".handle"
77
class="table-list"
8+
chosen-class="chosen"
89
:table-mode="true"
910
>
1011
<template v-slot:header>
@@ -48,9 +49,10 @@ export default {
4849
<style scoped>
4950
.table-list {
5051
height: 500px;
52+
padding: 5px;
5153
}
5254
53-
.table-list .list-item {
55+
.list-item {
5456
position: relative;
5557
border-radius: 5px;
5658
box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -70,4 +72,8 @@ export default {
7072
cursor: grab;
7173
text-align: right;
7274
}
75+
76+
.chosen {
77+
box-shadow: 0px 0px 0px 2px #30a46c;
78+
}
7379
</style>

‎docs/demo/group.md‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,4 @@
22

33
Drag and drop between groups
44

5-
**Key Code**
6-
```vue
7-
<virtual-list
8-
...
9-
:group="group"
10-
>
11-
...
12-
</virtual-list>
13-
<script setup>
14-
const group = reactive({
15-
name: 'name',
16-
pull: true,
17-
put: true,
18-
});
19-
</script>
20-
```
21-
225
<preview path="../components/group.vue" />

0 commit comments

Comments
 (0)