convert TodoMVC from VueJS examples

Author: havvg

package-lock.json

@@ -23,6 +23,7 @@
  "ts-loader": "^3.1.0",
  "vue-class-component": "^6.0.0",
  "vue-loader": "^13.0.5",
+ "vue-property-decorator": "^6.0.0",
  "vue-template-compiler": "^2.4.4",
  "vue-ts-loader": "0.0.3",
  "webpack": "^3.6.0",

package.json

@@ -1,65 +1,197 @@
 <template>
- <div id="app">
- <img src="./assets/logo.png">
- <h1>{{ msg }}</h1>
- <h2>Essential Links</h2>
- <ul>
- <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
- <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
- <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
- <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
- </ul>
- <h2>Ecosystem</h2>
- <ul>
- <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
- <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
- <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
- <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
- </ul>
- </div>
+ <div id="app">
+ <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" v-cloak>
+ <input class="toggle-all" type="checkbox" v-model="allDone">
+ <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-todo-focus="todo == editedTodo"
+ @blur="doneEdit(todo)"
+ @keyup.enter="doneEdit(todo)"
+ @keyup.esc="cancelEdit(todo)">
+ </li>
+ </ul>
+ </section>
+
+ <footer class="footer" v-show="todos.length" v-cloak>
+ <span class="todo-count"><strong>{{ remaining }}</strong> {{ remaining | pluralize }} left</span>
+ <ul class="filters">
+ <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
+ <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
+ <li><a href="#/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>
+
+ <footer class="info">
+ <p>Double-click to edit a todo</p>
+ <p>Written by <a href="http://evanyou.me">Evan You</a></p>
+ <p>Converted by <a href="http://toni.uebernickel.info">Toni Uebernickel</a></p>
+ <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+ </footer>
+ </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import Component from 'vue-class-component';
+import { Component, Vue, Watch } from 'vue-property-decorator'
+
+import Todo from './Todo'
+import TodoStorage from './TodoStorage'
+
+Vue.filter('pluralize', (n: number): string => {
+ return n === 1 ? 'item' : 'items'
+})
+
+Vue.directive('todo-focus', (el, binding) => {
+ if (binding.value) {
+ el.focus()
+ }
+})
+
+const filters = {
+ all(todos: Todo[]): Todo[] {
+ return todos
+ },
+
+ active(todos: Todo[]): Todo[] {
+ return todos.filter((todo: Todo) => {
+ return !todo.completed
+ })
+ },
+
+ completed(todos: Todo[]): Todo[] {
+ return todos.filter((todo: Todo) => {
+ return todo.completed
+ })
+ }
+}
 
 @Component({
  name: 'app'
 })
 export default class App extends Vue {
- data () {
- return {
- msg: 'Welcome to Your Vue.js App, supporting TypeScript'
+ private storage: TodoStorage = new TodoStorage()
+
+ private todos: Todo[] = this.storage.fetch()
+ private visibility: string = 'all'
+
+ private newTodo: string = ''
+ private editedTodo: Todo|null = null
+ private beforeEditCache: string|null = null
+
+ constructor() {
+ super()
+
+ window.addEventListener('hashchange', this.onHashChange)
+ }
+
+ get filteredTodos(): Todo[] {
+ return filters[this.visibility](this.todos)
+ }
+
+ get remaining(): number {
+ return filters.active(this.todos).length
+ }
+
+ get allDone(): boolean {
+ return this.remaining === 0
+ }
+
+ set allDone(value: boolean) {
+ this.todos.forEach((todo: Todo) => {
+ todo.completed = value
+ })
+ }
+
+ addTodo() {
+ const title = this.newTodo && this.newTodo.trim()
+ if (!title) {
+ return
  }
+
+ this.todos.push({
+ id: this.storage.nextUid(),
+ title: title,
+ completed: false
+ })
+
+ this.newTodo = ''
  }
-}
-</script>
 
-<style lang="scss">
-#app {
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
-}
+ removeTodo(todo) {
+ this.todos.splice(this.todos.indexOf(todo), 1)
+ }
 
-h1, h2 {
- font-weight: normal;
-}
+ editTodo(todo: Todo) {
+ this.beforeEditCache = todo.title
+ this.editedTodo = todo
+ }
 
-ul {
- list-style-type: none;
- padding: 0;
-}
+ doneEdit(todo) {
+  if (!this.editedTodo) {
+  return
+ }
 
-li {
- display: inline-block;
- margin: 0 10px;
-}
+ this.editedTodo = null
+
+ todo.title = todo.title.trim()
+ if (!todo.title) {
+ this.removeTodo(todo)
+ }
+ }
 
-a {
- color: #42b983;
+ cancelEdit(todo) {
+ this.editedTodo = null
+ todo.title = this.beforeEditCache
+ }
+
+ removeCompleted() {
+ this.todos = filters.active(this.todos)
+ }
+
+ @Watch('todos', { deep: true})
+ onTodosChange() {
+ this.storage.save(this.todos)
+ }
+
+ onHashChange() {
+ const visibility = window.location.hash.replace(/#\/?/, '')
+
+ if (filters[visibility]) {
+ this.visibility = visibility
+ } else {
+ window.location.hash = ''
+
+ this.visibility = 'all'
+ }
+ }
 }
+</script>
+
+<style lang="scss">
+@import url('https://unpkg.com/todomvc-app-css@2.0.6/index.css');
+
+[v-cloak] { display: none; }
 </style>

src/App.vue

@@ -0,0 +1,5 @@
+export default interface Todo {
+ id: number
+ title: string
+ completed: boolean
+}

src/Todo.ts

@@ -0,0 +1,27 @@
+import Todo from './Todo'
+
+const STORAGE_KEY = 'todos-vuejs-2.0'
+
+export default class TodoStorage {
+ private uid: number = 1
+
+ nextUid(): number {
+ return this.uid++;
+ }
+
+ fetch(): Todo[] {
+ const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
+
+ todos.forEach((todo, index) => {
+ todo.id = index
+ })
+
+ this.uid = todos.length
+
+ return todos
+ }
+
+ save(todos: Todo[]) {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+ }
+}