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