@vue-interface/tooltip 1.0.0-beta.0 → 1.0.0-beta.10

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 />
-        </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,73 +1,191 @@
-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 = {}) {
-  
-    function createTooltip(target: HTMLElement, args: Record<string,any> = {}): {el: Element, vnode: VNode, close: Function} {
+type TooltipPluginOptions = {
+    delay?: number,
+    prefix: string,
+    progressiveEnhancement: boolean,
+    triggers: {
+        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',
+        progressiveEnhancement: true,
+        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] }), {});
+    }
+
+    function createTooltip(target: Element, props: Record<string,any> = {}, hash: string): Function {
         const container = document.createElement('template');
-        const title = target.getAttribute('data-tooltip') || '';
-                
+        
         const vnode = h(Tooltip, Object.assign({
             target,
             show: true
-        }, args), () => title);
-
+        }, props));
+    
         render(vnode, container);
-
+    
         const [el] = [...container.children];
-
+    
         document.body.append(el);
+    
+        return () => {
+            tooltips.delete(hash);
 
-        return {
-            el,
-            vnode,
-            close() {
-                // @ts-ignore
-                vnode.component?.ctx.close();
-
-                setTimeout(() => el.remove(), 150);
-            }
+            // @ts-ignore
+            vnode.component?.ctx.close();
+    
+            // @todo: Make the animation rate (150) dynamic. Should get value 
+            // from the CSS transition duration.
+            setTimeout(() => el.remove(), 150);
         };
     }
-    
-    app.mixin({
-        created() {
-            console.log('created');
-        }
-    });
 
-    app.directive('tooltip', (target, binding) => {
-        if(!target.getAttribute('data-tooltip')) {
-            target.setAttribute('data-tooltip', target.getAttribute('title'));
+    function init(target: Element, props = {}) {
+        const properties: Record<string,any> = Object.assign({
+            title: target.getAttribute(prefix) || target.getAttribute('title')
+        }, props, getAttributes(target));
+
+        // If the properties don't have a title, ignore this target.
+        if(!properties.title || target.hasAttribute(`${prefix}-id`)) {
+            return;
         }
+
+        // Create a unique "hash" to show the node has been initialized.
+        // This prevents double initializing on the same element.
+        const hash = Math.random().toString(36).slice(2, 7);
         
-        target.removeAttribute('title');
-
-        target.addEventListener('mouseover', (e: Event) => {
-            clearTimeout(target.timer);
-
-            if(!target.tooltip) {
-                target.timer = setTimeout(() => {
-                    target.tooltip = createTooltip(target, {
-                        top: binding.modifiers.top,
-                        bottom: binding.modifiers.bottom,
-                        left: binding.modifiers.left,
-                        right: binding.modifiers.right,
-                    });
-                }, 1000);
+        // Create the instance vars.
+        let tooltip: Function|null, timer: number;
+
+        //target.setAttribute(prefix, properties.title);
+        target.setAttribute(`${prefix}-id`, hash);
+        // target.removeAttribute('title');
+
+        function open(delay = 0) {
+            clearTimeout(timer);
+
+            if(!tooltip) {
+                timer = setTimeout(() => {
+                    // 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);
             }
-        });
+        }
 
-        target.addEventListener('mouseout', (e: Event) => {
-            clearTimeout(target.timer);
+        function close(delay = 0) {
+            clearTimeout(timer);
 
-            if(target.tooltip) {
-                target.timer = setTimeout(() => {
-                    target.tooltip && target.tooltip.close();
-                    target.tooltip = null;
-                }, 1000);
+            if(tooltip) {
+                timer = setTimeout(() => {
+                    tooltip && tooltip();
+                    tooltip = null;
+                }, delay);
             }       
-        });
+        }
+
+        function addEventListener(trigger: string, fn: Function) {
+            const [ event, delayString ] = trigger.split(':');
+
+            target.addEventListener(event, () => fn(Number(delayString || 0)));
+        }
+
+        (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({
+        mounted() {
+            if(!options.progressiveEnhancement) {
+                return;
+            }
+            
+            let el = this.$el;
+
+            if(this.$el instanceof Text) {
+                el = this.$el.parentNode;
+            }
+
+            if(el instanceof HTMLElement) {
+                init(el);
+            }
+
+            // Create the tree walker.
+            const walker = document.createTreeWalker(
+                el,
+                NodeFilter.SHOW_ALL,
+                (node: Node) => {
+                    if(!(node instanceof Element)) {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                    
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+            );
+
+            // Step through and alert all child nodes
+            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', {
+        beforeMount(target, binding) {
+            init(target, Object.assign({}, binding.modifiers, binding.value));
+        },
+        beforeUnmount(target) {
+            const id = target.getAttribute(`${prefix}-id`);
+            const tooltip = tooltips.get(id);
+
+            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': {
-            top: 'calc(100% - 2px)',
+            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': {
-            bottom: 'calc(100% - 2px)',
+            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': {
-            left: 'calc(100% - 2px)',
+            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': {
-            right: 'calc(100% - 2px)',
+            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/tailwindcss/safelist.cjs

@@ -0,0 +1,12 @@
+const plugin = require('tailwindcss/plugin');
+const { colors } = require('tailwindcss/defaultTheme');
+
+module.exports = () => [
+    'tooltip',
+    'tooltip-arrow',
+    'tooltip-inner',
+    'bs-tooltip-top',
+    'bs-tooltip-left',
+    'bs-tooltip-right',
+    'bs-tooltip-bottom',
+]

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,2 +0,0 @@
-import type { App } from 'vue';
-export default function (app: App, options?: {}): void;