vue-devui/overlay/index.umd.js

DevUI components based on Vite and Vue3

(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue,u.dom))})(this,function(u,t,h){"use strict";const k={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function F(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const e=document.documentElement.scrollTop,n=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${e}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{n?document.documentElement.setAttribute("style",n):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=e}}}function j(e,n){let o;const r=l=>{l.preventDefault(),n.emit("click",l),e.closeOnClickOverlay&&n.emit("update:modelValue",!1)},s=()=>{o==null||o()};return t.watch(()=>e.modelValue,l=>{l?e.lockScroll&&(o=F()):s()}),t.onUnmounted(s),{onClick:r}}function g(e,n,o){let r=e;return n&&(r+=`__${n}`),o&&(r+=`--${o}`),r}function C(e,n=!1){const o=n?`.devui-${e}`:`devui-${e}`;return{b:()=>g(o),e:a=>a?g(o,a):"",m:a=>a?g(o,"",a):"",em:(a,m)=>a&&m?g(o,a,m):""}}var I="";const x=t.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:k,emits:["update:modelValue","click"],setup(e,n){const{modelValue:o}=t.toRefs(e),r=C("fixed-overlay"),{onClick:s}=j(e,n);return()=>t.createVNode(t.Transition,{name:r.m("fade")},{default:()=>{var l,f;return[o.value&&t.createVNode("div",t.mergeProps({class:r.b()},n.attrs,{onClick:s}),[(f=(l=n.slots).default)==null?void 0:f.call(l)])]}})}}),V={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0},clickEventBubble:{type:Boolean,default:!1},fitOriginWidth:{type:Boolean,default:!1},autoUpdatePosition:{type:Boolean,default:!1}};function N(e,n,o,r){let{x:s,y:l}=n;if(!e){const{width:f,height:a}=r;s&&o.includes("start")&&(s=12),s&&o.includes("end")&&(s=Math.round(f-24)),l&&o.includes("start")&&(l=10),l&&o.includes("end")&&(l=a-14)}return{x:s,y:l}}function z(e,n){const{fitOriginWidth:o,position:r,showArrow:s}=t.toRefs(e),l=t.ref(),f=t.ref(),a=t.ref(0);let m,w;const A=t.computed(()=>o.value?{width:a.value+"px"}:{}),O=(d,i,c,v)=>{const{x:b,y:p}=N(e.isArrowCenter,c,i,v.getBoundingClientRect()),B={top:"bottom",right:"left",bottom:"top",left:"right"}[i.split("-")[0]];Object.assign(d.style,{left:b?`${b}px`:"",top:p?`${p}px`:"",right:"",bottom:"",[B]:"-4px"})},y=async()=>{const d=e.origin,i=t.unref(l.value),c=t.unref(f.value),[v,...b]=r.value,p=[h.offset(e.offset)];p.push(b.length?h.flip({fallbackPlacements:b}):h.flip()),s.value&&p.push(h.arrow({element:f.value}));const{x:B,y:W,placement:T,middlewareData:_}=await h.computePosition(d,i,{strategy:"fixed",placement:v,middleware:p});let q=B,H=W;n("positionChange",T),Object.assign(i.style,{top:`${H}px`,left:`${q}px`}),e.showArrow&&O(c,T,_.arrow,i)},P=d=>{var c,v;const i=d.target;i!=null&&i.contains((v=(c=e.origin)==null?void 0:c.$el)!=null?v:e.origin)&&y()},M=d=>{a.value=d.getBoundingClientRect().width,y()},D=()=>{var d,i;if(o.value&&typeof window!="undefined"){const c=(i=(d=e.origin)==null?void 0:d.$el)!=null?i:e.origin;c&&(m=new window.ResizeObserver(()=>M(c)),m.observe(c))}},$=()=>{var i,c;const d=(c=(i=e.origin)==null?void 0:i.$el)!=null?c:e.origin;d&&(m==null||m.unobserve(d))},U=()=>{e.autoUpdatePosition&&typeof window!="undefined"&&l.value&&(w=new window.ResizeObserver(y),w.observe(l.value))},R=()=>{l.value&&(w==null||w.unobserve(l.value))};return t.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(t.nextTick(y),window.addEventListener("scroll",P,!0),window.addEventListener("resize",y),D(),t.nextTick(U)):(window.removeEventListener("scroll",P,!0),window.removeEventListener("resize",y),$(),R())}),t.onUnmounted(()=>{window.removeEventListener("scroll",P,!0),window.removeEventListener("resize",y),$(),R()}),{arrowRef:f,overlayRef:l,styles:A,updatePosition:y}}var Y="";const E=t.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:V,emits:["update:modelValue","positionChange"],setup(e,{slots:n,attrs:o,emit:r,expose:s}){const l=C("flexible-overlay"),{clickEventBubble:f}=t.toRefs(e),{arrowRef:a,overlayRef:m,styles:w,updatePosition:A}=z(e,r);return s({updatePosition:A}),()=>{var O;return e.modelValue&&t.createVNode("div",t.mergeProps({ref:m,class:l.b(),style:w.value},o,{onClick:t.withModifiers(()=>({}),[f.value?"":"stop"]),onPointerup:t.withModifiers(()=>({}),["stop"])}),[(O=n.default)==null?void 0:O.call(n),e.showArrow&&t.createVNode("div",{ref:a,class:l.e("arrow")},null)])}}}),L=typeof window!="undefined";var S={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.component(x.name,x),e.component(E.name,E),L&&!document.getElementById("d-overlay-anchor")){const n=document.createElement("div");n.setAttribute("id","d-overlay-anchor"),n.style.position="fixed",n.style.left="0",n.style.top="0",n.style.zIndex="1000",document.body.appendChild(n)}}};u.FixedOverlay=x,u.FlexibleOverlay=E,u.default=S,u.fixedOverlayProps=k,u.flexibleOverlayProps=V,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});