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