refactor url-preview-popup to composition API

packages/client/src/components/url-preview-popup.vue

@@ -1,52 +1,35 @@
 <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">
-import { defineComponent } from 'vue';
+import { onMounted } from 'vue';
 import MkUrlPreview from './url-preview.vue';
 import * as os from '@/os';
 
-export default defineComponent({
+const emit = defineEmits<{
-	components: {
+	(ev: 'closed'): void;
-		MkUrlPreview,
+}>();
-	},
 
-	props: {
+const props = defineProps<{
-		url: {
+	url: string;
-			type: String,
+	source: HTMLElement;
-			required: true,
+	showing: boolean;
-		},
+}>();
-		source: {
-			required: true,
-		},
-		showing: {
-			type: Boolean,
-			required: true,
-		},
-	},
 
-	data() {
-		return {
-			u: null,
-			top: 0,
-			left: 0,
-			zIndex: os.claimZIndex('middle'),
-		};
-	},
 
-	mounted() {
+let top = $ref(0);
-		const rect = this.source.getBoundingClientRect();
+let left = $ref(0);
-		const x = Math.max((rect.left + (this.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
+const zIndex = os.claimZInde('middle');
-		const y = rect.top + this.source.offsetHeight + window.pageYOffset;
 
-		this.top = y;
+onMounted((): void => {
-		this.left = x;
+	const rect = props.source.getBoundingClientRect();
-	},
+	top = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
+	left = rect.top + props.source.offsetHeight + window.pageYOffset;
 });
 </script>