From c1530fe9e572a2c65be027a818842ee6fd62beb3 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Wed, 31 Aug 2022 14:32:28 +0200
Subject: [PATCH] refactor url-preview-popup to composition API

---
 .../src/components/url-preview-popup.vue      | 51 +++++++------------
 1 file changed, 17 insertions(+), 34 deletions(-)

diff --git a/packages/client/src/components/url-preview-popup.vue b/packages/client/src/components/url-preview-popup.vue
index 1bb01f97e..c0b3028a8 100644
--- a/packages/client/src/components/url-preview-popup.vue
+++ b/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({
-	components: {
-		MkUrlPreview,
-	},
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
 
-	props: {
-		url: {
-			type: String,
-			required: true,
-		},
-		source: {
-			required: true,
-		},
-		showing: {
-			type: Boolean,
-			required: true,
-		},
-	},
+const props = defineProps<{
+	url: string;
+	source: HTMLElement;
+	showing: boolean;
+}>();
 
-	data() {
-		return {
-			u: null,
-			top: 0,
-			left: 0,
-			zIndex: os.claimZIndex('middle'),
-		};
-	},
 
-	mounted() {
-		const rect = this.source.getBoundingClientRect();
-		const x = Math.max((rect.left + (this.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
-		const y = rect.top + this.source.offsetHeight + window.pageYOffset;
+let top = $ref(0);
+let left = $ref(0);
+const zIndex = os.claimZInde('middle');
 
-		this.top = y;
-		this.left = x;
-	},
+onMounted((): void => {
+	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>