fix sd-focus, comply with todomvc spec

examples/todomvc/index.html

@@ -32,19 +32,16 @@
                     <li
                         class="todo"
                         sd-each="todo:todos"
-                        sd-class="completed:todo.done, editing:todo.editing"
+                        sd-class="completed:todo.completed, editing:todo.editing"
                     >
                         <div class="view">
                             <input
                                 class="toggle"
                                 type="checkbox"
-                                sd-checked="todo.done"
+                                sd-checked="todo.completed"
                                 sd-on="change:updateCount"
                             >
-                            <label
-                                sd-text="todo.text"
-                                sd-on="dblclick:edit"
-                            ></label>
+                            <label sd-text="todo.title" sd-on="dblclick:edit"></label>
                             <button class="destroy" sd-on="click:removeTodo"></button>
                         </div>
                         <input
@@ -52,7 +49,7 @@
                             type="text"
                             sd-focus="todo.editing"
                             sd-on="blur:stopEdit, keyup:stopEdit | key enter"
-                            sd-value="todo.text"
+                            sd-value="todo.title"
                         >
                     </li>
                 </ul>
@@ -61,14 +58,14 @@
             <!-- footer controls -->
             <footer id="footer" sd-show="total">
                 <span id="todo-count">
-                    <strong>{{remaining}}</strong> {{itemLabel}} left
+                    <strong sd-text="remaining"></strong> {{itemLabel}} left
                 </span>
                 <ul id="filters">
                     <li><a href="#/all">All</a></li>
                     <li><a href="#/active">Active</a></li>
                     <li><a href="#/completed">Completed</a></li>
                 </ul>
-                <button id="clear-completed" sd-on="click:removeCompleted">
+                <button id="clear-completed" sd-on="click:removeCompleted" sd-show="completed">
                     Remove Completed ({{completed}})
                 </button>
             </footer>

examples/todomvc/js/app.js

@@ -4,11 +4,11 @@ var storageKey = 'todos-seedjs',
 Seed.controller('Todos', function (scope) {
 
     // regular properties -----------------------------------------------------
-    scope.todos = Array.isArray(storedData) ? storedData : []
-    scope.remaining = scope.todos.reduce(function (n, todo) {
-        return n + (todo.done ? 0 : 1)
-    }, 0)
+    scope.todos  = Array.isArray(storedData) ? storedData : []
     scope.filter = location.hash.slice(2) || 'all'
+    scope.remaining = scope.todos.reduce(function (n, todo) {
+        return n + (todo.completed ? 0 : 1)
+    }, 0)
 
     // computed properties ----------------------------------------------------
     scope.total = {get: function () {
@@ -29,7 +29,7 @@ Seed.controller('Todos', function (scope) {
         },
         set: function (value) {
             scope.todos.forEach(function (todo) {
-                todo.done = value
+                todo.completed = value
             })
             scope.remaining = value ? 0 : scope.total
         }
@@ -38,7 +38,7 @@ Seed.controller('Todos', function (scope) {
     // event handlers ---------------------------------------------------------
     scope.addTodo = function (e) {
         if (e.el.value) {
-            scope.todos.unshift({ text: e.el.value, done: false })
+            scope.todos.unshift({ title: e.el.value, completed: false })
             e.el.value = ''
             scope.remaining++
         }
@@ -46,11 +46,11 @@ Seed.controller('Todos', function (scope) {
 
     scope.removeTodo = function (e) {
         scope.todos.remove(e.scope)
-        scope.remaining -= e.scope.done ? 0 : 1
+        scope.remaining -= e.scope.completed ? 0 : 1
     }
 
     scope.updateCount = function (e) {
-        scope.remaining += e.scope.done ? -1 : 1
+        scope.remaining += e.scope.completed ? -1 : 1
     }
 
     scope.edit = function (e) {
@@ -64,7 +64,7 @@ Seed.controller('Todos', function (scope) {
     scope.removeCompleted = function () {
         if (scope.completed === 0) return
         scope.todos = scope.todos.filter(function (todo) {
-            return !todo.done
+            return !todo.completed
         })
     }
 
@@ -73,15 +73,11 @@ Seed.controller('Todos', function (scope) {
         scope.filter = location.hash.slice(2)
     })
 
-    // save on leave
+    // persist data on leave
     window.addEventListener('beforeunload', function () {
         localStorage.setItem(storageKey, scope.$serialize('todos'))
     })
 
-    scope.$watch('completed', function (value) {
-        scope.$unwatch('completed')
-    })
-
 })
 
 Seed.bootstrap({ debug: true })

src/directives/index.js

@@ -28,7 +28,11 @@ module.exports = {
     },
     
     focus: function (value) {
-        this.el[value ? 'focus' : 'blur']()
+        // yield so it work when toggling visibility
+        var el = this.el
+        setTimeout(function () {
+            el[value ? 'focus' : 'blur']()
+        }, 0)
     },
 
     class: function (value) {

wrappers/outro.js

@@ -1,3 +1,3 @@
-window.Seed = Seed || require('seed')
+window.Seed = window.Seed || require('seed')
 Seed.version = {{version}}
 })();