refactor: add eslint-plugin-vue && lint code (#976)

src/views/dashboard/admin/components/TodoList/Todo.vue

@@ -1,17 +1,19 @@
 <template>
-  <li class="todo" :class="{ completed: todo.done, editing: editing }">
+  <li :class="{ completed: todo.done, editing: editing }" class="todo">
     <div class="view">
-      <input class="toggle"
-        type="checkbox"
+      <input
         :checked="todo.done"
+        class="toggle"
+        type="checkbox"
         @change="toggleTodo( todo)">
-      <label v-text="todo.text" @dblclick="editing = true"></label>
-      <button class="destroy" @click="deleteTodo( todo )"></button>
+      <label @dblclick="editing = true" v-text="todo.text"/>
+      <button class="destroy" @click="deleteTodo( todo )"/>
     </div>
-    <input class="edit"
-      v-show="editing"
+    <input
       v-focus="editing"
+      v-show="editing"
       :value="todo.text"
+      class="edit"
       @keyup.enter="doneEdit"
       @keyup.esc="cancelEdit"
       @blur="doneEdit">
@@ -21,12 +23,6 @@
 <script>
 export default {
   name: 'Todo',
-  props: ['todo'],
-  data() {
-    return {
-      editing: false
-    }
-  },
   directives: {
     focus(el, { value }, { context }) {
       if (value) {
@@ -36,6 +32,19 @@ export default {
       }
     }
   },
+  props: {
+    todo: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      editing: false
+    }
+  },
   methods: {
     deleteTodo(todo) {
       this.$emit('deleteTodo', todo)

src/views/dashboard/admin/components/TodoList/index.scss

@@ -201,6 +201,7 @@
     font-size: 30px;
     color: #cc9a9a;
     transition: color 0.2s ease-out;
+    cursor: pointer;
   }
   .todo-list li .destroy:hover {
     color: #af5b5e;

src/views/dashboard/admin/components/TodoList/index.vue

@@ -5,16 +5,21 @@
       <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
     </header>
     <!-- main section -->
-    <section class="main" v-show="todos.length">
-      <input class="toggle-all" id="toggle-all" type="checkbox" :checked="allChecked" @change="toggleAll({ done: !allChecked })">
-      <label for="toggle-all"></label>
+    <section v-show="todos.length" class="main">
+      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
+      <label for="toggle-all"/>
       <ul class="todo-list">
-        <todo @toggleTodo='toggleTodo' @editTodo='editTodo' @deleteTodo='deleteTodo' v-for="(todo, index) in filteredTodos" :key="index"
-          :todo="todo"></todo>
+        <todo
+          v-for="(todo, index) in filteredTodos"
+          :key="index"
+          :todo="todo"
+          @toggleTodo="toggleTodo"
+          @editTodo="editTodo"
+          @deleteTodo="deleteTodo"/>
       </ul>
     </section>
     <!-- footer -->
-    <footer class="footer" v-show="todos.length">
+    <footer v-show="todos.length" class="footer">
       <span class="todo-count">
         <strong>{{ remaining }}</strong>
         {{ remaining | pluralize('item') }} left
@@ -52,6 +57,10 @@ const defalutList = [
 ]
 export default {
   components: { Todo },
+  filters: {
+    pluralize: (n, w) => n === 1 ? w : w + 's',
+    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
+  },
   data() {
     return {
       visibility: 'all',
@@ -108,10 +117,6 @@ export default {
         this.setLocalStorage()
       })
     }
-  },
-  filters: {
-    pluralize: (n, w) => n === 1 ? w : w + 's',
-    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
   }
 }
 </script>