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="$props.class"
+    :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"
+    },
+    class: 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,36 @@
+<template>
+  <form @submit.prevent="onSubmit">
+    <input
+      type="text"
+      class="form-control px-5 py-4"
+      placeholder="Add new todo"
+      v-model.trim="newTodoTitle"
+      required
+    />
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, Ref } from "vue";
+import Todo from "@/models/todo";
+
+export type HandleSubmitNewTodo = ({ title }: Pick<Todo, "title">) => void;
+
+export default defineComponent({
+  props: {
+    handleSubmitNewTodo: {
+      type: Function as PropType<HandleSubmitNewTodo>,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const newTodoTitle: Ref<string> = ref("");
+    const onSubmit = (): void => {
+      props.handleSubmitNewTodo({ title: newTodoTitle.value });
+      newTodoTitle.value = "";
+    };
+    return { newTodoTitle, onSubmit };
+  }
+});
+</script>

src/components/EditTodoForm.vue

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