@vue-interface/tooltip 1.0.0-beta.2 → 1.0.0-beta.6

package/src/Tooltip.vue

@@ -1,23 +1,30 @@
-<template>
-    <div class="tooltip" :class="tooltipClasses" role="tooltip">
-        <div ref="arrow" class="tooltip-arrow" />
-        <div ref="inner" class="tooltip-inner">
-            <slot>{{ title }}</slot>
-        </div>
-    </div>
-</template>
-
 <script lang="ts">
-// @ts-ignore
+import { defineComponent } from 'vue';
 import Popper from './Popper';
 
-export default {
+export default defineComponent({
     mixins: [
         Popper
     ]
-};
+});
 </script>
 
+<template>
+    <div
+        class="tooltip"
+        :class="tooltipClasses"
+        role="tooltip">
+        <div
+            ref="arrow"
+            class="tooltip-arrow" />
+        <div
+            ref="inner"
+            class="tooltip-inner">
+            <slot>{{ title }}</slot>
+        </div>
+    </div>
+</template>
+
 <style>
 .tooltip:not(.show) {
     z-index: -1;

package/src/TooltipPlugin.ts

@@ -1,29 +1,42 @@
-import type { App, VNode } from 'vue';
+import type { App } from 'vue';
 import { h, render } from 'vue';
 import Tooltip from './Tooltip.vue';
 
-export default function(app: App, options = {
-    delay: undefined,
-    prefix: 'data-tooltip',
+type TooltipPluginOptions = {
+    delay?: number,
+    prefix: string,
     triggers: {
-        open: ['mouseover:750', 'focus'],
-        close: ['mouseout:1000', 'blur'],
+        open: string[],
+        close: string[],
     }
-}) {
+}
+
+export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
+    const tooltips: Map<string,Function> = new Map;
+
+    const options: TooltipPluginOptions = Object.assign({
+        delay: undefined,
+        prefix: 'data-tooltip',
+        triggers: {
+            open: ['mouseover:350'],
+            close: ['mouseout:100'],
+        }
+    }, opts);
+
     const prefix = options.prefix.replace(/[-]+$/, '');
     const prefixRegExp = new RegExp(`^${prefix}\-`);
 
     function getAttributes(el: Element): Record<string,any> {
         return Array.from(el.attributes)
-          .map(a => [a.name, a.value])
-          .filter(([key]) => key === 'title' || key.match(prefixRegExp))
-          .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])
-          .reduce((carry, attr) => Object.assign(carry, {[attr[0]]: attr[1]}), {})
+            .map(a => [a.name, a.value])
+            .filter(([key]) => key === 'title' || key.match(prefixRegExp))
+            .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])
+            .reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});
     }
 
