migrate: component (wip)

vuejs-jp · Aug 11, 2024 · 5500a72 · 5500a72
1 parent 7215a3e
commit 5500a72
Show file tree

Hide file tree

Showing 25 changed files with 357 additions and 428 deletions.
diff --git a/app/components/AppAlert.vue b/app/components/AppAlert.vue
@@ -1,74 +1,41 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import IconCheckCircle from "./icons/IconCheckCircle.vue";
-import IconXCircle from "./icons/IconXCircle.vue";
+<script setup lang="ts">
 import AppModal from "./AppModal.vue";
+import { useModalStore } from "~/store/index";
 
-interface Data {
-  type: "success" | "error";
-  title: string;
-  text: string;
-}
-
-interface Classes {
-  success: boolean;
-  error: boolean;
-}
-
-export default defineComponent({
-  components: {
-    AppModal
-  },
-
-  computed: {
-    data(): Data {
-      return this.$store.state.modal.data;
-    },
-
-    classes(): Classes {
-      return {
-        success: this.data.type === "success",
-        error: this.data.type === "error"
-      };
-    },
-
-    icon() {
-      if (this.data.type === "error") {
-        return IconXCircle;
-      }
-
-      return IconCheckCircle;
-    }
-  },
-
-  methods: {
-    close(): void {
-      this.$store.dispatch("alert/close");
-    }
-  }
-});
+const { state, close } = useModalStore();
 </script>
 
 <template>
   <AppModal name="alert">
     <div
       class="AppAlert"
-      :class="classes"
+      :class="{
+        success: state.data?.type === 'success',
+        error: state.data?.type === 'error'
+      }"
     >
       <div class="box">
         <div class="status">
-          <component
-            :is="icon"
+          <img
+            v-if="state.data?.type === 'success'"
+            src="/img/icons/check-circle.svg"
+            alt="check-circle-icon"
+            class="status-icon"
+          >
+          <img
+            v-else
+            src="/img/icons/x-circle.svg"
+            alt="x-circle-icon"
             class="status-icon"
-          />
+          >
         </div>
 
         <div class="body">
           <p class="title">
-            {{ data.title }}
+            {{ state.data?.title }}
           </p>
           <p class="text">
-            {{ data.text }}
+            {{ state.data?.text }}
           </p>
         </div>
 

diff --git a/app/components/AppDialog.vue b/app/components/AppDialog.vue
@@ -1,32 +1,24 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import IconPreloaderDark from "./icons/IconPreloaderDark.vue";
+<script setup lang="ts">
 import AppModal from "./AppModal.vue";
+import { useModalStore } from "~/store";
 
-export default defineComponent({
-  components: {
-    IconPreloaderDark,
-    AppModal
-  },
-
-  computed: {
-    title(): string {
-      return this.$store.state.modal.data.title;
-    }
-  }
-});
+const { state } = useModalStore();
 </script>
 
 <template>
   <AppModal name="dialog">
     <div class="AppDialog">
       <div class="box">
         <p class="title">
-          {{ title }}
+          {{ state.data?.title }}
         </p>
 
         <div class="loader">
-          <IconPreloaderDark class="loader-icon" />
+          <img
+            src="/img/icons/preloader-dark.svg"
+            alt="preloader-dark-icon"
+            class="loader-icon"
+          >
         </div>
       </div>
     </div>

diff --git a/app/components/AppModal.vue b/app/components/AppModal.vue
@@ -1,24 +1,17 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
+import { useModalStore } from "~/store";
 
-export default defineComponent({
-  props: {
-    name: { type: String, required: true }
-  },
-
-  computed: {
-    show(): boolean {
-      return (this.$store as any).state.modal.name === this.name;
-    }
-  }
-});
+const props = defineProps<{ name: string }>();
+const { state } = useModalStore();
+const isShowed = computed(() => state.value.data?.name === props.name);
 </script>
 
 <template>
   <portal to="modal">
     <transition name="fade">
       <div
-        v-if="show"
+        v-if="isShowed"
         class="AppModal"
       >
         <slot />

diff --git a/app/components/ButtonOutline.vue b/app/components/ButtonOutline.vue
@@ -1,31 +1,27 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import { isExternalLink } from "~/_legacy/support/Url";
 
-export default defineComponent({
-  props: {
-    tag: { type: String, default: "button" },
-    block: { type: Boolean, default: false },
-    icon: { type: Object, default: null },
-    label: { type: String, required: true },
-    to: { type: String, default: null },
-    href: { type: String, default: null }
-  },
-
-  computed: {
-    link(): string | null {
-      return this.href || this.to;
-    },
+const props = withDefaults(defineProps<{
+  label: string;
+  tag?: "button" | "nuxt-link" | "a";
+  block?: boolean;
+  icon?: string | null;
+  to?: string | null;
+  href?: string | null;
+}>(), {
+  tag: "button",
+  block: false,
+  icon: null,
+  to: null,
+  href: null
+});
 
-    isExternalLink(): boolean {
-      return this.link ? isExternalLink(this.link) : false;
-    },
+defineEmits<{ click: [] }>();
 
-    target(): string {
-      return this.isExternalLink ? "_blank" : "_self";
-    }
-  }
-});
+const link = computed(() => props.href || props.to);
+const isExternalLink = computed(() => link.value ? isExternalLink(link.value) : false);
+const target = computed(() => isExternalLink.value ? "_blank" : "_self");
 </script>
 
 <template>
