refactor(overmind): refactor vue demo to vue templates

Author: christianalfoni

packages/demos/vue-todomvc/.babelrc

@@ -1,3 +1,4 @@
 {
+  "presets": ["vue"],
   "plugins": ["transform-vue-jsx"]
-}
+}

packages/demos/vue-todomvc/package.json

@@ -24,6 +24,7 @@
 	},
 	"devDependencies": {
 		"babel-plugin-transform-vue-jsx": "^3.7.0",
+		"babel-preset-vue": "^2.0.2",
 		"parcel-bundler": "^1.9.7"
 	}
 }

packages/demos/vue-todomvc/src/app/index.js

@@ -14,9 +14,11 @@ const app = new Overmind({
     addTodo({ value: event, state }) {
       event.preventDefault()
       state.todos.unshift({
+        id: String(Date.now()),
         title: state.newTodoTitle,
         completed: false,
       })
+      state.newTodoTitle = ''
     },
     toggleCompleted({ value: todo }) {
       todo.completed = !todo.completed

packages/demos/vue-todomvc/src/components/AddTodo.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="todos-wrapper">
+    <form v-on:submit="app.actions.addTodo">
+      <input
+        placeholder="I need to..."
+        v-bind:value="app.state.newTodoTitle"
+        v-on:input="app.actions.changeNewTodoTitle"
+      />
+      <button v-bind:disabled="app.state.newTodoTitle == ''">add</button>
+    </form>
+  </div>
+</template>
+<script>
+import { connect } from '../app'
+
+export default connect({
+  name: 'AddTodo',
+})
+</script>

packages/demos/vue-todomvc/src/components/AddTodo/elements.js

@@ -0,0 +1,16 @@
+<template>
+  <li class="todo" v-on:click="app.actions.toggleCompleted(todo)">
+        <button class="todo-completed" v-bind:class="{'todo-completed-complete': todo.completed }">
+          ✔
+        </button>
+        {{todo.title}}
+      </li>
+</template>
+<script>
+import { connect } from '../app'
+
+export default connect({
+  name: 'Todo',
+  props: ['todo'],
+})
+</script>