composition-api を用いて todo-app を作ってみる

package.json

@@ -8,6 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^3.0.0-3",
+    "bootstrap": "^4.5.3",
+    "nanoid": "^3.1.20",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"
   },

src/App.vue

@@ -1,30 +1,11 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
   <router-view />
 </template>
 
 <style>
+html,
+body,
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+  height: 100%;
 }
 </style>

src/components/EditTodoFrom.vue

@@ -0,0 +1,55 @@
+<template>
+  <form @submit.prevent="onSubmit">
+    <input
+      ref="input"
+      type="text"
+      class="form-control px-5 py-4"
+      v-model="todoBeingEdited.title"
+      @blur="$emit('complete-edit-todo')"
+    />
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, inject } from "vue";
+import Todo from "@/models/todo";
+import { TodosStore } from "@/composables/use-todos-store";
+import TodosStoreKey from "@/composables/use-todos-store-key";
+
+export default defineComponent({
+  name: "EditTodoForm",
+
+  props: {
+    todo: {
+      type: Object as PropType<Todo>,
+      required: true
+    }
+  },
+
+  setup() {
+    const { updateTodo } = inject(TodosStoreKey) as TodosStore;
+    return { updateTodo };
+  },
+
+  data(): { todoBeingEdited: Todo } {
+    return {
+      todoBeingEdited: { ...this.todo }
+    };
+  },
+
+  mounted() {
+    (this.$refs.input as HTMLElement).focus();
+  },
+
+  methods: {
+    onSubmit() {
+      this.updateTodo({
+        id: this.todo.id,
+        completed: this.todo.completed,
+        title: this.todoBeingEdited.title
+      });
+      this.$emit("complete-edit-todo");
+    }
+  }
+});
+</script>

src/components/NewTodoForm.vue

@@ -0,0 +1,41 @@
+<template>
+  <form @submit.prevent="onSubmit">
+    <input
+      type="text"
+      class="form-control px-5 py-4"
+      placeholder="Add new todo"
+      v-model.trim="newTodoTitle"
+    />
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from "vue";
+import { TodosStore } from "@/composables/use-todos-store";
+import TodosStoreKey from "@/composables/use-todos-store-key";
+
+export default defineComponent({
+  name: "NewTodoForm",
+
+  setup() {
+    const { createTodo } = inject(TodosStoreKey) as TodosStore;
+    return { createTodo };
+  },
+
+  data(): { newTodoTitle: string } {
+    return {
+      newTodoTitle: ""
+    };
+  },
+
+  methods: {
+    onSubmit() {
+      if (!this.newTodoTitle) {
+        return;
+      }
+      this.createTodo({ title: this.newTodoTitle, completed: false });
+      this.newTodoTitle = "";
+    }
+  }
+});
+</script>

src/components/TodoItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <li class="list-group-item clearfix">
+    <input
+      type="checkbox"
+      class="mr-3"
+      :checked="todo.completed"
+      @change="onToggleChecked()"
+    />
+    <span>{{ todo.title }}</span>
+    <span class="float-right">
+      <button
+        class="btn py-0 px-1 mr-1"
+        @click="$emit('click-edit-todo', todo)"
+      >
+        <fa icon="edit" style="width: 15px; height: 15px;" class="my-0"></fa>
+      </button>
+      <button class="btn py-0 px-1" @click="removeTodo({ id: todo.id })">
+        <fa icon="trash" style="width: 15px; height: 15px;" class="my-0"></fa>
+      </button>
+    </span>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, inject } from "vue";
+import Todo from "@/models/todo";
+import { TodosStore } from "@/composables/use-todos-store";
+import TodosStoreKey from "@/composables/use-todos-store-key";
+
+export default defineComponent({
+  name: "TodoItem",
+
+  props: {
+    todo: {
+      type: Object as PropType<Todo>,
+      required: true
+    }
+  },
+
+  setup() {
+    const { updateTodo, removeTodo } = inject(TodosStoreKey) as TodosStore;
+    return { updateTodo, removeTodo };
+  },
+
+  methods: {
+    onToggleChecked() {
+      this.updateTodo({
+        id: this.todo.id,
+        title: this.todo.title,
+        completed: !this.todo.completed
+      });
+    }
+  }
+});
+</script>

src/composables/use-todos-store-key.ts

@@ -0,0 +1,5 @@
+import { InjectionKey } from "vue";
+import { TodosStore } from "@/composables/use-todos-store";
+
+const TodosStoreKey: InjectionKey<TodosStore> = Symbol("TodosStore");
+export default TodosStoreKey;

src/composables/use-todos-store.ts

@@ -0,0 +1,44 @@
+import Todo from "@/models/todo";
+import { reactive } from "vue";
+import * as TodosService from "@/storage/todos-service";
+
+export default function useTodosStore() {
+  const state = reactive<{ todos: Todo[] }>({ todos: [] });
+
+  const fetchTodos = () => {
+    state.todos = TodosService.getTodos();
+  };
+
+  const createTodo = ({
+    title,
+    completed
+  }: {
+    title: string;
+    completed: boolean;
+  }) => {
+    TodosService.postTodo({ title, completed });
+    fetchTodos();
+  };
+
+  const updateTodo = ({
+    id,
+    title,
+    completed
+  }: {
+    id: string;
+    title: string;
+    completed: boolean;
+  }) => {
+    TodosService.putTodo({ id, title, completed });
+    fetchTodos();
+  };
+
+  const removeTodo = ({ id }: { id: string }) => {
+    TodosService.deleteTodo({ id });
+    fetchTodos();
+  };
+
+  return { state, fetchTodos, createTodo, updateTodo, removeTodo };
+}
+
+export type TodosStore = ReturnType<typeof useTodosStore>;