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/FontAwesomeIcon.vue

@@ -0,0 +1,48 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="className"
+    :viewBox="`0 0 ${width} ${height}`"
+  >
+    <path fill="currentColor" :d="svgPath" />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from "vue";
+import {
+  findIconDefinition,
+  IconName
+} from "@fortawesome/fontawesome-svg-core";
+
+export default defineComponent({
+  name: "FontAwesomeIcon",
+
+  props: {
+    icon: {
+      type: String as PropType<IconName>,
+      required: true
+    },
+    type: {
+      type: String as PropType<"fas" | "fal" | "far">,
+      default: "fas"
+    },
+    className: String
+  },
+
+  setup(props) {
+    const definition = computed(() =>
+      findIconDefinition({
+        prefix: props.type,
+        iconName: props.icon
+      })
+    );
+
+    const width = computed(() => definition.value.icon[0]);
+    const height = computed(() => definition.value.icon[1]);
+    const svgPath = computed(() => definition.value.icon[4]);
+
+    return { width, height, svgPath };
+  }
+});
+</script>

src/components/CreateTodoForm.vue

@@ -0,0 +1,48 @@
+<template>
+  <form @submit.prevent="handleSubmitNewTodo">
+    <input
+      type="text"
+      placeholder="Add new todo"
+      required
+      class="form-control px-5 py-4"
+      v-model.trim="state.title"
+      @change="$emit('update:newTodoTitle', $event.target.value)"
+    />
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, reactive, watch } from "vue";
+
+export type HandleSubmitNewTodo = () => void;
+
+type State = {
+  title: string;
+};
+
+export default defineComponent({
+  props: {
+    newTodoTitle: {
+      type: String as PropType<string>,
+      required: true
+    },
+    handleSubmitNewTodo: {
+      type: Function as PropType<HandleSubmitNewTodo>,
+      required: true
+    }
+  },
+
+  emits: ["update:newTodoTitle"],
+
+  setup(props) {
+    const state = reactive<State>({ title: props.newTodoTitle });
+    watch(
+      () => props.newTodoTitle,
+      newValue => {
+        state.title = newValue;
+      }
+    );
+    return { state };
+  }
+});
+</script>

src/components/EditTodoForm.vue

@@ -0,0 +1,46 @@
+<template>
+  <form @submit.prevent="handleSubmitEditedTodoAndReset(todoBeingEdited)">
+    <input
+      ref="input"
+      type="text"
+      class="form-control px-5 py-4"
+      v-model.trim="todoBeingEdited.title"
+      @blur="handleCancelEdit"
+      required
+    />
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, onMounted } from "vue";
+import type Todo from "@/models/todo";
+
+export type HandleCancelEdit = () => void;
+export type HandleSubmitEditedTodoAndReset = (editedTodo: Todo) => void;
+
+export default defineComponent({
+  props: {
+    todo: {
+      type: Object as PropType<Todo>,
+      required: true,
+    },
+    handleSubmitEditedTodoAndReset: {
+      type: Function as PropType<HandleSubmitEditedTodoAndReset>,
+      required: true,
+    },
+    handleCancelEdit: {
+      type: Function as PropType<HandleCancelEdit>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const todoBeingEdited: Todo = { ...props.todo };
+    const input = ref<HTMLInputElement | null>(null);
+    onMounted(() => {
+      input.value?.focus();
+    });
+    return { todoBeingEdited, input };
+  },
+});
+</script>

src/components/TodoItem.vue

@@ -0,0 +1,67 @@
+<template>
+  <li class="list-group-item d-flex justify-content-between">
+    <div>
+      <input
+        type="checkbox"
+        class="mr-3"
+        required
+        :checked="todo.completed"
+        @change="handleToggleCompleted(todo)"
+      />
+      <span>{{ todo.title }}</span>
+    </div>
+    <div class="my-n2">
+      <button class="btn px-1 mr-1" @click="handleClickEdit(todo.id)">
+        <FontAwesomeIcon icon="edit" className="edit-icon" />
+      </button>
+      <button class="btn px-1" @click="handleClickRemove(todo.id)">
+        <FontAwesomeIcon icon="trash" className="trash-icon" />
+      </button>
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { FontAwesomeIcon } from "@/plugins/font-awesome";
+import Todo from "@/models/todo";
+
+export type HandleToggleCompleted = (todo: Todo) => void;
+export type HandleClickEdit = (todoId: string) => void;
+export type HandleClickRemove = (todoId: string) => void;
+
+export default defineComponent({
+  components: { FontAwesomeIcon },
+
+  props: {
+    todo: {
+      type: Object as PropType<Todo>,
+      required: true
+    },
+    handleToggleCompleted: {
+      type: Function as PropType<HandleToggleCompleted>,
+      required: true
+    },
+    handleClickEdit: {
+      type: Function as PropType<HandleClickEdit>,
+      required: true
+    },
+    handleClickRemove: {
+      type: Function as PropType<HandleClickRemove>,
+      required: true
+    }
+  }
+});
+</script>
+
+<style scoped>
+.edit-icon {
+  width: 15px;
+  height: 15px;
+}
+
+.trash-icon {
+  width: 15px;
+  height: 15px;
+}
+</style>