refactor(client): use setup syntax

packages/client/src/components/form/slot.vue

@@ -8,12 +8,12 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 
-export default defineComponent({
+function focus() {
-
+	// TODO
-});
+}
 </script>
 
 <style lang="scss" scoped>

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]()));
-	}
+	},
 });

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"
+			<MkA
-				:key="image.id"
+				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,32 +18,33 @@
 </MkContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+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({
+const props = defineProps<{
-	components: {
+	user: misskey.entities.UserDetailed;
-		MkContainer,
+}>();
-		ImgWithBlurhash,
+
-	},
+let fetching = $ref(true);
-	props: {
+let images = $ref<{
-		user: {
+	note: misskey.entities.Note;
-			type: Object,
+	file: misskey.entities.DriveFile;
-			required: true
+}[]>([]);
-		},
+
-	},
+function thumbnail(image: misskey.entities.DriveFile): string {
-	data() {
+	return defaultStore.state.disableShowingAnimatedImages
-		return {
+		? getStaticImageUrl(image.thumbnailUrl)
-			fetching: true,
+		: image.thumbnailUrl;
-			images: [],
+}
-		};
+
-	},
+onMounted(() => {
-	mounted() {
 	const image = [
 		'image/jpeg',
 		'image/png',
@@ -51,30 +53,21 @@ export default defineComponent({
 		'image/vnd.mozilla.apng',
 	];
 	os.api('users/notes', {
-			userId: this.user.id,
+		userId: props.user.id,
 		fileType: image,
-			excludeNsfw: this.$store.state.nsfw !== 'ignore',
+		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
 		limit: 10,
 	}).then(notes => {
 		for (const note of notes) {
 			for (const file of note.files) {
-					this.images.push({
+				images.push({
 					note,
-						file
+					file,
 				});
 			}
 		}
-			this.fetching = false;
+		fetching = false;
 	});
-	},
-	methods: {
-		thumbnail(image: any): string {
-			return this.$store.state.disableShowingAnimatedImages
-				? getStaticImageUrl(image.thumbnailUrl)
-				: image.thumbnailUrl;
-		},
-		notePage
-	},
 });
 </script>