06: Add New Todo

Implement to add new todo with flux syntax.

Remove sample todo items from x-state.
Add addTodo invocation to controller element by x-invocations directive.
Set flux code to <input> of new-todo by x-on directive.
Add callback event listener to <input> of new-todo by x-callbacks directive. It works after addTodo invocation.

Toggle all collapsed code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width,initial-scale=1"
  >
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.1.2/index.css"
  >
  <script src="https://x-ninja.org/assets/js/o_o.js"></script>
  <script src="https://x-ninja.org/assets/js/flux._.js"></script>
  <title>TODOs @x-ninja</title>
</head>
<body>
  <section class="todoapp"
    x-state="{
      todos: [
        {
          title: 'Todo Title (Active)',
          completed: false
        },
        {
          title: 'Todo Title (Completed)',
          completed: true
        },
      ],
    }"
    x-invocations="{
      addTodo (_, payload, meta) {
        const newTodo = payload.newTodo.trim()
        if (!newTodo) {
          return
        }

        this.todos.push({
          title: newTodo,
          completed: false
        })
      },
    }"
    x-controller
  _>
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo"
        autofocus
        autocomplete="off"
        placeholder="What needs to be done?"

        x-on:change="addTodo({newTodo: launcher$.value})"
        x-callbacks="{
          change (_) {
            _.$.value = ''
          }
        }"
      >
    </header>
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list"
        x-each="todo in todos"
      >
        <li class="todo"
          x-bind:class="{
            completed: todo.completed,
          }"
        >
          <div class="view">
            <input
              class="toggle"
              type="checkbox"
              x-model="todo.completed"
            >
            <label>{{ todo.title }}</label>
            <button class="destroy"></button>
          </div>
          <input class="edit">
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count">
        <strong>3</strong> items left
      </span>
      <ul class="filters">
        <li><a href="#/all" class="selected">All</a></li>
        <li><a href="#/active">Active</a></li>
        <li><a href="#/completed">Completed</a></li>
      </ul>
      <button class="clear-completed">
        Clear completed
      </button>
    </footer>
  </section>
</body>
</html>