From 2839c1df0d1cde792051dc6d6a927ac1fc0edd66 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 21 Sep 2020 14:02:13 +0900
Subject: [PATCH] wjio

---
 src/client/components/ui/tooltip.vue | 26 ++++++++-----------------
 src/client/components/url.vue        |  4 +++-
 src/client/directives/tooltip.ts     | 29 ++++++++++++++--------------
 3 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/src/client/components/ui/tooltip.vue b/src/client/components/ui/tooltip.vue
index bd6f255805..cd6eba6bac 100644
--- a/src/client/components/ui/tooltip.vue
+++ b/src/client/components/ui/tooltip.vue
@@ -1,6 +1,6 @@
 <template>
-<transition name="zoom-in-top" appear>
-	<div class="buebdbiu" v-if="show">
+<transition name="zoom-in-top" appear @after-leave="$emit('closed')">
+	<div class="buebdbiu" v-if="showing">
 		<slot>{{ text }}</slot>
 	</div>
 </transition>
@@ -12,6 +12,10 @@ import * as os from '@/os';
 
 export default defineComponent({
 	props: {
+		showing: {
+			type: Boolean,
+			required: true,
+		},
 		source: {
 			required: true,
 		},
@@ -21,20 +25,13 @@ export default defineComponent({
 		}
 	},
 
-	data() {
-		return {
-			show: false
-		};
-	},
-
 	mounted() {
-		this.show = true;
-
 		this.$nextTick(() => {
 			if (this.source == null) {
-				this.destroyDom();
+				this.$emit('closed');
 				return;
 			}
+
 			const rect = this.source.getBoundingClientRect();
 
 			const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
@@ -43,13 +40,6 @@ export default defineComponent({
 			this.$el.style.top = (y + 16) + 'px';
 		});
 	},
-
-	methods: {
-		close() {
-			this.show = false;
-			setTimeout(this.destroyDom, 300);
-		}
-	}
 })
 </script>
 
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index 5dd103668e..3ea1f80120 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -76,7 +76,9 @@ export default defineComponent({
 				source: this.$el
 			});
 
-			this.close = promise.cancel;
+			this.close = () => {
+				promise.cancel();
+			};
 
 			this.checkTimer = setInterval(() => {
 				if (!document.body.contains(this.$el)) this.closePreview();
diff --git a/src/client/directives/tooltip.ts b/src/client/directives/tooltip.ts
index 34314fd227..12b433bb18 100644
--- a/src/client/directives/tooltip.ts
+++ b/src/client/directives/tooltip.ts
@@ -1,6 +1,6 @@
 import { Directive } from 'vue';
-import MkTooltip from '@/components/ui/tooltip.vue';
 import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { popup } from '@/os';
 
 const start = isDeviceTouch ? 'touchstart' : 'mouseover';
 const end = isDeviceTouch ? 'touchend' : 'mouseleave';
@@ -10,32 +10,31 @@ export default {
 		const self = (el as any)._tooltipDirective_ = {} as any;
 
 		self.text = binding.value as string;
-		self.tag = null;
+		self._close = null;
 		self.showTimer = null;
 		self.hideTimer = null;
 		self.checkTimer = null;
 
 		self.close = () => {
-			if (self.tag) {
+			if (self._close) {
 				clearInterval(self.checkTimer);
-				self.tag.close();
-				self.tag = null;
+				self._close();
+				self._close = null;
 			}
 		};
 
-		const show = e => {
+		const show = async e => {
 			if (!document.body.contains(el)) return;
-			if (self.tag) return;
+			if (self._close) return;
 
-			self.tag = new MkTooltip({
-				parent: vn.context,
-				propsData: {
-					text: self.text,
-					source: el
-				}
-			}).$mount();
+			const promise = popup(await import('@/components/ui/tooltip.vue'), {
+				text: self.text,
+				source: el
+			});
 
-			document.body.appendChild(self.tag.$el);
+			self._close = () => {
+				promise.cancel();
+			};
 		};
 
 		el.addEventListener(start, () => {