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

Farris Vue, a Farris Design based Vue3 component library.

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