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