migrate: component (wip)

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>
 

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>

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 />

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>

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" />

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>

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>