Refactoring example

Author: David-Desmaisons

example/App.vue

@@ -1,13 +1,20 @@
 <template>
   <div id="app">
     <div class="logo">
-      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank"
-        ><img alt="Vue logo" src="./assets/logo.png"
-      /></a>
+      <a
+        href="https://github.com/SortableJS/Vue.Draggable"
+        target="_blank"
+      ><img
+          alt="Vue logo"
+          src="./assets/logo.png"
+        /></a>
     </div>
 
     <div class="container ">
-      <ul class="nav nav-tabs" role="tablist">
+      <ul
+        class="nav nav-tabs"
+        role="tablist"
+      >
         <li
           class="nav-item"
           v-for="component in componentList"
@@ -20,12 +27,14 @@
             :href="`#${component.name}`"
             role="tab"
             aria-controls="profile"
-            >{{ component.display }}</a
-          >
+          >{{ component.display }}</a>
         </li>
       </ul>
 
-      <div class="tab-content" id="tab-content">
+      <div
+        class="tab-content"
+        id="tab-content"
+      >
         <div
           class="tab-pane show"
           :id="component.name"
@@ -69,30 +78,13 @@ const components = requireContext.keys().reduce((acc, key) => {
   return acc;
 }, {});
 
-window.console.log(components);
-
-const componentsToDisplay = [
-  "simple",
-  "two-lists",
-  "clone",
-  "custom-clone",
-  "handle",
-  "transition-example",
-  "transition-example-2",
-  "table-example",
-  "nested-example",
-  "footerslot",
-  "headerslot"
-];
-
 export default {
   name: "app",
   components,
   data() {
-    const componentList = componentsToDisplay.map(name => ({
-      name,
-      display: components[name].display || name
-    }));
+    const componentList = Object.keys(components)
+      .map(key => components[key])
+      .sort((a, b) => a.order - b.order);
     return {
       componentList
     };

example/components/clone.vue

@@ -47,6 +47,7 @@ import draggable from "@/vuedraggable";
 export default {
   name: "clone",
   display: "Clone",
+  order: 2,
   components: {
     draggable
   },

example/components/custom-clone.vue

@@ -39,8 +39,9 @@
 import draggable from "@/vuedraggable";
 let idGlobal = 8;
 export default {
-  name: "clone",
+  name: "custom-clone",
   display: "Custom Clone",
+  order: 3,
   components: {
     draggable
   },

example/components/footerslot.vue

@@ -38,8 +38,9 @@
 import draggable from "@/vuedraggable";
 let id = 1;
 export default {
-  name: "footer-example",
+  name: "footerslot",
   display: "Footer slot",
+  order: 10,
   components: {
     draggable
   },

example/components/handle.vue

@@ -37,8 +37,9 @@
 let id = 3;
 import draggable from "@/vuedraggable";
 export default {
-  name: "handler",
+  name: "handle",
   display: "Handle",
+  order: 4,
   components: {
     draggable
   },

example/components/headerslot.vue

@@ -38,8 +38,9 @@
 import draggable from "@/vuedraggable";
 let id = 1;
 export default {
-  name: "header-example",
+  name: "headerslot",
   display: "Header slot",
+  order: 11,
   components: {
     draggable
   },

example/components/nested-example.vue

@@ -12,8 +12,9 @@
 <script>
 import nestedDraggable from "./infra/nested";
 export default {
-  name: "clone",
+  name: "nested-example",
   display: "Nested",
+  order: 9,
   components: {
     nestedDraggable
   },

example/components/simple.vue

@@ -40,6 +40,7 @@ let id = 1;
 export default {
   name: "simple",
   display: "Simple",
+  order: 0,
   components: {
     draggable
   },

example/components/table-example.vue

@@ -8,12 +8,14 @@
           <tr>
             <th scope="col">Id</th>
             <th scope="col">Name</th>
+            <th scope="col">Sport</th>
           </tr>
         </thead>
         <draggable v-model="list" :element="'tbody'">
           <tr v-for="item in list" :key="item.name">
             <th scope="row">{{ item.id }}</th>
             <td>{{ item.name }}</td>
+            <td>{{ item.sport }}</td>
           </tr>
         </draggable>
       </table>
@@ -28,16 +30,17 @@ import draggable from "@/vuedraggable";
 export default {
   name: "table-example",
   display: "Table",
+  order: 7,
   components: {
     draggable
   },
   data() {
     return {
       list: [
-        { id: 1, name: "Abby" },
-        { id: 2, name: "Brooke" },
-        { id: 3, name: "Courtenay" },
-        { id: 4, name: "David" }
+        { id: 1, name: "Abby", sport: "basket" },
+        { id: 2, name: "Brooke", sport: "foot" },
+        { id: 3, name: "Courtenay", sport: "volley" },
+        { id: 4, name: "David", sport: "rugby" }
       ],
       dragging: false
     };

example/components/transition-example-2.vue

@@ -54,9 +54,9 @@ const message = [
 ];
 
 export default {
-  name: "tranistion-example",
+  name: "transition-example-2",
   display: "Transitions",
-
+  order: 6,
   components: {
     draggable
   },