vue-devui 1.0.0-rc.9 → 1.0.0

package/modal/index.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, Teleport, Transition, renderSlot, isVNode, onMounted, watch, onUnmounted, ref, unref, nextTick, h, render } from "vue";
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, watch, onUnmounted, Transition, ref, unref, nextTick, onMounted, Teleport, h, render } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const modalProps = {
   modelValue: {
@@ -54,11 +54,24 @@ const modalProps = {
   },
   beforeClose: {
     type: Function
+  },
+  escapable: {
+    type: Boolean,
+    default: true
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  showOverlay: {
+    type: Boolean,
+    default: true
+  },
+  appendToBody: {
+    type: Boolean,
+    default: true
   }
 };
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
 const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
@@ -81,6 +94,17 @@ const iconProps = {
   classPrefix: {
     type: String,
     default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
   }
 };
 const svgIconProps = {
@@ -151,178 +175,190 @@ var svgIcon = defineComponent({
     };
   }
 });
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
+      }
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
 var Icon = defineComponent({
   name: "DIcon",
   props: iconProps,
-  setup(props, {
-    attrs
-  }) {
+  emits: ["click"],
+  setup(props, ctx) {
     const {
-      component,
-      name,
-      size,
-      color,
-      classPrefix
+      disabled,
+      operable
     } = toRefs(props);
-    const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
-    const iconSize = computed(() => {
-      return typeof size.value === "number" ? `${size.value}px` : size.value;
-    });
-    const svgIconDom = () => {
-      return createVNode(IconComponent, mergeProps({
-        "name": name.value,
-        "color": color.value,
-        "size": iconSize.value
-      }, attrs), null);
-    };
-    const imgIconDom = () => {
-      return createVNode("img", mergeProps({
-        "src": name.value,
-        "alt": name.value.split("/")[name.value.split("/").length - 1],
-        "style": {
-          width: iconSize.value || ""
-        }
-      }, attrs), null);
-    };
-    const fontIconDom = () => {
-      const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
-      return createVNode("i", mergeProps({
-        "class": [classPrefix.value, fontIconClass],
-        "style": {
-          fontSize: iconSize.value,
-          color: color.value
-        }
-      }, attrs), null);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
     };
     return () => {
-      return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
     };
   }
 });
-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");
+var iconGroup = "";
+defineComponent({
+  name: "DIconGroup",
+  setup(_, ctx) {
+    const ns = useNamespace("icon-group");
     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]
-        })]
-      });
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
-const overlayProps = {
-  visible: {
-    type: Boolean
-  },
-  backgroundBlock: {
+const fixedOverlayProps = {
+  modelValue: {
     type: Boolean,
     default: false
   },
-  backgroundClass: {
-    type: String,
-    default: ""
-  },
-  backgroundStyle: {
-    type: [String, Object]
-  },
-  onBackdropClick: {
-    type: Function
-  },
-  backdropClose: {
+  lockScroll: {
     type: Boolean,
     default: true
   },
-  hasBackdrop: {
+  closeOnClickOverlay: {
     type: Boolean,
     default: true
   }
 };
-const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
-  overlayStyle: {
-    type: [String, Object],
-    default: void 0
+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;
+    };
   }
-});
-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;
+  return;
+}
+function useFixedOverlay(props, ctx) {
+  let lockScrollCb;
+  const onClick = (event) => {
     event.preventDefault();
-    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
-    if (props.backdropClose) {
-      ctx.emit("update:visible", false);
+    ctx.emit("click", event);
+    if (props.closeOnClickOverlay) {
+      ctx.emit("update:modelValue", 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
+  const removeBodyAdditions = () => {
+    lockScrollCb == null ? void 0 : lockScrollCb();
   };
+  watch(() => props.modelValue, (val) => {
+    if (val) {
+      props.lockScroll && (lockScrollCb = lockScroll());
+    } else {
+      removeBodyAdditions();
+    }
+  });
+  onUnmounted(removeBodyAdditions);
+  return { onClick };
 }
 var fixedOverlay = "";
 const 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 ns = useNamespace("fixed-overlay");
+    const {
+      onClick
+    } = useFixedOverlay(props, ctx);
+    return () => createVNode(Transition, {
+      "name": ns.m("fade")
+    }, {
+      default: () => {
+        var _a, _b;
+        return [modelValue.value && createVNode("div", mergeProps({
+          "class": ns.b()
+        }, ctx.attrs, {
+          "onClick": onClick
+        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
+      }
     });
   }
 });
@@ -496,12 +532,58 @@ function useModal(props, emit) {
   function close() {
     emit("update:modelValue", false);
   }
-  function handleVisibleChange(val) {
-    if (!val) {
-      props.beforeClose ? props.beforeClose(close) : close();
+  function execClose() {
+    props.beforeClose ? props.beforeClose(close) : close();
+  }
+  function onOverlayClick() {
+    props.closeOnClickOverlay && execClose();
+  }
+  function onCloseBtnClick() {
+    execClose();
+  }
+  function onKeydown(event) {
+    if (event["keyCode"] === 27) {
+      execClose();
     }
   }
-  return { handleVisibleChange };
+  onMounted(() => {
+    if (props.escapable) {
+      window.addEventListener("keydown", onKeydown);
+    }
+  });
+  onUnmounted(() => {
+    if (props.escapable) {
+      window.addEventListener("keydown", onKeydown);
+    }
+  });
+  return { onCloseBtnClick, onOverlayClick };
+}
+function useModalRender(props) {
+  const showContainer = ref(false);
+  const showModal = ref(false);
+  let lockScrollCb;
+  const removeBodyAdditions = () => {
+    lockScrollCb == null ? void 0 : lockScrollCb();
+  };
+  watch(() => props.modelValue, (val) => {
+    if (val) {
+      props.lockScroll && (lockScrollCb = lockScroll());
+      showContainer.value = true;
+      nextTick(() => {
+        showModal.value = true;
+      });
+    } else {
+      removeBodyAdditions();
+      showModal.value = false;
+      setTimeout(() => {
+        showContainer.value = false;
+      }, 100);
+    }
+  }, {
+    immediate: true
+  });
+  onUnmounted(removeBodyAdditions);
+  return { showContainer, showModal };
 }
 var Header = defineComponent({
   name: "DModalHeader",
@@ -540,55 +622,63 @@ var Modal = defineComponent({
   setup(props, {
     slots,
     attrs,
-    emit,
-    expose
+    emit
   }) {
     const ns = useNamespace("modal");
     const {
       modelValue,
-      lockScroll,
-      closeOnClickOverlay,
-      title
+      title,
+      showClose,
+      showOverlay,
+      appendToBody
     } = toRefs(props);
     const {
-      handleVisibleChange
+      onCloseBtnClick,
+      onOverlayClick
     } = useModal(props, emit);
-    expose({
-      handleVisibleChange
+    const {
+      showContainer,
+      showModal
+    } = useModalRender(props);
+    return () => createVNode(Teleport, {
+      "to": "body",
+      "disabled": !appendToBody.value
+    }, {
+      default: () => [showOverlay.value && createVNode(FixedOverlay, {
+        "modelValue": modelValue.value,
+        "onUpdate:modelValue": ($event) => modelValue.value = $event,
+        "lock-scroll": false,
+        "style": {
+          zIndex: "calc(var(--devui-z-index-modal, 1050) - 1)"
+        }
+      }, null), showContainer.value && createVNode("div", {
+        "class": ns.e("container"),
+        "onClick": onOverlayClick
+      }, [createVNode(Transition, {
+        "name": ns.m("wipe")
+      }, {
+        default: () => {
+          var _a;
+          return [showModal.value && createVNode("div", mergeProps({
+            "class": ns.b()
+          }, attrs, {
+            "onClick": (e) => e.stopPropagation()
+          }), [showClose.value && createVNode(Icon, {
+            "name": "close",
+            "class": "btn-close",
+            "size": "var(--devui-font-size-md,12px)",
+            "onClick": onCloseBtnClick
+          }, null), slots.header ? slots.header() : title.value && createVNode(Header, null, {
+            default: () => [title.value]
+          }), createVNode(Body, null, {
+            default: () => {
+              var _a2;
+              return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
+            }
+          }), (_a = slots.footer) == null ? void 0 : _a.call(slots)])];
+        }
+      })])]
     });
-    return () => {
-      const fixedOverlayProps2 = {
-        visible: modelValue.value,
-        "onUpdate:visible": handleVisibleChange,
-        "background-class": ns.e("mask"),
-        "background-block": lockScroll.value,
-        "backdrop-close": closeOnClickOverlay.value
-      };
-      return createVNode(FixedOverlay, fixedOverlayProps2, {
-        default: () => [createVNode(Transition, {
-          "name": ns.m("wipe")
-        }, {
-          default: () => {
-            var _a;
-            return [createVNode("div", mergeProps({
-              "class": ns.b()
-            }, attrs), [createVNode(Icon, {
-              "name": "close",
-              "class": "btn-close",
-              "size": "var(--devui-font-size-md,12px)",
-              "onClick": () => handleVisibleChange(false)
-            }, null), slots.header ? slots.header() : title.value && createVNode(Header, null, {
-              default: () => [title.value]
-            }), createVNode(Body, null, {
-              default: () => {
-                var _a2;
-                return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
-              }
-            }), (_a = slots.footer) == null ? void 0 : _a.call(slots)])];
-          }
-        })]
-      });
-    };
   }
 });
 var Footer = defineComponent({

package/modal/index.umd.js

@@ -1 +1 @@
-var le=Object.defineProperty,re=Object.defineProperties;var ae=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var D=(i,e,u)=>e in i?le(i,e,{enumerable:!0,configurable:!0,writable:!0,value:u}):i[e]=u,N=(i,e)=>{for(var u in e||(e={}))$.call(e,u)&&D(i,u,e[u]);if(V)for(var u of V(e))j.call(e,u)&&D(i,u,e[u]);return i},S=(i,e)=>re(i,ae(e));var z=(i,e)=>{var u={};for(var h in i)$.call(i,h)&&e.indexOf(h)<0&&(u[h]=i[h]);if(i!=null&&V)for(var h of V(i))e.indexOf(h)<0&&j.call(i,h)&&(u[h]=i[h]);return u};var L=(i,e,u)=>(D(i,typeof e!="symbol"?e+"":e,u),u);(function(i,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):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.index={},i.Vue,i.dom))})(this,function(i,e,u){"use strict";const h={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function}};function R(t){return/^((http|https):)?\/\//.test(t)}const F={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"}},T={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function C(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:()=>C(n),e:a=>a?C(n,a):"",m:a=>a?C(n,"",a):"",em:(a,s)=>a&&s?C(n,a,s):""}}var de="",_=e.defineComponent({name:"DSvgIcon",props:T,setup(t){const{name:o,color:n,size:l}=e.toRefs(t),r=b("svg-icon"),c=e.computed(()=>`#icon-${o.value}`),d=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),a={width:d.value,height:d.value};return()=>e.createVNode("svg",{class:r.b(),style:a},[e.createVNode("use",{"xlink:href":c.value,fill:n.value},null)])}}),U=e.defineComponent({name:"DIcon",props:F,setup(t,{attrs:o}){const{component:n,name:l,size:r,color:c,classPrefix:d}=e.toRefs(t),a=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(_),s=e.computed(()=>typeof r.value=="number"?`${r.value}px`:r.value),y=()=>e.createVNode(a,e.mergeProps({name:l.value,color:c.value,size:s.value},o),null),f=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],style:{width:s.value||""}},o),null),p=()=>{const m=/^icon-/.test(l.value)?l.value:`${d.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[d.value,m],style:{fontSize:s.value,color:c.value}},o),null)};return()=>n.value?y():R(l.value)?f():p()}}),se="";function q(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const X=e.defineComponent({setup(t,o){const n=b("overlay");return()=>{let l;return e.createVNode(e.Teleport,{to:"#d-overlay-anchor"},{default:()=>[e.createVNode(e.Transition,{name:n.e("fade")},q(l=e.renderSlot(o.slots,"default"))?l:{default:()=>[l]})]})}}}),Y=S(N({},{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}}),H=["update:visible","backdropClick"];function K(t,o){const n=b("overlay"),l=e.computed(()=>[n.e("background"),t.backgroundClass,t.hasBackdrop?n.em("background","color"):n.em("background","disabled")]),r=e.computed(()=>n.b()),c=a=>{var s;a.preventDefault(),(s=t.onBackdropClick)==null||s.call(t),t.backdropClose&&o.emit("update:visible",!1)},d=a=>a.cancelBubble=!0;return e.onMounted(()=>{const a=document.body,s=a.style.overflow,y=a.style.position;e.watch([()=>t.visible,()=>t.backgroundBlock],([f,p])=>{if(p){const m=a.getBoundingClientRect().y;f?(a.style.overflowY="scroll",a.style.position=f?"fixed":"",a.style.top=`${m}px`):(a.style.overflowY=s,a.style.position=y,a.style.top="",window.scrollTo(0,-m))}}),e.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:l,overlayClass:r,handleBackdropClick:c,handleOverlayBubbleCancel:d}}var ue="";const G=e.defineComponent({name:"DFixedOverlay",props:Y,emits:H,setup(t,o){const{backgroundClass:n,overlayClass:l,handleBackdropClick:r,handleOverlayBubbleCancel:c}=K(t,o);return()=>e.createVNode(X,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:c},[e.renderSlot(o.slots,"default")])])]})}}),J={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 Q(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 W(t,o,n,l){let{x:r,y:c}=o;if(!t){const{width:d,height:a}=l;r&&n.includes("start")&&(r=12),r&&n.includes("end")&&(r=Math.round(d-24)),c&&n.includes("start")&&(c=10),c&&n.includes("end")&&(c=a-14)}return{x:r,y:c}}function Z(t,o){const n=e.ref(),l=e.ref();let r=null;const c=(a,s,y,f)=>{const{x:p,y:m}=W(t.isArrowCenter,y,s,f.getBoundingClientRect()),v={top:"bottom",right:"left",bottom:"top",left:"right"}[s.split("-")[0]];Object.assign(a.style,{left:p?`${p}px`:"",top:m?`${m}px`:"",right:"",bottom:"",[v]:"-4px"})},d=async()=>{const a=t.origin,s=e.unref(n.value),y=e.unref(l.value),f=[u.offset(t.offset),u.autoPlacement({alignment:t.align,allowedPlacements:t.position})];t.showArrow&&f.push(u.arrow({element:y})),t.shiftOffset!==void 0&&f.push(u.shift());const{x:p,y:m,placement:v,middlewareData:w}=await u.computePosition(a,s,{strategy:"fixed",middleware:f});let g=p,P=m;if(t.shiftOffset!==void 0){const{x:A,y:I}=w.shift;A<0&&(g-=t.shiftOffset),A>0&&(g+=t.shiftOffset),I<0&&(P-=t.shiftOffset),I>0&&(P+=t.shiftOffset)}o("positionChange",v),Object.assign(s.style,{top:`${P}px`,left:`${g}px`}),t.showArrow&&c(y,v,w.arrow,s)};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(r=Q(t.origin),e.nextTick(d),r==null||r.addEventListener("scroll",d),r!==window&&window.addEventListener("scroll",d),window.addEventListener("resize",d)):(r==null||r.removeEventListener("scroll",d),r!==window&&window.removeEventListener("scroll",d),window.removeEventListener("resize",d))}),e.onUnmounted(()=>{r==null||r.removeEventListener("scroll",d),r!==window&&window.removeEventListener("scroll",d),window.removeEventListener("resize",d)}),{arrowRef:l,overlayRef:n,updatePosition:d}}var fe="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:J,emits:["update:modelValue","positionChange"],setup(t,{slots:o,attrs:n,emit:l,expose:r}){const c=b("flexible-overlay"),{arrowRef:d,overlayRef:a,updatePosition:s}=Z(t,l);return r({updatePosition:s}),()=>{var y;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:a,class:c.b()},n),[(y=o.default)==null?void 0:y.call(o),t.showArrow&&e.createVNode("div",{ref:d,class:c.e("arrow")},null)])}}});const ee=typeof window!="undefined";function te(t,o){function n(){o("update:modelValue",!1)}function l(r){r||(t.beforeClose?t.beforeClose(n):n())}return{handleVisibleChange:l}}var x=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)])}}}),B=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)])}}}),me="",k=e.defineComponent({name:"DModal",inheritAttrs:!1,props:h,emits:["update:modelValue"],setup(t,{slots:o,attrs:n,emit:l,expose:r}){const c=b("modal"),{modelValue:d,lockScroll:a,closeOnClickOverlay:s,title:y}=e.toRefs(t),{handleVisibleChange:f}=te(t,l);return r({handleVisibleChange:f}),()=>{const p={visible:d.value,"onUpdate:visible":f,"background-class":c.e("mask"),"background-block":a.value,"backdrop-close":s.value};return e.createVNode(G,p,{default:()=>[e.createVNode(e.Transition,{name:c.m("wipe")},{default:()=>{var m;return[e.createVNode("div",e.mergeProps({class:c.b()},n),[e.createVNode(U,{name:"close",class:"btn-close",size:"var(--devui-font-size-md,12px)",onClick:()=>f(!1)},null),o.header?o.header():y.value&&e.createVNode(x,null,{default:()=>[y.value]}),e.createVNode(B,null,{default:()=>{var v;return[(v=o.default)==null?void 0:v.call(o)]}}),(m=o.footer)==null?void 0:m.call(o)])]}})]})}}}),M=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 oe{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 O;class E extends oe{component(){return k}open(o={}){const n=document.createElement("div");this.anchorContainer.appendChild(n);const f=o,{header:l,content:r,footer:c}=f,d=z(f,["header","content","footer"]),a=(p,m)=>this.renderModal(n,S(N({},p),{modelValue:!0,"onUpdate:modelValue":m}),{header:l,default:r,footer:c}),s=()=>{var m,v,w;const p=g=>{g||s()};a(d,g=>{g?a(d,p):(this.renderModal(n,S(N({},d),{modelValue:!1})),this.renderNull(n))}),(w=(v=(m=O==null?void 0:O.component)==null?void 0:m.exposed)==null?void 0:v.handleVisibleChange)==null||w.call(v,!1)},y=p=>{p||s()};return this.renderModal(n,{modelValue:!1}),O=a(d,y),{hide:s}}}L(E,"token","MODAL_SERVICE_TOKEN");var ne={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(t){if(t.component(k.name,k),t.component(x.name,x),t.component(B.name,B),t.component(M.name,M),!ee)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(E.token,new E(o))}};i.Modal=k,i.default=ne,i.modalProps=h,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+var le=Object.defineProperty,ae=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var D=(d,e,u)=>e in d?le(d,e,{enumerable:!0,configurable:!0,writable:!0,value:u}):d[e]=u,S=(d,e)=>{for(var u in e||(e={}))$.call(e,u)&&D(d,u,e[u]);if(E)for(var u of E(e))z.call(e,u)&&D(d,u,e[u]);return d},A=(d,e)=>ae(d,re(e));var R=(d,e)=>{var u={};for(var w in d)$.call(d,w)&&e.indexOf(w)<0&&(u[w]=d[w]);if(d!=null&&E)for(var w of E(d))e.indexOf(w)<0&&z.call(d,w)&&(u[w]=d[w]);return u};var L=(d,e,u)=>(D(d,typeof e!="symbol"?e+"":e,u),u);(function(d,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):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d.index={},d.Vue,d.dom))})(this,function(d,e,u){"use strict";const w={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function},escapable:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},showOverlay:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!0}},F={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},U={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function b(n,t,o){let l=n;return t&&(l+=`__${t}`),o&&(l+=`--${o}`),l}function C(n,t=!1){const o=t?`.devui-${n}`:`devui-${n}`;return{b:()=>b(o),e:r=>r?b(o,r):"",m:r=>r?b(o,"",r):"",em:(r,c)=>r&&c?b(o,r,c):""}}var se="",_=e.defineComponent({name:"DSvgIcon",props:U,setup(n){const{name:t,color:o,size:l}=e.toRefs(n),a=C("svg-icon"),s=e.computed(()=>`#icon-${t.value}`),i=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),r={width:i.value,height:i.value};return()=>e.createVNode("svg",{class:a.b(),style:r},[e.createVNode("use",{"xlink:href":s.value,fill:o.value},null)])}});function j(n){return/^((http|https):)?\/\//.test(n)}function H(n,t){const{component:o,name:l,size:a,color:s,classPrefix:i,rotate:r}=e.toRefs(n),c=C("icon"),f=e.computed(()=>typeof a.value=="number"?`${a.value}px`:a.value),p=o.value?e.resolveDynamicComponent(o.value):e.resolveDynamicComponent(_),m=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],class:[(r==null?void 0:r.value)==="infinite"&&c.m("spin")],style:{width:f.value||"",transform:`rotate(${r==null?void 0:r.value}deg)`,verticalAlign:"middle"}},t.attrs),null),h=()=>e.createVNode(p,e.mergeProps({name:l.value,color:s.value,size:f.value,class:[(r==null?void 0:r.value)==="infinite"&&c.m("spin")],style:{transform:`rotate(${r==null?void 0:r.value}deg)`}},t.attrs),null),v=()=>{const y=/^icon-/.test(l.value)?l.value:`${i.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[i.value,y,(r==null?void 0:r.value)==="infinite"&&c.m("spin")],style:{fontSize:f.value,color:s.value,transform:`rotate(${r==null?void 0:r.value}deg)`}},t.attrs),null)};return{iconDom:()=>o.value?h():j(l.value)?m():v()}}var q=e.defineComponent({name:"DIcon",props:F,emits:["click"],setup(n,t){const{disabled:o,operable:l}=e.toRefs(n),{iconDom:a}=H(n,t),s=C("icon"),i=e.computed(()=>({[s.e("container")]:!0,[s.m("disabled")]:o.value,[s.m("operable")]:l.value})),r=c=>{o.value||t.emit("click",c)};return()=>{var c,f,p,m;return e.createVNode("div",{class:i.value,onClick:r},[(f=(c=t.slots).prefix)==null?void 0:f.call(c),a(),(m=(p=t.slots).suffix)==null?void 0:m.call(p)])}}}),de="";e.defineComponent({name:"DIconGroup",setup(n,t){const o=C("icon-group");return()=>{var l,a;return e.createVNode("div",{class:o.b()},[(a=(l=t.slots).default)==null?void 0:a.call(l)])}}});const X={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function P(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const n=document.documentElement.scrollTop,t=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${n}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=n}}}function Y(n,t){let o;const l=s=>{s.preventDefault(),t.emit("click",s),n.closeOnClickOverlay&&t.emit("update:modelValue",!1)},a=()=>{o==null||o()};return e.watch(()=>n.modelValue,s=>{s?n.lockScroll&&(o=P()):a()}),e.onUnmounted(a),{onClick:l}}var ce="";const G=e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:X,emits:["update:modelValue","click"],setup(n,t){const{modelValue:o}=e.toRefs(n),l=C("fixed-overlay"),{onClick:a}=Y(n,t);return()=>e.createVNode(e.Transition,{name:l.m("fade")},{default:()=>{var s,i;return[o.value&&e.createVNode("div",e.mergeProps({class:l.b()},t.attrs,{onClick:a}),[(i=(s=t.slots).default)==null?void 0:i.call(s)])]}})}}),K={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 J(n){const t=/(auto|scroll|hidden)/;for(let o=n;o=o.parentElement;o.parentElement!==document.body){const l=window.getComputedStyle(o);if(t.test(l.overflow+l.overflowX+l.overflowY))return o}return window}function Q(n,t,o,l){let{x:a,y:s}=t;if(!n){const{width:i,height:r}=l;a&&o.includes("start")&&(a=12),a&&o.includes("end")&&(a=Math.round(i-24)),s&&o.includes("start")&&(s=10),s&&o.includes("end")&&(s=r-14)}return{x:a,y:s}}function W(n,t){const o=e.ref(),l=e.ref();let a=null;const s=(r,c,f,p)=>{const{x:m,y:h}=Q(n.isArrowCenter,f,c,p.getBoundingClientRect()),v={top:"bottom",right:"left",bottom:"top",left:"right"}[c.split("-")[0]];Object.assign(r.style,{left:m?`${m}px`:"",top:h?`${h}px`:"",right:"",bottom:"",[v]:"-4px"})},i=async()=>{const r=n.origin,c=e.unref(o.value),f=e.unref(l.value),p=[u.offset(n.offset),u.autoPlacement({alignment:n.align,allowedPlacements:n.position})];n.showArrow&&p.push(u.arrow({element:f})),n.shiftOffset!==void 0&&p.push(u.shift());const{x:m,y:h,placement:v,middlewareData:g}=await u.computePosition(r,c,{strategy:"fixed",middleware:p});let y=m,B=h;if(n.shiftOffset!==void 0){const{x:T,y:I}=g.shift;T<0&&(y-=n.shiftOffset),T>0&&(y+=n.shiftOffset),I<0&&(B-=n.shiftOffset),I>0&&(B+=n.shiftOffset)}t("positionChange",v),Object.assign(c.style,{top:`${B}px`,left:`${y}px`}),n.showArrow&&s(f,v,g.arrow,c)};return e.watch(()=>n.modelValue,()=>{n.modelValue&&n.origin?(a=J(n.origin),e.nextTick(i),a==null||a.addEventListener("scroll",i),a!==window&&window.addEventListener("scroll",i),window.addEventListener("resize",i)):(a==null||a.removeEventListener("scroll",i),a!==window&&window.removeEventListener("scroll",i),window.removeEventListener("resize",i))}),e.onUnmounted(()=>{a==null||a.removeEventListener("scroll",i),a!==window&&window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}),{arrowRef:l,overlayRef:o,updatePosition:i}}var ue="";e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:K,emits:["update:modelValue","positionChange"],setup(n,{slots:t,attrs:o,emit:l,expose:a}){const s=C("flexible-overlay"),{arrowRef:i,overlayRef:r,updatePosition:c}=W(n,l);return a({updatePosition:c}),()=>{var f;return n.modelValue&&e.createVNode("div",e.mergeProps({ref:r,class:s.b()},o),[(f=t.default)==null?void 0:f.call(t),n.showArrow&&e.createVNode("div",{ref:i,class:s.e("arrow")},null)])}}});const Z=typeof window!="undefined";function ee(n,t){function o(){t("update:modelValue",!1)}function l(){n.beforeClose?n.beforeClose(o):o()}function a(){n.closeOnClickOverlay&&l()}function s(){l()}function i(r){r.keyCode===27&&l()}return e.onMounted(()=>{n.escapable&&window.addEventListener("keydown",i)}),e.onUnmounted(()=>{n.escapable&&window.addEventListener("keydown",i)}),{onCloseBtnClick:s,onOverlayClick:a}}function te(n){const t=e.ref(!1),o=e.ref(!1);let l;const a=()=>{l==null||l()};return e.watch(()=>n.modelValue,s=>{s?(n.lockScroll&&(l=P()),t.value=!0,e.nextTick(()=>{o.value=!0})):(a(),o.value=!1,setTimeout(()=>{t.value=!1},100))},{immediate:!0}),e.onUnmounted(a),{showContainer:t,showModal:o}}var N=e.defineComponent({name:"DModalHeader",setup(n,{slots:t}){const o=C("modal");return()=>{var l;return e.createVNode("div",{class:o.e("header")},[(l=t.default)==null?void 0:l.call(t)])}}}),k=e.defineComponent({name:"DModalBody",setup(n,{slots:t}){const o=C("modal");return()=>{var l;return e.createVNode("div",{class:o.e("body")},[(l=t.default)==null?void 0:l.call(t)])}}}),fe="",V=e.defineComponent({name:"DModal",inheritAttrs:!1,props:w,emits:["update:modelValue"],setup(n,{slots:t,attrs:o,emit:l}){const a=C("modal"),{modelValue:s,title:i,showClose:r,showOverlay:c,appendToBody:f}=e.toRefs(n),{onCloseBtnClick:p,onOverlayClick:m}=ee(n,l),{showContainer:h,showModal:v}=te(n);return()=>e.createVNode(e.Teleport,{to:"body",disabled:!f.value},{default:()=>[c.value&&e.createVNode(G,{modelValue:s.value,"onUpdate:modelValue":g=>s.value=g,"lock-scroll":!1,style:{zIndex:"calc(var(--devui-z-index-modal, 1050) - 1)"}},null),h.value&&e.createVNode("div",{class:a.e("container"),onClick:m},[e.createVNode(e.Transition,{name:a.m("wipe")},{default:()=>{var g;return[v.value&&e.createVNode("div",e.mergeProps({class:a.b()},o,{onClick:y=>y.stopPropagation()}),[r.value&&e.createVNode(q,{name:"close",class:"btn-close",size:"var(--devui-font-size-md,12px)",onClick:p},null),t.header?t.header():i.value&&e.createVNode(N,null,{default:()=>[i.value]}),e.createVNode(k,null,{default:()=>{var y;return[(y=t.default)==null?void 0:y.call(t)]}}),(g=t.footer)==null?void 0:g.call(t)])]}})])]})}}),M=e.defineComponent({name:"DModalFooter",setup(n,{slots:t}){const o=C("modal");return()=>{var l;return e.createVNode("div",{class:o.e("footer")},[(l=t.default)==null?void 0:l.call(t)])}}});class ne{constructor(t){this.anchorContainer=t}renderModal(t,o,l){const a=e.h(this.component(),o,l);return e.render(a,t),a}renderNull(t){setTimeout(()=>{e.render(null,t)},500)}}let O;class x extends ne{component(){return V}open(t={}){const o=document.createElement("div");this.anchorContainer.appendChild(o);const p=t,{header:l,content:a,footer:s}=p,i=R(p,["header","content","footer"]),r=(m,h)=>this.renderModal(o,A(S({},m),{modelValue:!0,"onUpdate:modelValue":h}),{header:l,default:a,footer:s}),c=()=>{var h,v,g;const m=y=>{y||c()};r(i,y=>{y?r(i,m):(this.renderModal(o,A(S({},i),{modelValue:!1})),this.renderNull(o))}),(g=(v=(h=O==null?void 0:O.component)==null?void 0:h.exposed)==null?void 0:v.handleVisibleChange)==null||g.call(v,!1)},f=m=>{m||c()};return this.renderModal(o,{modelValue:!1}),O=r(i,f),{hide:c}}}L(x,"token","MODAL_SERVICE_TOKEN");var oe={title:"Modal \u5F39\u7A97",category:"\u53CD\u9988",status:"100%",install(n){if(n.component(V.name,V),n.component(N.name,N),n.component(k.name,k),n.component(M.name,M),!Z)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)),n.provide(x.token,new x(t))}};d.Modal=V,d.default=oe,d.modalProps=w,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/modal/style.css

@@ -1 +1 @@
-.devui-svg-icon{vertical-align:middle}@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-modal__mask{justify-content:center;align-items:center;background-color:var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-modal{position:relative;width:300px;border-radius:var(--devui-border-radius, 2px);border:none;background-color:var(--devui-fullscreen-overlay-bg, #ffffff);background-clip:padding-box;outline:0;box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-modal .btn-close{position:absolute;right:16px;top:16px;width:20px;height:20px;line-height:20px;text-align:center;color:#000;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.devui-modal .btn-close:hover{color:var(--devui-icon-fill-active-hover, #526ecc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-modal-content{background:var(--devui-fullscreen-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.devui-modal__header{width:100%;height:56px;padding:32px 32px 0;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;box-sizing:border-box;border:none;user-select:none}.devui-modal__header .header-alert-icon{display:inline-block;vertical-align:middle;margin-right:8px;line-height:16px;text-align:center}.devui-modal__body{padding:20px 32px;font-size:var(--devui-font-size, 12px);color:var(--devui-text-weak, #575d6c);box-sizing:border-box}.devui-modal__footer{width:100%;border-top:none;text-align:center;padding:0 32px 24px;box-sizing:border-box}.devui-modal__footer>*{margin:0 4px}@keyframes wipe-in-out{0%{opacity:.2;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}.devui-modal--wipe-enter-from{opacity:.2}.devui-modal--wipe-enter-active{animation-name:wipe-in-out;animation-duration:.3s}.devui-modal--wipe-leave-to{opacity:1}.devui-modal--wipe-leave-active{animation-name:wipe-in-out;animation-duration:.3s;animation-direction:reverse}
+.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 4px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.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-modal__container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--devui-z-index-modal, 1050);outline:0;overflow-y:auto;display:flex;flex-direction:column}.devui-modal{position:relative;width:300px;margin:auto;border-radius:var(--devui-border-radius, 4px);border:none;opacity:1;transform:translateY(0);background-color:var(--devui-fullscreen-overlay-bg, #ffffff);background-clip:padding-box;outline:0;box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 12px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-modal .btn-close{position:absolute;right:16px;top:16px;width:20px;height:20px;line-height:20px;text-align:center;color:#000;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.devui-modal .btn-close:hover{color:var(--devui-icon-fill-active-hover, #252b3a);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-modal .btn-close i{position:absolute;right:0;top:0}.devui-modal-content{background:var(--devui-fullscreen-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 4px)}.devui-modal__header{width:100%;height:56px;padding:32px 32px 0;font-size:var(--devui-font-size-card-title, 16px);font-weight:700;box-sizing:border-box;border:none;user-select:none}.devui-modal__header .header-alert-icon{display:inline-block;vertical-align:middle;margin-right:8px;line-height:16px;text-align:center}.devui-modal__body{padding:20px 32px;font-size:var(--devui-font-size, 14px);color:var(--devui-text-weak, #575d6c);box-sizing:border-box}.devui-modal__footer{width:100%;border-top:none;text-align:center;padding:0 32px 24px;box-sizing:border-box}.devui-modal__footer>*{margin:0 4px}.devui-modal--wipe-enter-active{transition:opacity .1s cubic-bezier(.16,.75,.5,1),transform .1s cubic-bezier(0,0,1,1)}.devui-modal--wipe-leave-active{transition:opacity .1s cubic-bezier(.5,0,.84,.25),transform .1s cubic-bezier(0,0,1,1)}.devui-modal--wipe-enter-from,.devui-modal--wipe-leave-to{opacity:.2;transform:translateY(-24px)}