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

Farris Vue, a Farris Design based Vue3 component library.

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