refactor(client): use composition api

packages/client/src/components/global/acct.vue

@@ -5,28 +5,17 @@
 </span>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import * as misskey from 'misskey-js';
 import { toUnicode } from 'punycode/';
-import { host } from '@/config';
+import { host as hostRaw } from '@/config';
 
-export default defineComponent({
+defineProps<{
-	props: {
+	user: misskey.entities.UserDetailed;
-		user: {
+	detail?: boolean;
-			type: Object,
+}>();
-			required: true
+
-		},
+const host = toUnicode(hostRaw);
-		detail: {
-			type: Boolean,
-			default: false
-		},
-	},
-	data() {
-		return {
-			host: toUnicode(host),
-		};
-	}
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/global/error.vue

@@ -8,19 +8,8 @@
 </transition>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
 import MkButton from '@/components/ui/button.vue';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-	data() {
-		return {
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/media-video.vue

@@ -22,26 +22,16 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { ref } from 'vue';
-import * as os from '@/os';
+import * as misskey from 'misskey-js';
+import { defaultStore } from '@/store';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	video: misskey.entities.DriveFile;
-		video: {
+}>();
-			type: Object,
+
-			required: true
+const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
-		}
-	},
-	data() {
-		return {
-			hide: true,
-		};
-	},
-	created() {
-		this.hide = (this.$store.state.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.nsfw !== 'ignore');
-	},
-});
 </script>
 
 <style lang="scss" scoped>

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">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { onMounted, ref } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
+defineProps<{
-	props: {
+	message: string;
-		message: {
+}>();
-			type: String,
+
-			required: true,
+const emit = defineEmits<{
-		},
+	(e: 'closed'): void;
-	},
+}>();
-	emits: ['closed'],
+
-	data() {
+const showing = ref(true);
-		return {
+const zIndex = os.claimZIndex('high');
-			showing: true,
+
-			zIndex: os.claimZIndex('high'),
+onMounted(() => {
-		};
-	},
-	mounted() {
 	setTimeout(() => {
-			this.showing = false;
+		showing.value = false;
 	}, 4000);
-	}
 });
 </script>
 

packages/client/src/components/user-info.vue

@@ -27,32 +27,14 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import * as misskey from 'misskey-js';
 import MkFollowButton from './follow-button.vue';
 import { userPage } from '@/filters/user';
 
-export default defineComponent({
+defineProps<{
-	components: {
+	user: misskey.entities.UserDetailed;
-		MkFollowButton
+}>();
-	},
-
-	props: {
-		user: {
-			type: Object,
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	methods: {
-		userPage,
-	}
-});
 </script>
 
 <style lang="scss" scoped>