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

package/dist/tooltip.umd.cjs

@@ -1,2 +1,2 @@
-(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("@popperjs/core")):typeof define=="function"&&define.amd?define(["exports","vue","@popperjs/core"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.Tooltip={},l.Vue,l.PopperjsCore))})(this,function(l,o,w){"use strict";const y=o.defineComponent({props:{offset:{type:Array,default:void 0},popper:{type:Object,default:void 0},placement:{type:String,default:void 0},target:{type:Element,required:!0},title:{type:String,default:void 0},show:Boolean,top:Boolean,bottom:Boolean,left:Boolean,right:Boolean},data(){return{currentShow:!1,popperInstance:null}},computed:{computedPlacement(){return this.placement?this.placement:this.bottom?"bottom":this.left?"left":this.right?"right":"top"},tooltipClasses(){return{show:this.currentShow,[`bs-tooltip-${this.computedPlacement}`]:!0}}},mounted(){this.popperInstance=w.createPopper(this.target,this.$el,Object.assign({placement:this.computedPlacement,modifiers:[{name:"offset",options:{offset:[0,6]}},{name:"arrow",options:{element:this.$refs.arrow}}]},this.popper)),this.$nextTick(()=>{this.currentShow=this.show})},beforeUnmount(){this.popperInstance&&this.popperInstance.destroy()},methods:{open(){this.currentShow=!0},close(){this.currentShow=!1}}}),E=o.defineComponent({mixins:[y]}),M="",x=(c,m)=>{const a=c.__vccOpts||c;for(const[d,i]of m)a[d]=i;return a},S={ref:"arrow",class:"tooltip-arrow"},A={ref:"inner",class:"tooltip-inner"};function j(c,m,a,d,i,g){return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["tooltip",c.tooltipClasses]),role:"tooltip"},[o.createElementVNode("div",S,null,512),o.createElementVNode("div",A,[o.renderSlot(c.$slots,"default",{},()=>[o.createTextVNode(o.toDisplayString(c.title),1)])],512)],2)}const T=x(E,[["render",j]]);function N(c,m={}){const a=new Map,d=Object.assign({delay:void 0,prefix:"data-tooltip",triggers:{open:["mouseover:350"],close:["mouseout:100"]}},m),i=d.prefix.replace(/[-]+$/,""),g=new RegExp(`^${i}-`);function O(e){return Array.from(e.attributes).map(t=>[t.name,t.value]).filter(([t])=>t==="title"||t.match(g)).map(([t,n])=>[t.replace(new RegExp(g),""),n]).reduce((t,n)=>Object.assign(t,{[n[0]]:n[1]}),{})}function P(e,t={},n){const s=document.createElement("template"),r=o.h(T,Object.assign({target:e,show:!0},t));o.render(r,s);const[p]=[...s.children];return document.body.append(p),()=>{var f;a.delete(n),(f=r.component)==null||f.ctx.close(),setTimeout(()=>p.remove(),150)}}function b(e,t={}){var $,v;const n=Object.assign({title:e.getAttribute(i)||e.getAttribute("title")},t,O(e));if(!n.title||e.hasAttribute(`${i}-id`))return;const s=Math.random().toString(36).slice(2,7);let r,p;e.setAttribute(`${i}-id`,s);function f(u=0){clearTimeout(p),r||(p=setTimeout(()=>{document.contains(e)&&(r=P(e,n,s),a.set(s,r))},u))}function h(u=0){clearTimeout(p),r&&(p=setTimeout(()=>{r&&r(),r=null},u))}function _(u,C){const[L,B]=u.split(":");e.addEventListener(L,()=>C(Number(B||0)))}((($=e.getAttribute(`${i}-trigger-open`))==null?void 0:$.split(","))||d.triggers.open).map(u=>_(u,f)),(((v=e.getAttribute(`${i}-trigger-close`))==null?void 0:v.split(","))||d.triggers.close).map(u=>_(u,h))}c.mixin({mounted(){let e=this.$el;this.$el instanceof Text&&(e=this.$el.parentNode),e instanceof HTMLElement&&b(e);const t=document.createTreeWalker(e,NodeFilter.SHOW_ALL,s=>s instanceof Element?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT);for(;t.nextNode();)t.currentNode instanceof Element&&b(t.currentNode);new MutationObserver(s=>{for(const{removedNodes:r}of s)for(const p of r)for(const f of p.querySelectorAll(`[${i}-id]`)){const h=a.get(f.getAttribute(`${i}-id`));h&&h()}}).observe(e,{childList:!0})}}),c.directive("tooltip",{beforeMount(e,t){b(e,Object.assign({},t.modifiers,t.value))},beforeUnmount(e){const t=e.getAttribute(`${i}-id`),n=a.get(t);n&&n()}})}l.Tooltip=T,l.TooltipPlugin=N,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@floating-ui/vue")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.Tooltip={},a.Vue,a.FloatingUiVue))})(this,(function(a,t,c){"use strict";const A=["data-tooltip-id"],N={ref:"inner",class:"tooltip-inner"},h=t.defineComponent({__name:"Tooltip",props:{title:{default:void 0},show:{type:Boolean},target:{default:void 0},placement:{default:"top"},strategy:{default:void 0},middleware:{type:Function,default:void 0},flip:{default:void 0},offset:{type:[Number,Object,Function],default:void 0}},setup(e,{expose:o}){const i=e,n=t.useTemplateRef("tooltipEl"),l=t.useTemplateRef("arrowEl"),r=t.ref(!1),p=Math.random().toString(36).slice(2,12),s=t.isRef(i.target)?i.target:t.shallowReadonly(t.ref(i.target)),_=t.computed(()=>{if(s.value instanceof Element)return s.value.getAttribute("data-tooltip-id")});t.watchEffect(()=>{!s.value||_.value||s.value instanceof Element&&(s.value.setAttribute("data-tooltip-id",p),s.value.addEventListener("mouseover",v),s.value.addEventListener("mouseout",x))}),t.watchEffect(()=>{r.value=i.show});const $=t.computed(()=>i.offset?i.offset:()=>{const{height:m}=l.value?getComputedStyle(l.value):{height:"0px"};return{mainAxis:parseInt(m.replace("px",""))}}),{floatingStyles:F,middlewareData:d,placement:C}=c.useFloating(s,n,{placement:i.placement,middleware:i.middleware?.(l)??[c.flip(i.flip),c.offset($.value),c.arrow({element:l})],whileElementsMounted:c.autoUpdate}),O=t.computed(()=>({show:r.value})),L=t.computed(()=>C.value.split("-")[0]),T=t.computed(()=>({top:"bottom",right:"left",bottom:"top",left:"right"})[L.value]),j=t.computed(()=>({top:"rotate(225deg)",right:"rotate(-45deg)",bottom:"rotate(45deg)",left:"rotate(135deg)"}));function v(){r.value=!0}function x(){r.value=!1}return t.onUnmounted(()=>{s.value instanceof Element&&s.value.removeAttribute("data-tooltip-id")}),o({open:v,close:x,tooltipEl:n,arrowEl:l,isShowing:r,hash:p}),(m,M)=>(t.openBlock(),t.createBlock(t.Teleport,{to:"body"},[t.createElementVNode("div",{ref_key:"tooltipEl",ref:n,class:t.normalizeClass(["tooltip",O.value]),role:"tooltip","data-tooltip-id":t.unref(p),style:t.normalizeStyle(t.unref(F))},[t.createElementVNode("div",{ref_key:"arrowEl",ref:l,class:"tooltip-arrow",style:t.normalizeStyle({transform:j.value[T.value],...Object.assign({left:t.unref(d).arrow?.x!=null?`${t.unref(d).arrow.x}px`:"",top:t.unref(d).arrow?.y!=null?`${t.unref(d).arrow.y}px`:""},{[T.value]:`calc(${-(l.value?.offsetWidth??0)/2}px)`})})},null,4),t.createElementVNode("div",N,[t.renderSlot(m.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(e.title),1)])],512)],14,A)]))}}),f="data-tooltip",E=new RegExp(`^${f}-`);function b(e){return Array.from(e.attributes).map(o=>[o.name,o.value]).filter(([o])=>o==="title"||o.match(E)).map(([o,i])=>[o.replace(new RegExp(E),""),i]).reduce((o,i)=>Object.assign(o,{[i[0]]:i[1]}),{})}function u(e,o){const i=document.createElement("template"),n=t.h(h,Object.assign({target:e},b(e),o));t.render(n,i);const l=e.getAttribute("title");return l&&(e.setAttribute(`${f}-og-title`,l),e.removeAttribute("title")),()=>{n.component&&n.component.exposed?.tooltipEl.value?.remove()}}function g(e){const o=document.querySelectorAll(`[${f}-id="${e.getAttribute(`${f}-id`)}"]`);for(const n of o)n.remove();e.removeAttribute(`${f}-id`);const i=e.getAttribute(`${f}-og-title`);i&&e.setAttribute("title",i)}function w(e){if(!(e instanceof Element))return!1;const o=b(e);return!o.id&&!!o.title}function R(e){return e instanceof Element?e.hasAttribute(`${f}-id`):!1}const y={beforeMount(e,o){u(e,typeof o.value=="string"?{title:o.value}:o.value)},beforeUnmount(e){g(e)}};function S(e){e.mixin({beforeMount(){new MutationObserver(i=>{for(const{addedNodes:n,removedNodes:l}of i)n.forEach(r=>{w(r)&&u(r)}),l.forEach(r=>{R(r)&&g(r)})}).observe(document.body,{childList:!0,subtree:!0})},mounted(){let o=this.$el;this.$el instanceof Text&&(o=this.$el.parentNode);const i=document.createTreeWalker(o,NodeFilter.SHOW_ALL,n=>n instanceof Element?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT);for(;i.nextNode();)w(i.currentNode)&&u(i.currentNode)}}),e.directive("tooltip",y)}a.Tooltip=h,a.TooltipDirective=y,a.TooltipPlugin=S,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=tooltip.umd.cjs.map

