Skip to content

Commit 6475a77

Browse files
David-DesmaisonsDavid-Desmaisons
committed
REfactoring example using routing
1 parent 5f944ac commit 6475a77

16 files changed

+288
-380
lines changed

‎docs/app.js

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

‎example/App.vue

Lines changed: 61 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -3,224 +3,92 @@
33
<img alt="Vue logo" src="./assets/logo.png" />
44
<div class="container ">
55
<ul class="nav nav-tabs" role="tablist">
6-
<li class="nav-item">
7-
<a
8-
class="nav-link active"
9-
data-toggle="tab"
10-
href="#simple"
11-
role="tab"
12-
aria-controls="profile"
13-
aria-selected="true"
14-
>Simple</a
15-
>
16-
</li>
17-
18-
<li class="nav-item">
19-
<a
20-
class="nav-link"
21-
data-toggle="tab"
22-
href="#twoLists"
23-
role="tab"
24-
aria-controls="profile"
25-
aria-selected="false"
26-
>Two Lists</a
27-
>
28-
</li>
29-
30-
<li class="nav-item">
31-
<a
32-
class="nav-link"
33-
data-toggle="tab"
34-
href="#clone"
35-
role="tab"
36-
aria-controls="profile"
37-
aria-selected="false"
38-
>Clone</a
39-
>
40-
</li>
41-
42-
<li class="nav-item">
43-
<a
44-
class="nav-link"
45-
data-toggle="tab"
46-
href="#custom-clone"
47-
role="tab"
48-
aria-controls="profile"
49-
aria-selected="false"
50-
>Custom Clone</a
51-
>
52-
</li>
53-
54-
<li class="nav-item">
55-
<a
56-
class="nav-link"
57-
data-toggle="tab"
58-
href="#handler"
59-
role="tab"
60-
aria-controls="profile"
61-
aria-selected="false"
62-
>Handler</a
63-
>
64-
</li>
65-
66-
<li class="nav-item">
67-
<a
68-
class="nav-link"
69-
data-toggle="tab"
70-
href="#transition"
71-
role="tab"
72-
aria-controls="profile"
73-
aria-selected="false"
74-
>Transition</a
75-
>
76-
</li>
77-
78-
<li class="nav-item">
79-
<a
80-
class="nav-link"
81-
data-toggle="tab"
82-
href="#transitions"
83-
role="tab"
84-
aria-controls="profile"
85-
aria-selected="false"
86-
>Transitions</a
87-
>
88-
</li>
89-
90-
<li class="nav-item">
91-
<a
92-
class="nav-link"
93-
data-toggle="tab"
94-
href="#footerslot"
95-
role="tab"
96-
aria-controls="profile"
97-
aria-selected="false"
98-
>Footer slot</a
99-
>
100-
</li>
101-
102-
<li class="nav-item">
6+
<li
7+
class="nav-item"
8+
v-for="component in componentList"
9+
:key="component.name"
10+
>
10311
<a
10412
class="nav-link"
10513
data-toggle="tab"
106-
href="#headerslot"
14+
:data-route="`/${component.name}`"
15+
:href="`#${component.name}`"
10716
role="tab"
10817
aria-controls="profile"
109-
aria-selected="false"
110-
>Header slot</a
18+
>{{ component.display }}</a
11119
>
11220
</li>
11321
</ul>
11422

11523
<div class="tab-content" id="tab-content">
116-
<div
117-
class="tab-pane show active"
118-
id="simple"
119-
role="tabpanel"
120-
aria-labelledby="profile-tab"
121-
>
122-
<simple />
123-
</div>
124-
125-
<div
126-
class="tab-pane show"
127-
id="twoLists"
128-
role="tabpanel"
129-
aria-labelledby="profile-tab"
130-
>
131-
<twoLists />
132-
</div>
133-
134-
<div
135-
class="tab-pane show"
136-
id="clone"
137-
role="tabpanel"
138-
aria-labelledby="profile-tab"
139-
>
140-
<clone />
141-
</div>
142-
143-
<div
144-
class="tab-pane show"
145-
id="custom-clone"
146-
role="tabpanel"
147-
aria-labelledby="profile-tab"
148-
>
149-
<custom-clone />
150-
</div>
151-
152-
<div
153-
class="tab-pane show"
154-
id="footerslot"
155-
role="tabpanel"
156-
aria-labelledby="profile-tab"
157-
>
158-
<footerslot />
159-
</div>
160-
161-
<div
162-
class="tab-pane show"
163-
id="headerslot"
164-
role="tabpanel"
165-
aria-labelledby="profile-tab"
166-
>
167-
<headerslot />
168-
</div>
169-
170-
<div
171-
class="tab-pane show"
172-
id="handler"
173-
role="tabpanel"
174-
aria-labelledby="profile-tab"
175-
>
176-
<handler />
177-
</div>
178-
179-
<div
180-
class="tab-pane show"
181-
id="transition"
182-
role="tabpanel"
183-
aria-labelledby="profile-tab"
184-
>
185-
<transition-example />
186-
</div>
187-
18824
<div
18925
class="tab-pane show"
190-
id="transitions"
26+
:id="component.name"
19127
role="tabpanel"
19228
aria-labelledby="profile-tab"
29+
v-for="component in componentList"
30+
:key="component.name"
19331
>
194-
<transition-example-2 />
32+
<component :is="component.name"></component>
19533
</div>
19634
</div>
19735
</div>
19836
</div>
19937
</template>
20038

