feat(core): add complete all

Author: sonicoder86

babel.config.js

@@ -2,4 +2,4 @@ module.exports = {
   presets: [
     '@vue/app'
   ]
-}
+};

src/components/Footer.vue

@@ -2,15 +2,15 @@
   <footer class="footer">
     <span class="todo-count"><strong>{{ itemsLeft }}</strong><span> {{ itemText }} left</span></span>
       <ul class="filters">
-            <li v-for="filterKey in Object.keys(filterTitles)" :key="filterKey">
-                <a
-                  href="#"
-                  :class="{ selected: filterKey === filter }"
-                  @click="onFilterSelect(filterKey)"
-                >
-                  {{ filterTitles[filterKey] }}
-                </a>
-            </li>
+        <li v-for="filterKey in Object.keys(filterTitles)" :key="filterKey">
+          <a
+            href="#"
+            :class="{ selected: filterKey === filter }"
+            @click="onFilterSelect(filterKey)"
+          >
+            {{ filterTitles[filterKey] }}
+          </a>
+        </li>
       </ul>
       <button v-if="!!completedCount" class="clear-completed" @click="onClearCompleted">Clear completed</button>
     </footer>

src/components/List.vue

@@ -1,12 +1,12 @@
 <template>
-    <section class="main">
-        <input id="toggle-all" class="toggle-all" type="checkbox" />
-        <label htmlFor="toggle-all"></label>
+  <section class="main">
+    <input id="toggle-all" class="toggle-all" type="checkbox" :checked="areAllCompleted" readonly />
+    <label htmlFor="toggle-all" @click="onCompleteAll"></label>
 
-        <ul class="todo-list">
-            <Item v-for="todo in todos" :key="todo.id" :todo="todo" @remove="onRemove" @update="onUpdate" />
-        </ul>
-    </section>
+    <ul class="todo-list">
+      <Item v-for="todo in todos" :key="todo.id" :todo="todo" @remove="onRemove" @update="onUpdate" />
+    </ul>
+  </section>
 </template>
 
 <script>
@@ -19,8 +19,13 @@
       Item
     },
     props: ['todos'],
+    computed: {
+      areAllCompleted() {
+        return this.todos.length && this.todos.every(todo => todo.completed);
+      }
+    },
     methods: {
-      ...mapActions(['onRemove', 'onUpdate'])
+      ...mapActions(['onRemove', 'onUpdate', 'onCompleteAll'])
     }
   };
 </script>

src/main.js

@@ -9,5 +9,5 @@ Vue.use(Vuex);
 
 new Vue({
   store: storeFactory(),
-  render: h => h(App),
+  render: h => h(App)
 }).$mount('#app');