@vue-interface/tooltip 1.0.0-beta.9 → 2.0.1

package/src/TooltipPlugin.ts

@@ -1,185 +0,0 @@
-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[],
-    }
-}
-
-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] }), {});
-    }
-
-    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);
-
-            // @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 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);
-        
-        // 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);
-            }
-        }
-
-        function close(delay = 0) {
-            clearTimeout(timer);
-
-            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() {
-            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.cjs

@@ -1,162 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-const { colors } = require('tailwindcss/defaultTheme');
-
-module.exports = plugin(function({ addComponents, theme }) {
-    const tooltipTop = {
-        '.bs-tooltip-top': {
-            padding: `${theme('tooltip.arrow.height')} 0`,
-        },
-
-        '.bs-tooltip-top .tooltip-arrow': {
-            bottom: '1px',
-        },
-            
-        '.bs-tooltip-top .tooltip-arrow::before': {
-            bottom: '1px',
-            borderWidth: `${theme('tooltip.arrow.height')} calc(${theme('tooltip.arrow.width')} / 2) 0`,
-            borderTopColor: theme('tooltip.arrow.color'),
-        }
-    };
-
-    const tooltipBottom = {
-        '.bs-tooltip-bottom': {
-            padding: `${theme('tooltip.arrow.height')} 0`,
-        },
-        
-        '.bs-tooltip-bottom .tooltip-arrow': {
-            top: '1px'
-        },
-        
-        '.bs-tooltip-bottom .tooltip-arrow::before': {
-            top: '1px',
-            borderWidth: `0 calc(${theme('tooltip.arrow.width')} / 2) ${theme('tooltip.arrow.height')}`,
-            borderBottomColor: theme('tooltip.arrow.color'),
-        },
-    };
-
-    const tooltipLeft = {
-        '.bs-tooltip-left': {
-            padding: `0 ${theme('tooltip.arrow.height')}`
-        },
-        
-        '.bs-tooltip-left .tooltip-arrow': {
-            right: '1px',
-            width: theme('tooltip.arrow.height'),
-            height: theme('tooltip.arrow.width')
-        },
-        
-        '.bs-tooltip-left .tooltip-arrow::before': {
-            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')
-        }
-    };
-
-    const tooltipRight = {
-        '.bs-tooltip-right': {
-            padding: `0 ${theme('tooltip.arrow.height')}`
-        },
-        
-        '.bs-tooltip-right .tooltip-arrow': {
-            left: '1px',
-            width: theme('tooltip.arrow.height'),
-            height: theme('tooltip.arrow.width'),
-        },
-        
-        '.bs-tooltip-right .tooltip-arrow::before': {
-            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'),
-        }
-    };
-
-    const tooltip = {
-        // Base class
-        '.tooltip': {
-            position: 'absolute',
-            zIndex: theme('tooltip.zIndex'),
-            display: 'block',
-            margin: theme('tooltip.margin'),
-            // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-            // So reset our font and text properties to avoid inheriting weird values.
-            fontSize: theme('tooltip.fontSize'),
-            // Allow breaking very long words so they don't overflow the tooltip's bounds
-            wordWrap: 'break-word',
-            opacity: 0,
-            transition: theme('tooltip.transition')
-        },
-        
-        '.tooltip.show': { opacity: theme('tooltip.opacity') },
-        
-        '.tooltip .tooltip-arrow': {
-            position: 'absolute',
-            display: 'block',
-            width: theme('tooltip.arrow.width'),
-            height: theme('tooltip.arrow.height'),
-        },
-        
-        '.tooltip .tooltip-arrow::before': {
-            position: 'absolute',
-            content: '""',
-            borderColor: 'transparent',
-            borderStyle: 'solid',
-        },
-        
-        ...tooltipTop,
-        ...tooltipBottom,
-        ...tooltipLeft,
-        ...tooltipRight,
-            
-        '.bs-tooltip-auto[x-placement^="top"]': {
-            ...tooltipTop
-        },
-
-        '.bs-tooltip-auto[x-placement^="bottom"]': {
-            ...tooltipBottom
-        },
-
-        '.bs-tooltip-auto[x-placement^="left"]': {
-            ...tooltipLeft
-        },
-
-        '.bs-tooltip-auto[x-placement^="right"]': {
-            ...tooltipRight
-        },
-        
-        // Wrapper for the tooltip content
-        '.tooltip-inner': {
-            maxWidth: theme('tooltip.maxWidth'),
-            padding: `${theme('tooltip.paddingY')} ${theme('tooltip.paddingX')}`,
-            color: theme('tooltip.color'),
-            textAlign: 'center',
-            backgroundColor: theme('tooltip.backgroundColor'),
-            borderRadius: theme('tooltip.borderRadius')
-        }  
-    };
-
-    addComponents(tooltip);
-}, {
-    theme: {
-        tooltip: theme => {
-            return {
-                fontSize: '.875rem',
-                maxWidth: '200px',
-                color: theme('colors.white', colors.white),
-                backgroundColor: theme('colors.black', colors.black),
-                borderRadius: '.25rem',
-                opacity: .9,
-                paddingY: '.25rem',
-                paddingX: '.5rem',
-                margin: 0,
-                zIndex: theme('interface.zIndex.tooltip', 1070),
-                transition: 'opacity .15s ease-out',
-                
-                arrow: {
-                    width: '.8rem',
-                    height: '.4rem',
-                    color: theme('colors.black', colors.black),
-                }                
-            };
-        }
-    }
-});

package/tailwindcss/safelist.cjs

@@ -1,12 +0,0 @@
-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',
-]