Skip to content

Commit 5500a72

Browse files
ubugeeeiubugeeei
committed
migrate: component (wip)
1 parent 7215a3e commit 5500a72

25 files changed

+357
-428
lines changed

‎app/components/AppAlert.vue

+20-53
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,41 @@
1-
<script lang="ts">
2-
import { defineComponent } from "vue";
3-
import IconCheckCircle from "./icons/IconCheckCircle.vue";
4-
import IconXCircle from "./icons/IconXCircle.vue";
1+
<script setup lang="ts">
52
import AppModal from "./AppModal.vue";
3+
import { useModalStore } from "~/store/index";
64
7-
interface Data {
8-
type: "success" | "error";
9-
title: string;
10-
text: string;
11-
}
12-
13-
interface Classes {
14-
success: boolean;
15-
error: boolean;
16-
}
17-
18-
export default defineComponent({
19-
components: {
20-
AppModal
21-
},
22-
23-
computed: {
24-
data(): Data {
25-
return this.$store.state.modal.data;
26-
},
27-
28-
classes(): Classes {
29-
return {
30-
success: this.data.type === "success",
31-
error: this.data.type === "error"
32-
};
33-
},
34-
35-
icon() {
36-
if (this.data.type === "error") {
37-
return IconXCircle;
38-
}
39-
40-
return IconCheckCircle;
41-
}
42-
},
43-
44-
methods: {
45-
close(): void {
46-
this.$store.dispatch("alert/close");
47-
}
48-
}
49-
});
5+
const { state, close } = useModalStore();
506
</script>
517

528
<template>
539
<AppModal name="alert">
5410
<div
5511
class="AppAlert"
56-
:class="classes"
12+
:class="{
13+
success: state.data?.type === 'success',
14+
error: state.data?.type === 'error'
15+
}"
5716
>
5817
<div class="box">
5918
<div class="status">
60-
<component
61-
:is="icon"
19+
<img
20+
v-if="state.data?.type === 'success'"
21+
src="/img/icons/check-circle.svg"
22+
alt="check-circle-icon"
23+
class="status-icon"
24+
>
25+
<img
26+
v-else
27+
src="/img/icons/x-circle.svg"
28+
alt="x-circle-icon"
6229
class="status-icon"
63-
/>
30+
>
6431
</div>
6532

6633
<div class="body">
6734
<p class="title">
68-
{{ data.title }}
35+
{{ state.data?.title }}
6936
</p>
7037
<p class="text">
71-
{{ data.text }}
38+
{{ state.data?.text }}
7239
</p>
7340
</div>
7441

‎app/components/AppDialog.vue

+9-17
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,24 @@
1-
<script lang="ts">
2-
import { defineComponent } from "vue";
3-
import IconPreloaderDark from "./icons/IconPreloaderDark.vue";
1+
<script setup lang="ts">
42
import AppModal from "./AppModal.vue";
3+
import { useModalStore } from "~/store";
54
6-
export default defineComponent({
7-
components: {
8-
IconPreloaderDark,
9-
AppModal
10-
},
11-
12-
computed: {
13-
title(): string {
14-
return this.$store.state.modal.data.title;
15-
}
16-
}
17-
});
5+
const { state } = useModalStore();
186
</script>
197

208
<template>
219
<AppModal name="dialog">
2210
<div class="AppDialog">
2311
<div class="box">
2412
<p class="title">
25-
{{ title }}
13+
{{ state.data?.title }}
2614
</p>
2715

2816
<div class="loader">
29-
<IconPreloaderDark class="loader-icon" />
17+
<img
18+
src="/img/icons/preloader-dark.svg"
19+
alt="preloader-dark-icon"
20+
class="loader-icon"
21+
>
3022
</div>
3123
</div>
3224
</div>

‎app/components/AppModal.vue

+7-14
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,17 @@
1-
<script lang="ts">
2-
import { defineComponent } from "vue";
1+
<script setup lang="ts">
2+
import { computed } from "vue";
3+
import { useModalStore } from "~/store";
34
4-
export default defineComponent({
5-
props: {
6-
name: { type: String, required: true }
7-
},
8-
9-
computed: {
10-
show(): boolean {
11-
return (this.$store as any).state.modal.name === this.name;
12-
}
13-
}
14-
});
5+
const props = defineProps<{ name: string }>();
6+
const { state } = useModalStore();
7+
const isShowed = computed(() => state.value.data?.name === props.name);
158
</script>
169

1710
<template>
1811
<portal to="modal">
1912
<transition name="fade">
2013
<div
21-
v-if="show"
14+
v-if="isShowed"
2215
class="AppModal"
2316
>
2417
<slot />

‎app/components/ButtonOutline.vue

+24-27
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
1-
<script lang="ts">
2-
import { defineComponent } from "vue";
1+
<script setup lang="ts">
2+
import { computed } from "vue";
33
import { isExternalLink } from "~/_legacy/support/Url";
44
5-
export default defineComponent({
6-
props: {
7-
tag: { type: String, default: "button" },
8-
block: { type: Boolean, default: false },
9-
icon: { type: Object, default: null },
10-
label: { type: String, required: true },
11-
to: { type: String, default: null },
12-
href: { type: String, default: null }
13-
},
14-
15-
computed: {
16-
link(): string | null {
17-
return this.href || this.to;
18-
},
5+
const props = withDefaults(defineProps<{
6+
label: string;
7+
tag?: "button" | "nuxt-link" | "a";
8+
block?: boolean;
9+
icon?: string | null;
10+
to?: string | null;
11+
href?: string | null;
12+
}>(), {
13+
tag: "button",
14+
block: false,
15+
icon: null,
16+
to: null,
17+
href: null
18+
});
1919
20-
isExternalLink(): boolean {
21-
return this.link ? isExternalLink(this.link) : false;
22-
},
20+
defineEmits<{ click: [] }>();
2321
24-
target(): string {
25-
return this.isExternalLink ? "_blank" : "_self";
26-
}
27-
}
28-
});
22+
const link = computed(() => props.href || props.to);
23+
const isExternalLink = computed(() => link.value ? isExternalLink(link.value) : false);
24+
const target = computed(() => isExternalLink.value ? "_blank" : "_self");
2925
</script>
3026

