refactor(client): use composition api

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

@@ -12,8 +12,8 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, PropType, ref } from 'vue';
+<script lang="ts" setup>
+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,25 +25,15 @@ import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
 import { defaultStore } from '@/store';
 
-export default defineComponent({
-	components: {
-		XBanner,
-		XImage,
-		XVideo,
-	},
-	props: {
-		mediaList: {
-			type: Array as PropType<misskey.entities.DriveFile[]>,
-			required: true,
-		},
-		raw: {
-			default: false
-		},
-	},
-	setup(props) {
-		const gallery = ref(null);
+const props = defineProps<{
+	mediaList: misskey.entities.DriveFile[];
+	raw?: boolean;
+}>();
 
-		onMounted(() => {
+const gallery = ref(null);
+const pswpZIndex = os.claimZIndex('middle');
+
+onMounted(() => {
 	const lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
 			.filter(media => {
@@ -82,8 +72,8 @@ export default defineComponent({
 		pswpModule: PhotoSwipe,
 	});
 
-			lightbox.on('itemData', (e) => {
-				const { itemData } = e;
+	lightbox.on('itemData', (ev) => {
+		const { itemData } = ev;
 
 		// element is children
 		const { element } = itemData;
@@ -102,21 +92,13 @@ export default defineComponent({
 	});
 
 	lightbox.init();
-		});
+});
 
-		const previewable = (file: misskey.entities.DriveFile): boolean => {
+const previewable = (file: misskey.entities.DriveFile): boolean => {
 	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
 	// 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>