@vue-interface/tooltip 1.0.0-beta.8 → 2.0.0

package/src/TooltipPlugin.ts

@@ -1,127 +1,111 @@
-import type { App } from 'vue';
-import { h, render } from 'vue';
-import Tooltip from './Tooltip.vue';
-
-type TooltipPluginOptions = {
-    delay?: number,
-    prefix: string,
-    triggers: {
-        open: string[],
-        close: string[],
-    }
+import { h, render, type App, type Directive } from 'vue';
+import Tooltip, { type TooltipProps } from './Tooltip.vue';
+
+const prefix = 'data-tooltip';
+const prefixRegExp = new RegExp(`^${prefix}\-`);
+
+function getAttributes(el: Element): Record<string,string> {
+    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] }), {});
 }
 
-export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
-    const tooltips: Map<string,Function> = new Map;
+function createTooltip(target: Element, props?: TooltipProps) {
+    const container = document.createElement('template');
+    
+    const vnode = h(Tooltip, Object.assign({
+        target
+    }, getAttributes(target), props));
 
-    const options: TooltipPluginOptions = Object.assign({
-        delay: undefined,
-        prefix: 'data-tooltip',
-        triggers: {
-            open: ['mouseover:350'],
-            close: ['mouseout:100'],
-        }
-    }, opts);
+    render(vnode, container);
 
-    const prefix = options.prefix.replace(/[-]+$/, '');
-    const prefixRegExp = new RegExp(`^${prefix}\-`);
+    const title = target.getAttribute('title');
 
-    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] }), {});
+    if(title) {
+        target.setAttribute(`${prefix}-og-title`, title);
+        target.removeAttribute('title');
     }
 
-    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
-        }, props));
-    
-        render(vnode, container);
-    
-        const [el] = [...container.children];
-    
-        document.body.append(el);
-    
-        return () => {
-            tooltips.delete(hash);
+    return () => {
+        if(vnode.component) {
+            vnode.component.exposed?.tooltipEl.value?.remove();
+        }
+    };
+}
 
-            // @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);
-        };
-    }
+function destroyTooltip(target: Element) {
+    const tooltips = document.querySelectorAll(
+        `[${prefix}-id="${target.getAttribute(`${prefix}-id`)}"]`
+    );
 
-    function init(target: Element, props = {}) {
-        const properties: Record<string,any> = Object.assign({
-            title: target.getAttribute(prefix)
-        }, props, getAttributes(target));
+    for(const tooltip of tooltips) {
+        tooltip.remove();
+    }
 
-        // If the properties don't have a title, ignore this target.
-        if(!properties.title || target.hasAttribute(`${prefix}-id`)) {
-            return;
-        }
+    target.removeAttribute(`${prefix}-id`);
 
-        // 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);
-        
-        // Create the instance vars.
-        let tooltip: Function|null, timer: number;
+    const title = target.getAttribute(`${prefix}-og-title`);
 
-        //target.setAttribute(prefix, properties.title);
-        target.setAttribute(`${prefix}-id`, hash);
-        target.removeAttribute('title');
+    if(title) {
+        target.setAttribute('title', 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);
-            }
-        }
+function shouldCreateTooltip(target: Node): target is Element {
+    if(!(target instanceof Element)) {
+        return false;
+    }
 
-        function close(delay = 0) {
-            clearTimeout(timer);
+    const attrs = getAttributes(target);
 
-            if(tooltip) {
-                timer = setTimeout(() => {
-                    tooltip && tooltip();
-                    tooltip = null;
-                }, delay);
-            }       
-        }
+    return !attrs.id && !!attrs.title;
+}
 
-        function addEventListener(trigger: string, fn: Function) {
-            const [ event, delayString ] = trigger.split(':');
+function shouldRemoveTooltip(target: Node): target is Element {
+    if(!(target instanceof Element)) {
+        return false;
+    }
 
-            target.addEventListener(event, () => fn(Number(delayString || 0)));
-        }
+    return target.hasAttribute(`${prefix}-id`);
+}
 
-        (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));
+export const TooltipDirective: Directive<Element, string|TooltipProps> =  {
+    beforeMount(target, binding) {
+        createTooltip(target, typeof binding.value === 'string' ? {
+            title: binding.value
+        }: binding.value);
+    },
+    beforeUnmount(target) {
+        destroyTooltip(target);
     }
-  
+};
+
+export function TooltipPlugin(app: App<Element>) {
     app.mixin({
+        beforeMount() {
+            const observer = new MutationObserver((mutations) => {
+                for(const { addedNodes, removedNodes } of mutations) {
+                    addedNodes.forEach((node) => {
+                        if(shouldCreateTooltip(node)) {
+                            createTooltip(node);
+                        }
+                    });
+
+                    removedNodes.forEach((node) => {
+                        if(shouldRemoveTooltip(node)) {
+                            destroyTooltip(node);
+                        }
+                    });
+                }
+            });
+      
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        },
         mounted() {
             let el = this.$el;
 
@@ -129,11 +113,6 @@ export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
                 el = this.$el.parentNode;
             }
 
-            if(el instanceof HTMLElement) {
-                init(el);
-            }
-
-            // Create the tree walker.
             const walker = document.createTreeWalker(
                 el,
                 NodeFilter.SHOW_ALL,
@@ -146,42 +125,13 @@ export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
                 }
             );
 
-            // Step through and alert all child nodes
             while(walker.nextNode()) {
-                if(walker.currentNode instanceof Element) {
-                    init(<Element> walker.currentNode);
+                if(shouldCreateTooltip(walker.currentNode)) {
+                    createTooltip(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', {
-        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();
-        }
-    });
+    app.directive<Element, string|TooltipProps>('tooltip', TooltipDirective);
 }

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "customConditions": ["source"],
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue"
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.vue",
+  ],
+  "exclude": ["node_modules"]
+}

