use todomvc markup & css

loveyanjun · Jul 15, 2015 · b4f6d82 · b4f6d82
1 parent 0ad1edd
commit b4f6d82
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 49 deletions.
diff --git a/example/index.html b/example/index.html
@@ -2,18 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title></title>
-    <style>
-      .done {
-        text-decoration: line-through;
-      }
-      .active {
-        color: red;
-      }
-    </style>
+    <title>Vue.js • TodoMVC</title>
+    <link rel="stylesheet" href="../node_modules/todomvc-app-css/index.css">
   </head>
   <body>
     <div id="app"></div>
+    <footer class="info">
+      <p>Double-click to edit a todo</p>
+      <p>Written by <a href="http://evanyou.me">Evan You</a></p>
+      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+    </footer>
     <script src="./build/bundle.js"></script>
   </body>
 </html>
diff --git a/example/src/components/app.vue b/example/src/components/app.vue
@@ -5,8 +5,8 @@ import TodoComponent from './todo.vue'
 
 const filters = {
   all: (todos) => todos,
-  done: (todos) => todos.filter(todo => todo.done),
-  notDone: (todos) => todos.filter(todo => !todo.done)
+  active: (todos) => todos.filter(todo => !todo.done),
+  completed: (todos) => todos.filter(todo => todo.done)
 }
 
 export default {
@@ -40,26 +40,51 @@ export default {
 </script>
 
 <template>
-  <div>
-    <input type="checkbox"
-      checked="{{allChecked}}"
-      v-show="todos.length"
-      v-on="change: TOGGLE_ALL_TODOS(!allChecked)">
-    <input v-on="keyup: addTodo | key 'enter'">
-    <ul class="todo-list">
-      <todo v-repeat="todo: filteredTodos"></todo>
-    </ul>
-    <div class="footer" v-show="todos.length">
-      <p>
-        <a v-class="active: filter==='all'"
-          v-on="click: SET_FILTER('all')">all</a>
-        <a v-class="active: filter==='done'"
-          v-on="click: SET_FILTER('done')">done</a>
-        <a v-class="active: filter==='notDone'"
-          v-on="click: SET_FILTER('notDone')">not done</a>
-      </p>
-      {{remaining}} {{remaining | pluralize 'item'}} left
-      <button v-on="click: CLEAR_DONE_TODOS">Clear Done</button>
-    </div>
-  </div>
+  <section class="todoapp">
+    <header class="header">
+      <h1>todos</h1>
+      <input class="new-todo"
+        autofocus
+        autocomplete="off"
+        placeholder="What needs to be done?"
+        v-on="keyup: addTodo | key 'enter'">
+    </header>
+    <section class="main" v-show="todos.length">
+      <input class="toggle-all"
+        type="checkbox"
+        checked="{{allChecked}}"
+        v-on="change: TOGGLE_ALL_TODOS(!allChecked)">
+      <ul class="todo-list">
+        <todo v-repeat="todo: filteredTodos"></todo>
+      </ul>
+    </section>
+    <footer class="footer" v-show="todos.length">
+      <span class="todo-count">
+        <strong>{{remaining}}</strong>
+        {{remaining | pluralize 'item'}} left
+      </span>
+      <ul class="filters">
+        <li>
+          <a href="#/all"
+            v-class="selected: filter==='all'"
+            v-on="click: SET_FILTER('all')">All</a>
+        </li>
+        <li>
+          <a href="#/active"
+            v-class="selected: filter==='active'"
+            v-on="click: SET_FILTER('active')">Active</a>
+        </li>
+        <li>
+          <a href="#/completed"
+            v-class="selected: filter==='completed'"
+            v-on="click: SET_FILTER('completed')">Completed</a>
+        </li>
+      </ul>
+      <button class="clear-completed"
+        v-show="todos.length > remaining"
+        v-on="click: CLEAR_DONE_TODOS">
+        Clear completed
+      </button>
+    </footer>
+  </section>
 </template>
diff --git a/example/src/components/todo.vue b/example/src/components/todo.vue
@@ -1,4 +1,6 @@
 <script>
+import flux from '../flux'
+
 export default {
   data () {
     return {
@@ -14,25 +16,43 @@ export default {
         })
       }
     }
+  },
+  methods: {
+    doneEdit: function (e) {
+      if (this.editing) {
+        flux.dispatch('EDIT_TODO', this.todo, e.target.value)
+        this.editing = false
+      }
+    },
+    cancelEdit: function (e, todo) {
+      e.target.value = todo.text
+      this.editing = false
+    }
   }
 }
 </script>
 
 <template>
-  <li v-class="done: todo.done">
-    <input type="checkbox" checked="{{todo.done}}"
-      v-on="change: TOGGLE_TODO(todo)">
-    <span
-      v-show="!editing"
-      v-on="dblclick: editing=!editing">
-      {{todo.text}}</span>
-    <input v-show="editing"
+  <li class="todo" v-class="completed: todo.done, editing: editing">
+    <div class="view">
+      <input class="toggle"
+        type="checkbox"
+        checked="{{todo.done}}"
+        v-on="change: TOGGLE_TODO(todo)">
+      <label v-text="todo.text"
+        v-on="dblclick: editing = true">
+      </label>
+      <button
+        class="destroy"
+        v-on="click: DELETE_TODO(todo)">
+      </button>
+    </div>
+    <input class="edit"
+      v-show="editing"
       v-focus="editing"
       value="{{todo.text}}"
-      v-on="
-        change: EDIT_TODO(todo, $event.target.value),
-        change: editing=false,
-        blur: editing=false">
-    <button v-on="click: DELETE_TODO(todo)">x</button>
+      v-on="keyup: doneEdit | key 'enter',
+            keyup: cancelEdit($event, todo) | key 'esc',
+            blur: doneEdit">
   </li>
 </template>
diff --git a/example/src/flux.js b/example/src/flux.js
@@ -3,9 +3,8 @@ import Flux from '../../src'
 
 export default new Flux({
   injectMixin: Vue,
-  debug: true,
+  debug: process.env.NODE_ENV !== 'production',
   debugHandler (actionRecord) {
-    const storeRecord = actionRecord.affectedStores[0]
-    console.log(JSON.stringify(storeRecord, null, 2))
+    console.log(actionRecord)
   }
 })
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "html-loader": "^0.3.0",
     "node-libs-browser": "^0.5.2",
     "style-loader": "^0.12.3",
+    "todomvc-app-css": "^2.0.1",
     "vue": "^0.12.7",
     "vue-loader": "^2.0.1",
     "webpack": "^1.10.1"