refactor(client): use composition api

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

@@ -12,8 +12,8 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted, PropType, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
 import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';
@@ -25,23 +25,13 @@ import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
 import { defaultStore } from '@/store';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	mediaList: misskey.entities.DriveFile[];
-		XBanner,
+	raw?: boolean;
-		XImage,
+}>();
-		XVideo,
+
-	},
-	props: {
-		mediaList: {
-			type: Array as PropType<misskey.entities.DriveFile[]>,
-			required: true,
-		},
-		raw: {
-			default: false
-		},
-	},
-	setup(props) {
 const gallery = ref(null);
+const pswpZIndex = os.claimZIndex('middle');
 
 onMounted(() => {
 	const lightbox = new PhotoSwipeLightbox({
@@ -82,8 +72,8 @@ export default defineComponent({
 		pswpModule: PhotoSwipe,
 	});
 
-			lightbox.on('itemData', (e) => {
+	lightbox.on('itemData', (ev) => {
-				const { itemData } = e;
+		const { itemData } = ev;
 
 		// element is children
 		const { element } = itemData;
@@ -109,14 +99,6 @@ export default defineComponent({
 	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
 	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
 };
-
-		return {
-			previewable,
-			gallery,
-			pswpZIndex: os.claimZIndex('middle'),
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>