package/vite.config.js

@@ -0,0 +1,47 @@
+import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
+import { pascalCase } from 'change-case';
+import path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import pkg from './package.json';
+
+const fileName = pkg.name.split('/')[1];
+
+const external = [
+    ...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
+    ...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
+];
+
+export default ({ command }) => defineConfig({
+    build: {
+        sourcemap: command === 'build',
+        lib: {
+            entry: path.resolve(__dirname, 'index.ts'),
+            name: pascalCase(fileName),
+            fileName,
+        },
+        rollupOptions: {
+            external,
+            output: {
+                globals: external.reduce((carry, dep) => {
+                    return Object.assign(carry, {
+                        [dep]: pascalCase(dep)
+                    });
+                }, {}),
+            }
+        },
+        watch: !process.env.NODE_ENV && {
+            include: [
+                './tailwindcss/**/*.js'
+            ]
+        }
+    },
+    plugins: [
+        vue(),
+        dts({
+            entryRoot: path.resolve(__dirname, './'),
+        }),
+        tailwindcss()
+    ],
+});

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-import Tooltip from './src/Tooltip.vue';
-import TooltipPlugin from './src/TooltipPlugin';
-export { Tooltip, TooltipPlugin };

package/dist/src/Popper.d.ts

@@ -1,73 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    offset: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
-    popper: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    target: {
-        type: {
-            new (): Element;
-            prototype: Element;
-        };
-        required: true;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    show: BooleanConstructor;
-    top: BooleanConstructor;
-    bottom: BooleanConstructor;
-    left: BooleanConstructor;
-    right: BooleanConstructor;
-}, unknown, {
-    currentShow: boolean;
-    popperInstance: null;
-}, {
-    computedPlacement(): any;
-    tooltipClasses(): {
-        [x: string]: any;
-        show: any;
-    };
-}, {
-    open(): void;
-    close(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    offset: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
-    popper: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    target: {
-        type: {
-            new (): Element;
-            prototype: Element;
-        };
-        required: true;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    show: BooleanConstructor;
-    top: BooleanConstructor;
-    bottom: BooleanConstructor;
-    left: BooleanConstructor;
-    right: BooleanConstructor;
-}>>, {
-    offset: unknown[];
-    popper: Record<string, any>;
-    title: string;
-    show: boolean;
-    top: boolean;
-    bottom: boolean;
-    left: boolean;
-    right: boolean;
-}>;
-export default _default;

package/dist/src/Tooltip.vue.d.ts

@@ -1,73 +0,0 @@
-declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").DefineComponent<{
-    offset: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
-    popper: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    target: {
-        type: {
-            new (): Element;
-            prototype: Element;
-        };
-        required: true;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    show: BooleanConstructor;
-    top: BooleanConstructor;
-    bottom: BooleanConstructor;
-    left: BooleanConstructor;
-    right: BooleanConstructor;
-}, unknown, {
-    currentShow: boolean;
-    popperInstance: null;
-}, {
-    computedPlacement(): any;
-    tooltipClasses(): {
-        [x: string]: any;
-        show: any;
-    };
-}, {
-    open(): void;
-    close(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    offset: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
-    popper: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    target: {
-        type: {
-            new (): Element;
-            prototype: Element;
-        };
-        required: true;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    show: BooleanConstructor;
-    top: BooleanConstructor;
-    bottom: BooleanConstructor;
-    left: BooleanConstructor;
-    right: BooleanConstructor;
-}>>, {
-    offset: unknown[];
-    popper: Record<string, any>;
-    title: string;
-    show: boolean;
-    top: boolean;
-    bottom: boolean;
-    left: boolean;
-    right: boolean;
-}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _sfc_main;

package/dist/src/TooltipPlugin.d.ts

@@ -1,11 +0,0 @@
-import type { App } from 'vue';
-type TooltipPluginOptions = {
-    delay?: number;
-    prefix: string;
-    triggers: {
-        open: string[];
-        close: string[];
-    };
-};
-export default function (app: App, opts?: Partial<TooltipPluginOptions>): void;
-export {};

package/dist/style.css

@@ -1 +0,0 @@
-.tooltip:not(.show){z-index:-1}