package/dist/tooltip.umd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.umd.cjs","sources":["../src/Popper.ts","../src/Tooltip.vue","../src/TooltipPlugin.ts"],"sourcesContent":["import { createPopper } from '@popperjs/core';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n    props: {\n        offset: {\n            type: Array,\n            default: undefined\n        },\n\n        popper: {\n            type: Object,\n            default: undefined\n        },\n\n        placement: {\n            type: String,\n            default: undefined\n        },\n\n        target: {\n            type: Element,\n            required: true\n        },\n\n        title: {\n            type: String,\n            default: undefined\n        },\n        \n        show: Boolean,\n        \n        top: Boolean,\n\n        bottom: Boolean,\n\n        left: Boolean,\n\n        right: Boolean,\n    },\n\n    data() {\n        return {\n            currentShow: false,\n            popperInstance: null\n        };\n    },\n\n    computed: {\n        computedPlacement() {\n            if(this.placement) {\n                return this.placement;\n            }\n\n            if(this.bottom) {\n                return 'bottom';\n            }\n\n            if(this.left) {\n                return 'left';\n            }\n\n            if(this.right) {\n                return 'right';\n            }\n\n            return 'top';\n        },\n        tooltipClasses() {\n            return {\n                show: this.currentShow,\n                [`bs-tooltip-${this.computedPlacement}`]: true\n            };\n        }\n    },\n\n    mounted() {\n        this.popperInstance = createPopper(this.target, this.$el, Object.assign({\n            placement: this.computedPlacement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 6]\n                    },\n                },\n                {\n                    name: 'arrow',\n                    options: {\n                        element: this.$refs.arrow,\n                    },\n                },\n            ],\n        }, this.popper));\n\n        this.$nextTick(() => {\n            this.currentShow = this.show;\n        });\n    },\n\n    beforeUnmount() {\n        this.popperInstance && this.popperInstance.destroy();\n    },\n\n    methods: {\n\n        open() {\n            this.currentShow = true;\n        },\n\n        close() {\n            this.currentShow = false;\n        }\n\n    }\n\n});","<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport Popper from './Popper';\n\nexport default defineComponent({\n    mixins: [\n        Popper\n    ]\n});\n</script>\n\n<template>\n    <div\n        class=\"tooltip\"\n        :class=\"tooltipClasses\"\n        role=\"tooltip\">\n        <div\n            ref=\"arrow\"\n            class=\"tooltip-arrow\" />\n        <div\n            ref=\"inner\"\n            class=\"tooltip-inner\">\n            <slot>{{ title }}</slot>\n        </div>\n    </div>\n</template>\n\n<style>\n.tooltip:not(.show) {\n    z-index: -1;\n}\n</style>","import type { App } from 'vue';\nimport { h, render } from 'vue';\nimport Tooltip from './Tooltip.vue';\n\ntype TooltipPluginOptions = {\n    delay?: number,\n    prefix: string,\n    triggers: {\n        open: string[],\n        close: string[],\n    }\n}\n\nexport default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {\n    const tooltips: Map<string,Function> = new Map;\n\n    const options: TooltipPluginOptions = Object.assign({\n        delay: undefined,\n        prefix: 'data-tooltip',\n        triggers: {\n            open: ['mouseover:350'],\n            close: ['mouseout:100'],\n        }\n    }, opts);\n    \n    const prefix = options.prefix.replace(/[-]+$/, '');\n    const prefixRegExp = new RegExp(`^${prefix}\\-`);\n\n    function getAttributes(el: Element): Record<string,any> {\n        return Array.from(el.attributes)\n            .map(a => [a.name, a.value])\n            .filter(([key]) => key === 'title' || key.match(prefixRegExp))\n            .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])\n            .reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});\n    }\n\n    function createTooltip(target: Element, props: Record<string,any> = {}, hash: string): Function {\n        const container = document.createElement('template');\n        \n        const vnode = h(Tooltip, Object.assign({\n            target,\n            show: true\n        }, props));\n    \n        render(vnode, container);\n    \n        const [el] = [...container.children];\n    \n        document.body.append(el);\n    \n        return () => {\n            tooltips.delete(hash);\n\n            // @ts-ignore\n            vnode.component?.ctx.close();\n    \n            // @todo: Make the animation rate (150) dynamic. Should get value \n            // from the CSS transition duration.\n            setTimeout(() => el.remove(), 150);\n        };\n    }\n\n    function init(target: Element, props = {}) {\n        const properties: Record<string,any> = Object.assign({\n            title: target.getAttribute(prefix) || target.getAttribute('title')\n        }, props, getAttributes(target));\n\n        // If the properties don't have a title, ignore this target.\n        if(!properties.title || target.hasAttribute(`${prefix}-id`)) {\n            return;\n        }\n\n        // Create a unique \"hash\" to show the node has been initialized.\n        // This prevents double initializing on the same element.\n        const hash = Math.random().toString(36).slice(2, 7);\n        \n        // Create the instance vars.\n        let tooltip: Function|null, timer: number;\n\n        //target.setAttribute(prefix, properties.title);\n        target.setAttribute(`${prefix}-id`, hash);\n        // target.removeAttribute('title');\n\n        function open(delay = 0) {\n            clearTimeout(timer);\n\n            if(!tooltip) {\n                timer = setTimeout(() => {\n                    // Do a check before creating the tooltip to ensure the dom\n                    // element still exists. Its possible for the element to\n                    // be removed after the timeout delay runs.\n                    if(document.contains(target)) {\n                        tooltip = createTooltip(target, properties, hash);\n                        tooltips.set(hash, tooltip);\n                    }\n                }, delay);\n            }\n        }\n\n        function close(delay = 0) {\n            clearTimeout(timer);\n\n            if(tooltip) {\n                timer = setTimeout(() => {\n                    tooltip && tooltip();\n                    tooltip = null;\n                }, delay);\n            }       \n        }\n\n        function addEventListener(trigger: string, fn: Function) {\n            const [ event, delayString ] = trigger.split(':');\n\n            target.addEventListener(event, () => fn(Number(delayString || 0)));\n        }\n\n        (target.getAttribute(`${prefix}-trigger-open`)?.split(',') || options.triggers.open)\n            .map(trigger => addEventListener(trigger, open));\n            \n        (target.getAttribute(`${prefix}-trigger-close`)?.split(',') || options.triggers.close)\n            .map(trigger => addEventListener(trigger, close));\n    }\n  \n    app.mixin({\n        mounted() {\n            let el = this.$el;\n\n            if(this.$el instanceof Text) {\n                el = this.$el.parentNode;\n            }\n\n            if(el instanceof HTMLElement) {\n                init(el);\n            }\n\n            // Create the tree walker.\n            const walker = document.createTreeWalker(\n                el,\n                NodeFilter.SHOW_ALL,\n                (node: Node) => {\n                    if(!(node instanceof Element)) {\n                        return NodeFilter.FILTER_REJECT;\n                    }\n                    \n                    return NodeFilter.FILTER_ACCEPT;\n                }\n            );\n\n            // Step through and alert all child nodes\n            while(walker.nextNode()) {\n                if(walker.currentNode instanceof Element) {\n                    init(<Element> walker.currentNode);\n                }\n            }\n\n            const observer = new MutationObserver((changes) => {\n                for(const { removedNodes } of changes) {\n                    for(const node of removedNodes) {\n                        for(const el of (node as Element).querySelectorAll(`[${prefix}-id]`)) {\n                            const tooltip = tooltips.get(\n                                el.getAttribute(`${prefix}-id`) as string\n                            );\n\n                            tooltip && tooltip();\n                        }\n                    } \n                }\n            });\n\n            observer.observe(el, { childList: true });\n        }\n    });\n\n    app.directive('tooltip', {\n        beforeMount(target, binding) {\n            init(target, Object.assign({}, binding.modifiers, binding.value));\n        },\n        beforeUnmount(target) {\n            const id = target.getAttribute(`${prefix}-id`);\n            const tooltip = tooltips.get(id);\n\n            tooltip && tooltip();\n        }\n    });\n}"],"names":["Popper","defineComponent","createPopper","_sfc_main","_hoisted_1","_hoisted_2","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","TooltipPlugin","app","opts","tooltips","options","prefix","prefixRegExp","getAttributes","el","a","key","value","carry","attr","createTooltip","target","props","hash","container","vnode","h","Tooltip","render","_a","init","properties","tooltip","timer","open","delay","close","addEventListener","trigger","fn","event","delayString","_b","walker","node","changes","removedNodes","binding","id"],"mappings":"wTAGA,MAAAA,EAAeC,kBAAgB,CAE3B,MAAO,CACH,OAAQ,CACJ,KAAM,MACN,QAAS,MACb,EAEA,OAAQ,CACJ,KAAM,OACN,QAAS,MACb,EAEA,UAAW,CACP,KAAM,OACN,QAAS,MACb,EAEA,OAAQ,CACJ,KAAM,QACN,SAAU,EACd,EAEA,MAAO,CACH,KAAM,OACN,QAAS,MACb,EAEA,KAAM,QAEN,IAAK,QAEL,OAAQ,QAER,KAAM,QAEN,MAAO,OACX,EAEA,MAAO,CACI,MAAA,CACH,YAAa,GACb,eAAgB,IAAA,CAExB,EAEA,SAAU,CACN,mBAAoB,CAChB,OAAG,KAAK,UACG,KAAK,UAGb,KAAK,OACG,SAGR,KAAK,KACG,OAGR,KAAK,MACG,QAGJ,KACX,EACA,gBAAiB,CACN,MAAA,CACH,KAAM,KAAK,YACX,CAAC,cAAc,KAAK,qBAAsB,EAAA,CAElD,CACJ,EAEA,SAAU,CACN,KAAK,eAAiBC,EAAAA,aAAa,KAAK,OAAQ,KAAK,IAAK,OAAO,OAAO,CACpE,UAAW,KAAK,kBAChB,UAAW,CACP,CACI,KAAM,SACN,QAAS,CACL,OAAQ,CAAC,EAAG,CAAC,CACjB,CACJ,EACA,CACI,KAAM,QACN,QAAS,CACL,QAAS,KAAK,MAAM,KACxB,CACJ,CACJ,CAAA,EACD,KAAK,MAAM,CAAC,EAEf,KAAK,UAAU,IAAM,CACjB,KAAK,YAAc,KAAK,IAAA,CAC3B,CACL,EAEA,eAAgB,CACP,KAAA,gBAAkB,KAAK,eAAe,QAAQ,CACvD,EAEA,QAAS,CAEL,MAAO,CACH,KAAK,YAAc,EACvB,EAEA,OAAQ,CACJ,KAAK,YAAc,EACvB,CAEJ,CAEJ,CAAC,ECjHDC,EAAeF,kBAAgB,CAC3B,OAAQ,CACJD,CACJ,CACJ,CAAC,4EAUWI,EAAM,CAAA,IAAA,+BAGNC,EAAM,CAAA,IAAA,+BARL,SAAAC,EAAAC,EAAAC,EAACC,EACEC,EAAcC,EAAAC,EAAA,QACjBC,EAAS,UAAA,EAAAC,EAAA,mBAAA,MAAA,CAAA,MAAAC,EAAAA,eAAA,CAAA,UAAAR,EAAA,cAAA,CAAA,EACd,KAAA,SAAA,EAGA,CAG4BS,EAAAA,mBAAA,MAAAZ,EAAA,KAAA,GAAA,EAAfY,EAAA,mBAAA,MAAAX,EAAA,CAAAY,EAAAA,WAAAV,EAAA,OAAA,UAAA,CAAA,EAAA,IAAA,yFCTI,SAAAW,EAAAC,EAAUC,EAAsC,GAAI,CACzE,MAAMC,EAAqC,IAAA,IAErCC,EAAgC,OAAO,OAAO,CAChD,MAAO,OACP,OAAQ,eACR,SAAU,CACN,KAAM,CAAC,eAAe,EACtB,MAAO,CAAC,cAAc,CAC1B,GACDF,CAAI,EAEDG,EAASD,EAAQ,OAAO,QAAQ,QAAS,EAAE,EAC3CE,EAAe,IAAI,OAAO,IAAID,IAAU,EAE9C,SAASE,EAAcC,EAAiC,CACpD,OAAO,MAAM,KAAKA,EAAG,UAAU,EAC1B,IAASC,GAAA,CAACA,EAAE,KAAMA,EAAE,KAAK,CAAC,EAC1B,OAAO,CAAC,CAACC,CAAG,IAAMA,IAAQ,SAAWA,EAAI,MAAMJ,CAAY,CAAC,EAC5D,IAAI,CAAC,CAACI,EAAKC,CAAK,IAAM,CAACD,EAAI,QAAQ,IAAI,OAAOJ,CAAY,EAAG,EAAE,EAAGK,CAAK,CAAC,EACxE,OAAO,CAACC,EAAOC,IAAS,OAAO,OAAOD,EAAO,CAAE,CAACC,EAAK,IAAKA,EAAK,GAAI,EAAG,CAAE,CAAA,CACjF,CAEA,SAASC,EAAcC,EAAiBC,EAA4B,CAAA,EAAIC,EAAwB,CACtF,MAAAC,EAAY,SAAS,cAAc,UAAU,EAE7CC,EAAQC,EAAA,EAAEC,EAAS,OAAO,OAAO,CACnC,OAAAN,EACA,KAAM,EAAA,EACPC,CAAK,CAAC,EAETM,SAAOH,EAAOD,CAAS,EAEvB,KAAM,CAACV,CAAE,EAAI,CAAC,GAAGU,EAAU,QAAQ,EAE1B,gBAAA,KAAK,OAAOV,CAAE,EAEhB,IAAM,OACTL,EAAS,OAAOc,CAAI,GAGdM,EAAAJ,EAAA,YAAA,MAAAI,EAAW,IAAI,QAIrB,WAAW,IAAMf,EAAG,OAAO,EAAG,GAAG,CAAA,CAEzC,CAEA,SAASgB,EAAKT,EAAiBC,EAAQ,GAAI,SACjC,MAAAS,EAAiC,OAAO,OAAO,CACjD,MAAOV,EAAO,aAAaV,CAAM,GAAKU,EAAO,aAAa,OAAO,CAClE,EAAAC,EAAOT,EAAcQ,CAAM,CAAC,EAG/B,GAAG,CAACU,EAAW,OAASV,EAAO,aAAa,GAAGV,MAAW,EACtD,OAKE,MAAAY,EAAO,KAAK,SAAS,SAAS,EAAE,EAAE,MAAM,EAAG,CAAC,EAGlD,IAAIS,EAAwBC,EAGrBZ,EAAA,aAAa,GAAGV,OAAaY,CAAI,EAG/B,SAAAW,EAAKC,EAAQ,EAAG,CACrB,aAAaF,CAAK,EAEdD,IACAC,EAAQ,WAAW,IAAM,CAIlB,SAAS,SAASZ,CAAM,IACbW,EAAAZ,EAAcC,EAAQU,EAAYR,CAAI,EACvCd,EAAA,IAAIc,EAAMS,CAAO,IAE/BG,CAAK,EAEhB,CAES,SAAAC,EAAMD,EAAQ,EAAG,CACtB,aAAaF,CAAK,EAEfD,IACCC,EAAQ,WAAW,IAAM,CACrBD,GAAWA,EAAQ,EACTA,EAAA,MACXG,CAAK,EAEhB,CAES,SAAAE,EAAiBC,EAAiBC,EAAc,CACrD,KAAM,CAAEC,EAAOC,CAAY,EAAIH,EAAQ,MAAM,GAAG,EAEzCjB,EAAA,iBAAiBmB,EAAO,IAAMD,EAAG,OAAOE,GAAe,CAAC,CAAC,CAAC,CACrE,IAECZ,EAAAR,EAAO,aAAa,GAAGV,gBAAqB,IAA5C,YAAAkB,EAA+C,MAAM,OAAQnB,EAAQ,SAAS,MAC1E,IAAI4B,GAAWD,EAAiBC,EAASJ,CAAI,CAAC,KAElDQ,EAAArB,EAAO,aAAa,GAAGV,iBAAsB,IAA7C,YAAA+B,EAAgD,MAAM,OAAQhC,EAAQ,SAAS,OAC3E,IAAI4B,GAAWD,EAAiBC,EAASF,CAAK,CAAC,CACxD,CAEA7B,EAAI,MAAM,CACN,SAAU,CACN,IAAIO,EAAK,KAAK,IAEX,KAAK,eAAe,OACnBA,EAAK,KAAK,IAAI,YAGfA,aAAc,aACbgB,EAAKhB,CAAE,EAIX,MAAM6B,EAAS,SAAS,iBACpB7B,EACA,WAAW,SACV8B,GACQA,aAAgB,QAId,WAAW,cAHP,WAAW,aAI1B,EAIE,KAAAD,EAAO,YACNA,EAAO,uBAAuB,SAC7Bb,EAAea,EAAO,WAAW,EAIxB,IAAI,iBAAkBE,GAAY,CACrC,SAAA,CAAE,aAAAC,CAAa,IAAKD,EAC1B,UAAUD,KAAQE,EACd,UAAUhC,KAAO8B,EAAiB,iBAAiB,IAAIjC,OAAY,EAAG,CAClE,MAAMqB,EAAUvB,EAAS,IACrBK,EAAG,aAAa,GAAGH,MAAW,CAAA,EAGlCqB,GAAWA,EAAQ,CACvB,CAER,CACH,EAEQ,QAAQlB,EAAI,CAAE,UAAW,EAAM,CAAA,CAC5C,CAAA,CACH,EAEDP,EAAI,UAAU,UAAW,CACrB,YAAYc,EAAQ0B,EAAS,CACpBjB,EAAAT,EAAQ,OAAO,OAAO,CAAA,EAAI0B,EAAQ,UAAWA,EAAQ,KAAK,CAAC,CACpE,EACA,cAAc1B,EAAQ,CAClB,MAAM2B,EAAK3B,EAAO,aAAa,GAAGV,MAAW,EACvCqB,EAAUvB,EAAS,IAAIuC,CAAE,EAE/BhB,GAAWA,EAAQ,CACvB,CAAA,CACH,CACL"}
+{"version":3,"file":"tooltip.umd.cjs","sources":["../src/Tooltip.vue","../src/TooltipPlugin.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { arrow, autoUpdate, flip as flipFn, FlipOptions, MaybeElement, offset as offsetFn, OffsetOptions, ReferenceElement, useFloating, UseFloatingOptions } from '@floating-ui/vue';\nimport { computed, isRef, onUnmounted, Ref, ref, shallowReadonly, ShallowRef, useTemplateRef, watchEffect } from 'vue';\n\nexport type TooltipProps = {\n    title?: string;\n    show?: boolean;\n    target?: Ref<MaybeElement<ReferenceElement>> | ReferenceElement;\n    placement?: UseFloatingOptions['placement'];\n    strategy?: UseFloatingOptions['strategy'];\n    middleware?: (arrow: Readonly<ShallowRef<HTMLDivElement | null>>) => UseFloatingOptions['middleware'];\n    flip?: FlipOptions;\n    offset?: OffsetOptions;\n};\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n    title: undefined,\n    target: undefined,\n    placement: 'top',\n    middleware: undefined,\n    strategy: undefined,\n    flip: undefined,\n    offset: undefined,\n});\n\ndefineSlots<{\n    default: () => void\n}>();\n\nconst tooltipEl = useTemplateRef<HTMLDivElement>('tooltipEl');\nconst arrowEl = useTemplateRef<HTMLDivElement>('arrowEl');\nconst isShowing = ref(false);\nconst hash = Math.random().toString(36).slice(2, 12);\n\nconst targetEl = isRef(props.target)\n    ? props.target\n    : shallowReadonly(ref(props.target));\n\nconst id = computed(() => {\n    if(!(targetEl.value instanceof Element)) {\n        return;\n    }\n\n    return targetEl.value.getAttribute('data-tooltip-id');\n});\n\n\nwatchEffect(() => {\n    if(!targetEl.value || id.value) {\n        return;\n    }\n\n    if(targetEl.value instanceof Element) {\n        targetEl.value.setAttribute('data-tooltip-id', hash);\n        targetEl.value.addEventListener('mouseover', open);\n        targetEl.value.addEventListener('mouseout', close);\n    }\n});\n\nwatchEffect(() => {\n    isShowing.value = props.show;\n});\n\nconst dynamicOffset = computed<OffsetOptions>(() => {\n    if(props.offset) {\n        return props.offset;\n    }\n\n    return () => {\n        const { height } = arrowEl.value ? getComputedStyle(arrowEl.value) : { height: '0px' };\n\n        return {\n            mainAxis: parseInt(height.replace('px', '')),\n        };\n    };\n});\n\nconst { floatingStyles, middlewareData, placement } = useFloating(targetEl, tooltipEl, {\n    placement: props.placement,\n    middleware: props.middleware?.(arrowEl) ?? [\n        flipFn(props.flip),\n        offsetFn(dynamicOffset.value),\n        arrow({\n            element: arrowEl\n        }),\n    ],\n    whileElementsMounted: autoUpdate\n});\n\nconst tooltipClasses = computed(() => {\n    return {\n        show: isShowing.value\n    };\n});\n\ntype Side = 'bottom' | 'left' | 'top' | 'right';\n\nconst side = computed(() => placement.value.split('-')[0] as Side);\n\nconst arrowPosition = computed(() => {\n    return {\n        top: 'bottom',\n        right: 'left',\n        bottom: 'top',\n        left: 'right'\n    }[side.value] as Side;\n});\n\nconst arrowRotation = computed<Record<Side,string>>(() => ({\n    top: 'rotate(225deg)',\n    right: 'rotate(-45deg)',\n    bottom: 'rotate(45deg)',\n    left: 'rotate(135deg)',\n}));\n\nfunction open() {\n    isShowing.value = true;\n}\n\nfunction close() {\n    isShowing.value = false;\n}\n\nonUnmounted(() => {\n    if(targetEl.value instanceof Element) {\n        targetEl.value.removeAttribute('data-tooltip-id');\n    }\n});\n\ndefineExpose({\n    open,\n    close,\n    tooltipEl,\n    arrowEl,\n    isShowing,\n    hash,\n});\n</script>\n\n<template>\n    <Teleport to=\"body\">\n        <div\n            ref=\"tooltipEl\"\n            class=\"tooltip\"\n            role=\"tooltip\"\n            :data-tooltip-id=\"hash\"\n            :class=\"tooltipClasses\"\n            :style=\"floatingStyles\">\n            <div\n                ref=\"arrowEl\"\n                class=\"tooltip-arrow\"\n                :style=\"{\n                    transform: arrowRotation[arrowPosition],\n                    ...Object.assign({\n                        left:\n                            middlewareData.arrow?.x != null\n                                ? `${middlewareData.arrow.x}px`\n                                : '',\n                        top:\n                            middlewareData.arrow?.y != null\n                                ? `${middlewareData.arrow.y}px`\n                                : ''\n                    }, {\n                        [arrowPosition]: `calc(${-(arrowEl?.offsetWidth ?? 0) / 2}px)`\n                    })\n                }\" />\n            <div\n                ref=\"inner\"\n                class=\"tooltip-inner\">\n                <slot>{{ title }}</slot>\n            </div>\n        </div>\n    </Teleport>\n</template>","import { h, render, type App, type Directive } from 'vue';\nimport Tooltip, { type TooltipProps } from './Tooltip.vue';\n\nconst prefix = 'data-tooltip';\nconst prefixRegExp = new RegExp(`^${prefix}\\-`);\n\nfunction getAttributes(el: Element): Record<string,string> {\n    return Array.from(el.attributes)\n        .map(a => [a.name, a.value])\n        .filter(([key]) => key === 'title' || key.match(prefixRegExp))\n        .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])\n        .reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});\n}\n\nfunction createTooltip(target: Element, props?: TooltipProps) {\n    const container = document.createElement('template');\n    \n    const vnode = h(Tooltip, Object.assign({\n        target\n    }, getAttributes(target), props));\n\n    render(vnode, container);\n\n    const title = target.getAttribute('title');\n\n    if(title) {\n        target.setAttribute(`${prefix}-og-title`, title);\n        target.removeAttribute('title');\n    }\n\n    return () => {\n        if(vnode.component) {\n            vnode.component.exposed?.tooltipEl.value?.remove();\n        }\n    };\n}\n\nfunction destroyTooltip(target: Element) {\n    const tooltips = document.querySelectorAll(\n        `[${prefix}-id=\"${target.getAttribute(`${prefix}-id`)}\"]`\n    );\n\n    for(const tooltip of tooltips) {\n        tooltip.remove();\n    }\n\n    target.removeAttribute(`${prefix}-id`);\n\n    const title = target.getAttribute(`${prefix}-og-title`);\n\n    if(title) {\n        target.setAttribute('title', title);\n    }\n}\n\nfunction shouldCreateTooltip(target: Node): target is Element {\n    if(!(target instanceof Element)) {\n        return false;\n    }\n\n    const attrs = getAttributes(target);\n\n    return !attrs.id && !!attrs.title;\n}\n\nfunction shouldRemoveTooltip(target: Node): target is Element {\n    if(!(target instanceof Element)) {\n        return false;\n    }\n\n    return target.hasAttribute(`${prefix}-id`);\n}\n\nexport const TooltipDirective: Directive<Element, string|TooltipProps> =  {\n    beforeMount(target, binding) {\n        createTooltip(target, typeof binding.value === 'string' ? {\n            title: binding.value\n        }: binding.value);\n    },\n    beforeUnmount(target) {\n        destroyTooltip(target);\n    }\n};\n\nexport function TooltipPlugin(app: App<Element>) {\n    app.mixin({\n        beforeMount() {\n            const observer = new MutationObserver((mutations) => {\n                for(const { addedNodes, removedNodes } of mutations) {\n                    addedNodes.forEach((node) => {\n                        if(shouldCreateTooltip(node)) {\n                            createTooltip(node);\n                        }\n                    });\n\n                    removedNodes.forEach((node) => {\n                        if(shouldRemoveTooltip(node)) {\n                            destroyTooltip(node);\n                        }\n                    });\n                }\n            });\n      \n            observer.observe(document.body, {\n                childList: true,\n                subtree: true\n            });\n        },\n        mounted() {\n            let el = this.$el;\n\n            if(this.$el instanceof Text) {\n                el = this.$el.parentNode;\n            }\n\n            const walker = document.createTreeWalker(\n                el,\n                NodeFilter.SHOW_ALL,\n                (node: Node) => {\n                    if(!(node instanceof Element)) {\n                        return NodeFilter.FILTER_REJECT;\n                    }\n                    \n                    return NodeFilter.FILTER_ACCEPT;\n                }\n            );\n\n            while(walker.nextNode()) {\n                if(shouldCreateTooltip(walker.currentNode)) {\n                    createTooltip(walker.currentNode);\n                }\n            }\n        }\n    });\n\n    app.directive<Element, string|TooltipProps>('tooltip', TooltipDirective);\n}"],"names":["props","__props","tooltipEl","useTemplateRef","arrowEl","isShowing","ref","hash","targetEl","isRef","shallowReadonly","id","computed","watchEffect","open","close","dynamicOffset","height","floatingStyles","middlewareData","placement","useFloating","flipFn","offsetFn","arrow","autoUpdate","tooltipClasses","side","arrowPosition","arrowRotation","onUnmounted","__expose","_createBlock","_Teleport","_createElementVNode","_normalizeClass","_unref","_normalizeStyle","_hoisted_2","_renderSlot","_ctx","prefix","prefixRegExp","getAttributes","el","a","key","value","carry","attr","createTooltip","target","container","vnode","h","Tooltip","render","title","destroyTooltip","tooltips","tooltip","shouldCreateTooltip","attrs","shouldRemoveTooltip","TooltipDirective","binding","TooltipPlugin","app","mutations","addedNodes","removedNodes","node","walker"],"mappings":"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"}

