WIP

Author: David-Desmaisons

example/App.vue

@@ -1,15 +1,8 @@
 <template>
   <div id="app">
-    <img
-      alt="Vue logo"
-      src="./assets/logo.png"
-    >
+    <img alt="Vue logo" src="./assets/logo.png" />
     <div class="container ">
-
-      <ul
-        class="nav nav-tabs"
-        role="tablist"
-      >
+      <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item">
           <a
             class="nav-link active"
@@ -18,55 +11,51 @@
             role="tab"
             aria-controls="profile"
             aria-selected="true"
-          >Simple</a>
+            >Simple</a
+          >
         </li>
 
-         <li class="nav-item">
+        <li class="nav-item">
           <a
             class="nav-link"
             data-toggle="tab"
             href="#twoLists"
             role="tab"
             aria-controls="profile"
             aria-selected="false"
-          >Two Lists</a>
+            >Two Lists</a
+          >
         </li>
 
-          <li class="nav-item">
+        <li class="nav-item">
           <a
             class="nav-link"
             data-toggle="tab"
             href="#clone"
             role="tab"
             aria-controls="profile"
             aria-selected="false"
-          >Clone</a>
+            >Clone</a
+          >
         </li>
-
       </ul>
-      <div
-        class="tab-content"
-        id="tab-content"
-      >
-
+      <div class="tab-content" id="tab-content">
         <div
           class="tab-pane show active"
           id="simple"
           role="tabpanel"
           aria-labelledby="profile-tab"
         >
           <simple />
-
         </div>
 
-         <div
+        <div
           class="tab-pane show"
           id="twoLists"
           role="tabpanel"
           aria-labelledby="profile-tab"
         >
           <twoLists />
-
         </div>
 
         <div
@@ -76,10 +65,7 @@
           aria-labelledby="profile-tab"
         >
           <clone />
-
         </div>
-
-
       </div>
     </div>
   </div>

example/components/clone.vue

@@ -1,22 +1,20 @@
 <template>
-
   <div class=" justify-content-center jumbotron">
-
     <div class="row">
       <div class="col-3">
         <h3>Draggable for list 1</h3>
         <draggable
           class="dragArea list-group"
           :list="list1"
-          :options="{group:{name:'people', pull:'clone', put:false }}"
+          :options="{ group: { name: 'people', pull: 'clone', put: false } }"
           @change="log"
         >
           <div
             class="list-group-item"
             v-for="(element, index) in list1"
             :key="element.name"
           >
-            {{element.name}} {{index}}
+            {{ element.name }} {{ index }}
           </div>
         </draggable>
       </div>
@@ -26,40 +24,29 @@
         <draggable
           class="dragArea list-group"
           :list="list2"
-          :options="{group:'people'}"
+          :options="{ group: 'people' }"
           @change="log"
         >
           <div
             class="list-group-item"
             v-for="(element, index) in list2"
             :key="element.name"
           >
-            {{element.name}} {{index}}
+            {{ element.name }} {{ index }}
           </div>
         </draggable>
       </div>
 
-      <rawDisplayer
-        class="col-3"
-        :value="list1"
-        title="List 1"
-      />
-
-      <rawDisplayer
-        class="col-3"
-        :value="list2"
-        title="List 2"
-      />
+      <rawDisplayer class="col-3" :value="list1" title="List 1" />
 
+      <rawDisplayer class="col-3" :value="list2" title="List 2" />
     </div>
-
   </div>
 </template>
 
 <script>
 import draggable from "@/components/Vuedraggable";
 import rawDisplayer from "./raw-displayer.vue";
