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

Farris Vue, a Farris Design based Vue3 component library.

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