package/index.css

@@ -0,0 +1,71 @@
+@import "tailwindcss";
+
+@theme {
+    --tooltip-position: absolute;
+    --tooltip-hiding-z-index: -1;
+    --tooltip-showing-z-index: 100;
+    --tooltip-display: block;
+    --tooltip-font-size: .875rem;
+    --tooltip-word-wrap: break-word;
+    --tooltip-opacity-hidden: 0;
+    --tooltip-opacity-visible: .9;
+    --tooltip-transition: opacity .15s ease-out;
+    --tooltip-pointer-events: none;
+
+    --tooltip-inner-position: relative;
+    --tooltip-inner-max-width: 200px;
+    --tooltip-inner-padding-y: .25em;
+    --tooltip-inner-padding-x: .5em;
+    --tooltip-inner-background-color: var(--colors-black, black);
+    --tooltip-inner-color: var(--color-white, white);
+    --tooltip-inner-text-align: center;
+    --tooltip-inner-border-radius: .333em;
+    --tooltip-inner-z-index: 2;
+    --tooltip-inner-dark-color: var(--color-white, white);
+    --tooltip-inner-dark-background-color: var(--colors-black, black);
+
+    --tooltip-arrow-position: absolute;
+    --tooltip-arrow-display: block;
+    --tooltip-arrow-width: .5em;
+    --tooltip-arrow-height: .5em;
+    --tooltip-arrow-z-index: 1;
+    --tooltip-color: var(--colors-black, black);
+    --tooltip-arrow-background-color: var(--tooltip-inner-background-color);
+    --tooltip-arrow-dark-background-color: var(--tooltip-inner-dark-background-color);
+}
+
+@utility tooltip {
+    position: var(--tooltip-position);
+    z-index: var(--tooltip-z-hiding-index);
+    display: var(--tooltip-display);
+    font-size: var(--tooltip-font-size);
+    word-wrap: var(--tooltip-word-wrap);
+    opacity: var(--tooltip-opacity-hidden);
+    transition: var(--tooltip-transition);
+    pointer-events: var(--tooltip-pointer-events);
+
+    &.show {
+        opacity: var(--tooltip-opacity-visible);
+        z-index: var(--tooltip-z-showing-index);
+    }
+
+    .tooltip-inner {
+        position: var(--tooltip-inner-position);
+        max-width: var(--tooltip-inner-max-width);
+        padding: var(--tooltip-inner-padding-y) var(--tooltip-inner-padding-x);
+        background-color: var(--tooltip-inner-background-color);
+        color: var(--tooltip-inner-color);
+        text-align: var(--tooltip-inner-text-align);
+        border-radius: var(--tooltip-inner-border-radius);
+        z-index: var(--tooltip-inner-z-index);
+    }
+
+    .tooltip-arrow {
+        position: var(--tooltip-arrow-position);
+        display: var(--tooltip-arrow-display);
+        width: var(--tooltip-arrow-width);
+        height: var(--tooltip-arrow-height);
+        background-color: var(--tooltip-arrow-background-color);
+        z-index: var(--tooltip-arrow-index);
+    }
+}

