vue-devui 1.0.0-beta.18 → 1.0.0-beta.20220808

package/dropdown/index.umd.js

@@ -1 +1 @@
-var Q=Object.defineProperty,W=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var X=(i,t,v)=>t in i?Q(i,t,{enumerable:!0,configurable:!0,writable:!0,value:v}):i[t]=v,R=(i,t)=>{for(var v in t||(t={}))ee.call(t,v)&&X(i,v,t[v]);if(j)for(var v of j(t))te.call(t,v)&&X(i,v,t[v]);return i},Y=(i,t)=>W(i,Z(t));(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,t){"use strict";const v={origin:{type:Object},isOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},width:{type:[Number,String],default:"102px"}};function _(e){return!!(e==null?void 0:e.$el)}function S(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}function w(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const F=({visible:e,trigger:o,origin:n,closeScope:r,closeOnMouseLeaveMenu:s})=>{const u=t.ref(),l=()=>{r.value!=="none"&&(e.value=!1)};return t.watch([o,n,u],([c,b,f],m,h)=>{const a=S(b);if(!a||!f)return;const y=[w(f,"click",()=>{r.value==="all"&&(e.value=!1)})];if(c==="click")y.push(w(a,"click",()=>e.value=!e.value),w(document,"click",d=>{if(!e.value)return;const p=d.target;a.contains(p)||f.contains(p)||l()}),w(f,"mouseleave",()=>{s.value&&(e.value=!1)}));else if(c==="hover"){let d=!1,p=!1;const O=async g=>{await new Promise(k=>setTimeout(k,50)),!(g==="origin"&&d||g==="dropdown"&&p)&&l()};y.push(w(a,"mouseenter",()=>{p=!0,e.value=!0}),w(a,"mouseleave",()=>{p=!1,s.value||O("origin")}),w(f,"mouseenter",()=>{d=!0,e.value=!0}),w(f,"mouseleave",()=>{d=!1,O("dropdown")}))}h(()=>y.forEach(d=>d()))}),{dropdownEl:u}};var ne="";function M(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const V=t.defineComponent({setup(e,o){return()=>{let n;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},M(n=t.renderSlot(o.slots,"default"))?n:{default:()=>[n]})]})}}}),D={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},N=["update:visible","backdropClick"],T=Y(R({},D),{overlayStyle:{type:[String,Object],default:void 0}}),$=R({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},D);function L(e,o){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),r=t.computed(()=>"devui-overlay"),s=l=>{var c;l.preventDefault(),(c=e.onBackdropClick)==null||c.call(e),e.backdropClose&&o.emit("update:visible",!1)},u=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,c=l.style.overflow,b=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([f,m])=>{if(m){const h=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${h}px`):(l.style.overflowY=c,l.style.position=b,l.style.top="",window.scrollTo(0,-h))}}),t.onUnmounted(()=>{document.body.style.overflow=c})}),{backgroundClass:n,overlayClass:r,handleBackdropClick:s,handleOverlayBubbleCancel:u}}const E=t.defineComponent({name:"DFixedOverlay",props:T,emits:N,setup(e,o){const{backgroundClass:n,overlayClass:r,handleBackdropClick:s,handleOverlayBubbleCancel:u}=L(e,o);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:n.value,style:e.backgroundStyle,onClick:s},[t.createVNode("div",{class:r.value,style:e.overlayStyle,onClick:u},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}}),B=t.defineComponent({name:"DFlexibleOverlay",props:$,emits:N,setup(e,o){const n=t.ref(null),r=t.reactive({position:"absolute"});t.onMounted(async()=>{const b=(a,y,d)=>{const p=P(a,y,d);r.left=`${p.x}px`,r.top=`${p.y}px`},f=t.computed(()=>{const a=n.value,y=z(e.origin);if(!(!a||!y))return{origin:y,overlay:a}}),m=t.toRef(e,"visible"),h=t.toRef(e,"position");t.watch([f,m,h],async([a,y,d],p,O)=>{if(!y||!a)return;const{origin:g,overlay:k}=a;b(d,k.getBoundingClientRect(),g);const K=[G(()=>b(d,k.getBoundingClientRect(),g)),H(k,x=>b(d,x[0].contentRect,g)),I(g,()=>b(d,k.getBoundingClientRect(),g))];O(()=>{K.forEach(x=>x())})})});const{backgroundClass:s,overlayClass:u,handleBackdropClick:l,handleOverlayBubbleCancel:c}=L(e,o);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:s.value,onClick:l},[t.createVNode("div",{ref:n,class:u.value,style:r,onClick:c},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}});function z(e){return e instanceof Element?e:t.isRef(e)?S(e.value):_(e)?S(e):e}function P(e,o,n){const r=A(n),s=U(r,e);return q(s,o,e)}function A(e){if(e instanceof Element)return e.getBoundingClientRect();const o=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+o,height:n,width:o}}function q(e,o,n){let r;const{width:s,height:u}=o;n.overlayX=="center"?r=e.x-s/2:r=n.overlayX=="left"?e.x:e.x-s;let l;return n.overlayY=="center"?l=e.y-u/2:l=n.overlayY=="top"?e.y:e.y-u,{x:r,y:l}}function U(e,o){let n;if(o.originX=="center")n=e.left+e.width/2;else{const s=e.left,u=e.right;n=o.originX=="left"?s:u}let r;return o.originY=="center"?r=e.top+e.height/2:r=o.originY=="top"?e.top:e.bottom,{x:n,y:r}}function G(e){return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}function H(e,o){if(e instanceof Element){const n=new ResizeObserver(o);return n.observe(e),()=>n.disconnect()}return()=>{}}function I(e,o){if(e instanceof Element){const n=new MutationObserver(o);return n.observe(e,{attributeFilter:["style"]}),()=>n.disconnect()}return()=>{}}B.install=function(e){e.component(B.name,B)},E.install=function(e){e.component(E.name,E)};var oe="",C=t.defineComponent({name:"DDropdown",props:v,emits:[],setup(e,o){const{isOpen:n,origin:r,trigger:s,closeScope:u,closeOnMouseLeaveMenu:l}=t.toRefs(e),c=t.ref(!1);t.watch(n,a=>{c.value=a},{immediate:!0});const b={originX:"center",originY:"bottom",overlayX:"center",overlayY:"top"},{dropdownEl:f}=F({visible:c,origin:r,trigger:s,closeScope:u,closeOnMouseLeaveMenu:l}),m=t.computed(()=>e.showAnimation?c.value:!0),h=t.computed(()=>typeof e.width=="string"?{width:e.width}:{width:`${e.width}px`});return()=>t.createVNode(B,{origin:e.origin,visible:c.value,"onUpdate:visible":a=>c.value=a,position:b,hasBackdrop:!1},{default:()=>[t.createVNode(t.Transition,{name:"devui-dropdown-fade"},{default:()=>{var a,y;return[t.withDirectives(t.createVNode("div",{ref:f,class:"devui-dropdown-menu-wrap",style:h.value},[(y=(a=o.slots).default)==null?void 0:y.call(a)]),[[t.vShow,m.value]])]}})]})}});C.install=function(e){e.component(C.name,C)};var J={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"10%",install(e){e.use(C)}};i.Dropdown=C,i.default=J,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+(function(E,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@floating-ui/dom"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom","@vueuse/core"],t):(E=typeof globalThis!="undefined"?globalThis:E||self,t(E.index={},E.Vue,E.dom,E.core))})(this,function(E,t,N,F){"use strict";const H={visible:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},position:{type:Array,default:["bottom"]},align:{type:String,default:null},offset:{type:[Number,Object],default:4},shiftOffset:{type:Number},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""},destroyOnHide:{type:Boolean,default:!0}},M=Symbol("popper-trigger");function _(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}const C=new Map;function x(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const q=({id:e,isOpen:o,origin:n,dropdownRef:r,props:l,emit:a})=>{let s=!1,i=!1;const{trigger:u,closeScope:c,closeOnMouseLeaveMenu:m}=t.toRefs(l),d=p=>{o.value=p,a("toggle",o.value)},y=async(p,h)=>{await new Promise(f=>setTimeout(f,50)),!(p==="origin"&&s||p==="dropdown"&&i)&&(h&&[...C.values()].reverse().forEach(f=>{setTimeout(()=>{var b;(b=f.toggle)==null||b.call(f)},0)}),d(!1))};t.watch([u,n,r],([p,h,f],b,g)=>{const w=_(h),O=[];setTimeout(()=>{O.push(x(document,"click",v=>{const P=[...C.values()];!o.value||c.value==="none"||(f==null?void 0:f.contains(v.target))&&c.value==="blank"||P.some(A=>{var T;return(T=A.toggleEl)==null?void 0:T.contains(v.target)})&&P.some(A=>{var T;return(T=A.menuEl)==null?void 0:T.contains(v.target)})||([...C.values()].reverse().forEach(A=>{setTimeout(()=>{var T,V;(T=A.toggleEl)!=null&&T.contains(v.target)||(V=A.toggle)==null||V.call(A)},0)}),s=!1)}))},0),p==="click"?O.push(x(w,"click",()=>d(!o.value)),x(f,"mouseleave",v=>{var P;m.value&&!((P=C.get(e).child)!=null&&P.contains(v.relatedTarget))&&y("dropdown",!0)})):p==="hover"&&O.push(x(w,"mouseenter",()=>{i=!0,d(!0)}),x(w,"mouseleave",()=>{i=!1,y("origin")}),x(f,"mouseenter",()=>{s=!0,o.value=!0}),x(f,"mouseleave",v=>{var P;s=!1,!(v.relatedTarget&&((w==null?void 0:w.contains(v.relatedTarget))||((P=C.get(e).child)==null?void 0:P.contains(v.relatedTarget))))&&y("dropdown",!0)})),g(()=>O.forEach(v=>v()))})};function U(e,o,n,r,l,a,s){const i=u=>{const c=u.offsetHeight;window.innerHeight-r.value.getBoundingClientRect().bottom>=c?a.value="bottom":a.value="top"};t.watch(o,(u,c)=>{c!==void 0&&(n.value=u,s("toggle",n.value))},{immediate:!0}),t.watch([n,l],([u,c])=>{var m;if(u){C.set(e,{...C.get(e),menuEl:c,toggle:()=>{n.value=!1,s("toggle",n.value)}});for(const d of C.values())(m=d.menuEl)!=null&&m.contains(r.value)&&(d.child=c)}c&&i(c)}),t.onMounted(()=>{C.set(e,{toggleEl:r.value})}),t.onUnmounted(()=>{C.delete(e)})}function Y(e,o,n){const{showAnimation:r,overlayClass:l,destroyOnHide:a}=t.toRefs(e),s=t.ref(!1),i=t.ref(!1),u=t.computed(()=>({transformOrigin:o.value==="top"?"0% 100%":"0% 0%"})),c=t.computed(()=>({"fade-in-bottom":r.value&&n.value&&o.value==="bottom","fade-in-top":r.value&&n.value&&o.value==="top",[`${l.value}`]:!0})),m=d=>{o.value=d.includes("top")||d.includes("right-end")||d.includes("left-end")?"top":"bottom"};return t.watch(n,d=>{s.value=a.value?d:!0,i.value=d}),{overlayModelValue:s,overlayShowValue:i,styles:u,classes:c,handlePositionChange:m}}const z={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function X(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const e=document.documentElement.scrollTop,o=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",()=>{o?document.documentElement.setAttribute("style",o):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=e}}}function G(e,o){let n;const r=a=>{a.preventDefault(),o.emit("click",a),e.closeOnClickOverlay&&o.emit("update:modelValue",!1)},l=()=>{n==null||n()};return t.watch(()=>e.modelValue,a=>{a?e.lockScroll&&(n=X()):l()}),t.onUnmounted(l),{onClick:r}}function S(e,o,n){let r=e;return o&&(r+=`__${o}`),n&&(r+=`--${n}`),r}function D(e,o=!1){const n=o?`.devui-${e}`:`devui-${e}`;return{b:()=>S(n),e:i=>i?S(n,i):"",m:i=>i?S(n,"",i):"",em:(i,u)=>i&&u?S(n,i,u):""}}var ne="";t.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:z,emits:["update:modelValue","click"],setup(e,o){const{modelValue:n}=t.toRefs(e),r=D("fixed-overlay"),{onClick:l}=G(e,o);return()=>t.createVNode(t.Transition,{name:r.m("fade")},{default:()=>{var a,s;return[n.value&&t.createVNode("div",t.mergeProps({class:r.b()},o.attrs,{onClick:l}),[(s=(a=o.slots).default)==null?void 0:s.call(a)])]}})}});const I={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}};function K(e){const o=/(auto|scroll|hidden)/;for(let n=e;n=n.parentElement;n.parentElement!==document.body){const r=window.getComputedStyle(n);if(o.test(r.overflow+r.overflowX+r.overflowY))return n}return window}function J(e,o,n,r){let{x:l,y:a}=o;if(!e){const{width:s,height:i}=r;l&&n.includes("start")&&(l=12),l&&n.includes("end")&&(l=Math.round(s-24)),a&&n.includes("start")&&(a=10),a&&n.includes("end")&&(a=i-14)}return{x:l,y:a}}function Q(e,o){const n=t.ref(),r=t.ref();let l=null;const a=(i,u,c,m)=>{const{x:d,y}=J(e.isArrowCenter,c,u,m.getBoundingClientRect()),p={top:"bottom",right:"left",bottom:"top",left:"right"}[u.split("-")[0]];Object.assign(i.style,{left:d?`${d}px`:"",top:y?`${y}px`:"",right:"",bottom:"",[p]:"-4px"})},s=async()=>{const i=e.origin,u=t.unref(n.value),c=t.unref(r.value),m=[N.offset(e.offset),N.autoPlacement({alignment:e.align,allowedPlacements:e.position})];e.showArrow&&m.push(N.arrow({element:c})),e.shiftOffset!==void 0&&m.push(N.shift());const{x:d,y,placement:p,middlewareData:h}=await N.computePosition(i,u,{strategy:"fixed",middleware:m});let f=d,b=y;if(e.shiftOffset!==void 0){const{x:g,y:w}=h.shift;g<0&&(f-=e.shiftOffset),g>0&&(f+=e.shiftOffset),w<0&&(b-=e.shiftOffset),w>0&&(b+=e.shiftOffset)}o("positionChange",p),Object.assign(u.style,{top:`${b}px`,left:`${f}px`}),e.showArrow&&a(c,p,h.arrow,u)};return t.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(l=K(e.origin),t.nextTick(s),l==null||l.addEventListener("scroll",s),l!==window&&window.addEventListener("scroll",s),window.addEventListener("resize",s)):(l==null||l.removeEventListener("scroll",s),l!==window&&window.removeEventListener("scroll",s),window.removeEventListener("resize",s))}),t.onUnmounted(()=>{l==null||l.removeEventListener("scroll",s),l!==window&&window.removeEventListener("scroll",s),window.removeEventListener("resize",s)}),{arrowRef:r,overlayRef:n,updatePosition:s}}var le="";const k=t.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:I,emits:["update:modelValue","positionChange"],setup(e,{slots:o,attrs:n,emit:r,expose:l}){const a=D("flexible-overlay"),{arrowRef:s,overlayRef:i,updatePosition:u}=Q(e,r);return l({updatePosition:u}),()=>{var c;return e.modelValue&&t.createVNode("div",t.mergeProps({ref:i,class:a.b()},n),[(c=o.default)==null?void 0:c.call(o),e.showArrow&&t.createVNode("div",{ref:s,class:a.e("arrow")},null)])}}}),W=e=>e!==null&&typeof e=="object",Z=D("popper-trigger");function $(e){return t.h("span",{class:Z.b()},e)}function j(e){for(const o of e){if(W(o)){if(o.type===t.Comment)continue;return o.type==="svg"||o.type===t.Text?$(o):o.type===t.Fragment?j(o.children):o}return $(o)}return null}var ee=t.defineComponent({name:"DPopperTrigger",setup(e,o){const{slots:n,attrs:r}=o;return()=>{var i;const l=(i=n.default)==null?void 0:i.call(n,r),a=t.inject(M);if(!l)return null;const s=j(l);return s?t.withDirectives(t.cloneVNode(s,r),[[{mounted(u){a.value=u},updated(u){a.value=u},unmounted(){a.value=null}}]]):null}}}),ae="";let te=1;var B=t.defineComponent({name:"DDropdown",inheritAttrs:!1,props:H,emits:["toggle"],setup(e,{slots:o,attrs:n,emit:r,expose:l}){const{visible:a,position:s,align:i,offset:u,destroyOnHide:c,shiftOffset:m,showAnimation:d}=t.toRefs(e),y=t.ref(),p=t.ref(),h=t.ref(),f=`dropdown_${te++}`,b=t.ref(!1),g=t.ref("bottom"),w=D("dropdown");t.provide(M,y),q({id:f,isOpen:b,origin:y,dropdownRef:p,props:e,emit:r}),U(f,a,b,y,p,g,r);const{overlayModelValue:O,overlayShowValue:v,styles:P,classes:A,handlePositionChange:T}=Y(e,g,b);return t.watch(v,V=>{t.nextTick(()=>{!c.value&&V&&h.value.updatePosition()})}),l({updatePosition:()=>h.value.updatePosition()}),()=>t.createVNode(t.Fragment,null,[t.createVNode(ee,null,{default:()=>{var V;return[(V=o.default)==null?void 0:V.call(o)]}}),t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode(t.Transition,{name:d.value?w.m(`fade-${g.value}`):""},{default:()=>[t.withDirectives(t.createVNode(k,{modelValue:O.value,"onUpdate:modelValue":V=>O.value=V,ref:h,origin:y.value,position:s.value,align:i.value,offset:u.value,shiftOffset:m==null?void 0:m.value,onPositionChange:T,class:A.value,style:P.value},{default:()=>{var V;return[t.createVNode("div",t.mergeProps({ref:p,class:w.e("menu-wrap")},n),[(V=o.menu)==null?void 0:V.call(o)])]}}),[[t.vShow,v.value]])]})]})])}});const L={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},align:{type:String,default:null},offset:{type:[Number,Object],default:4},clickOutside:{type:Function,default:()=>!0},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""}};var R=t.defineComponent({name:"DDropdownMenu",inheritAttrs:!1,props:L,emits:["update:modelValue"],setup(e,{slots:o,attrs:n,emit:r}){const{modelValue:l,origin:a,position:s,align:i,offset:u,clickOutside:c,showAnimation:m,overlayClass:d}=t.toRefs(e),y=t.ref(null),p=D("dropdown");F.onClickOutside(y,g=>{var w,O;((w=c.value)==null?void 0:w.call(c))&&!((O=a==null?void 0:a.value)!=null&&O.contains(g.target))&&r("update:modelValue",!1)});const h=t.ref("bottom"),f=g=>{h.value=g.split("-")[0]==="top"?"top":"bottom"},b=t.computed(()=>({transformOrigin:h.value==="top"?"0% 100%":"0% 0%"}));return()=>t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode(t.Transition,{name:m.value?p.m(`fade-${h.value}`):""},{default:()=>[t.createVNode(k,{modelValue:l.value,"onUpdate:modelValue":g=>l.value=g,origin:a==null?void 0:a.value,position:s.value,align:i.value,offset:u.value,onPositionChange:f,class:d.value,style:b.value},{default:()=>{var g;return[t.createVNode("div",t.mergeProps({ref:y,class:p.e("menu-wrap")},n),[(g=o.default)==null?void 0:g.call(o)])]}})]})]})}}),oe={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"50%",install(e){e.component(B.name,B),e.component(R.name,R)}};E.Dropdown=B,E.DropdownMenu=R,E.default=oe,E.dropdownMenuProps=L,Object.defineProperties(E,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dropdown/style.css

@@ -1 +1 @@
-.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}@keyframes d-dropdown-fade{0%{opacity:0;transform:scaleY(.9999) scaleY(0)}to{opacity:1;transform:scaleY(.8) scaleY(4px)}}.devui-dropdown-fade-enter{opacity:0}.devui-dropdown-fade-enter-active{animation-name:d-dropdown-fade;animation-duration:.3s}.devui-dropdown-fade-leave{opacity:1}.devui-dropdown-fade-leave-active{animation-name:d-dropdown-fade;animation-duration:.3s;animation-direction:reverse}
+.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown__menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}.fade-in-top{animation:fadeInTop .2s cubic-bezier(.16,.75,.5,1)}.fade-in-bottom{animation:fadeInBottom .2s cubic-bezier(.16,.75,.5,1)}@keyframes fadeInTop{0%{opacity:.8;transform:scaleY(.8) translateY(4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}@keyframes fadeInBottom{0%{opacity:.8;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}.devui-dropdown--fade-bottom-enter-from,.devui-dropdown--fade-bottom-leave-to{opacity:.8;transform:scaleY(.8) translateY(-4px)}.devui-dropdown--fade-bottom-enter-to,.devui-dropdown--fade-bottom-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-bottom-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-bottom-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-dropdown--fade-top-enter-from,.devui-dropdown--fade-top-leave-to{opacity:.8;transform:scaleY(.8) translateY(4px)}.devui-dropdown--fade-top-enter-to,.devui-dropdown--fade-top-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-top-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-top-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}