From 469126f5bf03f4cc2d156713b9afcdff23ca7cbf Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Sun, 2 Aug 2020 15:08:06 +0300
Subject: [PATCH] wip

---
 playground/App.vue          | 57 +++++++++++++++++++++++++++++++++++--
 playground/Counter.vue      | 15 ++++++++++
 src/components/Tippy.ts     |  2 +-
 src/composables/useTippy.ts | 49 ++++++++++++++++++++++++++++---
 src/types/index.ts          |  9 ++++--
 yarn.lock                   | 13 +--------
 6 files changed, 123 insertions(+), 22 deletions(-)
 create mode 100644 playground/Counter.vue

diff --git a/playground/App.vue b/playground/App.vue
index 905d41c..8b6c56c 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -5,22 +5,73 @@
     </tippy>
 
     <button ref="button">My Button</button>
+    <button ref="button2">My Button 2</button>
+    <button ref="button3">My Button 3</button>
+    <button ref="button4">My Button 4</button>
+    <button ref="button5">My Button 5</button>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, h, computed } from 'vue'
 import { useTippy } from '../src'
-import { TippyOptions } from '../src'
+import Counter from './Counter.vue'
+
 export default defineComponent({
   setup() {
+    const counter = ref<number>(0)
+
+    setInterval(() => counter.value++, 1000)
+
     const button = ref<HTMLButtonElement>()
+    const button2 = ref<HTMLButtonElement>()
+    const button3 = ref<HTMLButtonElement>()
+    const button4 = ref<HTMLButtonElement>()
+    const button5 = ref<HTMLButtonElement>()
 
     useTippy(button, {
       content: 'Test',
-    } as Partial<TippyOptions>)
+      onMount() {
+        console.log('here')
+      },
+    })
+
+    useTippy(button2, {
+      content: h('h1', 'hi ' + counter.value),
+    })
+    useTippy(button3, {
+      content: computed(() =>
+        h(
+          'button',
+          {
+            onClick: () => {
+              counter.value++
+            },
+          },
+          'Counter ' + counter.value
+        )
+      ),
+      showOnCreate: true,
+      interactive: true,
+    })
+
+    useTippy(button4, {
+      content: h(Counter),
+      interactive: true,
+      showOnCreate: true,
+    })
+
+    useTippy(button5, {
+      content: h(Counter),
+      interactive: true,
+      showOnCreate: true,
+    })
 
     return {
       button,
+      button2,
+      button3,
+      button4,
+      button5,
     }
   },
 })
diff --git a/playground/Counter.vue b/playground/Counter.vue
new file mode 100644
index 0000000..6db87cf
--- /dev/null
+++ b/playground/Counter.vue
@@ -0,0 +1,15 @@
+<template>
+  <button @click="count++">{{ count }}</button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      count: 0,
+    }
+  },
+})
+</script>
diff --git a/src/components/Tippy.ts b/src/components/Tippy.ts
index 5a4a1cc..1b7f8d2 100644
--- a/src/components/Tippy.ts
+++ b/src/components/Tippy.ts
@@ -4,7 +4,7 @@ import { useTippy } from '../composables'
 
 export default defineComponent({
   props: {
-    content: Object as PropType<Content>,
+    content: {} as PropType<Content>,
   },
   setup(props) {
     const elem = ref<Element>()
diff --git a/src/composables/useTippy.ts b/src/composables/useTippy.ts
index 206d621..acb9a32 100644
--- a/src/composables/useTippy.ts
+++ b/src/composables/useTippy.ts
@@ -1,21 +1,62 @@
-import tippy, { Instance } from 'tippy.js'
-import { ref, onMounted, Ref, isRef } from 'vue'
+import tippy, { Instance, Props, Content } from 'tippy.js'
+import { ref, onMounted, Ref, isRef, isVNode, render, watch } from 'vue'
 import { TippyOptions } from '../types'
 
 export function useTippy(
   el: Element | Ref<Element> | Ref<Element | undefined>,
-  opts: Partial<TippyOptions> = {}
+  opts: TippyOptions = {}
 ) {
   const instance = ref<Instance>()
 
+  let container: Element | null = null
+
+  const getContainer = () => {
+    if (container) return container
+    container = document.createElement('fragment')
+    return container
+  }
+
   onMounted(() => {
     if (!el) return
 
     let target = isRef(el) ? el.value : el
+    let options = { ...opts }
 
-    target && (instance.value = tippy(target, opts))
+    if (isRef(options.content)) {
+      options.content = options.content.value
+    }
+
+    if (isVNode(options.content)) {
+      render(options.content, getContainer())
+
+      options.content = () => getContainer()
+    }
+    target && (instance.value = tippy(target, options as Props))
   })
 
+  if (isRef(opts.content)) {
+    watch(
+      opts.content,
+      () => {
+        if (!instance.value) return
+
+        let content = opts.content
+
+        if (isRef(opts.content)) {
+          content = opts.content.value
+        }
+
+        if (isVNode(content)) {
+          render(content, getContainer())
+
+          content = () => getContainer()
+        }
+        instance.value.setContent(content as Content)
+      },
+      { immediate: false }
+    )
+  }
+
   return {
     tippy: instance,
   }
diff --git a/src/types/index.ts b/src/types/index.ts
index 3eedeec..db1b7dd 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,3 +1,8 @@
-import { Props } from 'tippy.js'
+import { Props, Content } from 'tippy.js'
+import { VNode, Ref } from 'vue'
 
-export declare type TippyOptions = Props
+export declare type TippyOptions = Partial<
+  Omit<Props, 'content'> & {
+    content: Content | VNode | Ref
+  }
+>
diff --git a/yarn.lock b/yarn.lock
index b11db98..ba1feaa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -647,17 +647,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-babel-loader@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
-  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
-  dependencies:
-    find-cache-dir "^2.1.0"
-    loader-utils "^1.4.0"
-    mkdirp "^0.5.3"
-    pify "^4.0.1"
-    schema-utils "^2.6.5"
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -4848,7 +4837,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
+schema-utils@^2.6.6, schema-utils@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
   integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==