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/basics/CreateTodoForm.vue

@@ -0,0 +1,30 @@
+<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, ref, Ref } from "vue";
+
+export default defineComponent({
+  name: "CreateTodoForm",
+
+  setup(_, context) {
+    const newTodoTitle: Ref<string> = ref("");
+    const onSubmit = (): void => {
+      if (!newTodoTitle.value) {
+        return;
+      }
+      context.emit("submit-new-todo", { title: newTodoTitle.value });
+      newTodoTitle.value = "";
+    };
+    return { newTodoTitle, onSubmit };
+  }
+});
+</script>

src/basics/EditTodoForm.vue

@@ -0,0 +1,48 @@
+<template>
+  <form @submit.prevent="onSubmit">
+    <input
+      ref="input"
+      type="text"
+      class="form-control px-5 py-4"
+      v-model.trim="todoBeingEdited.title"
+      @blur="onBlur"
+    />
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, PropType, Ref, ref } from "vue";
+import Todo from "@/models/todo";
+
+export default defineComponent({
+  name: "EditTodoForm",
+
+  props: {
+    todo: {
+      type: Object as PropType<Todo>,
+      required: true
+    }
+  },
+
+  setup(props, context) {
+    const todoBeingEdited: Todo = Object.assign({}, props.todo);
+
+    const onSubmit = () => {
+      if (!todoBeingEdited.title) {
+        return;
+      }
+      context.emit("complete-edit", { editedTodo: todoBeingEdited });
+    };
+    const onBlur = (): void => {
+      context.emit("cancel-edit");
+    };
+
+    const input: Ref<HTMLElement | null> = ref(null);
+    onMounted(() => {
+      (input.value as HTMLElement).focus();
+    });
+
+    return { todoBeingEdited, onSubmit, onBlur, input };
+  }
+});
+</script>

src/basics/TodoItem.vue

@@ -0,0 +1,80 @@
+<template>
+  <li class="list-group-item cleafix">
+    <input
+      type="checkbox"
+      class="mr-3"
+      :checked="todo.completed"
+      @change="onToggleChecked"
+    />
+    <span>{{ todo.title }}</span>
+    <span class="float-right">
+      <button
+        class="btn px-1 mr-1 position-relative"
+        style="bottom: 7px;"
+        @click="onClickEdit"
+      >
+        <fa icon="edit" class="edit-icon"></fa>
+      </button>
+      <button
+        class="btn px-1 position-relative"
+        style="bottom: 7px;"
+        @click="onClickRemove"
+      >
+        <fa icon="trash" class="trash-icon"></fa>
+      </button>
+    </span>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import Todo from "@/models/todo";
+import { FontAwesomeIcon } from "@/plugins/font-awesome";
+
+export default defineComponent({
+  name: "TodoItem",
+
+  components: { fa: FontAwesomeIcon },
+
+  props: {
+    todo: {
+      type: Object as PropType<Todo>,
+      required: true
+    }
+  },
+
+  setup(props, context) {
+    const onToggleChecked = () => {
+      context.emit("toggle-completed", {
+        todo: Object.assign({}, props.todo, {
+          completed: !props.todo.completed
+        })
+      });
+    };
+    const onClickEdit = () => {
+      context.emit("click-edit", { todo: props.todo });
+    };
+    const onClickRemove = () => {
+      context.emit("click-remove", { todo: props.todo });
+    };
+
+    return {
+      onToggleChecked,
+      onClickEdit,
+      onClickRemove
+    };
+  }
+});
+</script>
+
+<style scoped>
+.edit-icon {
+  width: 15px;
+  height: 15px;
+}
+
+.trash-icon {
+  width: 15px;
+  height: 15px;
+}
+</style>