20139
<script>
202-
import simple from "./components/simple";
203-
import twoLists from "./components/two-lists";
204-
import clone from "./components/clone";
205-
import customClone from "./components/custom-clone";
206-
import footerslot from "./components/footerslot";
207-
import headerslot from "./components/headerslot";
208-
import handler from "./components/handler";
209-
import transitionExample from "./components/transition-example";
210-
import transitionExample2 from "./components/transition-example-2";
40+
import $ from "jquery";
41+
42+
const requireContext = require.context("./components/", false, /\.vue$/);
43+
44+
const components = requireContext.keys().reduce((acc, key) => {
45+
const name = key.replace(/^\.\//, "").replace(/\.\w+$/, "");
46+
const component = requireContext(key).default;
47+
acc[name] = component;
48+
return acc;
49+
}, {});
50+
51+
window.console.log(components);
52+
53+
const componentsToDisplay = [
54+
"simple",
55+
"two-lists",
56+
"clone",
57+
"custom-clone",
58+
"handle",
59+
"transition-example",
60+
"transition-example-2",
61+
"footerslot",
62+
"headerslot"
63+
];
21164
21265
export default {
21366
name: "app",
214-
components: {
215-
simple,
216-
twoLists,
217-
clone,
218-
customClone,
219-
footerslot,
220-
headerslot,
221-
handler,
222-
transitionExample,
223-
transitionExample2
67+
components,
68+
data() {
69+
const componentList = componentsToDisplay.map(name => ({
70+
name,
71+
display: components[name].display || name
72+
}));
73+
return {
74+
componentList
75+
};
76+
},
77+
created() {
78+
this.$router.afterEach(to => {
79+
this.toRoute(to);
80+
});
81+
},
82+
mounted() {
83+
this.toRoute(this.$route);
84+
$('a[data-toggle="tab"]').on("shown.bs.tab", e => {
85+
this.$router.push({ path: e.target.dataset.route });
86+
});
87+
},
88+
methods: {
89+
toRoute(route) {
90+
$(`a[data-route="${route.path}"]`).tab("show");
91+
}
22492
}
22593
};
22694
</script>

‎example/components/clone.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,11 @@
4646

4747
<script>
4848
import draggable from "@/vuedraggable";
49-
import rawDisplayer from "./raw-displayer.vue";
5049
export default {
5150
name: "clone",
51+
display: "Clone",
5252
components: {
53-
draggable,
54-
rawDisplayer
53+
draggable
5554
},
5655
data() {
5756
return {

‎example/components/custom-clone.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,12 @@
4747

4848
<script>
4949
import draggable from "@/vuedraggable";
50-
import rawDisplayer from "./raw-displayer.vue";
5150
let idGlobal = 8;
5251
export default {
5352
name: "clone",
53+
display: "Custom Clone",
5454
components: {
55-
draggable,
56-
rawDisplayer
55+
draggable
5756
},
5857
data() {
5958
return {

‎example/components/footerslot.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,12 @@
3838

3939
<script>
4040
import draggable from "@/vuedraggable";
41-
import rawDisplayer from "./raw-displayer.vue";
4241
let id = 1;
4342
export default {
4443
name: "footer-example",
44+
display: "Footer slot",
4545
components: {
46-
draggable,
47-
rawDisplayer
46+
draggable
4847
},
4948
data() {
5049
return {

‎example/components/handler.vue renamed to ‎example/components/handle.vue

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
<div class="justify-content-center jumbotron">
33
<div class="row">
44
<div class="col-1">
5-
<button
6-
class="btn btn-secondary button"
7-
@click="add"
8-
>Add</button>
5+
<button class="btn btn-secondary button" @click="add">Add</button>
96
</div>
107

118
<div class="col-7">
@@ -26,38 +23,26 @@
2623

2724
<span class="text">{{ element.name }} </span>
2825

29-
<input
30-
type="text"
31-
class="form-control"
32-
v-model="element.text"
33-
/>
26+
<input type="text" class="form-control" v-model="element.text" />
3427

35-
<i
36-
class="fa fa-times close"
37-
@click="removeAt(idx)"
38-
></i>
28+
<i class="fa fa-times close" @click="removeAt(idx)"></i>
3929
</li>
4030
</draggable>
4131
</div>
4232

43-
<rawDisplayer
44-
class="col-3"
45-
:value="list"
46-
title="List"
47-
/>
33+
<rawDisplayer class="col-3" :value="list" title="List" />
4834
</div>
4935
</div>
5036
</template>
5137

5238
<script>
5339
let id = 3;
5440
import draggable from "@/vuedraggable";
55-
import rawDisplayer from "./raw-displayer.vue";
5641
export default {
5742
name: "handler",
43+
display: "Handle",
5844
components: {
59-
draggable,
60-
rawDisplayer
45+
draggable
6146
},
6247
data() {
6348
return {

0 commit comments

Comments
 (0)