-    function createTooltip(target: Element, props: Record<string,any> = {}): Function {
+    function createTooltip(target: Element, props: Record<string,any> = {}, hash: string): Function {
         const container = document.createElement('template');
-              
+        
         const vnode = h(Tooltip, Object.assign({
             target,
             show: true
@@ -36,6 +49,8 @@ export default function(app: App, options = {
         document.body.append(el);
     
         return () => {
+            tooltips.delete(hash);
+
             // @ts-ignore
             vnode.component?.ctx.close();
     
@@ -71,7 +86,13 @@ export default function(app: App, options = {
 
             if(!tooltip) {
                 timer = setTimeout(() => {
-                    tooltip = createTooltip(target, properties);
+                    // Do a check before creating the tooltip to ensure the dom
+                    // element still exists. Its possible for the element to
+                    // be removed after the timeout delay runs.
+                    if(document.contains(target)) {
+                        tooltip = createTooltip(target, properties, hash);
+                        tooltips.set(hash, tooltip);
+                    }
                 }, delay);
             }
         }
@@ -90,11 +111,14 @@ export default function(app: App, options = {
         function addEventListener(trigger: string, fn: Function) {
             const [ event, delayString ] = trigger.split(':');
 
-            target.addEventListener(event, () => fn(Number(delayString || 0)))
+            target.addEventListener(event, () => fn(Number(delayString || 0)));
         }
-        
-        options.triggers.open.map(trigger => addEventListener(trigger, open));
-        options.triggers.close.map(trigger => addEventListener(trigger, close));
+
+        (target.getAttribute(`${prefix}-trigger-open`)?.split(',') || options.triggers.open)
+            .map(trigger => addEventListener(trigger, open));
+            
+        (target.getAttribute(`${prefix}-trigger-close`)?.split(',') || options.triggers.close)
+            .map(trigger => addEventListener(trigger, close));
     }
   
     app.mixin({
@@ -118,20 +142,46 @@ export default function(app: App, options = {
                         return NodeFilter.FILTER_REJECT;
                     }
                     
-                    return NodeFilter.FILTER_ACCEPT
+                    return NodeFilter.FILTER_ACCEPT;
                 }
             );
 
             // Step through and alert all child nodes
-            while (walker.nextNode()) {
+            while(walker.nextNode()) {
                 if(walker.currentNode instanceof Element) {
                     init(<Element> walker.currentNode);
                 }
             }
+
+            const observer = new MutationObserver((changes) => {
+                for(const { removedNodes } of changes) {
+                    for(const node of removedNodes) {
+                        for(const el of (node as Element).querySelectorAll(`[${prefix}-id]`)) {
+                            const tooltip = tooltips.get(
+                                el.getAttribute(`${prefix}-id`) as string
+                            );
+
+                            tooltip && tooltip();
+                        }
+                    } 
+                }
+            });
+
+            observer.observe(el, { childList: true });
         }
     });
 
-    app.directive('tooltip', (target, binding) => init(
-        target, Object.assign({}, binding.modifiers, binding.value)
-    ));
+    app.directive('tooltip', {
+        created(target, binding) {
+            init(target, Object.assign({}, binding.modifiers, binding.value));
+        },
+        beforeUnmount(target) {
+            const id = target.getAttribute(`${prefix}-id`);
+            const tooltip = tooltips.get(id);
+
+            console.log('beforeUnmount');
+
+            tooltip && tooltip();
+        }
+    });
 }

package/tailwindcss/{index.js → index.cjs}

@@ -8,11 +8,11 @@ module.exports = plugin(function({ addComponents, theme }) {
         },
 
         '.bs-tooltip-top .tooltip-arrow': {
-            bottom: 0,
+            bottom: '1px',
         },
             
         '.bs-tooltip-top .tooltip-arrow::before': {
-            bottom: 0,
+            bottom: '1px',
             borderWidth: `${theme('tooltip.arrow.height')} calc(${theme('tooltip.arrow.width')} / 2) 0`,
             borderTopColor: theme('tooltip.arrow.color'),
         }
@@ -24,11 +24,11 @@ module.exports = plugin(function({ addComponents, theme }) {
         },
         
         '.bs-tooltip-bottom .tooltip-arrow': {
-            top: 0
+            top: '1px'
         },
         
         '.bs-tooltip-bottom .tooltip-arrow::before': {
-            top: 0,
+            top: '1px',
             borderWidth: `0 calc(${theme('tooltip.arrow.width')} / 2) ${theme('tooltip.arrow.height')}`,
             borderBottomColor: theme('tooltip.arrow.color'),
         },
@@ -40,13 +40,13 @@ module.exports = plugin(function({ addComponents, theme }) {
         },
         
         '.bs-tooltip-left .tooltip-arrow': {
-            right: 0,
+            right: '1px',
             width: theme('tooltip.arrow.height'),
             height: theme('tooltip.arrow.width')
         },
         
         '.bs-tooltip-left .tooltip-arrow::before': {
-            right: 0,
+            right: '1px',
             borderWidth: `calc(${theme('tooltip.arrow.width')} / 2) 0 calc(${theme('tooltip.arrow.width')} / 2) ${theme('tooltip.arrow.height')}`,
             borderLeftColor: theme('tooltip.arrow.color')
         }
@@ -58,13 +58,13 @@ module.exports = plugin(function({ addComponents, theme }) {
         },
         
         '.bs-tooltip-right .tooltip-arrow': {
-            left: 0,
+            left: '1px',
             width: theme('tooltip.arrow.height'),
             height: theme('tooltip.arrow.width'),
         },
         
         '.bs-tooltip-right .tooltip-arrow::before': {
-            left: 0,
+            left: '1px',
             borderWidth: `calc(${theme('tooltip.arrow.width')} / 2) ${theme('tooltip.arrow.height')} calc(${theme('tooltip.arrow.width')} / 2) 0`,
             borderRightColor: theme('tooltip.arrow.color'),
         }

package/dist/Tooltip.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _sfc_main: {
-    mixins: any[];
-};
-export default _sfc_main;

package/dist/TooltipPlugin.d.ts

@@ -1,9 +0,0 @@
-import type { App } from 'vue';
-export default function (app: App, options?: {
-    delay: undefined;
-    prefix: string;
-    triggers: {
-        open: string[];
-        close: string[];
-    };
-}): void;