package/index.ts

@@ -1,7 +1,8 @@
 import Tooltip from './src/Tooltip.vue';
-import TooltipPlugin from './src/TooltipPlugin';
+import { TooltipDirective, TooltipPlugin } from './src/TooltipPlugin';
 
 export {
     Tooltip,
+    TooltipDirective,
     TooltipPlugin
 };

package/package.json

@@ -1,34 +1,24 @@
 {
   "name": "@vue-interface/tooltip",
-  "version": "1.0.0-beta.9",
+  "version": "2.0.1",
   "description": "A Vue tooltip component.",
-  "files": [
-    "index.ts",
-    "dist",
-    "src",
-    "tailwindcss"
-  ],
   "type": "module",
   "main": "./dist/tooltip.umd.js",
   "module": "./dist/tooltip.js",
-  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "source": "./index.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/tooltip.js",
-      "require": "./dist/tooltip.umd.js",
-      "types": "./index.ts"
+      "require": "./dist/tooltip.umd.js"
     },
-    "./tailwindcss": "./tailwindcss/index.cjs",
-    "./tailwindcss/safelist": "./tailwindcss/safelist.cjs"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "./css": "./index.css"
   },
+  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vue-interface/tooltip.git"
+    "url": "git+https://github.com/vue-interface/vue-interface.github.io"
   },
   "keywords": [
     "Tooltip",
@@ -40,27 +30,30 @@
   "author": "Justin Kimbrell",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/vue-interface/tooltip/issues"
+    "url": "https://github.com/vue-interface/vue-interface.github.io"
   },