3127
<template>
@@ -42,11 +38,12 @@ export default defineComponent({
4238
:href="href"
4339
:target="target"
4440
>
45-
<Component
46-
:is="icon"
41+
<img
4742
v-if="icon"
43+
:src="icon"
44+
alt="icon"
4845
class="icon"
49-
/>
46+
>
5047
<span class="label">{{ label }}</span>
5148
</Component>
5249
</div>

‎app/components/HamburgerMenu.vue

+6-9
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
<script lang="ts">
2-
import { defineComponent } from "vue";
3-
4-
export default defineComponent({
5-
props: {
6-
active: { type: Boolean, required: true }
7-
}
8-
});
1+
<script setup lang="ts">
2+
defineProps<{ active: boolean }>();
3+
defineEmits<{ click: [] }>();
94
</script>
105

116
<template>
127
<div
8+
role="button"
9+
tabindex="0"
1310
class="HamburgerMenu"
1411
:class="{ active }"
15-
role="button"
1612
@click="$emit('click')"
13+
@keydown="$emit('click')"
1714
>
1815
<div class="container">
1916
<div class="top" />

‎app/components/HomeAbout.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import StyleMount from "./StyleMount.vue";
3838
<ButtonOutline
3939
tag="nuxt-link"
4040
:block="true"
41-
:href="localePath('/about')"
41+
:href="$localePath('/about')"
4242
:label="$t('components.HomeAbout.vuejs-jp')"
4343
/>
4444
</div>

‎app/components/HomeCommunications.vue

+38-47
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,44 @@
1-
<script lang="ts">
2-
import { defineComponent } from "vue";
3-
import IconSlack from "./icons/IconSlack.vue";
4-
import IconVue from "./icons/IconVue.vue";
1+
<script setup lang="ts">
52
import StyleMount from "./StyleMount.vue";
63
import ButtonOutline from "./ButtonOutline.vue";
74
import ChatStack from "./ChatStack.vue";
8-
9-
export default defineComponent({
10-
components: {
11-
StyleMount,
12-
ButtonOutline,
13-
ChatStack
5+
import { useNuxtApp } from "#app";
6+
7+
const { $i18n: { t } } = useNuxtApp();
8+
9+
const chats = [
10+
{
11+
direction: "left",
12+
avatar: "/img/home/avatar-001.jpg",
13+
alt: "Avatar 001",
14+
name: "Arisa Miyake",
15+
time: "3:12 PM",
16+
body: t("components.HomeCommunications.chats.user1")
1417
},
15-
16-
data() {
17-
const $t = this.$t.bind(this);
18-
return {
19-
iconSlack: IconSlack,
20-
iconVue: IconVue,
21-
22-
chats: [
23-
{
24-
direction: "left",
25-
avatar: "/img/home/avatar-001.jpg",
26-
alt: "Avatar 001",
27-
name: "Arisa Miyake",
28-
time: "3:12 PM",
29-
body: $t("components.HomeCommunications.chats.user1")
30-
},
31-
{
32-
direction: "right",
33-
avatar: "/img/home/avatar-002.jpg",
34-
alt: "Avatar 002",
35-
name: "Kenji Yamadera",
36-
time: "3:19 PM",
37-
body: $t("components.HomeCommunications.chats.user2")
38-
},
39-
{
40-
direction: "left",
41-
avatar: "/img/home/avatar-003.jpg",
42-
alt: "Avatar 003",
43-
name: "Ai Nakagawa",
44-
time: "3:25 PM",
45-
body: $t("components.HomeCommunications.chats.user3")
46-
}
47-
]
48-
};
18+
{
19+
direction: "right",
20+
avatar: "/img/home/avatar-002.jpg",
21+
alt: "Avatar 002",
22+
name: "Kenji Yamadera",
23+
time: "3:19 PM",
24+
body: t("components.HomeCommunications.chats.user2")
25+
},
26+
{
27+
direction: "left",
28+
avatar: "/img/home/avatar-003.jpg",
29+
alt: "Avatar 003",
30+
name: "Ai Nakagawa",
31+
time: "3:25 PM",
32+
body: t("components.HomeCommunications.chats.user3")
4933
}
50-
});
34+
] as const satisfies {
35+
direction: "left" | "right";
36+
avatar: string;
37+
alt: string;
38+
name: string;
39+
time: string;
40+
body: string;
41+
}[];
5142
</script>
5243

5344
<template>
@@ -94,7 +85,7 @@ export default defineComponent({
9485
tag="a"
9586
:block="true"
9687
href="https://join.slack.com/t/vuejs-jp/shared_invite/zt-vmg3iysl-~CPGAxFMWwa0Fnu2IqtMdQ"
97-
:icon="iconSlack"
88+
icon="/img/icons/slack.svg"
9889
:label="$t('components.HomeCommunications.slack')"
9990
/>
10091
</div>
@@ -104,7 +95,7 @@ export default defineComponent({
10495
tag="a"
10596
:block="true"
10697
href="https://forum.vuejs.org/c/japanese"
107-
:icon="iconVue"
98+
icon="/img/icons/vue.svg"
10899
:label="$t('components.HomeCommunications.forum')"
109100
/>
110101
</div>

0 commit comments

Comments
 (0)