Adds todomvc-app-vue sample

.gitignore

@@ -20,6 +20,7 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+*.lcov
 
 # nyc test coverage
 .nyc_output
@@ -43,6 +44,9 @@ jspm_packages/
 # TypeScript v1 declaration files
 typings/
 
+# TypeScript cache
+*.tsbuildinfo
+
 # Optional npm cache directory
 .npm
 
@@ -83,5 +87,5 @@ typings/
 # DynamoDB Local files
 .dynamodb/
 
-#VSCode
-.vscode/
+# VS Code
+.vscode/

README.md

@@ -19,7 +19,9 @@ Some samples can be run here:
 - [crud-blog](https://fish-trader.hyperdev.space/)
 - [vanilla-focus-textarea](https://codepen.io/sam-pattern/pen/vJvyro)
 
-## Recent Updates
+## Recently Updated
 
-created the [todomvc-app-lit-html](https://github.com/jdubray/sam-samples/tree/master/todomvc-app-lit-html) sample with the [sam-pattern](https://www.npmjs.com/package/sam-pattern) library
-Updated the [todomvc-app](https://github.com/jdubray/sam-samples/tree/master/todomvc-app) sample to use the new [sam-pattern](https://www.npmjs.com/package/sam-pattern) library
+Now running with the [sam-pattern](https://www.npmjs.com/package/sam-pattern) library
+- [todomvc-app-lit-html](https://github.com/jdubray/sam-samples/tree/master/todomvc-app-lit-html)  
+- [todomvc-app-react](https://github.com/jdubray/sam-samples/tree/master/todomvc-app-react) samples 
+- [todomvc-app](https://github.com/jdubray/sam-samples/tree/master/todomvc-app) (vanillajs)

todomvc-app-vue/.gitignore

@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next

todomvc-app-vue/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Adrian Mejia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

todomvc-app-vue/README.md

@@ -0,0 +1,3 @@
+# vue-todo-app
+
+Based on on Adrian Mejia's tutorial [Learn Vue.js doing a Todo app with routing](https://adrianmejia.com/vue-js-tutorial-for-beginners-create-a-todo-app/)

todomvc-app-vue/app.js

@@ -0,0 +1,142 @@
+const localState = (prop) => {
+  if (prop && typeof prop === 'object') {
+    const todos = state()._todos
+    const index = todos.indexOf(prop)
+    return todos[index]
+  }
+  if (prop === 'todos') {
+    return state('_todos')
+  }
+  return state(prop)
+}
+
+const todoComponent = Vue.component('todo-app', {
+  data() {
+    return localState()
+  },
+  methods: {
+    destroy: deleteIntent,
+    startEditing(todo) {
+      // this.editingTodo = todo;
+      // this.beforeText = todo.text;
+    },
+    finishEditing(todo) {
+      // this.editingTodo = null;
+    },
+    cancelEditing(todo) {
+      // this.editingTodo = null;
+      // todo.text = this.beforeText;
+    },
+    complete: completeIntent,
+    createTodo(event) {
+      createTodoIntent(event)
+      this.newTodo = null
+    },
+    clearCompleted: clearIntent
+  },
+  computed: {
+    todos() {
+        const out = localState('_todos').filter(todo => !todo.isDeleted);
+        const foo = localState('exists')
+        console.log(out)
+        return out
+    },
+    status() {
+      return this.$route.params.status;
+    },
+    filteredTodos () {
+      switch (this.status) {
+        case 'active':
+          return localState('activeTodos');
+        case 'completed':
+          return localState('completedTodos');
+
+        default:
+          return localState('_todos').filter(todo => !todo.isDeleted);
+      }
+    }
+  },
+  watch: {
+    todos: {
+      deep: true,
+      handler(newValue) {
+        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newValue));
+      }
+    }
+  },
+  template: `
+    <div>
+      <section class="todoapp">
+        <header class="header">
+          <h1>Todos</h1>
+          <input class="new-todo" placeholder="What needs to be done?"
+            v-model.trim="newTodo"
+            @keyup.enter="createTodo($event)"
+            autofocus>
+        </header>
+
+        <!-- This section should be hidden by default and shown when there are todos -->
+        <section class="main">
+          <ul class="todo-list">
+
+            <li v-for="todo in filteredTodos"
+                :class="{completed: todo.isDone, editing: todo === editingTodo}">
+
+              <div class="view">
+                <input class="toggle" type="checkbox" @click="complete(todo)" v-bind:value="!todo.isDone">
+                <label @dblclick="startEditing(todo)">{{todo.text}}</label>
+                <button class="destroy" @click="destroy(todo)"></button>
+              </div>
+
+              <input class="edit"
+                @keyup.escape="cancelEditing(todo)"
+                @keyup.enter="finishEditing(todo)"
+                @blur="finishEditing(todo)"
+                v-model.trim="todo.text">
+            </li>
+
+          </ul>
+        </section>
+
+        <!-- This footer should hidden by default and shown when there are todos -->
+        <footer class="footer">
+          <span class="todo-count">
+            <strong>{{itemsLeft}}</strong> item(s) left</span>
+
+          <!-- Remove this if you don't implement routing -->
+          <ul class="filters">
+            <li>
+              <router-link to="/all" :class="{ selected: status === 'all' }">All</router-link>
+            </li>
+            <li>
+              <router-link to="/active" :class="{ selected: status === 'active' }">Active</router-link>
+            </li>
+            <li>
+              <router-link to="/completed" :class="{ selected: status === 'completed' }">Completed</router-link>
+            </li>
+          </ul>
+
+          <!-- Hidden if no completed items are left ↓ -->
+          <button class="clear-completed" @click="clearCompleted">Clear completed</button>
+        </footer>
+      </section>
+
+      <footer class="info">
+        <p>Double-click to edit a todo</p>
+        <p>Esc to cancel edit</p>
+        <p>Enter to accept edit</p>
+      </footer>
+    </div>`,
+});
+
+const router = new VueRouter({
+  mode: 'history',
+  routes: [
+    { path: '/:status', component: { template: `<todo-app></todo-app>`} },
+    { path: '*', redirect: '/all' },
+  ]
+});
+
+const app = new Vue({
+  router
+}).$mount('#app')

todomvc-app-vue/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Todo Vue</title>
+  <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+  <base href="/">
+</head>
+
+<body>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+
+
+  <script src="node_modules/vue/dist/vue.js"></script>
+  <script src="node_modules/vue-router/dist/vue-router.js"></script>
+  <script src="node_modules/sam-pattern/dist/SAM.js"></script>
+  <script src="sam.js"></script>
+  <script src="app.js"></script>
+</body>
+
+</html>