-  "homepage": "https://github.com/vue-interface/tooltip",
+  "homepage": "https://github.com/vue-interface/vue-interface.github.io",
   "dependencies": {
     "@popperjs/core": "^2.4.4"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "@floating-ui/vue": "^1.1.7",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.0.1",
-    "@vue-interface/eslint-config": "^1.0.0-beta.0",
-    "autoprefixer": "^10.4.2",
-    "change-case": "^4.1.2",
-    "eslint": "^8.27.0",
-    "pascalcase": "^2.0.0",
-    "postcss": "^8.4.6",
-    "tailwindcss": "^3.0.18",
-    "typescript": "^5.0.2",
-    "vite": "^3.0.0",
-    "vite-plugin-dts": "^1.7.1",
-    "vue": "^3.2.37"
+    "@floating-ui/dom": "^1.7.2"
+  },
+  "files": [
+    "dist",
+    "index.css",
+    "index.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   }
-}
+}

package/dist/src/Popper.d.ts

@@ -1,82 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    offset: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
-    popper: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    placement: {
-        type: StringConstructor;
-        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;
-    };
-    placement: {
-        type: StringConstructor;
-        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>;
-    placement: string;
-    title: string;
-    show: boolean;
-    top: boolean;
-    bottom: boolean;
-    left: boolean;
-    right: boolean;
-}>;
-export default _default;

