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