From 6558cd2f272e7bf19e7f5530216a002a7a3d674c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 7 Jan 2022 15:02:25 +0900
Subject: [PATCH] refactor(client): use composition api
---
.../client/src/components/global/acct.vue | 29 +++++---------
.../client/src/components/global/error.vue | 13 +-----
.../client/src/components/media-video.vue | 28 +++++--------
packages/client/src/components/toast.vue | 40 +++++++++----------
.../client/src/components/url-preview.vue | 2 +-
packages/client/src/components/user-info.vue | 28 +++----------
6 files changed, 43 insertions(+), 97 deletions(-)
diff --git a/packages/client/src/components/global/acct.vue b/packages/client/src/components/global/acct.vue
index 018826153c..c3e806b5fb 100644
--- a/packages/client/src/components/global/acct.vue
+++ b/packages/client/src/components/global/acct.vue
@@ -5,28 +5,17 @@
</span>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
import { toUnicode } from 'punycode/';
-import { host } from '@/config';
+import { host as hostRaw } from '@/config';
-export default defineComponent({
- props: {
- user: {
- type: Object,
- required: true
- },
- detail: {
- type: Boolean,
- default: false
- },
- },
- data() {
- return {
- host: toUnicode(host),
- };
- }
-});
+defineProps<{
+ user: misskey.entities.UserDetailed;
+ detail?: boolean;
+}>();
+
+const host = toUnicode(hostRaw);
</script>
<style lang="scss" scoped>
diff --git a/packages/client/src/components/global/error.vue b/packages/client/src/components/global/error.vue
index d759186167..98b96fb414 100644
--- a/packages/client/src/components/global/error.vue
+++ b/packages/client/src/components/global/error.vue
@@ -8,19 +8,8 @@
</transition>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
import MkButton from '@/components/ui/button.vue';
-
-export default defineComponent({
- components: {
- MkButton,
- },
- data() {
- return {
- };
- },
-});
</script>
<style lang="scss" scoped>
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index a0dc57b657..680eb27e64 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -22,26 +22,16 @@
</div>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@/os';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import * as misskey from 'misskey-js';
+import { defaultStore } from '@/store';
-export default defineComponent({
- props: {
- video: {
- type: Object,
- required: true
- }
- },
- data() {
- return {
- hide: true,
- };
- },
- created() {
- this.hide = (this.$store.state.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.nsfw !== 'ignore');
- },
-});
+const props = defineProps<{
+ video: misskey.entities.DriveFile;
+}>();
+
+const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
</script>
<style lang="scss" scoped>
diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/toast.vue
index 914704c527..869182d8e1 100644
--- a/packages/client/src/components/toast.vue
+++ b/packages/client/src/components/toast.vue
@@ -1,6 +1,6 @@
<template>
<div class="mk-toast">
- <transition name="toast" appear @after-leave="$emit('closed')">
+ <transition name="toast" appear @after-leave="emit('closed')">
<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
<div class="message">
{{ message }}
@@ -10,29 +10,25 @@
</div>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
import * as os from '@/os';
-export default defineComponent({
- props: {
- message: {
- type: String,
- required: true,
- },
- },
- emits: ['closed'],
- data() {
- return {
- showing: true,
- zIndex: os.claimZIndex('high'),
- };
- },
- mounted() {
- setTimeout(() => {
- this.showing = false;
- }, 4000);
- }
+defineProps<{
+ message: string;
+}>();
+
+const emit = defineEmits<{
+ (e: 'closed'): void;
+}>();
+
+const showing = ref(true);
+const zIndex = os.claimZIndex('high');
+
+onMounted(() => {
+ setTimeout(() => {
+ showing.value = false;
+ }, 4000);
});
</script>
diff --git a/packages/client/src/components/url-preview.vue b/packages/client/src/components/url-preview.vue
index fe88985a62..dff74800ed 100644
--- a/packages/client/src/components/url-preview.vue
+++ b/packages/client/src/components/url-preview.vue
@@ -76,7 +76,7 @@ export default defineComponent({
tweetExpanded: this.detail,
embedId: `embed${Math.random().toString().replace(/\D/,'')}`,
tweetHeight: 150,
- tweetLeft: 0,
+ tweetLeft: 0,
playerEnabled: false,
self: self,
attr: self ? 'to' : 'href',
diff --git a/packages/client/src/components/user-info.vue b/packages/client/src/components/user-info.vue
index 779a71358d..6a25d412fc 100644
--- a/packages/client/src/components/user-info.vue
+++ b/packages/client/src/components/user-info.vue
@@ -27,32 +27,14 @@
</div>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
import MkFollowButton from './follow-button.vue';
import { userPage } from '@/filters/user';
-export default defineComponent({
- components: {
- MkFollowButton
- },
-
- props: {
- user: {
- type: Object,
- required: true
- },
- },
-
- data() {
- return {
- };
- },
-
- methods: {
- userPage,
- }
-});
+defineProps<{
+ user: misskey.entities.UserDetailed;
+}>();
</script>
<style lang="scss" scoped>
--
GitLab