package/dist/style.css

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

package/dist/vite.d.ts

@@ -1,5 +0,0 @@
-declare module '*.vue' {
-    import { DefineComponent } from 'vue';
-    const component: DefineComponent;
-    export default component;
-}

package/src/Popper.ts

@@ -1,118 +0,0 @@
-import { createPopper } from '@popperjs/core';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-
-    props: {
-        offset: {
-            type: Array,
-            default: undefined
-        },
-
-        popper: {
-            type: Object,
-            default: undefined
-        },
-
-        placement: {
-            type: String,
-            default: undefined
-        },
-
-        target: {
-            type: Element,
-            required: true
-        },
-
-        title: {
-            type: String,
-            default: undefined
-        },
-        
-        show: Boolean,
-        
-        top: Boolean,
-
-        bottom: Boolean,
-
-        left: Boolean,
-
-        right: Boolean,
-    },
-
-    data() {
-        return {
-            currentShow: false,
-            popperInstance: null
-        };
-    },
-
-    computed: {
-        computedPlacement() {
-            if(this.placement) {
-                return this.placement;
-            }
-
-            if(this.bottom) {
-                return 'bottom';
-            }
-
-            if(this.left) {
-                return 'left';
-            }
-
-            if(this.right) {
-                return 'right';
-            }
-
-            return 'top';
-        },
-        tooltipClasses() {
-            return {
-                show: this.currentShow,
-                [`bs-tooltip-${this.computedPlacement}`]: true
-            };
-        }
-    },
-
-    mounted() {
-        this.popperInstance = createPopper(this.target, this.$el, Object.assign({
-            placement: this.computedPlacement,
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, 6]
-                    },
-                },
-                {
-                    name: 'arrow',
-                    options: {
-                        element: this.$refs.arrow,
-                    },
-                },
-            ],
-        }, this.popper));
-
-        this.$nextTick(() => {
-            this.currentShow = this.show;
-        });
-    },
-
-    beforeUnmount() {
-        this.popperInstance && this.popperInstance.destroy();
-    },
-
-    methods: {
-
-        open() {
-            this.currentShow = true;
-        },
-
-        close() {
-            this.currentShow = false;
-        }
-
-    }
-
-});

package/src/Tooltip.vue

@@ -1,32 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Popper from './Popper';
-
-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;
-}
-</style>