example: add todo input

example/app.js

@@ -1,5 +1,5 @@
 import { one, createStore, html } from '../dist/one'
-import { TodoList } from './components/todo/list'
+import { TodoList } from './components'
 
 createStore(function () {
   return {
@@ -12,7 +12,6 @@ one({
   components: [TodoList],
   template: html`
     <div>
-      <h1>Hello world</h1>
       <todo-list></todo-list>
     </div>
   `,

example/components/index.js

@@ -1,5 +1,5 @@
-import { SimpleList } from './simple-list'
+import { TodoList } from './todo/list'
 
 export {
-  SimpleList,
+  TodoList,
 }

example/components/todo/input/index.js

@@ -0,0 +1,29 @@
+import { html } from '../../../../lib/one'
+
+const TodoInput = {
+  name: 'todo-input',
+  template: html`
+    <div>
+      <input type="text" />
+      <button id="add-btn">Add</button>
+    </div>
+  `,
+  state: {
+    text: '',
+  },
+  setup({ query, state, parent }) {
+    const input = query('input')
+    const btn = query('#add-btn')
+
+    input.on('input', function () {
+      state.text = input.value
+    })
+
+    btn.on('click', function () {
+      parent.events.add(state.text)
+      state.text = ''
+    })
+  },
+}
+
+export { TodoInput }

example/components/todo/item/index.js

@@ -17,7 +17,7 @@ const TodoItem = {
     const toggleBtn = query('.toggleBtn')
     const done = query('.done')
 
-    const {show, hide, toggle} = done.if({ initial: state.done })
+    const { toggle } = done.if({ initial: state.done })
 
     removeBtn.on('click', function () {
       parent.events.delete(state.id)

example/components/todo/list/index.js

@@ -1,32 +1,41 @@
 import { TodoItem } from '../item'
 import { html } from '../../../../lib/one'
+import { TodoInput } from '../input'
 
 const TodoList = {
   name: 'todo-list',
+  components: [TodoItem, TodoInput],
   state: {
     items: [
       { id: 1, text: 'Item #1', done: false },
       { id: 2, text: 'Item #2', done: false },
       { id: 3, text: 'Item #3', done: false },
     ]
   },
-  components: [TodoItem],
   template: html`
-    <ul>
-      <todo-item></todo-item>
-    </ul>
+    <div>
+      <todo-input></todo-input>
+      <ul>
+        <todo-item></todo-item>
+      </ul>
+    </div>
   `,
   events: {
+    add(text, { state }) {
+      const id = Math.random().toString(36).substring(2, 7)
+
+      state.items.push({ id, text, done: false })
+
+      console.log('add todo', state.items)
+    },
     delete(id, { state }) {
       state.items = state.items.filter(item => item.id !== id)
     },
   },
   setup({ query, state }) {
     const item = query('todo-item')
 
-    item.for(['items', 'id'], function ({ el, item }) {
-      // console.log('item', item, el)
-    })
+    item.for(['items', 'id'])
   }
 }