vue-devui/overlay/index.umd.js

DevUI components based on Vite and Vue3

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