refactor(client): use setup syntax

packages/client/src/components/MkUrlPreviewPopup.vue

@@ -1,52 +1,37 @@
 <template>
 <div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
-	<transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="$emit('closed')">
+	<transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')">
 		<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
 	</transition>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { onMounted } from 'vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import * as os from '@/os';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	showing: boolean;
-		MkUrlPreview,
+	url: string;
-	},
+	source: HTMLElement;
+}>();
 
-	props: {
+const emit = defineEmits<{
-		url: {
+	(ev: 'closed'): void;
-			type: String,
+}>();
-			required: true,
-		},
-		source: {
-			required: true,
-		},
-		showing: {
-			type: Boolean,
-			required: true,
-		},
-	},
 
-	data() {
+const zIndex = os.claimZIndex('middle');
-		return {
+let top = $ref(0);
-			u: null,
+let left = $ref(0);
-			top: 0,
-			left: 0,
-			zIndex: os.claimZIndex('middle'),
-		};
-	},
 
-	mounted() {
+onMounted(() => {
-		const rect = this.source.getBoundingClientRect();
+	const rect = props.source.getBoundingClientRect();
-		const x = Math.max((rect.left + (this.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
+	const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
-		const y = rect.top + this.source.offsetHeight + window.pageYOffset;
+	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
 
-		this.top = y;
+	top = y;
-		this.left = x;
+	left = x;
-	},
 });
 </script>