tippy.vue
Version:
Nesting-free Vue components for Tippy.js - a drop-in addition with no structural or css changes required
3 lines (2 loc) • 7.18 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tippy.js"),require("vue")):"function"==typeof define&&define.amd?define(["exports","tippy.js","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TippyVue={},e.tippy,e.Vue)}(this,(function(e,t,i){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(t);const o=Symbol("v-tippy mode"),r=Symbol("v-tippy instance");function l(e){return"string"==typeof e?{content:e}:void 0===e?{}:e}const p={mounted(e,t){void 0===t.value?(e[o]="target",e.dataset.tippyTarget=t.arg||""):(e[o]="inline",e[r]=s.default(e,l(t.value)))},beforeUnmount(e){if("inline"===e[o]){let t=e[r];t&&t.destroy()}else delete e.dataset.tippyTarget},updated(e,t){if("inline"===e[o]){let i=e[r];i&&i.setProps(l(t.value))}}},a={mount:e=>!0,show:e=>!0,shown:e=>!0,hidden:e=>!0,hide:e=>!0,trigger:(e,t)=>!0,untrigger:(e,t)=>!0};function d(e){return e}function u(e,t,i){return{props:{[e]:{type:t||null,required:!1,default:i}},build(t,i){void 0!==t[e].value&&(i[e]=t[e].value)}}}function g(e,t,n,s,o){const r=n;let l=i.toRefs(e);const p=i.computed((()=>{const e={};for(const i of t){let t=i.build;t&&t(l,e)}return e.onShow=h((e=>r.emit("show",e)),o&&o.onShow,e.onShow),e.onShown=h((e=>r.emit("shown",e)),o&&o.onShown,e.onShown),e.onHidden=h((e=>r.emit("hidden",e)),o&&o.onHidden,e.onHidden),e.onHide=h((e=>r.emit("hide",e)),o&&o.onHide,e.onHide),e.onMount=h((e=>r.emit("mount",e)),o&&o.onMount,e.onMount),e.onTrigger=h(((e,t)=>r.emit("trigger",e,t)),o&&o.onTrigger,e.onTrigger),e.onUntrigger=h(((e,t)=>r.emit("untrigger",e,t)),o&&o.onUntrigger,e.onUntrigger),e}));for(const e of t){let t=e.setup;t&&t(l,s)}return i.watch(p,(e=>{s.value&&s.value.setProps(e)}),{deep:!0}),{tippyOptions:p}}function h(...e){return(...t)=>{let i;for(let n of e)n&&(i=n(...t));return i}}const c={props:{extra:{type:Object,required:!1}},build(e,t){Object.assign(t,e.extra.value||{})}},f={props:{enabled:{type:Boolean,required:!1,default:!0}},setup(e,t){i.watch(e.enabled,(e=>{t.value&&(e?t.value.enable():(t.value.hide(),t.value.disable()))}))}},y=u("placement",String,"top"),v=u("interactive",Boolean),m=u("hideOnClick",Boolean),b={props:{onBody:{type:Boolean,required:!1}},build(e,t){!0===e.onBody.value&&(t.appendTo=()=>document.body)}},S={props:{trigger:{type:String,required:!1}},build(e,t){e.trigger.value&&(t.trigger=e.trigger.value,"manual"===e.trigger.value&&void 0===t.hideOnClick&&(t.hideOnClick=!1))}},T=/^([0-9]+)$|^([0-9]+|-)\s*,\s*([0-9]+|-)$/;function w(e){if("string"==typeof e){let t=e.match(T);return t?t[1]?parseFloat(t[1]):["-"===t[2]?null:parseFloat(t[2]),"-"===t[3]?null:parseFloat(t[3])]:void 0}return e}const O={props:{delay:{type:[String,Number,Array],required:!1,validator:e=>void 0!==w(e)}},build(e,t){void 0!==e.delay.value&&(t.delay=w(e.delay.value))}},q={props:{visible:{type:Boolean,required:!1}},setup(e,t){i.watch(e.visible,(i=>{!t.value||e.trigger&&"manual"!==e.trigger.value||(i?t.value.show():t.value.hide())}))}},$={props:{overrides:{type:Array,required:!1}},build(e,t){const i=t;i.overrides=(i.overrides||[]).concat(e.overrides.value||[])}},x=u("moveTransition",String);var C=Object.freeze({__proto__:null,extra:c,enabled:f,placement:y,interactive:v,hideOnClick:m,onBody:b,trigger:S,delay:O,visible:q,overrides:$,moveTransition:x});const I=[q,f,y,b,v,S,m,O,c],P={target:{type:String,required:!1,default:""},deepSearch:{type:Boolean,required:!1,default:!1},singleton:{type:String,required:!1,default:null},eager:{type:Boolean,required:!1,default:!1}};function j(...e){let t={};for(const i of e)Object.assign(t,i.props);return i.defineComponent({props:{...P,...t},emits:{attach:e=>!0,...a},render(){return i.h("div",{"tippy-missing-target":this.tippyTargetMissing?"":void 0},(this.$props.eager||this.singletonInstance||this.shouldRenderContent)&&this.$slots.default?this.$slots.default():[])},setup(t,n){const s=i.ref(),o=i.ref(),r=i.ref(!1),l=i.ref(!1),{tippyOptions:p}=g(t,e,n,s,{onShow(){l.value=!0},onHidden(){l.value=!1}});return{tip:s,tippyOptions:p,singletonInstance:o,tippyTargetMissing:r,shouldRenderContent:l}},methods:{attach(){if(this.tip){const e=this.tip;this.tip=void 0,this.singletonInstance&&(this.singletonInstance.remove(e),this.singletonInstance=void 0),e.destroy()}let e;if("_parent"===this.target)e=this.$el.parentElement;else if(this.deepSearch)e=this.$el.parentElement.querySelector(`[data-tippy-target="${this.target}"]`);else{const t=this.target;e=B(this.$el,{test(e){let i=e;return i&&i.dataset&&i.dataset.tippyTarget===t}})}if(this.tippyTargetMissing=!e,!e)throw new Error(`Unable to find tippy target named '${this.target}'`);if(null!=this.singleton){const e=this.singleton,t=B(this.$el,{test(t){let i=t;return i&&i.dataset&&i.dataset.tippySingleton===e},recurse:!0});this.singletonInstance=t?t._tippySingleton:void 0}else this.singletonInstance=void 0;if(this.tip=s.default(e,this.tippyOptions),!this.tip)throw new Error("Unable to create tippy instance");this.tip.setContent(this.$el),this.singletonInstance&&this.singletonInstance.add(this.tip),!1===this.enabled&&this.tip.disable(),"manual"===this.trigger&&!0===this.visible&&this.tip.show(),this.$emit("attach",this.tip)}},async mounted(){await i.nextTick(),this.attach()},beforeUnmount(){this.tip&&this.tip.destroy()}})}function B(e,t){let i=null,n=e;do{i=E(n,t.test,void 0!==t.selftest&&t.selftest),n=n.parentElement}while(t.recurse&&n&&!i);return i}function E(e,t,i){if(i&&t(e))return e;for(let i=e.previousElementSibling;i;i=i.previousElementSibling)if(t(i))return i;for(let i=e.nextElementSibling;i;i=i.nextElementSibling)if(t(i))return i;return null}const _=[$,x,f,y,b,v,S,m,O,c],U={name:{type:String,required:!1,default:""}};function H(...e){let n={};for(const t of e)Object.assign(n,t.props);return i.defineComponent({props:{...U,...n},emits:{add:e=>!0,remove:e=>!0,...a},render(){return i.h("div",{style:"display: none;","data-tippy-singleton":this.name},[])},setup(t,n){const s=i.ref(),{tippyOptions:o}=g(t,e,n,s);return{tippyOptions:o,instances:i.ref([]),singleton:s}},mounted(){this.$el._tippySingleton=this,this.singleton=t.createSingleton(this.instances,this.tippyOptions),!1===this.enabled&&this.singleton.disable()},beforeUnmount(){this.singleton&&this.singleton.destroy()},methods:{remove(e){const t=this.instances.indexOf(e);-1!==t&&(this.instances.splice(t,1),this.$emit("remove",e),this.singleton&&this.singleton.setInstances(this.instances))},add(e){-1===this.instances.indexOf(e)&&(this.instances.push(e),this.$emit("add",e),this.singleton&&this.singleton.setInstances(this.instances))}}})}function M(e,t){t&&t.tippyDefaults&&s.default.setDefaultProps(t.tippyDefaults),e.directive("tippy",p),e.component("tippy",j(...t&&t.tippyProps||I)),e.component("tippy-singleton",H(...t&&t.tippySingletonProps||_))}const k={install:M},D=j(...I),F=H(..._);e.Tippy=D,e.TippyDirective=p,e.TippyPlugin=k,e.TippySingleton=F,e.createTippyComponent=j,e.createTippySingletonComponent=H,e.defaultTippyProps=I,e.defaultTippySingletonProps=_,e.inferPlugin=d,e.install=M,e.optionPlugin=u,e.props=C,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.umd.min.js.map