@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 10.1 kB
JavaScript
(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.tooltip={},w.Vue))})(this,function(w,e){"use strict";const M={content:{type:Object,default:""},contentTemplate:{type:Object},width:{type:String},customClass:{type:String},placement:{type:String,default:"top"},trigger:{type:String,default:"hover"},reference:{type:Object,require:!0},horizontalRelative:{type:String,default:""},verticalRelative:{type:String,default:""},clickToHide:{type:Boolean,default:!0},enable:{type:Boolean,default:!0},overflowShown:{type:Boolean,default:!1}};function U(t,n){const r=new Map([["top","bottom"],["bottom","top"],["left","right"],["right","left"]]),s=new Map([["top","height"],["bottom","height"],["left","width"],["right","width"]]);function p(o,c){const f=r.get(c)||c;return o.replace(c,f)}function a(o,c,f,i,m){let v=o;const u=o.split("-")[0],d=s.get(u),g=i[d]+m[d];return Math.abs(f[u]-c[u])<g&&(v=p(o,u)),v}return{adjustPlacement:a}}function X(t,n){function s(a,o,c){let f=!1,i=c;return(o==="left"||o==="top")&&c<=a[o]&&(f=!0,i=a[o]+6),(o==="right"||o==="bottom")&&c>=a[o]&&(f=!0,i=a[o]-6),{overBound:f,fixedValue:i}}function p(a,o,c,f,i,m,v){let u=o.tooltip.left,d=o.tooltip.top,g=o.arrow.left,y=o.arrow.top;const E=a.split("-")[0];if(["top","bottom"].includes(E)){const b=s(c,"left",o.tooltip.left),L=s(c,"right",o.tooltip.left+i.width);u=b.overBound?b.fixedValue:L.overBound?L.fixedValue-i.width:o.tooltip.left,g=b.overBound?i.width-(u+i.width-f.right)-v.width:L.overBound?f.left-u:o.arrow.left}const k=s(c,"top",o.tooltip.top),x=s(c,"bottom",o.tooltip.top+i.height);return d=k.overBound?k.fixedValue:x.overBound?x.fixedValue-i.height:o.tooltip.top,y=k.overBound?o.arrow.top:x.overBound?i.height-(d+i.height-f.top):o.arrow.top,{arrow:{left:g,top:y},tooltip:{left:u,top:d}}}return{adjustPosition:p}}function Y(t,n){function s(o,c,f,i,m){const v=o.split("-"),u=v[0],d=v[1]||"middle",g=["top","bottom"].includes(u)?d==="middle"?(i.width-m.width)/2:d==="right"?i.width-m.width-6:6:0,y=["left","right"].includes(u)?d==="middle"?(i.height-m.height)/2:d==="bottom"?i.height-m.height-6:6:0,P=u==="left"?i.width+m.width:0,E=u==="top"?i.height+m.height:0;return{left:P+g,top:E+y,right:0}}function p(o,c,f,i,m){const v=o.split("-"),u=v[0],d=v[1]||"middle",g=(f.width-i.width)/2,y=(f.height-i.height)/2,P=u==="right"?c.right:c.left,E=u==="bottom"?c.bottom:c.top,k=u==="top"?0-y-i.height-m.height:u==="bottom"?0-y+m.height:0,x=["left","right"].includes(u)?d==="middle"?(c.height-i.height)/2:d==="bottom"?c.height-i.height:0:0,j=u==="left"?0-g-i.width-m.width:u==="right"?0-g+m.width:0,N=["top","bottom"].includes(u)?d==="middle"?(c.width-i.width)/2:d==="right"?c.width-i.width:0:0,b=E+k+x;return{left:P+j+N,top:b}}function a(o,c,f,i,m){const v=p(o,c,f,i,m);return{arrow:s(o,c,f,i,m),tooltip:v}}return{calculate:a}}function B(t,n){const r=e.ref(t.horizontalRelative),s=e.ref(t.verticalRelative);function p(o){return typeof o=="string"?document.querySelector(o):o}function a(){let o=document.documentElement.clientWidth,c=document.documentElement.clientHeight,f=0,i=0,m=0,v=0,u=c-f,d=o-i;return r.value&&({left:i,right:o,x:m,width:d}=p(r.value).getBoundingClientRect()),s.value&&({bottom:c,top:f,y:v,height:u}=p(s.value).getBoundingClientRect()),{top:f,left:i,right:o,bottom:c,height:u,width:d,x:m,y:v}}return{getRelativeElementBound:a}}function K(t,n,r,s,p,a){const o=e.ref(t.placement),{getRelativeElementBound:c}=B(t),{calculate:f}=Y(),{adjustPlacement:i}=U(),{adjustPosition:m}=X(),v=e.computed(()=>o.value.split("-")[0]),u=e.computed(()=>{const d=c();o.value=i(o.value,d,r,s,a);const g=f(o.value,r,s,p,a);return m(o.value,g,d,r,s,p,a)});return{tooltipPlacement:v,tooltipPosition:u}}function Q(t){const n=e.ref(),r=e.ref(!1),s=e.computed(()=>({display:r.value?"block":"none"})),p=e.computed(()=>{var o;const a=(o=t.customClass)==null?void 0:o.split(" ");return a==null?void 0:a.reduce((c,f)=>(c[f]=!0,c),{})});return{showTooltip:r,tooltipDisplayStyle:s,tooltipCustomClass:p,tooltipContainerRef:n}}const V=e.defineComponent({name:"FTooltip",props:M,emits:["click"],setup(t,n){const r=e.ref(),s=e.ref(),p=e.ref(),a=e.ref(),o=e.ref(),c=e.ref(t.placement.split("-")[0]),f=Q(t),{showTooltip:i,tooltipCustomClass:m}=f,v=e.ref(!1),u=e.computed(()=>{let l={"fv-tooltip":!0,tooltip:!0,show:!0};const h=`bs-tooltip-${c.value}`;return l[h]=!0,n.slots.default&&(l={...l,...m.value}),l}),d=l=>{l.target!==o.value&&(l.stopPropagation(),document.body.removeEventListener("click",d),i.value=!1)},g=e.computed(()=>t.content&&!t.contentTemplate),y=e.computed(()=>t.content),P=e.ref("0px"),E=e.ref("0px"),k=e.computed(()=>{const l={left:P.value,top:E.value};return n.slots.default,l}),x=e.ref(""),j=e.ref(""),N=e.computed(()=>({left:x.value,top:j.value})),b=e.computed(()=>({"tooltip-inner":!0,"tooltip-inner-lg":a.value&&a.value&&a.value.scrollHeight>a.value.clientHeight})),L=e.computed(()=>{const l={};return t.width&&Object.assign(l,{width:t.width,"max-width":"none"}),l}),$=l=>{s.value&&p.value&&a.value&&(b.value,e.nextTick(()=>{const{tooltipPlacement:h,tooltipPosition:T}=K(t,n,l.getBoundingClientRect(),p.value.getBoundingClientRect(),a.value.getBoundingClientRect(),s.value.getBoundingClientRect());P.value=`${T.value.tooltip.left+document.documentElement.scrollLeft}px`,E.value=`${T.value.tooltip.top+document.documentElement.scrollTop}px`,x.value=`${T.value.arrow.left}px`,j.value=`${T.value.arrow.top}px`,c.value=h.value}))},O=l=>{var T;const h=(T=r.value)==null?void 0:T.nextElementSibling;h&&(t.overflowShown&&h.scrollWidth===h.clientWidth||(l.stopPropagation(),i.value=!0,e.nextTick(()=>{$(h)}),t.trigger==="click"&&document.body.addEventListener("click",d)))},q=(l,h=!0)=>{l.removeEventListener("mouseenter",O),l.removeEventListener("mouseleave",d),h&&(l.addEventListener("mouseenter",O),l.addEventListener("mouseleave",d))};function _(l,h=!0){l.removeEventListener("mouseenter",O),l.removeEventListener("mouseleave",d),h&&l.addEventListener("click",O)}function H(){var h;if(!t.enable)return;const l=(h=r.value)==null?void 0:h.nextElementSibling;l&&(t.trigger==="click"&&_(l),t.trigger==="hover"&&q(l))}function ot(){var h;const l=(h=r.value)==null?void 0:h.nextElementSibling;l&&(t.trigger==="click"&&_(l,!1),t.trigger==="hover"&&q(l,!1))}e.watch(()=>t.enable,l=>{l?H():ot()});function nt(){r.value&&r.value.nodeName==="#text"&&!r.value.nextElementSibling&&(v.value=!0,e.nextTick(()=>{H()}))}e.onMounted(()=>{nt(),H(),!g.value&&t.contentTemplate&&o.value&&o.value.appendChild(t.contentTemplate),t.reference&&$(t.reference)});function G(l){n.emit("click",l)}const lt=()=>e.createVNode("div",{ref:p,class:u.value,style:k.value,onClick:G},[e.createVNode("div",{ref:s,class:"arrow",style:N.value},null),e.createVNode("div",{ref:a,class:b.value,style:L.value},[e.createVNode("div",{class:"tooltip-tmpl"},[g.value&&e.createVNode("div",{class:"tooltip-text",innerHTML:y.value},null),!g.value&&e.createVNode("div",{class:"tooltip-text",ref:o},null)])])]);function it(){const l={class:"tooltip-text",ref:o};if(n.slots.contentTemplate)return e.createVNode("div",l,[n.slots.contentTemplate()]);if(t.content){let h=t.content;return typeof t.content=="function"&&(h=t.content()),e.createVNode("div",e.mergeProps(l,{innerHTML:h}),null)}return e.createVNode("div",l,null)}const rt=()=>e.createVNode("div",{ref:p,class:u.value,style:k.value,onClick:G},[e.createVNode("div",{ref:s,class:"arrow",style:N.value},null),e.createVNode("div",{ref:a,class:b.value,style:L.value},[e.createVNode("div",{class:"tooltip-tmpl"},[it()])])]);function ct(){var l,h,T,J;return v.value?e.createVNode("span",null,[(h=(l=n.slots).default)==null?void 0:h.call(l)]):(J=(T=n.slots).default)==null?void 0:J.call(T)}return()=>n.slots.default?e.createVNode(e.Fragment,{ref:r},[ct(),e.createVNode(e.Teleport,{to:"body"},{default:()=>[i.value&&rt()]})]):lt()}});function Z(t,n){const r=document.createElement("div");t.customClass&&(r.className=t.customClass);const s=e.createApp({setup(){function p(){t.clickToHide&&s.unmount()}return e.onUnmounted(()=>{document.body.removeChild(r)}),()=>e.createVNode(V,e.mergeProps(t,{onClick:p}),null)}});return document.body.appendChild(r),s.mount(r),s}function R(t){const n=e.reactive({...t});return Z(n)}const S=new WeakMap;function W(t){if(!t)return;const n=S.get(t);n&&(n.unmount(),S.delete(t))}function tt(t,n){let r;t.addEventListener("mouseenter",s=>{if(n.value.enable!==!1&&!(n.value.overflowShown&&t.scrollWidth===t.clientWidth)&&(s.stopPropagation(),!r)){const p=t.dataset.tooltip&&JSON.parse(t.dataset.tooltip)||{},a=Object.assign({reference:t,contentTemplate:n.value.contentTemplate},p);r=R(a),S.set(t,r)}}),t.addEventListener("mouseleave",s=>{s.stopPropagation(),r&&(S.delete(t),r.unmount(),r=null)})}let z=null;const C="_farris-tooltip-directive_";function A(){document.querySelectorAll(`.${C}`).forEach(t=>{W(t)})}function et(t,n){t.addEventListener("click",r=>{if(n.value.enable===!1||n.value.overflowShown===!0&&t.scrollWidth===t.clientWidth)return;r.stopPropagation();let s=S.get(t);if(s)s.unmount(),S.delete(t);else{A();const p=t.dataset.tooltip&&JSON.parse(t.dataset.tooltip)||{},a=Object.assign({trigger:"hover",reference:t},p);s=R(a),S.set(t,s)}})}function D(t,n){if(!n.value)t.dataset.tooltip="";else{const{contentTemplate:r,...s}=n.value;t.dataset.tooltip=JSON.stringify(s)}}function F(t,n){n.value.trigger==="click"||W(t)}const I={mounted:(t,n,r)=>{switch(t.classList.add(C),D(t,n),n.value.trigger){case"click":{et(t,n);break}default:tt(t,n)}},beforeUnmount:(t,n,r)=>{F(t,n)},unmounted:(t,n,r)=>{F(t,n)},beforeUpdate:(t,n)=>{D(t,n)}};window.clearAllTooltips=A,document.body.removeEventListener("click",z,!0),document.body.addEventListener("click",z=t=>{const n=t.target,r=n.closest(`.${C}`);r&&S.has(r)||n.closest(".tooltip")||A()},!0),V.install=t=>{t.component(V.name,V),t.directive("tooltip",I)},w.FTooltip=V,w.FTooltipDirective=I,w.default=V,w.tooltipProps=M,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});