@@ -42,11 +38,12 @@ export default defineComponent({
       :href="href"
       :target="target"
     >
-      <Component
-        :is="icon"
+      <img
         v-if="icon"
+        :src="icon"
+        alt="icon"
         class="icon"
-      />
+      >
       <span class="label">{{ label }}</span>
     </Component>
   </div>

diff --git a/app/components/HamburgerMenu.vue b/app/components/HamburgerMenu.vue
@@ -1,19 +1,16 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    active: { type: Boolean, required: true }
-  }
-});
+<script setup lang="ts">
+defineProps<{ active: boolean }>();
+defineEmits<{ click: [] }>();
 </script>
 
 <template>
   <div
+    role="button"
+    tabindex="0"
     class="HamburgerMenu"
     :class="{ active }"
-    role="button"
     @click="$emit('click')"
+    @keydown="$emit('click')"
   >
     <div class="container">
       <div class="top" />

diff --git a/app/components/HomeAbout.vue b/app/components/HomeAbout.vue
@@ -38,7 +38,7 @@ import StyleMount from "./StyleMount.vue";
             <ButtonOutline
               tag="nuxt-link"
               :block="true"
-              :href="localePath('/about')"
+              :href="$localePath('/about')"
               :label="$t('components.HomeAbout.vuejs-jp')"
             />
           </div>

diff --git a/app/components/HomeCommunications.vue b/app/components/HomeCommunications.vue
@@ -1,53 +1,44 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import IconSlack from "./icons/IconSlack.vue";
-import IconVue from "./icons/IconVue.vue";
+<script setup lang="ts">
 import StyleMount from "./StyleMount.vue";
 import ButtonOutline from "./ButtonOutline.vue";
 import ChatStack from "./ChatStack.vue";
-
-export default defineComponent({
-  components: {
-    StyleMount,
-    ButtonOutline,
-    ChatStack
+import { useNuxtApp } from "#app";
+
+const { $i18n: { t } } = useNuxtApp();
+
+const chats = [
+  {
+    direction: "left",
+    avatar: "/img/home/avatar-001.jpg",
+    alt: "Avatar 001",
+    name: "Arisa Miyake",
+    time: "3:12 PM",
+    body: t("components.HomeCommunications.chats.user1")
   },
-
-  data() {
-    const $t = this.$t.bind(this);
-    return {
-      iconSlack: IconSlack,
-      iconVue: IconVue,
-
-      chats: [
-        {
-          direction: "left",
-          avatar: "/img/home/avatar-001.jpg",
-          alt: "Avatar 001",
-          name: "Arisa Miyake",
-          time: "3:12 PM",
-          body: $t("components.HomeCommunications.chats.user1")
-        },
-        {
-          direction: "right",
-          avatar: "/img/home/avatar-002.jpg",
-          alt: "Avatar 002",
-          name: "Kenji Yamadera",
-          time: "3:19 PM",
-          body: $t("components.HomeCommunications.chats.user2")
-        },
-        {
-          direction: "left",
-          avatar: "/img/home/avatar-003.jpg",
-          alt: "Avatar 003",
-          name: "Ai Nakagawa",
-          time: "3:25 PM",
-          body: $t("components.HomeCommunications.chats.user3")
-        }
-      ]
-    };
+  {
+    direction: "right",
+    avatar: "/img/home/avatar-002.jpg",
+    alt: "Avatar 002",
+    name: "Kenji Yamadera",
+    time: "3:19 PM",
+    body: t("components.HomeCommunications.chats.user2")
+  },
+  {
+    direction: "left",
+    avatar: "/img/home/avatar-003.jpg",
+    alt: "Avatar 003",
+    name: "Ai Nakagawa",
+    time: "3:25 PM",
+    body: t("components.HomeCommunications.chats.user3")
   }
-});
+] as const satisfies {
+  direction: "left" | "right";
+  avatar: string;
+  alt: string;
+  name: string;
+  time: string;
+  body: string;
+}[];
 </script>
 
 <template>
@@ -94,7 +85,7 @@ export default defineComponent({
               tag="a"
               :block="true"
               href="https://join.slack.com/t/vuejs-jp/shared_invite/zt-vmg3iysl-~CPGAxFMWwa0Fnu2IqtMdQ"
-              :icon="iconSlack"
+              icon="/img/icons/slack.svg"
               :label="$t('components.HomeCommunications.slack')"
             />
           </div>
@@ -104,7 +95,7 @@ export default defineComponent({
               tag="a"
               :block="true"
               href="https://forum.vuejs.org/c/japanese"
-              :icon="iconVue"
+              icon="/img/icons/vue.svg"
               :label="$t('components.HomeCommunications.forum')"
             />
           </div>