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