vue-devui
Version:
DevUI components based on Vite and Vue3
8 lines (7 loc) • 14.9 kB
JavaScript
(function(b,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):(b=typeof globalThis!="undefined"?globalThis:b||self,e(b.index={},b.Vue,b.dom))})(this,function(b,e,x){"use strict";const z={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}},j={name:{type:String,default:""},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]}},_={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function B(o,t,n){let l=o;return t&&(l+=`__${t}`),n&&(l+=`--${n}`),l}function C(o,t=!1){const n=t?`.devui-${o}`:`devui-${o}`;return{b:()=>B(n),e:a=>a?B(n,a):"",m:a=>a?B(n,"",a):"",em:(a,c)=>a&&c?B(n,a,c):""}}var de="",W=e.defineComponent({name:"DSvgIcon",props:_,setup(o){const{name:t,color:n,size:l}=e.toRefs(o),r=C("svg-icon"),i=e.computed(()=>`#icon-${t.value}`),s=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),a={width:s.value,height:s.value};return()=>e.createVNode("svg",{class:r.b(),style:a},[e.createVNode("use",{"xlink:href":i.value,fill:n.value},null)])}});function q(o){return/^((http|https):)?\/\//.test(o)}function G(o,t){const{component:n,name:l,size:r,color:i,classPrefix:s,rotate:a}=e.toRefs(o),c=C("icon"),y=e.computed(()=>typeof r.value=="number"?`${r.value}px`:r.value),m=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(W),u=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],class:[(a==null?void 0:a.value)==="infinite"&&c.m("spin")],style:{width:y.value||"",transform:`rotate(${a==null?void 0:a.value}deg)`,verticalAlign:"middle"}},t.attrs),null),g=()=>e.createVNode(m,e.mergeProps({name:l.value,color:i.value,size:y.value,class:[(a==null?void 0:a.value)==="infinite"&&c.m("spin")],style:{transform:`rotate(${a==null?void 0:a.value}deg)`}},t.attrs),null),V=()=>{const E=/^icon-/.test(l.value)?l.value:`${s.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[s.value,E,(a==null?void 0:a.value)==="infinite"&&c.m("spin")],style:{fontSize:y.value,color:i.value,transform:`rotate(${a==null?void 0:a.value}deg)`}},t.attrs),null)};return{iconDom:()=>n.value?g():q(l.value)?u():V()}}var F=e.defineComponent({name:"DIcon",props:j,emits:["click"],setup(o,t){const{disabled:n,operable:l}=e.toRefs(o),{iconDom:r}=G(o,t),i=C("icon"),s=e.computed(()=>({[i.e("container")]:!0,[i.m("disabled")]:n.value,[i.m("operable")]:l.value,[i.m("no-slots")]:!Object.keys(t.slots).length})),a=c=>{n.value||t.emit("click",c)};return()=>{var c,y,m,u;return e.createVNode("div",{class:s.value,onClick:a},[(y=(c=t.slots).prefix)==null?void 0:y.call(c),r(),(u=(m=t.slots).suffix)==null?void 0:u.call(m)])}}}),ue="";e.defineComponent({name:"DIconGroup",setup(o,t){const n=C("icon-group");return()=>{var l,r;return e.createVNode("div",{class:n.b()},[(r=(l=t.slots).default)==null?void 0:r.call(l)])}}});const K={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function U(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const o=document.documentElement.scrollTop,t=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${o}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=o}}}function Z(o,t){let n;const l=i=>{i.preventDefault(),t.emit("click",i),o.closeOnClickOverlay&&t.emit("update:modelValue",!1)},r=()=>{n==null||n()};return e.watch(()=>o.modelValue,i=>{i?o.lockScroll&&(n=U()):r()}),e.onUnmounted(r),{onClick:l}}var fe="";const J=e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:K,emits:["update:modelValue","click"],setup(o,t){const{modelValue:n}=e.toRefs(o),l=C("fixed-overlay"),{onClick:r}=Z(o,t);return()=>e.createVNode(e.Transition,{name:l.m("fade")},{default:()=>{var i,s;return[n.value&&e.createVNode("div",e.mergeProps({class:l.b()},t.attrs,{onClick:r}),[(s=(i=t.slots).default)==null?void 0:s.call(i)])]}})}}),Q={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 ee(o,t,n,l){let{x:r,y:i}=t;if(!o){const{width:s,height:a}=l;r&&n.includes("start")&&(r=12),r&&n.includes("end")&&(r=Math.round(s-24)),i&&n.includes("start")&&(i=10),i&&n.includes("end")&&(i=a-14)}return{x:r,y:i}}function te(o,t){const{fitOriginWidth:n,position:l,showArrow:r}=e.toRefs(o),i=e.ref(),s=e.ref(),a=e.ref(0);let c;const y=e.computed(()=>n.value?{width:a.value+"px"}:{}),m=(p,f,h,w)=>{const{x:d,y:N}=ee(o.isArrowCenter,h,f,w.getBoundingClientRect()),k={top:"bottom",right:"left",bottom:"top",left:"right"}[f.split("-")[0]];Object.assign(p.style,{left:d?`${d}px`:"",top:N?`${N}px`:"",right:"",bottom:"",[k]:"-4px"})},u=async()=>{const p=o.origin,f=e.unref(i.value),h=e.unref(s.value),[w,...d]=l.value,N=[x.offset(o.offset)];N.push(d.length?x.flip({fallbackPlacements:d}):x.flip()),r.value&&N.push(x.arrow({element:s.value}));const{x:k,y:R,placement:D,middlewareData:A}=await x.computePosition(p,f,{strategy:"fixed",placement:w,middleware:N});let S=k,$=R;t("positionChange",D),Object.assign(f.style,{top:`${$}px`,left:`${S}px`}),o.showArrow&&m(h,D,A.arrow,f)},g=p=>{var h,w;const f=p.target;f!=null&&f.contains((w=(h=o.origin)==null?void 0:h.$el)!=null?w:o.origin)&&u()},V=p=>{a.value=p.getBoundingClientRect().width,u()},v=()=>{var p,f;if(n.value&&typeof window!="undefined"){const h=(f=(p=o.origin)==null?void 0:p.$el)!=null?f:o.origin;h&&(c=new window.ResizeObserver(()=>V(h)),c.observe(h))}},E=()=>{var f,h;const p=(h=(f=o.origin)==null?void 0:f.$el)!=null?h:o.origin;p&&(c==null||c.unobserve(p))};return e.watch(()=>o.modelValue,()=>{o.modelValue&&o.origin?(e.nextTick(u),window.addEventListener("scroll",g,!0),window.addEventListener("resize",u),v()):(window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",u),E())}),e.onUnmounted(()=>{window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",u),E()}),{arrowRef:s,overlayRef:i,styles:y,updatePosition:u}}var me="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:Q,emits:["update:modelValue","positionChange"],setup(o,{slots:t,attrs:n,emit:l,expose:r}){const i=C("flexible-overlay"),{clickEventBubble:s}=e.toRefs(o),{arrowRef:a,overlayRef:c,styles:y,updatePosition:m}=te(o,l);return r({updatePosition:m}),()=>{var u;return o.modelValue&&e.createVNode("div",e.mergeProps({ref:c,class:i.b(),style:y.value},n,{onClick:e.withModifiers(()=>({}),[s.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(u=t.default)==null?void 0:u.call(t),o.showArrow&&e.createVNode("div",{ref:a,class:i.e("arrow")},null)])}}});const oe=typeof window!="undefined";function ne(o,t){function n(){t("update:modelValue",!1),t("close")}function l(){o.beforeClose?o.beforeClose(n):n()}function r(i){i.code==="Escape"&&l()}return e.onMounted(()=>{o.escapable&&window.addEventListener("keydown",r)}),e.onUnmounted(()=>{o.escapable&&window.addEventListener("keydown",r)}),{execClose:l}}function le(o){let t;const n=()=>{t==null||t()};e.watch(()=>o.modelValue,l=>{l?o.lockScroll&&(t=U()):n()},{immediate:!0}),e.onUnmounted(n)}function X(o,t="px"){return o?typeof o=="string"?o:typeof o=="number"?`${o}${t}`:"":""}const ae=(o,t,n)=>{const l=e.ref("translate(-50%, -50%)");let r={offsetX:0,offsetY:0};const i=y=>{const m=y.clientX,u=y.clientY,{offsetX:g,offsetY:V}=r,v=o.value.getBoundingClientRect(),E=v.left,p=v.top,f=v.width,h=v.height,w=document.documentElement.clientWidth,d=document.documentElement.clientHeight,N=-E+g,k=-p+V,R=w-E-f+g,D=d-p-h+V,A=$=>{const H=Math.min(Math.max(g+$.clientX-m,N),R),Y=Math.min(Math.max(V+$.clientY-u,k),D);r={offsetX:H,offsetY:Y},l.value=`translate(calc(-50% + ${X(H)}), calc(-50% + ${X(Y)}))`},S=()=>{document.removeEventListener("mousemove",A),document.removeEventListener("mouseup",S)};document.addEventListener("mousemove",A),document.addEventListener("mouseup",S)},s=()=>{t.value&&o.value&&t.value.addEventListener("mousedown",i)},a=()=>{t.value&&o.value&&t.value.removeEventListener("mousedown",i)};return e.onMounted(()=>{e.watchEffect(()=>{n.value?s():a()})}),e.onBeforeUnmount(()=>{a()}),{clearPosition:()=>{r={offsetX:0,offsetY:0},l.value="translate(-50%, -50%)"},modalPosition:l}};var M=e.defineComponent({name:"DModalHeader",setup(o,{slots:t}){const n=C("modal");return()=>{var l;return e.createVNode("div",{class:n.e("header")},[(l=t.default)==null?void 0:l.call(t)])}}}),O=e.defineComponent({name:"DModalBody",setup(o,{slots:t}){const n=C("modal");return()=>{var l;return e.createVNode("div",{class:n.e("body")},[(l=t.default)==null?void 0:l.call(t)])}}});function re(){return e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{id:"modal-close",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{transform:"translate(3.000000, 3.000000)",fill:"#71757F","fill-rule":"nonzero",id:"modal-close-road"},[e.createVNode("path",{d:`M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391
L10.3535534,9.64644661 C10.5488155,9.84170876 10.5488155,10.1582912 10.3535534,10.3535534 C10.179987,10.5271197 9.91056264,10.5464049
9.7156945,10.4114088 L9.64644661,10.3535534 L-0.353553391,0.353553391 C-0.548815536,0.158291245 -0.548815536,-0.158291245
-0.353553391,-0.353553391 Z`},null),e.createVNode("path",{d:`M9.64644661,-0.353553391 C9.84170876,-0.548815536 10.1582912,-0.548815536 10.3535534,-0.353553391 C10.5271197,-0.179987039
10.5464049,0.0894373624 10.4114088,0.284305503 L10.3535534,0.353553391 L0.353553391,10.3535534 C0.158291245,10.5488155
-0.158291245,10.5488155 -0.353553391,10.3535534 C-0.527119742,10.179987 -0.546404893,9.91056264 -0.411408841,9.7156945 L-0.353553391,9.64644661
L9.64644661,-0.353553391 Z`},null)])])])}var pe="",P=e.defineComponent({name:"DModal",inheritAttrs:!1,props:z,emits:["update:modelValue","close"],setup(o,{slots:t,attrs:n,emit:l}){const r=C("modal"),{modelValue:i,title:s,showClose:a,showOverlay:c,appendToBody:y,closeOnClickOverlay:m,keepLast:u}=e.toRefs(o),{execClose:g}=ne(o,l);le(o);const V=e.ref(),v=e.ref(),E=e.computed(()=>o.draggable),{clearPosition:p,modalPosition:f}=ae(V,v,E);e.watch(i,w=>{w&&!u.value&&(p(),e.nextTick(()=>{const d=document==null?void 0:document.querySelector("[autofocus]");d&&d.focus()}))});const h=()=>{const d=[{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(N=>N.type===o.type);return e.createVNode("div",{style:{cursor:o.draggable?"move":"default"},ref:v},[e.createVNode(M,null,{default:()=>[e.createVNode("div",{class:"type-content"},[e.createVNode("div",{class:"type-content-icon"},[e.createVNode(F,{name:d==null?void 0:d.icon,color:d==null?void 0:d.color},null)]),e.createVNode("div",{class:"type-content-text"},[d==null?void 0:d.text])])]})])};return()=>e.createVNode(e.Teleport,{to:"body",disabled:!y.value},{default:()=>[c.value&&e.createVNode(J,e.mergeProps({modelValue:i.value},{"onUpdate:modelValue":g},{class:r.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:o.showAnimation?r.m("wipe"):""},{default:()=>{var w;return[i.value&&e.createVNode("div",e.mergeProps({ref:V,class:r.b()},n,{onClick:d=>d.stopPropagation(),style:{transform:f.value}}),[a.value&&e.createVNode("div",{onClick:g,class:"btn-close"},[e.createVNode(F,{operable:!0,component:re()},null)]),o.type?h():e.createVNode("div",{style:{cursor:o.draggable?"move":"default"},ref:v},[t.header?t.header():s.value&&e.createVNode(M,null,{default:()=>[s.value]})]),e.createVNode(O,null,{default:()=>{var d;return[(d=t.default)==null?void 0:d.call(t)]}}),(w=t.footer)==null?void 0:w.call(t)])]}})]})}}),T=e.defineComponent({name:"DModalFooter",setup(o,{slots:t}){const n=C("modal");return()=>{var l;return e.createVNode("div",{class:n.e("footer")},[(l=t.default)==null?void 0:l.call(t)])}}});class ie{constructor(t){this.anchorContainer=t}renderModal(t,n,l){const r=e.h(this.component(),n,l);return e.render(r,t),r}renderNull(t){setTimeout(()=>{e.render(null,t)},500)}}let L;class I extends ie{component(){return P}open(t={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const{header:l,content:r,footer:i,...s}=t,a=(m,u)=>this.renderModal(n,{...m,modelValue:!0,"onUpdate:modelValue":u},{header:l,default:r,footer:i}),c=()=>{var u,g,V;const m=v=>{v||c()};a(s,v=>{v?a(s,m):(this.renderModal(n,{...s,modelValue:!1}),this.renderNull(n))}),(V=(g=(u=L==null?void 0:L.component)==null?void 0:u.exposed)==null?void 0:g.handleVisibleChange)==null||V.call(g,!1)},y=m=>{m||c()};return this.renderModal(n,{modelValue:!1}),L=a(s,y),{hide:c}}}I.token="MODAL_SERVICE_TOKEN";var se={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(o){if(o.component(P.name,P),o.component(M.name,M),o.component(O.name,O),o.component(T.name,T),!oe)return;let t=document.getElementById("d-modal-anchors-container");t||(t=document.createElement("div"),t.setAttribute("id","d-modal-anchors-container"),document.body.appendChild(t)),o.provide(I.token,new I(t))}};b.Modal=P,b.ModalBody=O,b.ModalFooter=T,b.ModalHeader=M,b.default=se,b.modalProps=z,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});