vue-devui 1.0.0-rc.8 → 1.0.1

package/dropdown/index.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { toRefs, watch, onMounted, onUnmounted, ref, computed, defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, unref, nextTick, mergeProps, Fragment, withDirectives, vShow } from "vue";
+import { toRefs, watch, onMounted, onUnmounted, ref, computed, defineComponent, createVNode, Transition, mergeProps, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, provide, Teleport, vShow } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 const dropdownProps = {
@@ -65,6 +65,7 @@ const dropdownProps = {
     default: true
   }
 };
+const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 function getElement(element) {
   if (element instanceof Element) {
     return element;
@@ -109,6 +110,7 @@ const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
     const subscriptions = [];
     setTimeout(() => {
       subscriptions.push(subscribeEvent(document, "click", (e) => {
+        e.stopPropagation();
         const dropdownValues = [...dropdownMap.values()];
         if (!isOpen.value || closeScope.value === "none" || (dropdownEl == null ? void 0 : dropdownEl.contains(e.target)) && closeScope.value === "blank" || dropdownValues.some((item) => {
           var _a;
@@ -209,7 +211,8 @@ function useOverlayProps(props, currentPosition, isOpen) {
   const overlayModelValue = ref(false);
   const overlayShowValue = ref(false);
   const styles = computed(() => ({
-    transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
+    transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+    zIndex: "var(--devui-z-index-dropdown, 1052)"
   }));
   const classes = computed(() => ({
     "fade-in-bottom": showAnimation.value && isOpen.value && currentPosition.value === "bottom",
@@ -217,7 +220,7 @@ function useOverlayProps(props, currentPosition, isOpen) {
     [`${overlayClass.value}`]: true
   }));
   const handlePositionChange = (pos) => {
-    currentPosition.value = pos.includes("top") || pos.includes("end") ? "top" : "bottom";
+    currentPosition.value = pos.includes("top") || pos.includes("right-end") || pos.includes("left-end") ? "top" : "bottom";
   };
   watch(isOpen, (isOpenVal) => {
     overlayModelValue.value = destroyOnHide.value ? isOpenVal : true;
@@ -225,6 +228,61 @@ function useOverlayProps(props, currentPosition, isOpen) {
   });
   return { overlayModelValue, overlayShowValue, styles, classes, handlePositionChange };
 }
+const fixedOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+};
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
+    };
+  }
+  return;
+}
+function useFixedOverlay(props, ctx) {
+  let lockScrollCb;
+  const onClick = (event) => {
+    event.preventDefault();
+    ctx.emit("click", event);
+    if (props.closeOnClickOverlay) {
+      ctx.emit("update:modelValue", false);
+    }
+  };
+  const removeBodyAdditions = () => {
+    lockScrollCb == null ? void 0 : lockScrollCb();
+  };
+  watch(() => props.modelValue, (val) => {
+    if (val) {
+      props.lockScroll && (lockScrollCb = lockScroll());
+    } else {
+      removeBodyAdditions();
+    }
+  });
+  onUnmounted(removeBodyAdditions);
+  return { onClick };
+}
 function createBem(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
@@ -235,8 +293,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
   const b = () => createBem(namespace);
   const e = (element) => element ? createBem(namespace, element) : "";
   const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
@@ -248,130 +306,31 @@ function useNamespace(block) {
     em
   };
 }
-var baseOverlay = "";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-const CommonOverlay = defineComponent({
-  setup(props, ctx) {
-    const ns = useNamespace("overlay");
-    return () => {
-      let _slot;
-      return createVNode(Teleport, {
-        "to": "#d-overlay-anchor"
-      }, {
-        default: () => [createVNode(Transition, {
-          "name": ns.e("fade")
-        }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
-          default: () => [_slot]
-        })]
-      });
-    };
-  }
-});
-const overlayProps = {
-  visible: {
-    type: Boolean
-  },
-  backgroundBlock: {
-    type: Boolean,
-    default: false
-  },
-  backgroundClass: {
-    type: String,
-    default: ""
-  },
-  backgroundStyle: {
-    type: [String, Object]
-  },
-  onBackdropClick: {
-    type: Function
-  },
-  backdropClose: {
-    type: Boolean,
-    default: true
-  },
-  hasBackdrop: {
-    type: Boolean,
-    default: true
-  }
-};
-const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
-  overlayStyle: {
-    type: [String, Object],
-    default: void 0
-  }
-});
-const overlayEmits = ["update:visible", "backdropClick"];
-function useOverlayLogic(props, ctx) {
-  const ns = useNamespace("overlay");
-  const backgroundClass = computed(() => {
-    return [ns.e("background"), props.backgroundClass, !props.hasBackdrop ? ns.em("background", "disabled") : ns.em("background", "color")];
-  });
-  const overlayClass = computed(() => {
-    return ns.b();
-  });
-  const handleBackdropClick = (event) => {
-    var _a;
-    event.preventDefault();
-    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
-    if (props.backdropClose) {
-      ctx.emit("update:visible", false);
-    }
-  };
-  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
-  onMounted(() => {
-    const body = document.body;
-    const originOverflow = body.style.overflow;
-    const originPosition = body.style.position;
-    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
-      if (backgroundBlock) {
-        const top = body.getBoundingClientRect().y;
-        if (visible) {
-          body.style.overflowY = "scroll";
-          body.style.position = visible ? "fixed" : "";
-          body.style.top = `${top}px`;
-        } else {
-          body.style.overflowY = originOverflow;
-          body.style.position = originPosition;
-          body.style.top = "";
-          window.scrollTo(0, -top);
-        }
-      }
-    });
-    onUnmounted(() => {
-      document.body.style.overflow = originOverflow;
-    });
-  });
-  return {
-    backgroundClass,
-    overlayClass,
-    handleBackdropClick,
-    handleOverlayBubbleCancel
-  };
-}
 var fixedOverlay = "";
 defineComponent({
   name: "DFixedOverlay",
+  inheritAttrs: false,
   props: fixedOverlayProps,
-  emits: overlayEmits,
+  emits: ["update:modelValue", "click"],
   setup(props, ctx) {
     const {
-      backgroundClass,
-      overlayClass,
-      handleBackdropClick,
-      handleOverlayBubbleCancel
-    } = useOverlayLogic(props, ctx);
-    return () => createVNode(CommonOverlay, null, {
-      default: () => [props.visible && createVNode("div", {
-        "class": backgroundClass.value,
-        "style": props.backgroundStyle,
-        "onClick": handleBackdropClick
-      }, [createVNode("div", {
-        "class": overlayClass.value,
-        "style": props.overlayStyle,
-        "onClick": handleOverlayBubbleCancel
-      }, [renderSlot(ctx.slots, "default")])])]
+      modelValue
+    } = toRefs(props);
+    const ns2 = useNamespace("fixed-overlay");
+    const {
+      onClick
+    } = useFixedOverlay(props, ctx);
+    return () => createVNode(Transition, {
+      "name": ns2.m("fade")
+    }, {
+      default: () => {
+        var _a, _b;
+        return [modelValue.value && createVNode("div", mergeProps({
+          "class": ns2.b()
+        }, ctx.attrs, {
+          "onClick": onClick
+        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
+      }
     });
   }
 });
@@ -406,6 +365,10 @@ const flexibleOverlayProps = {
   isArrowCenter: {
     type: Boolean,
     default: true
+  },
+  clickEventBubble: {
+    type: Boolean,
+    default: false
   }
 };
 function getScrollParent(element) {
@@ -519,7 +482,10 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
-    const ns = useNamespace("flexible-overlay");
+    const ns2 = useNamespace("flexible-overlay");
+    const {
+      clickEventBubble
+    } = toRefs(props);
     const {
       arrowRef,
       overlayRef,
@@ -532,14 +498,72 @@ const FlexibleOverlay = defineComponent({
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
-        "class": ns.b()
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "class": ns2.b()
+      }, attrs, {
+        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
+        "onPointerup": withModifiers(() => ({}), ["stop"])
+      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
-        "class": ns.e("arrow")
+        "class": ns2.e("arrow")
       }, null)]);
     };
   }
 });
+const isObject = (val) => val !== null && typeof val === "object";
+const ns = useNamespace("popper-trigger");
+function wrapContent(content) {
+  return h("span", { class: ns.b() }, content);
+}
+function getFirstValidChild(nodes) {
+  for (const child of nodes) {
+    if (isObject(child)) {
+      if (child.type === Comment) {
+        continue;
+      }
+      if (child.type === "svg" || child.type === Text) {
+        return wrapContent(child);
+      }
+      if (child.type === Fragment) {
+        return getFirstValidChild(child.children);
+      }
+      return child;
+    }
+    return wrapContent(child);
+  }
+  return null;
+}
+var PopperTrigger = defineComponent({
+  name: "DPopperTrigger",
+  setup(_, ctx) {
+    const {
+      slots,
+      attrs
+    } = ctx;
+    return () => {
+      var _a;
+      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
+      const triggerRef = inject(POPPER_TRIGGER_TOKEN);
+      if (!defaultSlot) {
+        return null;
+      }
+      const firstValidChild = getFirstValidChild(defaultSlot);
+      if (!firstValidChild) {
+        return null;
+      }
+      return withDirectives(cloneVNode(firstValidChild, attrs), [[{
+        mounted(el) {
+          triggerRef.value = el;
+        },
+        updated(el) {
+          triggerRef.value = el;
+        },
+        unmounted() {
+          triggerRef.value = null;
+        }
+      }]]);
+    };
+  }
+});
 var dropdown = "";
 let dropdownId = 1;
 var Dropdown = defineComponent({
@@ -568,7 +592,8 @@ var Dropdown = defineComponent({
     const id = `dropdown_${dropdownId++}`;
     const isOpen = ref(false);
     const currentPosition = ref("bottom");
-    const ns = useNamespace("dropdown");
+    const ns2 = useNamespace("dropdown");
+    provide(POPPER_TRIGGER_TOKEN, origin);
     useDropdownEvent({
       id,
       isOpen,
@@ -595,41 +620,41 @@ var Dropdown = defineComponent({
     expose({
       updatePosition: () => overlayRef.value.updatePosition()
     });
-    return () => {
-      var _a;
-      return createVNode(Fragment, null, [createVNode("div", {
-        "ref": origin,
-        "class": ns.e("toggle")
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
-        "to": "body"
+    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    }), createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
       }, {
-        default: () => [createVNode(Transition, {
-          "name": showAnimation.value ? `devui-dropdown-fade-${currentPosition.value}` : ""
+        default: () => [withDirectives(createVNode(FlexibleOverlay, {
+          "modelValue": overlayModelValue.value,
+          "onUpdate:modelValue": ($event) => overlayModelValue.value = $event,
+          "ref": overlayRef,
+          "origin": origin.value,
+          "position": position.value,
+          "align": align.value,
+          "offset": offset2.value,
+          "shiftOffset": shiftOffset == null ? void 0 : shiftOffset.value,
+          "onPositionChange": handlePositionChange,
+          "click-event-bubble": true,
+          "class": classes.value,
+          "style": styles.value
         }, {
-          default: () => [withDirectives(createVNode(FlexibleOverlay, {
-            "modelValue": overlayModelValue.value,
-            "onUpdate:modelValue": ($event) => overlayModelValue.value = $event,
-            "ref": overlayRef,
-            "origin": origin.value,
-            "position": position.value,
-            "align": align.value,
-            "offset": offset2.value,
-            "shiftOffset": shiftOffset == null ? void 0 : shiftOffset.value,
-            "onPositionChange": handlePositionChange,
-            "class": classes.value,
-            "style": styles.value
-          }, {
-            default: () => {
-              var _a2;
-              return [createVNode("div", mergeProps({
-                "ref": dropdownRef,
-                "class": ns.e("menu-wrap")
-              }, attrs), [(_a2 = slots.menu) == null ? void 0 : _a2.call(slots)])];
-            }
-          }), [[vShow, overlayShowValue.value]])]
-        })]
-      })]);
-    };
+          default: () => {
+            var _a;
+            return [createVNode("div", mergeProps({
+              "ref": dropdownRef,
+              "class": ns2.e("menu-wrap")
+            }, attrs), [(_a = slots.menu) == null ? void 0 : _a.call(slots)])];
+          }
+        }), [[vShow, overlayShowValue.value]])]
+      })]
+    })]);
   }
 });
 const dropdownMenuProps = {
@@ -687,7 +712,7 @@ var DropdownMenu = defineComponent({
       overlayClass
     } = toRefs(props);
     const dropdownMenuRef = ref(null);
-    const ns = useNamespace("dropdown");
+    const ns2 = useNamespace("dropdown");
     onClickOutside(dropdownMenuRef, (value) => {
       var _a, _b;
       if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !((_b = origin == null ? void 0 : origin.value) == null ? void 0 : _b.contains(value.target))) {
@@ -705,7 +730,7 @@ var DropdownMenu = defineComponent({
       "to": "body"
     }, {
       default: () => [createVNode(Transition, {
-        "name": showAnimation.value ? `devui-dropdown-fade-${currentPosition.value}` : ""
+        "name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
       }, {
         default: () => [createVNode(FlexibleOverlay, {
           "modelValue": modelValue.value,
@@ -722,7 +747,7 @@ var DropdownMenu = defineComponent({
             var _a;
             return [createVNode("div", mergeProps({
               "ref": dropdownMenuRef,
-              "class": ns.e("menu-wrap")
+              "class": ns2.e("menu-wrap")
             }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
           }
         })]
@@ -733,7 +758,7 @@ var DropdownMenu = defineComponent({
 var index = {
   title: "Dropdown \u4E0B\u62C9\u83DC\u5355",
   category: "\u5BFC\u822A",
-  status: "10%",
+  status: "50%",
   install(app) {
     app.component(Dropdown.name, Dropdown);
     app.component(DropdownMenu.name, DropdownMenu);

package/dropdown/index.umd.js

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

package/dropdown/style.css

@@ -1 +1 @@
-@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-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}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 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__toggle{display:inline-block}.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)}
+.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, 2px);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)}