Skip to content

Commit f8b292d

Browse files
David-DesmaisonsDavid-Desmaisons
authored
Merge pull request SortableJS#2 from SortableJS/slot-item
Slot item
2 parents b5fd01f + 42cf471 commit f8b292d

38 files changed

+915
-493
lines changed

‎example/components/clone-on-control.vue

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,29 @@
88
:clone="clone"
99
:group="{ name: 'people', pull: pullFunction }"
1010
@start="start"
11+
item-key="id"
1112
>
12-
<div class="list-group-item" v-for="element in list1" :key="element.id">
13-
{{ element.name }}
14-
</div>
13+
<template #item="{ element }">
14+
<div class="list-group-item">
15+
{{ element.name }}
16+
</div>
17+
</template>
1518
</draggable>
1619
</div>
1720

1821
<div class="col-3">
1922
<h3>Draggable 2</h3>
20-
<draggable class="dragArea list-group" :list="list2" group="people">
21-
<div class="list-group-item" v-for="element in list2" :key="element.id">
22-
{{ element.name }}
23-
</div>
23+
<draggable
24+
class="dragArea list-group"
25+
:list="list2"
26+
group="people"
27+
item-key="id"
28+
>
29+
<template #item="{ element }">
30+
<div class="list-group-item">
31+
{{ element.name }}
32+
</div>
33+
</template>
2434
</draggable>
2535
</div>
2636

‎example/components/clone.vue

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@
77
:list="list1"
88
:group="{ name: 'people', pull: 'clone', put: false }"
99
@change="log"
10+
item-key="name"
1011
>
11-
<div
12-
class="list-group-item"
13-
v-for="element in list1"
14-
:key="element.name"
15-
>
16-
{{ element.name }}
17-
</div>
12+
<template #item="{ element }">
13+
<div class="list-group-item">
14+
{{ element.name }}
15+
</div>
16+
</template>
1817
</draggable>
1918
</div>
2019

@@ -25,14 +24,13 @@
2524
:list="list2"
2625
group="people"
2726
@change="log"
27+
item-key="name"
2828
>
29-
<div
30-
class="list-group-item"
31-
v-for="element in list2"
32-
:key="element.name"
33-
>
34-
{{ element.name }}
35-
</div>
29+
<template #item="{ element }">
30+
<div class="list-group-item">
31+
{{ element.name }}
32+
</div>
33+
</template>
3634
</draggable>
3735
</div>
3836

‎example/components/custom-clone.vue

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@
88
:group="{ name: 'people', pull: 'clone', put: false }"
99
:clone="cloneDog"
1010
@change="log"
11+
item-key="id"
1112
>
12-
<div class="list-group-item" v-for="element in list1" :key="element.id">
13-
{{ element.name }}
14-
</div>
13+
<template #item="{ element }">
14+
<div class="list-group-item">
15+
{{ element.name }}
16+
</div>
17+
</template>
1518
</draggable>
1619
</div>
1720

@@ -22,10 +25,13 @@
2225
:list="list2"
2326
group="people"
2427
@change="log"
28+
item-key="id"
2529
>
26-
<div class="list-group-item" v-for="element in list2" :key="element.id">
27-
{{ element.name }}
28-
</div>
30+
<template #item="{ element }">
31+
<div class="list-group-item">
32+
{{ element.name }}
33+
</div>
34+
</template>
2935
</draggable>
3036
</div>
3137

‎example/components/footerslot.vue

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,18 @@
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"
13+
item-key="name"
1514
>
16-
<div
17-
class="list-group-item item"
18-
v-for="element in list"
19-
:key="element.name"
20-
>
21-
{{ element.name }}
22-
</div>
15+
<template #item="{ element }">
16+
<div class="list-group-item">
17+
{{ element.name }}
18+
</div>
19+
</template>
2320

24-
<template v-slot:footer>
21+
<template #footer>
2522
<div
2623
class="btn-group list-group-item"
2724
role="group"
@@ -58,10 +55,8 @@ export default {
5855
],
5956
dragging: false,
6057
componentData: {
61-
props: {
62-
type: "transition",
63-
name: "flip-list"
64-
}
58+
type: "transition",
59+
name: "flip-list"
6560
}
6661
};
6762
},

‎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: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,28 @@
66
<draggable
77
:list="list"
88
class="list-group"
9-
draggable=".item"
109
@start="dragging = true"
1110
@end="dragging = false"
11+
@change="log"
12+
item-key="name"
1213
>
13-
<div
14-
class="list-group-item item"
15-
v-for="element in list"
16-
:key="element.name"
17-
>
18-
{{ element.name }}
19-
</div>
20-
21-
<template v-slot:header>
22-
<div
23-
class="btn-group list-group-item"
24-
role="group"
25-
aria-label="Basic example"
26-
>
14+
<template #header>
15+
<div class="btn-group list-group-item" role="group">
2716
<button class="btn btn-secondary" @click="add">Add</button>
17+
</div>
18+
</template>
19+
20+
<template #footer>
21+
<div class="btn-group list-group-item" role="group">
2822
<button class="btn btn-secondary" @click="replace">Replace</button>
2923
</div>
3024
</template>
25+
26+
<template #item="{ element }">
27+
<div class="list-group-item item">
28+
{{ element.name }}
29+
</div>
30+
</template>
3131
</draggable>
3232
</div>
3333

@@ -61,6 +61,9 @@ export default {
6161
},
6262
replace: function() {
6363
this.list = [{ name: "Edgard", id: id++ }];
64+
},
65+
log: function(evt) {
66+
window.console.log(evt);
6467
}
6568
}
6669
};

‎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/simple.vue

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,18 @@
2929
<draggable
3030
:list="list"
3131
:disabled="!enabled"
32+
item-key="name"
3233
class="list-group"
3334
ghost-class="ghost"
3435
:move="checkMove"
3536
@start="dragging = true"
3637
@end="dragging = false"
3738
>
38-
<div
39-
class="list-group-item"
40-
:class="{ 'not-draggable': !enabled }"
41-
v-for="element in list"
42-
:key="element.name"
43-
>
44-
{{ element.name }}
45-
</div>
39+
<template #item="{ element }">
40+
<div class="list-group-item" :class="{ 'not-draggable': !enabled }">
41+
{{ element.name }}
42+
</div>
43+
</template>
4644
</draggable>
4745
</div>
4846

‎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>

0 commit comments

Comments
 (0)