@farris/ui-vue/components/popover/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(T,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../common/index.umd.js"],i):(T=typeof globalThis<"u"?globalThis:T||self,i(T.popover={},T.Vue,T.common))})(this,function(T,i,K){"use strict";const U={id:{type:String},arrowOffsetX:{type:Number,default:0},class:{type:String,default:""},customStyles:{type:Object,default:null},isSimpleTips:{type:Boolean,default:!1},fitContent:{type:Boolean,default:!1},host:{type:Object},leftBoundary:{type:Object},keepWidthWithReference:{type:Boolean,default:!1},minWidth:{type:Number,default:-1},offsetX:{type:Object,default:i.ref(0)},offsetY:{type:Object,default:i.ref(0)},placement:{type:String,default:"bottom"},reference:{type:Object},rightBoundary:{type:Object},showArrow:{type:Boolean,default:!1},title:{type:String},visible:{type:Boolean,default:!1},zIndex:{type:Number,default:-1},limitContentBySpace:{type:Boolean,default:!1},beforeClose:{type:Function}};function tt(t){const n=t.host?t.host:"body",a=i.computed(()=>n==="body"?0:n?n.getBoundingClientRect().top:0),l=i.computed(()=>n==="body"?window.innerHeight:n?n.getBoundingClientRect().bottom:window.innerHeight),v=i.computed(()=>n==="body"?0:n?n.getBoundingClientRect().left:0),L=i.computed(()=>n==="body"?document.body.getBoundingClientRect().width:n?n.getBoundingClientRect().width-(t.rightBoundary?t.rightBoundary.getBoundingClientRect().width:0):document.body.getBoundingClientRect().width),h=i.computed(()=>n==="body"?window.innerHeight:n?n.getBoundingClientRect().height:window.innerHeight);return{host:n,hostLeft:v,hostTop:a,hostWidth:L,hostHeight:h,hostBottom:l}}function et(t,n,a,l){const v=i.ref(t.offsetX||0),L=i.ref(t.offsetY||0),h=i.ref(-1),m=i.ref(-1),O=i.ref(-1),b=i.ref(-1),C=i.ref(t.placement),P=i.ref(0),p=i.ref(0),B=i.ref(0),x=i.computed(()=>document.documentElement.scrollLeft),r=i.computed(()=>document.documentElement.scrollTop),{hostLeft:g,hostTop:w,hostWidth:j,hostHeight:H,hostBottom:E}=l;i.watch(()=>t.offsetX,e=>{v.value=e});const F=i.computed(()=>{const e={left:`${p.value}px`,top:`${B.value}px`,transform:`translate(${v.value}px, ${L.value}px)`};return t.zIndex!==-1&&(e["z-index"]=t.zIndex),t.fitContent?t.keepWidthWithReference&&a.value&&h.value>=a.value.getBoundingClientRect().width&&(e.width=`${h.value}px`):h.value!==-1&&(e.width=`${h.value}px`),t.minWidth!==-1&&(e.minWidth=`${t.minWidth}px`),t.customStyles&&Object.assign(e,t.customStyles),m.value>0&&(e.maxHeight=m.value+"px"),e}),Y=i.computed(()=>({left:`${P.value}px`,transform:`translateX(${t.arrowOffsetX}px)`}));function f(e){if(e&&t.keepWidthWithReference){const o=e.getBoundingClientRect();h.value=Math.max(t.minWidth,o.width)}}function S(e,o){const s=j.value-e.width-4;return s>0?s:o}function _(e,o){const s=H.value-e.height-12;return s>0?s:o}function M(e,o,s){const c=P.value,d=o.left-g.value+o.width/2+x.value,u=o.top-w.value-(e.height+s.height)+r.value;return{popoverLeft:d,popoverTop:u,arrowLeft:c}}function N(e,o,s){const c=o.top-w.value+(o.height+s.height)+r.value,d=_(e,c);return Math.min(c,d)}function V(e,o){const s=S(o,e),c=e<=s?P.value:e-s;return{popoverLeft:Math.min(e,s),arrowLeft:c,maxHeight:0}}function q(e,o){const s=S(o,e),c=e<=s?P.value:e-s;return{popoverLeft:e,arrowLeft:c,maxHeight:0}}function lt(e,o,s){const c=o.left-g.value+x.value,{arrowLeft:d,popoverLeft:u}=q(c,e),{popoverTop:y}=M(e,o,s);return{popoverLeft:u,popoverTop:y,arrowLeft:d,maxHeight:0}}function st(e,o,s){const c=o.left-g.value+o.width/2-(s.width/2-(e.left-g.value))+x.value,{arrowLeft:d,popoverLeft:u}=V(c,e),y=N(e,o,s);return{popoverLeft:u,popoverTop:y,arrowLeft:d,maxHeight:0}}function at(e,o,s){const c=o.left-g.value+x.value,{arrowLeft:d,popoverLeft:u}=V(c,e),y=N(e,o,s);return{popoverLeft:u,popoverTop:y,arrowLeft:d,maxHeight:0}}function ut(e,o,s){const c=o.left-g.value;let d=0,u=0,y=0,W=0,k="bottom-left";window.innerWidth-c>e.width?d=c+x.value:(d=o.right-e.width+x.value,y=e.width-s.width-20);let I=0;if(t.limitContentBySpace){const $={topHeight:o.top-w.value-s.height-8,bottomHeight:E.value-o.bottom-s.height-8};I=Math.max($.topHeight,$.bottomHeight),e.height>I&&(W=I,a.value.classList.add("popover-limitmax"))}const X=W?Math.floor(W):e.height,R=o.top-w.value+(o.height+s.height);return E.value-R>X?u=R+r.value:(u=o.top-X-s.height+r.value,E.value-R>o.top?(u=R+r.value,X>o.top&&(u=E.value-X)):(u=u<0?0:u,k="top")),a.value.classList.add("popover-"+k,"bs-popover-"+k),{popoverLeft:d<0?5:d,popoverTop:u,arrowLeft:y,maxHeight:W}}function rt(e,o,s){const c=o.left+o.width,d=Math.max(o.top-(e.height/2-o.height/2),w.value);let u=w.value+H.value-e.height;u<0&&(u=d);const y=Math.min(d,u);return{popoverLeft:c,popoverTop:y,arrowLeft:0,maxHeight:0}}function ct(e,o,s){const c=o.left+o.width,d=Math.max(o.top-o.height,w.value);let u=w.value+H.value-e.height;u<0&&(u=d);const y=Math.min(d,u);return{popoverLeft:c,popoverTop:y,arrowLeft:0,maxHeight:0}}const dt=new Map([["top",M],["top-left",lt],["bottom",st],["bottom-left",at],["right",rt],["right-top",ct],["auto",ut]]);function Q(e){var u;t.keepWidthWithReference&&f(e);const o=e.getBoundingClientRect();O.value=o.top,b.value=o.left;const s=n.value?n.value.getBoundingClientRect():{height:4,width:4},c=(u=a.value)==null?void 0:u.getBoundingClientRect();h.value=c.width;const d=dt.get(C.value);if(d){const{arrowLeft:y,popoverLeft:W,popoverTop:k,maxHeight:I}=d(c,o,s);P.value=y,p.value=W,B.value=k,m.value=I||-1}}function pt(e){if(e){const o=e.getBoundingClientRect();(o.left!==b.value||o.top!==O.value)&&Q(e)}}function ft(){C.value=t.placement,P.value=0,p.value=0,B.value=0,h.value=-1}return{arrowStyle:Y,popoverStyle:F,position:C,popoverWidth:h,fitToReference:f,followToReferencePosition:pt,locateToReference:Q,resetPosition:ft}}function ot(t,n,a,l,v,L,h){const m=i.ref(t.visible),O=i.computed(()=>m.value),{fitToReference:b,locateToReference:C,resetPosition:P}=h;let p;async function B(){m.value&&(t.beforeClose&&typeof t.beforeClose=="function"&&!await t.beforeClose()||(m.value=!1,document.body.removeEventListener("click",p),document.body.removeEventListener("mousedown",p),document.body.removeEventListener("wheel",p,!0),document.removeEventListener("scroll",p),P(),n.emit("hidden")))}p=r=>{var j;if(!v.value)return;const g=v.value.contains(r.target);if(r.type==="scroll"||r.type==="wheel"&&g){B();return}if(r.target.closest(".time-picker-panel")||r.target.closest(".fv-grid"))return;const w=(j=r.target)==null?void 0:j.closest(".popover");if(w&&l.value&&w===l.value){r.type!=="scroll"&&r.type!=="wheel"&&r.stopPropagation();return}if(!g&&m.value){const H=v.value.closest(".popover");H&&H.removeEventListener("click",p),B()}};async function x(r){if(l.value&&(t.showArrow===!1||t.showArrow&&a.value)&&r){m.value=!0,v.value=r,L.value&&b(r),await i.nextTick(),C(r),document.body.addEventListener("click",p),document.body.addEventListener("mousedown",p),document.body.addEventListener("wheel",p,!0),document.addEventListener("scroll",p),(top==null?void 0:top.document)!==document&&(top==null||top.document.addEventListener("mousedown",p));const g=r.closest(".popover");g&&g.addEventListener("click",p),n.emit("shown")}}return n.expose({hide:B,popoverRef:l,show:x,shown:O,isShow:m}),{showPopover:m,hidePopverOnClickBodyHandler:p}}function nt(t,n,a,l,v,L){const{popoverWidth:h,fitToReference:m,followToReferencePosition:O}=v;function b(){var C;if(L.value&&((C=L.value.style)==null?void 0:C.display)!=="none"&&a.value){O(a.value);const P=a.value.getBoundingClientRect();l.value&&P.width!==h.value&&m(a.value)}}return{onResize:b}}const z=i.defineComponent({name:"FPopover",props:U,emits:["shown","hidden"],setup(t,n){const a=i.ref(),l=i.ref(),v=i.ref(t.reference),L=i.ref(t.keepWidthWithReference),h=i.computed(()=>!!t.title),m=tt(t),{host:O}=m,b=et(t,a,l,m),{position:C,arrowStyle:P,popoverStyle:p,fitToReference:B,locateToReference:x}=b,{showPopover:r,hidePopverOnClickBodyHandler:g}=ot(t,n,a,l,v,L,b),{onResize:w}=nt(t,n,v,L,b,l),j=i.computed(()=>{let f=C.value;f==="top-left"&&(f="top");const S=`popover in popover-${f}`,_=`bs-popover-${f}`,M={"popover-fitcontent":t.fitContent,fade:!0};M[S]=!0,M[_]=!0;const N=(t.class||"").split(" ");return t.isSimpleTips&&N.unshift("popover-tips"),N.reduce((V,q)=>(V[q]=!0,V),M),M}),H=i.computed(()=>({"popover-content":!0,"popover-body":!0})),E=i.computed(()=>{const f={};return f.opacity=r.value?1:0,f.visibility=r.value?"visible":"hidden",f.zIndex=K.getMaxZIndex()||1060,f}),F=i.computed(()=>t.isSimpleTips?!0:t.showArrow),{delayedValue:Y}=K.useDelayedRef(E,50);return i.onMounted(()=>{var f;L.value&&B(v.value),t.reference&&x(v.value),window.addEventListener("resize",w),(f=l.value)==null||f.focus()}),i.onUnmounted(()=>{document.body.removeEventListener("click",g),window.removeEventListener("resize",w),r.value=!1}),()=>i.createVNode(i.Teleport,{to:O},{default:()=>{var f;return[i.withDirectives(i.createVNode("div",{tabindex:"-1",ref:l,class:j.value,style:{...p.value,...Y.value},onMousedown:S=>{S.stopPropagation()},onClick:S=>{S.stopPropagation()}},[F.value&&i.createVNode("div",{ref:a,class:"popover-arrow arrow",style:P.value},null),h.value&&i.createVNode("h3",{class:"popover-title popover-header"},[t.title]),i.createVNode("div",{class:H.value},[n.slots.default&&((f=n.slots)==null?void 0:f.default())])]),[[i.vShow,r.value]])]}})}}),A="FarrisVue_PopoverInstancesKey";window[A]=window[A]||new WeakMap;function D(t,n,a){t.stopPropagation();const l=n.value;l&&l.value&&!l.value.isShow&&(l.value.show(a),window[A].set(a,l.value))}function Z(t,n,a){t.stopPropagation(),n.value.value.hide(),window[A].delete(a)}function it(t,n,a){t.stopPropagation();const l=n.value;l&&l.value&&(l.value.isShow?Z(t,n,a):D(t,n,a))}function G(t,n,a){n.arg&&n.arg==="toggle"?it(t,n,a):D(t,n,a)}const J={mounted:(t,n,a)=>{n.modifiers.hover?(t.addEventListener("mouseenter",l=>D(l,n,t)),t.addEventListener("mouseleave",l=>Z(l,n,t))):n.modifiers.click?t.addEventListener("click",l=>G(l,n,t)):t.addEventListener("click",l=>G(l,n,t)),t.classList.add("v-popover")},unMounted:(t,n,a)=>{}};z.install=t=>{t.component(z.name,z),t.directive("popover",J)},T.Popover=z,T.PopoverDirective=J,T.default=z,T.popoverProps=U,Object.defineProperties(T,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});