Skip to content

Commit 11c2780

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Update live-documentaion
1 parent 5b08d27 commit 11c2780

File tree

12 files changed

+375
-380
lines changed

12 files changed

+375
-380
lines changed

‎docs/app.js

Lines changed: 65 additions & 65 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/App.vue

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<template>
22
<div id="app">
33
<div class="logo">
4-
<img alt="Vue logo" src="./assets/logo.png" />
4+
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank"
5+
><img alt="Vue logo" src="./assets/logo.png"
6+
/></a>
57
</div>
68

79
<div class="container ">
@@ -32,7 +34,23 @@
3234
v-for="component in componentList"
3335
:key="component.name"
3436
>
35-
<component :is="component.name"></component>
37+
<div class=" justify-content-center jumbotron">
38+
<div class="row icon">
39+
<a
40+
class="col-2 icon"
41+
target="_blank"
42+
:href="
43+
`https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/${
44+
component.name
45+
}.vue`
46+
"
47+
>
48+
<i class="fa fa-github icon-large"></i>
49+
</a>
50+
</div>
51+
52+
<component :is="component.name"></component>
53+
</div>
3654
</div>
3755
</div>
3856
</div>
@@ -109,4 +127,12 @@ export default {
109127
>>> h3 {
110128
font-size: 1.4em;
111129
}
130+
131+
.icon i {
132+
font-size: 24px;
133+
}
134+
135+
a {
136+
color: black;
137+
}
112138
</style>

‎example/components/clone.vue

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,44 @@
11
<template>
2-
<div class=" justify-content-center jumbotron">
3-
<div class="row">
4-
<div class="col-3">
5-
<h3>Draggable 1</h3>
6-
<draggable
7-
class="dragArea list-group"
8-
:list="list1"
9-
:options="{ group: { name: 'people', pull: 'clone', put: false } }"
10-
@change="log"
2+
<div class="row">
3+
<div class="col-3">
4+
<h3>Draggable 1</h3>
5+
<draggable
6+
class="dragArea list-group"
7+
:list="list1"
8+
:options="{ group: { name: 'people', pull: 'clone', put: false } }"
9+
@change="log"
10+
>
11+
<div
12+
class="list-group-item"
13+
v-for="element in list1"
14+
:key="element.name"
1115
>
12-
<div
13-
class="list-group-item"
14-
v-for="element in list1"
15-
:key="element.name"
16-
>
17-
{{ element.name }}
18-
</div>
19-
</draggable>
20-
</div>
16+
{{ element.name }}
17+
</div>
18+
</draggable>
19+
</div>
2120

22-
<div class="col-3">
23-
<h3>Draggable 2</h3>
24-
<draggable
25-
class="dragArea list-group"
26-
:list="list2"
27-
:options="{ group: 'people' }"
28-
@change="log"
21+
<div class="col-3">
22+
<h3>Draggable 2</h3>
23+
<draggable
24+
class="dragArea list-group"
25+
:list="list2"
26+
:options="{ group: 'people' }"
27+
@change="log"
28+
>
29+
<div
30+
class="list-group-item"
31+
v-for="element in list2"
32+
:key="element.name"
2933
>
30-
<div
31-
class="list-group-item"
32-
v-for="element in list2"
33-
:key="element.name"
34-
>
35-
{{ element.name }}
36-
</div>
37-
</draggable>
38-
</div>
34+
{{ element.name }}
35+
</div>
36+
</draggable>
37+
</div>
3938

40-
<rawDisplayer class="col-3" :value="list1" title="List 1" />
39+
<rawDisplayer class="col-3" :value="list1" title="List 1" />
4140

42-
<rawDisplayer class="col-3" :value="list2" title="List 2" />
43-
</div>
41+
<rawDisplayer class="col-3" :value="list2" title="List 2" />
4442
</div>
4543
</template>
4644

‎example/components/custom-clone.vue

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,37 @@
11
<template>
2-
<div class=" justify-content-center jumbotron">
3-
<div class="row">
4-
<div class="col-3">
5-
<h3>Draggable 1</h3>
6-
<draggable
7-
class="dragArea list-group"
8-
:list="list1"
9-
:options="{ group: { name: 'people', pull: 'clone', put: false } }"
10-
:clone="cloneDog"
11-
@change="log"
12-
>
13-
<div
14-
class="list-group-item"
15-
v-for="element in list1"
16-
:key="element.id"
17-
>
18-
{{ element.name }}
19-
</div>
20-
</draggable>
21-
</div>
2+
<div class="row">
3+
<div class="col-3">
4+
<h3>Draggable 1</h3>
5+
<draggable
6+
class="dragArea list-group"
7+
:list="list1"
8+
:options="{ group: { name: 'people', pull: 'clone', put: false } }"
9+
:clone="cloneDog"
10+
@change="log"
11+
>
12+
<div class="list-group-item" v-for="element in list1" :key="element.id">
13+
{{ element.name }}
14+
</div>
15+
</draggable>
16+
</div>
2217

23-
<div class="col-3">
24-
<h3>Draggable 2</h3>
25-
<draggable
26-
class="dragArea list-group"
27-
:list="list2"
28-
:options="{ group: 'people' }"
29-
@change="log"
30-
>
31-
<div
32-
class="list-group-item"
33-
v-for="element in list2"
34-
:key="element.id"
35-
>
36-
{{ element.name }}
37-
</div>
38-
</draggable>
39-
</div>
18+
<div class="col-3">
19+
<h3>Draggable 2</h3>
20+
<draggable
21+
class="dragArea list-group"
22+
:list="list2"
23+
:options="{ group: 'people' }"
24+
@change="log"
25+
>
26+
<div class="list-group-item" v-for="element in list2" :key="element.id">
27+
{{ element.name }}
28+
</div>
29+
</draggable>
30+
</div>
4031

41-
<rawDisplayer class="col-3" :value="list1" title="List 1" />
32+
<rawDisplayer class="col-3" :value="list1" title="List 1" />
4233

43-
<rawDisplayer class="col-3" :value="list2" title="List 2" />
44-
</div>
34+
<rawDisplayer class="col-3" :value="list2" title="List 2" />
4535
</div>
4636
</template>
4737

‎example/components/footerslot.vue

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,36 @@
11
<template>
2-
<div class="justify-content-center jumbotron">
3-
<div class="row">
4-
<div class="col-8">
5-
<h3>Draggable with footer</h3>
2+
<div class="row">
3+
<div class="col-8">
4+
<h3>Draggable with footer</h3>
65

7-
<draggable
8-
:list="list"
9-
class="list-group"
10-
:options="{ draggable: '.item' }"
11-
@start="dragging = true"
12-
@end="dragging = false"
6+
<draggable
7+
:list="list"
8+
class="list-group"
9+
:options="{ draggable: '.item' }"
10+
@start="dragging = true"
11+
@end="dragging = false"
12+
>
13+
<div
14+
class="list-group-item item"
15+
v-for="element in list"
16+
:key="element.name"
1317
>
14-
<div
15-
class="list-group-item item"
16-
v-for="element in list"
17-
:key="element.name"
18-
>
19-
{{ element.name }}
20-
</div>
18+
{{ element.name }}
19+
</div>
2120

22-
<div
23-
slot="footer"
24-
class="btn-group list-group-item"
25-
role="group"
26-
aria-label="Basic example"
27-
>
28-
<button class="btn btn-secondary" @click="add">Add</button>
29-
<button class="btn btn-secondary" @click="replace">Replace</button>
30-
</div>
31-
</draggable>
32-
</div>
33-
34-
<rawDisplayer class="col-3" :value="list" title="List" />
21+
<div
22+
slot="footer"
23+
class="btn-group list-group-item"
24+
role="group"
25+
aria-label="Basic example"
26+
>
27+
<button class="btn btn-secondary" @click="add">Add</button>
28+
<button class="btn btn-secondary" @click="replace">Replace</button>
29+
</div>
30+
</draggable>
3531
</div>
32+
33+
<rawDisplayer class="col-3" :value="list" title="List" />
3634
</div>
3735
</template>
3836

‎example/components/handle.vue

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,35 @@
11
<template>
2-
<div class="justify-content-center jumbotron">
3-
<div class="row">
4-
<div class="col-1">
5-
<button class="btn btn-secondary button" @click="add">Add</button>
6-
</div>
2+
<div class="row">
3+
<div class="col-1">
4+
<button class="btn btn-secondary button" @click="add">Add</button>
5+
</div>
76

8-
<div class="col-7">
9-
<h3>Draggable {{ draggingInfo }}</h3>
7+
<div class="col-7">
8+
<h3>Draggable {{ draggingInfo }}</h3>
109

11-
<draggable
12-
element="ul"
13-
:list="list"
14-
class="list-group"
15-
:options="{ handle: '.handle' }"
10+
<draggable
11+
element="ul"
12+
:list="list"
13+
class="list-group"
14+
:options="{ handle: '.handle' }"
15+
>
16+
<li
17+
class="list-group-item"
18+
v-for="(element, idx) in list"
19+
:key="element.name"
1620
>
17-
<li
18-
class="list-group-item"
19-
v-for="(element, idx) in list"
20-
:key="element.name"
21-
>
22-
<i class="fa fa-align-justify handle"></i>
23-
24-
<span class="text">{{ element.name }} </span>
21+
<i class="fa fa-align-justify handle"></i>
2522

26-
<input type="text" class="form-control" v-model="element.text" />
23+
<span class="text">{{ element.name }} </span>
2724

28-
<i class="fa fa-times close" @click="removeAt(idx)"></i>
29-
</li>
30-
</draggable>
31-
</div>
25+
<input type="text" class="form-control" v-model="element.text" />
3226

33-
<rawDisplayer class="col-3" :value="list" title="List" />
27+
<i class="fa fa-times close" @click="removeAt(idx)"></i>
28+
</li>
29+
</draggable>
3430
</div>
31+
32+
<rawDisplayer class="col-3" :value="list" title="List" />
3533
</div>
3634
</template>
3735

0 commit comments

Comments
 (0)