-let id = 1;
 export default {
   name: "clone",
   components: {
@@ -83,11 +70,9 @@ export default {
   },
   methods: {
     log: function(evt) {
-      console.log(evt);
+      window.console.log(evt);
     }
   }
 };
 </script>
-<style scoped>
-</style>
-
+<style scoped></style>

example/components/raw-displayer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>{{title}}</h3>
-    <pre>{{valueString}}</pre>
+    <h3>{{ title }}</h3>
+    <pre>{{ valueString }}</pre>
   </div>
 </template>
 <script>

example/components/simple.vue

@@ -1,50 +1,38 @@
 <template>
   <div class="justify-content-center jumbotron">
     <div class="row">
-
       <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>
-
+          <button class="btn btn-secondary" @click="add">Add</button>
+          <button class="btn btn-secondary" @click="replace">Replace</button>
         </div>
       </div>
 
       <div class="col-6">
-        <h3>Draggable {{draggingInfo}}</h3>
+        <h3>Draggable {{ draggingInfo }}</h3>
 
         <draggable
           :list="list"
           class="list-group"
-          @start="dragging=true"
-          @end="dragging=false"
+          @start="dragging = true"
+          @end="dragging = false"
         >
           <div
             class="list-group-item"
             v-for="element in list"
             :key="element.name"
-          >{{element.name}}</div>
+          >
+            {{ element.name }}
+          </div>
         </draggable>
       </div>
 
-      <rawDisplayer
-        class="col-3"
-        :value="list"
-        title="List"
-      />
-
+      <rawDisplayer class="col-3" :value="list" title="List" />
     </div>
-
   </div>
 </template>
 
@@ -88,4 +76,3 @@ export default {
   margin-top: 50px;
 }
 </style>
-

example/components/two-lists.vue

@@ -1,21 +1,20 @@
 <template>
   <div class=" justify-content-center jumbotron">
-
     <div class="row">
       <div class="col-3">
         <h3>Draggable for list 1</h3>
         <draggable
           class="dragArea list-group"
           :list="list1"
-          :options="{group:'people'}"
+          :options="{ group: 'people' }"
           @change="log"
         >
           <div
             class="list-group-item"
             v-for="(element, index) in list1"
             :key="element.name"
           >
-            {{element.name}} {{index}}
+            {{ element.name }} {{ index }}
           </div>
         </draggable>
       </div>
@@ -25,35 +24,24 @@
         <draggable
           class="dragArea list-group"
           :list="list2"
-          :options="{group:'people'}"
+          :options="{ group: 'people' }"
           @change="log"
         >
           <div
             class="list-group-item"
             v-for="(element, index) in list2"
             :key="element.name"
           >
-            {{element.name}} {{index}}
+            {{ element.name }} {{ index }}
           </div>
         </draggable>
       </div>
 
-      <rawDisplayer
-        class="col-3"
-        :value="list1"
-        title="List 1"
-      />
-
-      <rawDisplayer
-        class="col-3"
-        :value="list2"
-        title="List 2"
-      />
+      <rawDisplayer class="col-3" :value="list1" title="List 1" />
 
+      <rawDisplayer class="col-3" :value="list2" title="List 2" />
     </div>
-
   </div>
-
 </template>
 <script>
 import draggable from "@/components/Vuedraggable";
@@ -93,7 +81,7 @@ export default {
       };
     },
     log: function(evt) {
-      console.log(evt);
+      window.console.log(evt);
     }
   }
 };
@@ -103,4 +91,3 @@ export default {
   min-height: 10px;
 }
 </style>
-

example/main.js

@@ -1,9 +1,8 @@
 import Vue from "vue";
-import App from "./App.vue"; 
+import App from "./App.vue";
 import "bootstrap/dist/css/bootstrap.min.css";
 require("bootstrap");
 
-
 Vue.config.productionTip = false;
 
 new Vue({

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "serve": "vue-cli-service serve ./example/main.js --open",
     "build": "vue-cli-service build --name vuedraggable --entry ./src/index.js --target lib",
-    "lint": "vue-cli-service lint",
+    "lint": "vue-cli-service lint src example",
     "prepublishOnly": "npm run lint && npm run build",
     "test:unit": "vue-cli-service test:unit"
   },