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