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 C={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function R(){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 F(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=R()):s()}),t.onUnmounted(s),{onClick:r}}function p(e,n,o){let r=e;return n&&(r+=`__${n}`),o&&(r+=`--${o}`),r}function P(e,n=!1){const o=n?`.devui-${e}`:`devui-${e}`;return{b:()=>p(o),e:a=>a?p(o,a):"",m:a=>a?p(o,"",a):"",em:(a,m)=>a&&m?p(o,a,m):""}}var q="";const b=t.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:C,emits:["update:modelValue","click"],setup(e,n){const{modelValue:o}=t.toRefs(e),r=P("fixed-overlay"),{onClick:s}=F(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)])]}})}}),k={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}};function T(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 j(e,n){const{fitOriginWidth:o,position:r,showArrow:s}=t.toRefs(e),l=t.ref(),f=t.ref(),a=t.ref(0);let m;const x=t.computed(()=>o.value?{width:a.value+"px"}:{}),E=(d,i,c,w)=>{const{x:g,y:v}=T(e.isArrowCenter,c,i,w.getBoundingClientRect()),B={top:"bottom",right:"left",bottom:"top",left:"right"}[i.split("-")[0]];Object.assign(d.style,{left:g?`${g}px`:"",top:v?`${v}px`:"",right:"",bottom:"",[B]:"-4px"})},y=async()=>{const d=e.origin,i=t.unref(l.value),c=t.unref(f.value),[w,...g]=r.value,v=[h.offset(e.offset)];v.push(g.length?h.flip({fallbackPlacements:g}):h.flip()),s.value&&v.push(h.arrow({element:f.value}));const{x:B,y:M,placement:$,middlewareData:D}=await h.computePosition(d,i,{strategy:"fixed",placement:w,middleware:v});let W=B,_=M;n("positionChange",$),Object.assign(i.style,{top:`${_}px`,left:`${W}px`}),e.showArrow&&E(c,$,D.arrow,i)},A=d=>{var c,w;const i=d.target;i!=null&&i.contains((w=(c=e.origin)==null?void 0:c.$el)!=null?w:e.origin)&&y()},S=d=>{a.value=d.getBoundingClientRect().width,y()},z=()=>{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(()=>S(c)),m.observe(c))}},V=()=>{var i,c;const d=(c=(i=e.origin)==null?void 0:i.$el)!=null?c:e.origin;d&&(m==null||m.unobserve(d))};return t.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(t.nextTick(y),window.addEventListener("scroll",A,!0),window.addEventListener("resize",y),z()):(window.removeEventListener("scroll",A,!0),window.removeEventListener("resize",y),V())}),t.onUnmounted(()=>{window.removeEventListener("scroll",A,!0),window.removeEventListener("resize",y),V()}),{arrowRef:f,overlayRef:l,styles:x,updatePosition:y}}var H="";const O=t.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:k,emits:["update:modelValue","positionChange"],setup(e,{slots:n,attrs:o,emit:r,expose:s}){const l=P("flexible-overlay"),{clickEventBubble:f}=t.toRefs(e),{arrowRef:a,overlayRef:m,styles:x,updatePosition:E}=j(e,r);return s({updatePosition:E}),()=>{var y;return e.modelValue&&t.createVNode("div",t.mergeProps({ref:m,class:l.b(),style:x.value},o,{onClick:t.withModifiers(()=>({}),[f.value?"":"stop"]),onPointerup:t.withModifiers(()=>({}),["stop"])}),[(y=n.default)==null?void 0:y.call(n),e.showArrow&&t.createVNode("div",{ref:a,class:l.e("arrow")},null)])}}}),N=typeof window!="undefined";var L={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.component(b.name,b),e.component(O.name,O),N&&!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=b,u.FlexibleOverlay=O,u.default=L,u.fixedOverlayProps=C,u.flexibleOverlayProps=k,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});