vue-devui/modal/index.umd.js

DevUI components based on Vite and Vue3

var ve=Object.defineProperty,ge=Object.defineProperties;var we=Object.getOwnPropertyDescriptors;var D=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var T=(c,e,u)=>e in c?ve(c,e,{enumerable:!0,configurable:!0,writable:!0,value:u}):c[e]=u,$=(c,e)=>{for(var u in e||(e={}))_.call(e,u)&&T(c,u,e[u]);if(D)for(var u of D(e))q.call(e,u)&&T(c,u,e[u]);return c},I=(c,e)=>ge(c,we(e));var W=(c,e)=>{var u={};for(var b in c)_.call(c,b)&&e.indexOf(b)<0&&(u[b]=c[b]);if(c!=null&&D)for(var b of D(c))e.indexOf(b)<0&&q.call(c,b)&&(u[b]=c[b]);return u};var G=(c,e,u)=>(T(c,typeof e!="symbol"?e+"":e,u),u);(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.index={},c.Vue,c.dom))})(this,function(c,e,u){"use strict";const b={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},lockScroll:{type:Boolean,default:!0},draggable:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function},escapable:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},showAnimation:{type:Boolean,default:!0},showOverlay:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!0},type:{type:String,default:""},keepLast:{type:Boolean,default:!1}},K={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},J={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function M(t,o,n){let l=t;return o&&(l+=`__${o}`),n&&(l+=`--${n}`),l}function V(t,o=!1){const n=o?`.devui-${t}`:`devui-${t}`;return{b:()=>M(n),e:r=>r?M(n,r):"",m:r=>r?M(n,"",r):"",em:(r,d)=>r&&d?M(n,r,d):""}}var Ve="",Q=e.defineComponent({name:"DSvgIcon",props:J,setup(t){const{name:o,color:n,size:l}=e.toRefs(t),a=V("svg-icon"),i=e.computed(()=>`#icon-${o.value}`),s=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),r={width:s.value,height:s.value};return()=>e.createVNode("svg",{class:a.b(),style:r},[e.createVNode("use",{"xlink:href":i.value,fill:n.value},null)])}});function Z(t){return/^((http|https):)?\/\//.test(t)}function ee(t,o){const{component:n,name:l,size:a,color:i,classPrefix:s,rotate:r}=e.toRefs(t),d=V("icon"),f=e.computed(()=>typeof a.value=="number"?`${a.value}px`:a.value),m=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(Q),p=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],class:[(r==null?void 0:r.value)==="infinite"&&d.m("spin")],style:{width:f.value||"",transform:`rotate(${r==null?void 0:r.value}deg)`,verticalAlign:"middle"}},o.attrs),null),h=()=>e.createVNode(m,e.mergeProps({name:l.value,color:i.value,size:f.value,class:[(r==null?void 0:r.value)==="infinite"&&d.m("spin")],style:{transform:`rotate(${r==null?void 0:r.value}deg)`}},o.attrs),null),v=()=>{const w=/^icon-/.test(l.value)?l.value:`${s.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[s.value,w,(r==null?void 0:r.value)==="infinite"&&d.m("spin")],style:{fontSize:f.value,color:i.value,transform:`rotate(${r==null?void 0:r.value}deg)`}},o.attrs),null)};return{iconDom:()=>n.value?h():Z(l.value)?p():v()}}var R=e.defineComponent({name:"DIcon",props:K,emits:["click"],setup(t,o){const{disabled:n,operable:l}=e.toRefs(t),{iconDom:a}=ee(t,o),i=V("icon"),s=e.computed(()=>({[i.e("container")]:!0,[i.m("disabled")]:n.value,[i.m("operable")]:l.value,[i.m("no-slots")]:!Object.keys(o.slots).length})),r=d=>{n.value||o.emit("click",d)};return()=>{var d,f,m,p;return e.createVNode("div",{class:s.value,onClick:r},[(f=(d=o.slots).prefix)==null?void 0:f.call(d),a(),(p=(m=o.slots).suffix)==null?void 0:p.call(m)])}}}),Ee="";e.defineComponent({name:"DIconGroup",setup(t,o){const n=V("icon-group");return()=>{var l,a;return e.createVNode("div",{class:n.b()},[(a=(l=o.slots).default)==null?void 0:a.call(l)])}}});const te={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function z(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop,o=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${t}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{o?document.documentElement.setAttribute("style",o):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=t}}}function oe(t,o){let n;const l=i=>{i.preventDefault(),o.emit("click",i),t.closeOnClickOverlay&&o.emit("update:modelValue",!1)},a=()=>{n==null||n()};return e.watch(()=>t.modelValue,i=>{i?t.lockScroll&&(n=z()):a()}),e.onUnmounted(a),{onClick:l}}var Ce="";const ne=e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:te,emits:["update:modelValue","click"],setup(t,o){const{modelValue:n}=e.toRefs(t),l=V("fixed-overlay"),{onClick:a}=oe(t,o);return()=>e.createVNode(e.Transition,{name:l.m("fade")},{default:()=>{var i,s;return[n.value&&e.createVNode("div",e.mergeProps({class:l.b()},o.attrs,{onClick:a}),[(s=(i=o.slots).default)==null?void 0:s.call(i)])]}})}}),le={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 ae(t){const o=/(auto|scroll|hidden)/;for(let n=t;n=n.parentElement;n.parentElement!==document.body){const l=window.getComputedStyle(n);if(o.test(l.overflow+l.overflowX+l.overflowY))return n}return window}function re(t,o,n,l){let{x:a,y:i}=o;if(!t){const{width:s,height:r}=l;a&&n.includes("start")&&(a=12),a&&n.includes("end")&&(a=Math.round(s-24)),i&&n.includes("start")&&(i=10),i&&n.includes("end")&&(i=r-14)}return{x:a,y:i}}function ie(t,o){const n=e.ref(),l=e.ref();let a=null;const i=(r,d,f,m)=>{const{x:p,y:h}=re(t.isArrowCenter,f,d,m.getBoundingClientRect()),v={top:"bottom",right:"left",bottom:"top",left:"right"}[d.split("-")[0]];Object.assign(r.style,{left:p?`${p}px`:"",top:h?`${h}px`:"",right:"",bottom:"",[v]:"-4px"})},s=async()=>{const r=t.origin,d=e.unref(n.value),f=e.unref(l.value),m=[u.offset(t.offset),u.autoPlacement({alignment:t.align,allowedPlacements:t.position})];if(t.showArrow&&m.push(u.arrow({element:f})),t.shiftOffset!==void 0&&m.push(u.shift()),!d)return;const{x:p,y:h,placement:v,middlewareData:g}=await u.computePosition(r,d,{strategy:"fixed",middleware:m});let w=p,E=h;if(t.shiftOffset!==void 0){const{x:N,y:x}=g.shift;N<0&&(w-=t.shiftOffset),N>0&&(w+=t.shiftOffset),x<0&&(E-=t.shiftOffset),x>0&&(E+=t.shiftOffset)}o("positionChange",v),Object.assign(d.style,{top:`${E}px`,left:`${w}px`}),t.showArrow&&i(f,v,g.arrow,d)};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(a=ae(t.origin),e.nextTick(s),a==null||a.addEventListener("scroll",s),a!==window&&window.addEventListener("scroll",s),window.addEventListener("resize",s)):(a==null||a.removeEventListener("scroll",s),a!==window&&window.removeEventListener("scroll",s),window.removeEventListener("resize",s))}),e.onUnmounted(()=>{a==null||a.removeEventListener("scroll",s),a!==window&&window.removeEventListener("scroll",s),window.removeEventListener("resize",s)}),{arrowRef:l,overlayRef:n,updatePosition:s}}var Ne="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:le,emits:["update:modelValue","positionChange"],setup(t,{slots:o,attrs:n,emit:l,expose:a}){const i=V("flexible-overlay"),{clickEventBubble:s}=e.toRefs(t),{arrowRef:r,overlayRef:d,updatePosition:f}=ie(t,l);return a({updatePosition:f}),()=>{var m;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:d,class:i.b()},n,{onClick:e.withModifiers(()=>({}),[s.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(m=o.default)==null?void 0:m.call(o),t.showArrow&&e.createVNode("div",{ref:r,class:i.e("arrow")},null)])}}});const se=typeof window!="undefined";function ce(t,o){function n(){o("update:modelValue",!1),o("close")}function l(){t.beforeClose?t.beforeClose(n):n()}function a(i){i.code==="Escape"&&l()}return e.onMounted(()=>{t.escapable&&window.addEventListener("keydown",a)}),e.onUnmounted(()=>{t.escapable&&window.addEventListener("keydown",a)}),{execClose:l}}function de(t){let o;const n=()=>{o==null||o()};e.watch(()=>t.modelValue,l=>{l?t.lockScroll&&(o=z()):n()},{immediate:!0}),e.onUnmounted(n)}function F(t,o="px"){return t?typeof t=="string"?t:typeof t=="number"?`${t}${o}`:"":""}const ue=(t,o,n)=>{const l=e.ref("translate(-50%, -50%)");let a={offsetX:0,offsetY:0};const i=f=>{const m=f.clientX,p=f.clientY,{offsetX:h,offsetY:v}=a,g=t.value.getBoundingClientRect(),w=g.left,E=g.top,N=g.width,x=g.height,C=document.documentElement.clientWidth,y=document.documentElement.clientHeight,A=-w+h,pe=-E+v,ye=C-w-N+h,he=y-E-x+v,X=U=>{const H=Math.min(Math.max(h+U.clientX-m,A),ye),j=Math.min(Math.max(v+U.clientY-p,pe),he);a={offsetX:H,offsetY:j},l.value=`translate(calc(-50% + ${F(H)}), calc(-50% + ${F(j)}))`},Y=()=>{document.removeEventListener("mousemove",X),document.removeEventListener("mouseup",Y)};document.addEventListener("mousemove",X),document.addEventListener("mouseup",Y)},s=()=>{o.value&&t.value&&o.value.addEventListener("mousedown",i)},r=()=>{o.value&&t.value&&o.value.removeEventListener("mousedown",i)};return e.onMounted(()=>{e.watchEffect(()=>{n.value?s():r()})}),e.onBeforeUnmount(()=>{r()}),{clearPosition:()=>{a={offsetX:0,offsetY:0},l.value="translate(-50%, -50%)"},modalPosition:l}};var O=e.defineComponent({name:"DModalHeader",setup(t,{slots:o}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("header")},[(l=o.default)==null?void 0:l.call(o)])}}}),B=e.defineComponent({name:"DModalBody",setup(t,{slots:o}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("body")},[(l=o.default)==null?void 0:l.call(o)])}}}),xe="",k=e.defineComponent({name:"DModal",inheritAttrs:!1,props:b,emits:["update:modelValue","close"],setup(t,{slots:o,attrs:n,emit:l}){const a=V("modal"),{modelValue:i,title:s,showClose:r,showOverlay:d,appendToBody:f,closeOnClickOverlay:m,keepLast:p}=e.toRefs(t),{execClose:h}=ce(t,l);de(t);const v=e.ref(),g=e.ref(),w=e.computed(()=>t.draggable),{clearPosition:E,modalPosition:N}=ue(v,g,w);e.watch(i,C=>{C&&!p.value&&(E(),e.nextTick(()=>{const y=document==null?void 0:document.querySelector("[autofocus]");y&&y.focus()}))});const x=()=>{const y=[{type:"success",text:"\u6210\u529F",icon:"right-o",color:"var(--devui-success)"},{type:"failed",text:"\u9519\u8BEF",icon:"error-o",color:"var(--devui-danger)"},{type:"warning",text:"\u8B66\u544A",icon:"warning-o",color:"var(--devui-warning)"},{type:"info",text:"\u4FE1\u606F",icon:"info-o",color:"var(--devui-info)"}].find(A=>A.type===t.type);return e.createVNode("div",{style:{cursor:t.draggable?"move":"default"},ref:g},[e.createVNode(O,null,{default:()=>[e.createVNode("div",{class:"type-content"},[e.createVNode("div",{class:"type-content-icon"},[e.createVNode(R,{name:y==null?void 0:y.icon,color:y==null?void 0:y.color},null)]),e.createVNode("div",{class:"type-content-text"},[y==null?void 0:y.text])])]})])};return()=>e.createVNode(e.Teleport,{to:"body",disabled:!f.value},{default:()=>[d.value&&e.createVNode(ne,e.mergeProps({modelValue:i.value},{"onUpdate:modelValue":h},{class:a.e("overlay"),"lock-scroll":!1,"close-on-click-overlay":m.value,style:{zIndex:"calc(var(--devui-z-index-modal, 1050) - 1)"}}),null),e.createVNode(e.Transition,{name:t.showAnimation?a.m("wipe"):""},{default:()=>{var C;return[i.value&&e.createVNode("div",e.mergeProps({ref:v,class:a.b()},n,{onClick:y=>y.stopPropagation(),style:{transform:N.value}}),[r.value&&e.createVNode("div",{onClick:h,class:"btn-close"},[e.createVNode(R,{name:"close",size:"20px"},null)]),t.type?x():e.createVNode("div",{style:{cursor:t.draggable?"move":"default"},ref:g},[o.header?o.header():s.value&&e.createVNode(O,null,{default:()=>[s.value]})]),e.createVNode(B,null,{default:()=>{var y;return[(y=o.default)==null?void 0:y.call(o)]}}),(C=o.footer)==null?void 0:C.call(o)])]}})]})}}),L=e.defineComponent({name:"DModalFooter",setup(t,{slots:o}){const n=V("modal");return()=>{var l;return e.createVNode("div",{class:n.e("footer")},[(l=o.default)==null?void 0:l.call(o)])}}});class fe{constructor(o){this.anchorContainer=o}renderModal(o,n,l){const a=e.h(this.component(),n,l);return e.render(a,o),a}renderNull(o){setTimeout(()=>{e.render(null,o)},500)}}let P;class S extends fe{component(){return k}open(o={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const m=o,{header:l,content:a,footer:i}=m,s=W(m,["header","content","footer"]),r=(p,h)=>this.renderModal(n,I($({},p),{modelValue:!0,"onUpdate:modelValue":h}),{header:l,default:a,footer:i}),d=()=>{var h,v,g;const p=w=>{w||d()};r(s,w=>{w?r(s,p):(this.renderModal(n,I($({},s),{modelValue:!1})),this.renderNull(n))}),(g=(v=(h=P==null?void 0:P.component)==null?void 0:h.exposed)==null?void 0:v.handleVisibleChange)==null||g.call(v,!1)},f=p=>{p||d()};return this.renderModal(n,{modelValue:!1}),P=r(s,f),{hide:d}}}G(S,"token","MODAL_SERVICE_TOKEN");var me={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(t){if(t.component(k.name,k),t.component(O.name,O),t.component(B.name,B),t.component(L.name,L),!se)return;let o=document.getElementById("d-modal-anchors-container");o||(o=document.createElement("div"),o.setAttribute("id","d-modal-anchors-container"),document.body.appendChild(o)),t.provide(S.token,new S(o))}};c.Modal=k,c.ModalBody=B,c.ModalFooter=L,c.ModalHeader=O,c.default=me,c.modalProps=b,Object.defineProperty(c,"__esModule",{value:!0}),c[Symbol.toStringTag]="Module"});