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

Farris Vue, a Farris Design based Vue3 component library.

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