refactor: url.vue to composition api

packages/client/src/components/global/url.vue

@@ -1,6 +1,6 @@
 <template>
 <component
-	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
+	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.slice(local.length) : url" :rel="rel" :target="target"
 	@contextmenu.stop="() => {}"
 >
 	<template v-if="!self">
@@ -11,60 +11,45 @@
 	<template v-if="pathname === '/' && self">
 		<span class="self">{{ hostname }}</span>
 	</template>
-	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substr(1) : pathname }}</span>
+	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.slice(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
 	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
 </component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineAsyncComponent, defineComponent, ref } from 'vue';
+import { defineAsyncComponent } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { safeURIDecode } from '@/scripts/safe-uri-decode';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	url: string;
-		url: {
+	rel?: string;
-			type: String,
+}>();
-			required: true,
-		},
-		rel: {
-			type: String,
-			required: false,
-			default: null,
-		},
-	},
-	setup(props) {
-		const self = props.url.startsWith(local);
-		const url = new URL(props.url);
-		const el = ref();
-		
-		useTooltip(el, (showing) => {
-			os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
-				showing,
-				url: props.url,
-				source: el.value,
-			}, {}, 'closed');
-		});
 
-		return {
+const self = props.url.startsWith(local);
-			local,
+const url = new URL(props.url);
-			schema: url.protocol,
+let el: HTMLElement | null = $ref(null);
-			hostname: decodePunycode(url.hostname),
+
-			port: url.port,
+let schema = $ref(url.protocol);
-			pathname: safeURIDecode(url.pathname),
+let hostname = $ref(decodePunycode(url.hostname));
-			query: safeURIDecode(url.search),
+let port = $ref(url.port);
-			hash: safeURIDecode(url.hash),
+let pathname = $ref(safeURIDecode(url.pathname));
-			self,
+let query = $ref(safeURIDecode(url.search));
-			attr: self ? 'to' : 'href',
+let hash = $ref(safeURIDecode(url.hash));
-			target: self ? null : '_blank',
+let attr = $ref(self ? 'to' : 'href');
-			el,
+let target = $ref(self ? null : '_blank');
-		};
+
-	},
+useTooltip($$(el), (showing) => {
+	os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
+		showing,
+		url: props.url,
+		source: el,
+	}, {}, 'closed');
 });
 </script>