todomvc.html

<link
  rel="stylesheet"
  href="https://unpkg.com/todomvc-app-css@2.4.1/index.css"
/>
<style>
  [v-cloak] {
    display: none;
  }
</style>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  const STORAGE_KEY = 'todos-petite-vue'
  const todoStorage = {
    fetch() {
      const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
      todos.forEach((todo, index) => {
        todo.id = index
      })
      todoStorage.uid = todos.length
      return todos
    },
    save(todos) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
    }
  }

  const filters = {
    all(todos) {
      return todos
    },
    active(todos) {
      return todos.filter((todo) => {
        return !todo.completed
      })
    },
    completed(todos) {
      return todos.filter(function (todo) {
        return todo.completed
      })
    }
  }

  createApp({
    todos: todoStorage.fetch(),
    newTodo: '',
    editedTodo: null,
    visibility: 'all',

    get filteredTodos() {
      return filters[this.visibility](this.todos)
    },

    get remaining() {
      return filters.active(this.todos).length
    },

    get allDone() {
      return this.remaining === 0
    },

    set allDone(value) {
      this.todos.forEach(function (todo) {
        todo.completed = value
      })
    },

    save() {
      todoStorage.save(this.todos)
    },

    setupRouting() {
      const onHashChange = () => {
        var visibility = window.location.hash.replace(/#\/?/, '')
        if (filters[visibility]) {
          this.visibility = visibility
        } else {
          window.location.hash = ''
          this.visibility = 'all'
        }
      }
      window.addEventListener('hashchange', onHashChange)
      onHashChange()
    },

    addTodo() {
      var value = this.newTodo && this.newTodo.trim()
      if (!value) {
        return
      }
      this.todos.push({
        id: todoStorage.uid++,
        title: value,
        completed: false
      })
      this.newTodo = ''
    },

    removeTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1)
    },

    editTodo(todo) {
      this.beforeEditCache = todo.title
      this.editedTodo = todo
    },

    doneEdit(todo) {
      if (!this.editedTodo) {
        return
      }
      this.editedTodo = null
      todo.title = todo.title.trim()
      if (!todo.title) {
        this.removeTodo(todo)
      }
    },

    cancelEdit(todo) {
      this.editedTodo = null
      todo.title = this.beforeEditCache
    },

    removeCompleted() {
      this.todos = filters.active(this.todos)
    },

    pluralize(n) {
      return n === 1 ? 'item' : 'items'
    }
  }).mount('#app')
</script>

<div id="app" @vue:mounted="setupRouting" v-effect="save()" v-cloak>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        autofocus
        autocomplete="off"
        placeholder="What needs to be done?"
        v-model="newTodo"
        @keyup.enter="addTodo"
      />
    </header>
    <section class="main" v-show="todos.length">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        v-model="allDone"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          v-for="todo in filteredTodos"
          class="todo"
          :key="todo.id"
          :class="{ completed: todo.completed, editing: todo === editedTodo }"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="todo.completed" />
            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
            <button class="destroy" @click="removeTodo(todo)"></button>
          </div>
          <input
            class="edit"
            type="text"
            v-model="todo.title"
            v-effect="if (todo === editedTodo) $el.focus()"
            @blur="doneEdit(todo)"
            @keyup.enter="doneEdit(todo)"
            @keyup.escape="cancelEdit(todo)"
          />
        </li>
      </ul>
    </section>
    <footer class="footer" v-show="todos.length">
      <span class="todo-count">
        <strong>{{ remaining }}</strong>
        <span>{{ pluralize(remaining) }} left</span>
      </span>
      <ul class="filters">
        <li>
          <a href="#/all" @click="visibility = 'all'" :class="{ selected: visibility === 'all' }">All</a>
        </li>
        <li>
          <a href="#/active" @click="visibility = 'active'" :class="{ selected: visibility === 'active' }"
            >Active</a
          >
        </li>
        <li>
          <a
            href="#/completed"
            @click="visibility = 'completed'" :class="{ selected: visibility === 'completed' }"
            >Completed</a
          >
        </li>
      </ul>
      <button
        class="clear-completed"
        @click="removeCompleted"
        v-show="todos.length > remaining"
      >
        Clear completed
      </button>
    </footer>
  </section>
</div>