From 666a86b245b80db02a1d8b462f20708a8b4e8f45 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 20 Apr 2022 20:58:08 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=BB=A4=EC=8A=A4=ED=84=B0=EB=A7=88?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=95=20=EA=B0=80=EB=8A=A5=ED=95=9C=20tooltip=20di?=
 =?UTF-8?q?rective?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/directives/vMyTooltip.ts | 97 +++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 hwe/ts/directives/vMyTooltip.ts

diff --git a/hwe/ts/directives/vMyTooltip.ts b/hwe/ts/directives/vMyTooltip.ts
new file mode 100644
index 00000000..6032a0d1
--- /dev/null
+++ b/hwe/ts/directives/vMyTooltip.ts
@@ -0,0 +1,97 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import Tooltip from 'bootstrap/js/dist/tooltip'
+
+function resolveTrigger(modifiers: DirectiveBinding['modifiers']): Tooltip.Options['trigger'] {
+  if (modifiers.manual) {
+    return 'manual'
+  }
+
+  const trigger: string[] = []
+
+  if (modifiers.click) {
+    trigger.push('click')
+  }
+
+  if (modifiers.hover) {
+    trigger.push('hover')
+  }
+
+  if (modifiers.focus) {
+    trigger.push('focus')
+  }
+
+  if (trigger.length > 0) {
+    return trigger.join(' ') as Tooltip.Options['trigger']
+  }
+
+  return 'hover focus'
+}
+
+function resolvePlacement(modifiers: DirectiveBinding['modifiers']): Tooltip.Options['placement'] {
+  if (modifiers.left) {
+    return 'left'
+  }
+
+  if (modifiers.right) {
+    return 'right'
+  }
+
+  if (modifiers.bottom) {
+    return 'bottom'
+  }
+
+  return 'top'
+}
+
+function resolveDelay(values: TooltipOptions): Tooltip.Options['delay'] {
+  if (values?.delay) {
+    return values.delay
+  }
+
+  return 0
+}
+
+type TooltipOptions = {
+  delay?: number,
+  class?: string
+} | undefined;
+
+const vMyTooltip: Directive<HTMLElement, TooltipOptions> = {
+  beforeMount(el, binding) {
+    el.setAttribute('data-bs-toogle', 'tooltip')
+
+    const isHtml = /<("[^"]*"|'[^']*'|[^'">])*>/.test(el.title)
+    const trigger = resolveTrigger(binding.modifiers)
+    const placement = resolvePlacement(binding.modifiers)
+    const delay = resolveDelay(binding.value)
+
+    const options: Partial<Tooltip.Options> = {
+      trigger,
+      placement,
+      delay,
+      html: isHtml,
+    }
+    const customClass = binding.value?.class;
+    if (customClass) {
+      options.customClass = customClass;
+    }
+
+    new Tooltip(el, options)
+  },
+  updated(el) {
+    const title = el.getAttribute('title')
+
+    if (title !== '') {
+      const instance = Tooltip.getInstance(el)
+      instance?.hide()
+      el.setAttribute('data-bs-original-title', title || '')
+      el.setAttribute('title', '')
+    }
+  },
+  unmounted(el) {
+    const instance = Tooltip.getInstance(el)
+    instance?.dispose()
+  },
+}
+
+export default vMyTooltip