adding slots examples

Author: David-Desmaisons

example/App.vue

@@ -38,7 +38,32 @@
             >Clone</a
           >
         </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            data-toggle="tab"
+            href="#footerslot"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+            >Footer slot</a
+          >
+        </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            data-toggle="tab"
+            href="#headerlot"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+            >Header slot</a
+          >
+        </li>
       </ul>
+
       <div class="tab-content" id="tab-content">
         <div
           class="tab-pane show active"
@@ -66,6 +91,24 @@
         >
           <clone />
         </div>
+
+        <div
+          class="tab-pane show"
+          id="footerslot"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <footerslot />
+        </div>
+
+        <div
+          class="tab-pane show"
+          id="headerlot"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <headerslot />
+        </div>
       </div>
     </div>
   </div>
@@ -75,13 +118,17 @@
 import simple from "./components/simple";
 import twoLists from "./components/two-lists";
 import clone from "./components/clone";
+import footerslot from "./components/footerslot";
+import headerslot from "./components/headerslot";
 
 export default {
   name: "app",
   components: {
     simple,
     twoLists,
-    clone
+    clone,
+    footerslot,
+    headerslot
   }
 };
 </script>

example/components/footerslot.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="justify-content-center jumbotron">
+    <div class="row">
+      <div class="col-8">
+        <h3>Draggable with footer</h3>
+
+        <draggable
+          :list="list"
+          class="list-group"
+          @start="dragging = true"
+          @end="dragging = false"
+        >
+          <div
+            class="list-group-item"
+            v-for="element in list"
+            :key="element.name"
+          >
+            {{ element.name }}
+          </div>
+
+          <div
+            slot="footer"
+            class="btn-group list-group-item"
+            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>
+        </draggable>
+      </div>
+
+      <rawDisplayer class="col-3" :value="list" title="List" />
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+import rawDisplayer from "./raw-displayer.vue";
+let id = 1;
+export default {
+  name: "footer",
+  components: {
+    draggable,
+    rawDisplayer
+  },
+  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++ }];
+    }
+  }
+};
+</script>
+<style scoped></style>

example/components/headerslot.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="justify-content-center jumbotron">
+    <div class="row">
+      <div class="col-8">
+        <h3>Draggable with header</h3>
+
+        <draggable
+          :list="list"
+          class="list-group"
+          @start="dragging = true"
+          @end="dragging = false"
+        >
+          <div
+            class="list-group-item"
+            v-for="element in list"
+            :key="element.name"
+          >
+            {{ element.name }}
+          </div>
+
+          <div
+            slot="header"
+            class="btn-group list-group-item"
+            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>
+        </draggable>
+      </div>
+
+      <rawDisplayer class="col-3" :value="list" title="List" />
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from "@/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
+    };
+  },
+  methods: {
+    add: function() {
+      this.list.push({ name: "Juan " + id, id: id++ });
+    },
+    replace: function() {
+      this.list = [{ name: "Edgard", id: id++ }];
+    }
+  }
+};
+</script>
+<style scoped></style>