WIP migrating example

Author: David-Desmaisons

example/App.vue

@@ -6,71 +6,48 @@
     >
     <div class="container ">
 
-      <div class="row justify-content-center">
+      <ul
+        class="nav nav-tabs"
+        role="tablist"
+      >
+        <li class="nav-item">
+          <a
+            class="nav-link active"
+            data-toggle="tab"
+            href="#simple"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="true"
+          >Simple</a>
+        </li>
+      </ul>
+      <div
+        class="tab-content"
+        id="tab-content"
+      >
 
-        <div class="list-group col-8">
-          <h2>Draggable</h2>
-          <draggable
-            :list="list"
-            @start="dragging=true"
-            @end="dragging=false"
-          >
-            <div
-              class="list-group-item"
-              v-for="element in list"
-              :key="element.name"
-            >{{element.name}}</div>
-          </draggable>
-        </div>
-
-      </div>
+        <div
+          class="tab-pane show active"
+          id="simple"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
 
-      <div class="row justify-content-center">
+          <simple />
 
-        <div class="list-group col-8">
-          <h2>Normal v-for</h2>
-          <div>
-            <div
-              class="list-group-item"
-              v-for="element in list"
-              :key="element.name"
-            >{{element.name}}</div>
-          </div>
         </div>
-      </div>
-
-      <button @click="add">Add</button>
-      <button @click="replace">Replace</button>
 
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import draggable from "@/components/Vuedraggable";
-let id = 1;
+import simple from "./components/simple";
 export default {
   name: "app",
   components: {
-    draggable
-  },
-  data() {
-    return {
-      list: [
-        { name: "John", id: 0 },
-        { name: "Joao", id: 1 },
-        { name: "Jean", id: 2 }
-      ],
-      dragging: false
-    };
-  },
-  methods: {
-    add: function() {
-      this.list.push({ name: "Juan " + id, id: id++ });
-    },
-    replace: function() {
-      this.list = [{ name: "Edgard", id: id++ }];
-    }
+    simple
   }
 };
 </script>

example/components/raw-displayer.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h2>{{title}}</h2>
+    <pre>{{valueString}}</pre>
+  </div>
+</template>
+<script>
+const props = {
+  title: {
+    required: true,
+    type: String
+  },
+  value: {
+    required: true
+  }
+};
+export default {
+  props,
+  computed: {
+    valueString() {
+      return JSON.stringify(this.value, null, 2);
+    }
+  }
+};
+</script>
+<style scoped>
+pre {
+  text-align: start;
+}
+</style>

example/components/simple.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="row justify-content-center jumbotron">
+
+      <div class="col-2">
+        <div
+          class="btn-group-vertical buttons"
+          role="group"
+          aria-label="Basic example"
+        >
+          <button
+            class="btn btn-secondary"
+            @click="add"
+          >Add</button>
+          <button
+            class="btn btn-secondary"
+            @click="replace"
+          >Replace</button>
+
+        </div>
+      </div>
+
+      <div class="list-group col-6">
+        <h2>Draggable {{draggingInfo}}</h2>
+
+        <draggable
+          :list="list"
+          @start="dragging=true"
+          @end="dragging=false"
+        >
+          <div
+            class="list-group-item"
+            v-for="element in list"
+            :key="element.name"
+          >{{element.name}}</div>
+        </draggable>
+      </div>
+
+      <rawDisplayer
+        class="col-3"
+        :value="list"
+        title="List"
+      />
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import draggable from "@/components/Vuedraggable";
+import rawDisplayer from "./raw-displayer.vue";
+let id = 1;
+export default {
+  name: "simple",
+  components: {
+    draggable,
+    rawDisplayer
+  },
+  data() {
+    return {
+      list: [
+        { name: "John", id: 0 },
+        { name: "Joao", id: 1 },
+        { name: "Jean", id: 2 }
+      ],
+      dragging: false
+    };
+  },
+  computed: {
+    draggingInfo() {
+      return this.dragging ? "under drag" : "";
+    },
+    listString() {
+      return JSON.stringify(this.list, null, 2);
+    }
+  },
+  methods: {
+    add: function() {
+      this.list.push({ name: "Juan " + id, id: id++ });
+    },
+    replace: function() {
+      this.list = [{ name: "Edgard", id: id++ }];
+    }
+  }
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 50px;
+}
+</style>
+