Merge pull request #4 from yoshixmk/develop

Develop

package.json

@@ -28,26 +28,26 @@
     "bootstrap": "5.0.0-alpha1",
     "cors": "2.8.5",
     "popper.js": "1.16.1",
-    "vue": "3.0.0-rc.10",
+    "vue": "3.0.0",
     "vuex": "4.0.0-beta.4"
   },
   "devDependencies": {
     "@types/cors": "2.8.7",
-    "@types/node": "14.10.1",
-    "@typescript-eslint/eslint-plugin": "4.1.0",
-    "@typescript-eslint/parser": "4.1.0",
-    "@vue/compiler-sfc": "3.0.0-rc.10",
+    "@types/node": "14.11.1",
+    "@typescript-eslint/eslint-plugin": "4.1.1",
+    "@typescript-eslint/parser": "4.1.1",
+    "@vue/compiler-sfc": "3.0.0",
     "concurrently": "5.3.0",
     "dotenv": "8.2.0",
     "eslint": "7.9.0",
     "eslint-plugin-vue": "7.0.0-beta.3",
     "express": "4.17.1",
     "rimraf": "3.0.2",
     "rome": "10.0.4-beta",
-    "sass": "1.26.10",
+    "sass": "1.26.11",
     "ts-node": "9.0.0",
     "ts-node-dev": "1.0.0-pre.62",
-    "typescript": "4.0.2",
+    "typescript": "4.0.3",
     "vite": "1.0.0-rc.4",
     "vue-eslint-parser": "7.1.0"
   },

src/components/atoms/NavLink.vue

@@ -0,0 +1,22 @@
+<template>
+  <a
+    :href="href"
+    class="nav-link active"
+    aria-current="page"
+  >
+    <slot />
+  </a>
+</template>
+
+<script>
+import {defineComponent} from "vue"
+export default defineComponent({
+name: "NavLink",
+	props: {
+		href: {
+			type: String,
+			required: true
+		}
+	}
+})
+</script>

src/components/atoms/README.md

@@ -0,0 +1,2 @@
+# Atoms in Atomic Design
+![](https://cdn-ak.f.st-hatena.com/images/fotolife/h/headless_pasta/20171201/20171201111833.png)

src/components/organisms/Navbar.vue

@@ -11,18 +11,20 @@
       >
         <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
           <li class="nav-item">
-            <a
+            <nav-link
               v-if="isFacilitator"
               href="/"
-              class="nav-link active text-right"
-              aria-current="page"
-            >Vote</a>
-            <a
+              class="text-right"
+            >
+              Vote
+            </nav-link>
+            <nav-link
               v-else
               href="/fff"
-              class="nav-link active text-right"
-              aria-current="page"
-            >Facilitator</a>
+              class="text-right"
+            >
+              Facilitator
+            </nav-link>
           </li>
         </ul>
       </div>
@@ -31,26 +33,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
 import Brand from "../molecules/Brand.vue"
 import NavbarToggler from "../molecules/NavbarToggler.vue";
+import NavLink from "../atoms/NavLink.vue"
 
 export default defineComponent({
   components: {
     Brand,
     NavbarToggler,
+		NavLink,
   },
   props: {
     msg: {
       type: String,
       default: "",
     },
   },
-  computed: {
-    isFacilitator(): boolean {
-      return this.msg === "Facilitator";
-    },
-  },
+	setup(props) {
+		const isFacilitator = computed(() => props.msg === "Facilitator")
+		return {
+			isFacilitator
+		}
+	},
 });
 </script>