Skip to content

Commit ed8c75c

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Adding item-key as function support + correcting index computation
1 parent 25581de commit ed8c75c

File tree

15 files changed

+104
-140
lines changed

15 files changed

+104
-140
lines changed

‎example/components/footerslot.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,13 @@
77
tag="transition-group"
88
:componentData="componentData"
99
:list="list"
10-
class="list-group"
11-
draggable=".item"
1210
:animation="100"
1311
@start="dragging = true"
1412
@end="dragging = false"
1513
item-key="name"
1614
>
1715
<template #item="{ element }">
18-
<div class="list-group-item item">
16+
<div class="list-group-item">
1917
{{ element.name }}
2018
</div>
2119
</template>

‎example/components/handle.vue‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,24 @@
77
<div class="col-7">
88
<h3>Draggable {{ draggingInfo }}</h3>
99

10-
<draggable tag="ul" :list="list" class="list-group" handle=".handle">
11-
<li
12-
class="list-group-item"
13-
v-for="(element, idx) in list"
14-
:key="element.name"
15-
>
16-
<i class="fa fa-align-justify handle"></i>
10+
<draggable
11+
tag="ul"
12+
:list="list"
13+
class="list-group"
14+
handle=".handle"
15+
item-key="name"
16+
>
17+
<template #item="{ element, index }">
18+
<li class="list-group-item">
19+
<i class="fa fa-align-justify handle"></i>
1720

18-
<span class="text">{{ element.name }} </span>
21+
<span class="text">{{ element.name }} </span>
1922

20-
<input type="text" class="form-control" v-model="element.text" />
23+
<input type="text" class="form-control" v-model="element.text" />
2124

22-
<i class="fa fa-times close" @click="removeAt(idx)"></i>
23-
</li>
25+
<i class="fa fa-times close" @click="removeAt(index)"></i>
26+
</li>
27+
</template>
2428
</draggable>
2529
</div>
2630

‎example/components/headerslot.vue‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,13 @@
1111
item-key="name"
1212
>
1313
<template #header>
14-
<div
15-
class="btn-group list-group-item"
16-
role="group"
17-
aria-label="Basic example"
18-
>
14+
<div class="btn-group list-group-item" role="group">
1915
<button class="btn btn-secondary" @click="add">Add</button>
2016
</div>
2117
</template>
2218

2319
<template #footer>
24-
<div
25-
class="btn-group list-group-item"
26-
role="group"
27-
aria-label="Basic example"
28-
>
20+
<div class="btn-group list-group-item" role="group">
2921
<button class="btn btn-secondary" @click="replace">Replace</button>
3022
</div>
3123
</template>

‎example/components/infra/nested.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
<template>
2-
<draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
3-
<li v-for="el in tasks" :key="el.name">
4-
<p>{{ el.name }}</p>
5-
<nested-draggable :tasks="el.tasks" />
6-
</li>
2+
<draggable
3+
class="dragArea"
4+
tag="ul"
5+
:list="tasks"
6+
:group="{ name: 'g1' }"
7+
item-key="name"
8+
>
9+
<template #item="{ element }">
10+
<li>
11+
<p>{{ element.name }}</p>
12+
<nested-draggable :tasks="element.tasks" />
13+
</li>
14+
</template>
715
</draggable>
816
</template>
917
<script>

‎example/components/nested-with-vmodel.vue‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎example/components/table-column-example.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55

66
<table class="table table-striped">
77
<thead class="thead-dark">
8-
<draggable v-model="headers" tag="tr">
9-
<th v-for="header in headers" :key="header" scope="col">
10-
{{ header }}
11-
</th>
8+
<draggable v-model="headers" tag="tr" :item-key="key => key">
9+
<template #item="{ element: header }">
10+
<th scope="col">
11+
{{ header }}
12+
</th>
13+
</template>
1214
</draggable>
1315
</thead>
1416
<tbody>

‎example/components/table-example.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@
1111
<th scope="col">Sport</th>
1212
</tr>
1313
</thead>
14-
<draggable v-model="list" tag="tbody">
15-
<tr v-for="item in list" :key="item.name">
16-
<td scope="row">{{ item.id }}</td>
17-
<td>{{ item.name }}</td>
18-
<td>{{ item.sport }}</td>
19-
</tr>
14+
<draggable v-model="list" tag="tbody" item-key="name">
15+
<template #item="{ element }">
16+
<tr>
17+
<td scope="row">{{ element.id }}</td>
18+
<td>{{ element.name }}</td>
19+
<td>{{ element.sport }}</td>
20+
</tr>
21+
</template>
2022
</draggable>
2123
</table>
2224
</div>

‎example/components/transition-example.vue‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@
44
<button class="btn btn-secondary button" @click="sort">
55
To original order
66
</button>
7-
8-
<button class="btn btn-secondary button" @click="add">
9-
Add \
10-
</button>
117
</div>
128

139
<div class="col-6">
@@ -72,9 +68,6 @@ export default {
7268
methods: {
7369
sort() {
7470
this.list = this.list.sort((a, b) => a.order - b.order);
75-
},
76-
add() {
77-
this.list.push({ name: "nanannana", order: ++order });
7871
}
7972
},
8073
computed: {

‎example/components/two-list-headerslots.vue‎

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,17 @@
88
data-source="juju"
99
:list="list"
1010
class="list-group"
11-
draggable=".item"
1211
group="a"
12+
item-key="name"
1313
>
14-
<div
15-
class="list-group-item item"
16-
v-for="element in list"
17-
:key="element.name"
18-
>
19-
{{ element.name }}
20-
</div>
14+
<template #item="{ element }">
15+
<div class="list-group-item">
16+
{{ element.name }}
17+
</div>
18+
</template>
2119

22-
<template v-slot:footer>
23-
<div
24-
class="btn-group list-group-item"
25-
role="group"
26-
aria-label="Basic example"
27-
>
20+
<template #footer>
21+
<div class="btn-group list-group-item" role="group">
2822
<button class="btn btn-secondary" @click="add">Add</button>
2923
<button class="btn btn-secondary" @click="replace">Replace</button>
3024
</div>
@@ -35,16 +29,14 @@
3529
<div class="col-4">
3630
<h3>Second draggable with header</h3>
3731

38-
<draggable :list="list2" class="list-group" draggable=".item" group="a">
39-
<div
40-
class="list-group-item item"
41-
v-for="element in list2"
42-
:key="element.name"
43-
>
44-
{{ element.name }}
45-
</div>
32+
<draggable :list="list2" class="list-group" group="a" item-key="name">
33+
<template #item="{ element }">
34+
<div class="list-group-item item">
35+
{{ element.name }}
36+
</div>
37+
</template>
4638

47-
<template v-slot:header>
39+
<template #header>
4840
<div
4941
class="btn-group list-group-item"
5042
role="group"

‎example/debug-components/nested/draggable-list.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@
66
ghost-class="ghost"
77
@start="dragging = true"
88
@end="dragging = false"
9+
item-key="name"
910
>
10-
<div class="list-group-item" v-for="element in list" :key="element.name">
11-
{{ element.name }}
12-
</div>
11+
<template #item="{ element }">
12+
<div class="list-group-item">
13+
{{ element.name }}
14+
</div>
15+
</template>
1316
</draggable>
1417
</template>
1518

0 commit comments

Comments
 (0)