refactor(client): use setup syntax

3 files changed, 54 insertions, 61 deletions

diff --git a/packages/client/src/components/form/slot.vue b/packages/client/src/components/form/slot.vue
index d031b2effc..79ce8fe51f 100644
--- a/packages/client/src/components/form/slot.vue
+++ b/packages/client/src/components/form/slot.vue
@@ -8,12 +8,12 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 
-export default defineComponent({
-
-});
+function focus() {
+	// TODO
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/i18n.ts b/packages/client/src/components/global/i18n.ts
index abf0c96856..1fd293ba10 100644
--- a/packages/client/src/components/global/i18n.ts
+++ b/packages/client/src/components/global/i18n.ts
@@ -30,7 +30,7 @@ export default defineComponent({
 			} else {
 				if (nextBracketOpen > 0) parsed.push(str.substr(0, nextBracketOpen));
 				parsed.push({
-					arg: str.substring(nextBracketOpen + 1, nextBracketClose)
+					arg: str.substring(nextBracketOpen + 1, nextBracketClose),
 				});
 			}
 
@@ -38,5 +38,5 @@ export default defineComponent({
 		}
 
 		return h(this.tag, parsed.map(x => typeof x === 'string' ? (this.textTag ? h(this.textTag, x) : x) : this.$slots[x.arg]()));
-	}
+	},
 });
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 2a58b49f61..df733849fd 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -4,12 +4,13 @@
 	<div class="ujigsodd">
 		<MkLoading v-if="fetching"/>
 		<div v-if="!fetching && images.length > 0" class="stream">
-			<MkA v-for="image in images"
-				:key="image.id"
+			<MkA
+				v-for="image in images"
+				:key="image.note.id + image.file.id"
 				class="img"
 				:to="notePage(image.note)"
 			>
-				<ImgWithBlurhash :hash="image.blurhash" :src="thumbnail(image.file)" :alt="image.name" :title="image.name"/>
+				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
 			</MkA>
 		</div>
 		<p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
@@ -17,64 +18,56 @@
 </MkContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import * as misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { defaultStore } from '@/store';
 
-export default defineComponent({
-	components: {
-		MkContainer,
-		ImgWithBlurhash,
-	},
-	props: {
-		user: {
-			type: Object,
-			required: true
-		},
-	},
-	data() {
-		return {
-			fetching: true,
-			images: [],
-		};
-	},
-	mounted() {
-		const image = [
-			'image/jpeg',
-			'image/png',
-			'image/gif',
-			'image/apng',
-			'image/vnd.mozilla.apng',
-		];
-		os.api('users/notes', {
-			userId: this.user.id,
-			fileType: image,
-			excludeNsfw: this.$store.state.nsfw !== 'ignore',
-			limit: 10,
-		}).then(notes => {
-			for (const note of notes) {
-				for (const file of note.files) {
-					this.images.push({
-						note,
-						file
-					});
-				}
+const props = defineProps<{
+	user: misskey.entities.UserDetailed;
+}>();
+
+let fetching = $ref(true);
+let images = $ref<{
+	note: misskey.entities.Note;
+	file: misskey.entities.DriveFile;
+}[]>([]);
+
+function thumbnail(image: misskey.entities.DriveFile): string {
+	return defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(image.thumbnailUrl)
+		: image.thumbnailUrl;
+}
+
+onMounted(() => {
+	const image = [
+		'image/jpeg',
+		'image/png',
+		'image/gif',
+		'image/apng',
+		'image/vnd.mozilla.apng',
+	];
+	os.api('users/notes', {
+		userId: props.user.id,
+		fileType: image,
+		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
+		limit: 10,
+	}).then(notes => {
+		for (const note of notes) {
+			for (const file of note.files) {
+				images.push({
+					note,
+					file,
+				});
 			}
-			this.fetching = false;
-		});
-	},
-	methods: {
-		thumbnail(image: any): string {
-			return this.$store.state.disableShowingAnimatedImages
-				? getStaticImageUrl(image.thumbnailUrl)
-				: image.thumbnailUrl;
-		},
-		notePage
-	},
+		}
+		fetching = false;
+	});
 });
 </script>