vue-devui 1.0.0-rc.2 → 1.0.0-rc.5

package/loading/index.es.js

@@ -28,7 +28,7 @@ class View {
     __publicField(this, "left", "50%");
   }
 }
-const componentProps = {
+const loadingProps = {
   message: String,
   backdrop: Boolean,
   view: {
@@ -41,7 +41,7 @@ const componentProps = {
     default: false
   }
 };
-class LoadingProps {
+class LoadingOptions {
   constructor() {
     __publicField(this, "target");
     __publicField(this, "message");
@@ -56,7 +56,7 @@ var loading$1 = "";
 var Loading = defineComponent({
   name: "DLoading",
   inheritAttrs: false,
-  props: componentProps,
+  props: loadingProps,
   setup(props) {
     const style = {
       top: props.view.top,
@@ -115,8 +115,8 @@ var Loading = defineComponent({
   }
 });
 const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
-function createComponent(Component, props, children = null) {
-  const vnode = h(Component, __spreadValues({}, props), children);
+function createComponent(component, props, children = null) {
+  const vnode = h(component, __spreadValues({}, props), children);
   const container = document.createElement("div");
   vnode[COMPONENT_CONTAINER_SYMBOL] = container;
   render(vnode, container);
@@ -128,14 +128,18 @@ function unmountComponent(ComponnetInstance) {
 const loadingConstructor$1 = defineComponent(Loading);
 const cacheInstance = /* @__PURE__ */ new WeakSet();
 const isEmpty = (val) => {
-  if (!val)
+  if (!val) {
     return true;
-  if (Array.isArray(val))
+  }
+  if (Array.isArray(val)) {
     return val.length === 0;
-  if (val instanceof Set || val instanceof Map)
+  }
+  if (val instanceof Set || val instanceof Map) {
     return val.size === 0;
-  if (val instanceof Promise)
+  }
+  if (val instanceof Promise) {
     return false;
+  }
   if (typeof val === "object") {
     try {
       return Object.keys(val).length === 0;
@@ -169,11 +173,13 @@ const unmount = (el) => {
   unmountComponent(el.instance);
 };
 const toggleLoading = (el, binding) => {
+  var _a, _b, _c;
   if (binding.value) {
     const vals = isPromise(binding.value);
-    if (vals === "error")
+    if (vals === "error") {
       return;
-    el.instance.proxy.open();
+    }
+    (_c = (_b = (_a = el == null ? void 0 : el.instance) == null ? void 0 : _a.proxy) == null ? void 0 : _b.open) == null ? void 0 : _c.call(_b);
     el.appendChild(el.mask);
     cacheInstance.add(el);
     if (vals) {
@@ -196,13 +202,14 @@ const removeAttribute = (el) => {
   el.removeAttribute("loadingtemplateref");
 };
 const handleProps = (el, vprops) => {
-  const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
+  var _a;
+  const props = __spreadValues(__spreadValues({}, new LoadingOptions()), vprops);
   const loadingTemplateRef = props.loadingTemplateRef;
   const loadingInstance = createComponent(loadingConstructor$1, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
   el.style.position = props.positionType;
   el.options = props;
   el.instance = loadingInstance;
-  el.mask = loadingInstance.proxy.$el;
+  el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
 };
 const loadingDirective = {
   mounted: function(el, binding, vnode) {
@@ -211,8 +218,9 @@ const loadingDirective = {
     !isEmpty(binding.value) && toggleLoading(el, binding);
   },
   updated: function(el, binding, vnode) {
-    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el))
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el)) {
       return;
+    }
     !cacheInstance.has(el) && handleProps(el, vnode.props);
     removeAttribute(el);
     toggleLoading(el, binding);
@@ -222,25 +230,32 @@ const loadingConstructor = defineComponent(Loading);
 const cacheTarget = /* @__PURE__ */ new WeakMap();
 const loading = {
   open(options = {}) {
+    var _a, _b, _c;
     const parent = options.target || document.body;
     if (cacheTarget.has(parent)) {
       return cacheTarget.get(parent);
     }
-    parent.style.position = options.positionType;
+    if (parent.style) {
+      parent.style.position = options.positionType;
+    }
     const isFull = document.body === parent;
-    options = __spreadValues(__spreadValues({}, new LoadingProps()), options);
+    options = __spreadValues(__spreadValues({}, new LoadingOptions()), options);
     const instance = createComponent(loadingConstructor, __spreadProps(__spreadValues({}, options), {
       isFull
     }), options.loadingTemplateRef ? () => options.loadingTemplateRef : null);
     cacheTarget.set(parent, instance);
-    instance.proxy.open();
-    parent.appendChild(instance.proxy.$el);
-    const close = instance.proxy.close;
-    instance.loadingInstance = instance.proxy;
-    instance.loadingInstance.close = (...args) => {
-      cacheTarget.delete(parent);
-      close(...args);
-    };
+    (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.open();
+    parent.appendChild((_b = instance == null ? void 0 : instance.proxy) == null ? void 0 : _b.$el);
+    const close = (_c = instance == null ? void 0 : instance.proxy) == null ? void 0 : _c.close;
+    if (instance) {
+      instance.loadingInstance = instance == null ? void 0 : instance.proxy;
+      if (instance.loadingInstance) {
+        instance.loadingInstance.close = (...args) => {
+          cacheTarget.delete(parent);
+          close == null ? void 0 : close(...args);
+        };
+      }
+    }
     return instance;
   }
 };
@@ -253,4 +268,4 @@ var index = {
     app.config.globalProperties.$loadingService = loading;
   }
 };
-export { loadingDirective as Loading, loading as LoadingService, index as default };
+export { loadingDirective as Loading, LoadingOptions, loading as LoadingService, index as default, loadingProps };

package/loading/index.umd.js

@@ -1 +1 @@
-var M=Object.defineProperty,R=Object.defineProperties;var _=Object.getOwnPropertyDescriptors;var k=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var g=(r,t,s)=>t in r?M(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s,c=(r,t)=>{for(var s in t||(t={}))D.call(t,s)&&g(r,s,t[s]);if(k)for(var s of k(t))I.call(t,s)&&g(r,s,t[s]);return r},P=(r,t)=>R(r,_(t));var d=(r,t,s)=>(g(r,typeof t!="symbol"?t+"":t,s),s);(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r.index={},r.Vue))})(this,function(r,t){"use strict";class s{constructor(){d(this,"top","50%");d(this,"left","50%")}}const L={message:String,backdrop:Boolean,view:{type:Object,default:()=>new s},zIndex:Number,isFull:{type:Boolean,default:!1}};class m{constructor(){d(this,"target");d(this,"message");d(this,"loadingTemplateRef");d(this,"backdrop",!0);d(this,"positionType","relative");d(this,"view",new s);d(this,"zIndex")}}var B="",y=t.defineComponent({name:"DLoading",inheritAttrs:!1,props:L,setup(e){const n={top:e.view.top,left:e.view.left,zIndex:e.zIndex};e.message||(n.background="none");const o=t.ref(!1);return{style:n,isShow:o,open:()=>{o.value=!0},close:()=>{o.value=!1}}},render(){var V;const{isShow:e,isFull:n,backdrop:o,style:i,message:a,$slots:u}=this;return e&&t.createVNode("div",{class:["devui-loading-contanier",n?"devui-loading--full":""]},[((V=u.default)==null?void 0:V.call(u))||t.createVNode("div",{class:"devui-loading-wrapper"},[o?t.createVNode("div",{class:"devui-loading-mask"},null):null,t.createVNode("div",{style:i,class:"devui-loading-area"},[t.createVNode("div",{class:"devui-busy-default-spinner"},[t.createVNode("div",{class:"devui-loading-bar1"},null),t.createVNode("div",{class:"devui-loading-bar2"},null),t.createVNode("div",{class:"devui-loading-bar3"},null),t.createVNode("div",{class:"devui-loading-bar4"},null)]),a?t.createVNode("span",{class:"devui-loading-text"},[a]):null])])])}});const v=Symbol("dev_component_container");function b(e,n,o=null){const i=t.h(e,c({},n),o),a=document.createElement("div");return i[v]=a,t.render(i,a),i.component}function C(e){t.render(null,e==null?void 0:e.vnode[v])}const O=t.defineComponent(y),l=new WeakSet,f=e=>{if(!e)return!0;if(Array.isArray(e))return e.length===0;if(e instanceof Set||e instanceof Map)return e.size===0;if(e instanceof Promise)return!1;if(typeof e=="object")try{return Object.keys(e).length===0}catch{return!1}return!1},h=e=>Object.prototype.toString.call(e).slice(8,-1).toLowerCase(),j=e=>{switch(h(e)){case"promise":return[e];case"array":return e.some(o=>h(o)!=="promise")?(console.error(new TypeError("Binding values should all be of type Promise")),"error"):e;default:return!1}},w=e=>{l.delete(e),e.instance.proxy.close(),C(e.instance)},T=(e,n)=>{if(n.value){const o=j(n.value);if(o==="error")return;e.instance.proxy.open(),e.appendChild(e.mask),l.add(e),o&&Promise.all(o).catch(i=>{console.error(new Error("Promise handling errors"),i)}).finally(()=>{w(e)})}else w(e)},N=e=>{e.removeAttribute("zindex"),e.removeAttribute("positiontype"),e.removeAttribute("backdrop"),e.removeAttribute("message"),e.removeAttribute("view"),e.removeAttribute("loadingtemplateref")},x=(e,n)=>{const o=c(c({},new m),n),i=o.loadingTemplateRef,a=b(O,c({},o),i?()=>i:null);e.style.position=o.positionType,e.options=o,e.instance=a,e.mask=a.proxy.$el},A={mounted:function(e,n,o){x(e,o.props),N(e),!f(n.value)&&T(e,n)},updated:function(e,n,o){!f(n.value)&&l.has(e)||f(n.value)&&!l.has(e)||(!l.has(e)&&x(e,o.props),N(e),T(e,n))}},z=t.defineComponent(y),p=new WeakMap,S={open(e={}){const n=e.target||document.body;if(p.has(n))return p.get(n);n.style.position=e.positionType;const o=document.body===n;e=c(c({},new m),e);const i=b(z,P(c({},e),{isFull:o}),e.loadingTemplateRef?()=>e.loadingTemplateRef:null);p.set(n,i),i.proxy.open(),n.appendChild(i.proxy.$el);const a=i.proxy.close;return i.loadingInstance=i.proxy,i.loadingInstance.close=(...u)=>{p.delete(n),a(...u)},i}};var E={title:"Loading \u52A0\u8F7D\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(e){e.directive("dLoading",A),e.config.globalProperties.$loadingService=S}};r.Loading=A,r.LoadingService=S,r.default=E,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
+var _=Object.defineProperty,D=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var y=(r,t,s)=>t in r?_(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s,c=(r,t)=>{for(var s in t||(t={}))F.call(t,s)&&y(r,s,t[s]);if(P)for(var s of P(t))I.call(t,s)&&y(r,s,t[s]);return r},O=(r,t)=>D(r,B(t));var l=(r,t,s)=>(y(r,typeof t!="symbol"?t+"":t,s),s);(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r.index={},r.Vue))})(this,function(r,t){"use strict";class s{constructor(){l(this,"top","50%");l(this,"left","50%")}}const v={message:String,backdrop:Boolean,view:{type:Object,default:()=>new s},zIndex:Number,isFull:{type:Boolean,default:!1}};class g{constructor(){l(this,"target");l(this,"message");l(this,"loadingTemplateRef");l(this,"backdrop",!0);l(this,"positionType","relative");l(this,"view",new s);l(this,"zIndex")}}var $="",b=t.defineComponent({name:"DLoading",inheritAttrs:!1,props:v,setup(e){const n={top:e.view.top,left:e.view.left,zIndex:e.zIndex};e.message||(n.background="none");const i=t.ref(!1);return{style:n,isShow:i,open:()=>{i.value=!0},close:()=>{i.value=!1}}},render(){var u;const{isShow:e,isFull:n,backdrop:i,style:o,message:a,$slots:d}=this;return e&&t.createVNode("div",{class:["devui-loading-contanier",n?"devui-loading--full":""]},[((u=d.default)==null?void 0:u.call(d))||t.createVNode("div",{class:"devui-loading-wrapper"},[i?t.createVNode("div",{class:"devui-loading-mask"},null):null,t.createVNode("div",{style:o,class:"devui-loading-area"},[t.createVNode("div",{class:"devui-busy-default-spinner"},[t.createVNode("div",{class:"devui-loading-bar1"},null),t.createVNode("div",{class:"devui-loading-bar2"},null),t.createVNode("div",{class:"devui-loading-bar3"},null),t.createVNode("div",{class:"devui-loading-bar4"},null)]),a?t.createVNode("span",{class:"devui-loading-text"},[a]):null])])])}});const h=Symbol("dev_component_container");function w(e,n,i=null){const o=t.h(e,c({},n),i),a=document.createElement("div");return o[h]=a,t.render(o,a),o.component}function C(e){t.render(null,e==null?void 0:e.vnode[h])}const j=t.defineComponent(b),p=new WeakSet,m=e=>{if(!e)return!0;if(Array.isArray(e))return e.length===0;if(e instanceof Set||e instanceof Map)return e.size===0;if(e instanceof Promise)return!1;if(typeof e=="object")try{return Object.keys(e).length===0}catch{return!1}return!1},T=e=>Object.prototype.toString.call(e).slice(8,-1).toLowerCase(),z=e=>{switch(T(e)){case"promise":return[e];case"array":return e.some(i=>T(i)!=="promise")?(console.error(new TypeError("Binding values should all be of type Promise")),"error"):e;default:return!1}},N=e=>{p.delete(e),e.instance.proxy.close(),C(e.instance)},A=(e,n)=>{var i,o,a;if(n.value){const d=z(n.value);if(d==="error")return;(a=(o=(i=e==null?void 0:e.instance)==null?void 0:i.proxy)==null?void 0:o.open)==null||a.call(o),e.appendChild(e.mask),p.add(e),d&&Promise.all(d).catch(u=>{console.error(new Error("Promise handling errors"),u)}).finally(()=>{N(e)})}else N(e)},x=e=>{e.removeAttribute("zindex"),e.removeAttribute("positiontype"),e.removeAttribute("backdrop"),e.removeAttribute("message"),e.removeAttribute("view"),e.removeAttribute("loadingtemplateref")},S=(e,n)=>{var d;const i=c(c({},new g),n),o=i.loadingTemplateRef,a=w(j,c({},i),o?()=>o:null);e.style.position=i.positionType,e.options=i,e.instance=a,e.mask=(d=a==null?void 0:a.proxy)==null?void 0:d.$el},V={mounted:function(e,n,i){S(e,i.props),x(e),!m(n.value)&&A(e,n)},updated:function(e,n,i){!m(n.value)&&p.has(e)||m(n.value)&&!p.has(e)||(!p.has(e)&&S(e,i.props),x(e),A(e,n))}},E=t.defineComponent(b),f=new WeakMap,k={open(e={}){var d,u,L;const n=e.target||document.body;if(f.has(n))return f.get(n);n.style&&(n.style.position=e.positionType);const i=document.body===n;e=c(c({},new g),e);const o=w(E,O(c({},e),{isFull:i}),e.loadingTemplateRef?()=>e.loadingTemplateRef:null);f.set(n,o),(d=o==null?void 0:o.proxy)==null||d.open(),n.appendChild((u=o==null?void 0:o.proxy)==null?void 0:u.$el);const a=(L=o==null?void 0:o.proxy)==null?void 0:L.close;return o&&(o.loadingInstance=o==null?void 0:o.proxy,o.loadingInstance&&(o.loadingInstance.close=(...R)=>{f.delete(n),a==null||a(...R)})),o}};var M={title:"Loading \u52A0\u8F7D\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(e){e.directive("dLoading",V),e.config.globalProperties.$loadingService=k}};r.Loading=V,r.LoadingOptions=g,r.LoadingService=k,r.default=M,r.loadingProps=v,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package/modal/index.es.js

@@ -34,7 +34,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { defineComponent, toRefs, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, h, render } from "vue";
-import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
+import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const modalProps = {
   modelValue: {
     type: Boolean,
@@ -249,6 +249,9 @@ const flexibleOverlayProps = {
     type: [Number, Object],
     default: 8
   },
+  shiftOffset: {
+    type: Number
+  },
   align: {
     type: String,
     default: null
@@ -294,6 +297,7 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
 function useOverlay(props, emit) {
   const overlayRef = ref();
   const arrowRef = ref();
+  let originParent = null;
   const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
     const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
     const staticSide = {
@@ -315,7 +319,6 @@ function useOverlay(props, emit) {
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
     const middleware = [
-      shift(),
       offset(props.offset),
       autoPlacement({
         alignment: props.align,
@@ -323,30 +326,39 @@ function useOverlay(props, emit) {
       })
     ];
     props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
       middleware
     });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
+    }
     emit("positionChange", placement);
-    Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
   watch(() => props.modelValue, () => {
-    const originParent = getScrollParent(props.origin);
     if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent.addEventListener("scroll", updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
       originParent !== window && window.addEventListener("scroll", updatePosition);
       window.addEventListener("resize", updatePosition);
     } else {
-      originParent.removeEventListener("scroll", updatePosition);
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
       originParent !== window && window.removeEventListener("scroll", updatePosition);
       window.removeEventListener("resize", updatePosition);
     }
   });
   onUnmounted(() => {
-    const originParent = getScrollParent(props.origin);
-    originParent.removeEventListener("scroll", updatePosition);
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
     originParent !== window && window.removeEventListener("scroll", updatePosition);
     window.removeEventListener("resize", updatePosition);
   });
@@ -446,36 +458,39 @@ var Modal = defineComponent({
     expose({
       handleVisibleChange
     });
-    return () => createVNode(FixedOverlay, {
-      "visible": modelValue.value,
-      "onUpdate:visible": handleVisibleChange,
-      "background-class": "devui-modal-mask",
-      "background-block": lockScroll.value,
-      "backdrop-close": closeOnClickOverlay.value
-    }, {
-      default: () => [createVNode(Transition, {
-        "name": "devui-modal-wipe"
-      }, {
-        default: () => {
-          var _a;
-          return [createVNode("div", mergeProps({
-            "class": "devui-modal"
-          }, 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)])];
-        }
-      })]
-    });
+    return () => {
+      const fixedOverlayProps2 = {
+        visible: modelValue.value,
+        "onUpdate:visible": handleVisibleChange,
+        "background-class": "devui-modal-mask",
+        "background-block": lockScroll.value,
+        "backdrop-close": closeOnClickOverlay.value
+      };
+      return createVNode(FixedOverlay, fixedOverlayProps2, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-modal-wipe"
+        }, {
+          default: () => {
+            var _a;
+            return [createVNode("div", mergeProps({
+              "class": "devui-modal"
+            }, 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({
@@ -515,31 +530,36 @@ class ModalService extends CommonModalService {
     const anchor = document.createElement("div");
     this.anchorContainer.appendChild(anchor);
     const _a = props, { header, content, footer } = _a, resProps = __objRest(_a, ["header", "content", "footer"]);
-    const needHideOrNot = (value) => {
-      if (!value) {
-        hide();
-      }
-    };
-    const renderOrigin = (props2, onUpdateModelValue = needHideOrNot) => {
-      return this.renderModal(anchor, __spreadProps(__spreadValues({}, props2), {
+    const renderOrigin = (propsValue, onUpdateModelValue) => {
+      return this.renderModal(anchor, __spreadProps(__spreadValues({}, propsValue), {
         modelValue: true,
         "onUpdate:modelValue": onUpdateModelValue
       }), { header, default: content, footer });
     };
     const hide = () => {
-      var _a2, _b;
+      var _a2, _b, _c;
+      const innerNeedHideOrNot = (value) => {
+        if (!value) {
+          hide();
+        }
+      };
       renderOrigin(resProps, (value) => {
         if (!value) {
           this.renderModal(anchor, __spreadProps(__spreadValues({}, resProps), { modelValue: false }));
           this.renderNull(anchor);
         } else {
-          renderOrigin(resProps);
+          renderOrigin(resProps, innerNeedHideOrNot);
         }
       });
-      (_b = (_a2 = vm.component.exposed).handleVisibleChange) == null ? void 0 : _b.call(_a2, false);
+      (_c = (_b = (_a2 = vm == null ? void 0 : vm.component) == null ? void 0 : _a2.exposed) == null ? void 0 : _b.handleVisibleChange) == null ? void 0 : _c.call(_b, false);
+    };
+    const needHideOrNot = (value) => {
+      if (!value) {
+        hide();
+      }
     };
     this.renderModal(anchor, { modelValue: false });
-    vm = renderOrigin(resProps);
+    vm = renderOrigin(resProps, needHideOrNot);
     return { hide };
   }
 }
@@ -565,4 +585,4 @@ var index = {
     app.provide(ModalService.token, new ModalService(anchorsContainer));
   }
 };
-export { Modal, index as default };
+export { Modal, index as default, modalProps };

package/modal/index.umd.js

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

package/notification/index.es.js

@@ -100,6 +100,105 @@ var Close = defineComponent({
     }, null)]);
   }
 });
+function SuccessIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("defs", null, [createVNode("polygon", {
+    "id": "path-s",
+    "points": "6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391            6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
+  }, null)]), createVNode("g", {
+    "id": "correct",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("mask", {
+    "id": "mask-2",
+    "fill": "white"
+  }, [createVNode("use", {
+    "xlink:href": "#path-s"
+  }, null)]), createVNode("use", {
+    "id": "Mask",
+    "class": "devui-notification-image-success-path",
+    "xlink:href": "#path-s"
+  }, null)])]);
+}
+function WarningIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "class": "devui-icon-warning-outer",
+    "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117            15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873            0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
+  }, null), createVNode("path", {
+    "class": "devui-icon-warning-inner",
+    "stroke-width": "0.3",
+    "fill-rule": "nonzero",
+    "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105            L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
+  }, null)])]);
+}
+function InfoIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("g", {
+    "id": "info",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "class": "devui-notification-image-info-path",
+    "d": "M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z",
+    "id": "info"
+  }, null)])]);
+}
+function ErrorIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("defs", null, [createVNode("polygon", {
+    "id": "path-e",
+    "points": "8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085            10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425            8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
+  }, null)]), createVNode("g", {
+    "id": "error",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("mask", {
+    "id": "mask-2",
+    "fill": "white"
+  }, [createVNode("use", {
+    "xlink:href": "#path-e"
+  }, null)]), createVNode("use", {
+    "id": "Mask",
+    "class": "devui-notification-image-error-path",
+    "xlink:href": "#path-e"
+  }, null)])]);
+}
 var TypeIcon = defineComponent({
   props: {
     type: {
@@ -115,18 +214,9 @@ var TypeIcon = defineComponent({
       "devui-notification-image": true,
       [`devui-notification-image-${type.value}`]: true
     }));
-    const severityIconMap = {
-      info: "info-o",
-      success: "right-o",
-      warning: "warning-o",
-      error: "error-o"
-    };
     return () => createVNode("span", {
       "class": classes.value
-    }, [type.value !== "normal" && createVNode(Icon, {
-      "name": severityIconMap[type.value],
-      "size": "16px"
-    }, null)]);
+    }, [type.value && type.value !== "normal" && (type.value === "success" && createVNode(SuccessIcon, null, null) || type.value === "info" && createVNode(InfoIcon, null, null) || type.value === "warning" && createVNode(WarningIcon, null, null) || type.value === "error" && createVNode(ErrorIcon, null, null))]);
   }
 });
 function useNotification(props) {

package/notification/index.umd.js

@@ -1 +1 @@
-var I=Object.defineProperty,M=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var N=(i,e,l)=>e in i?I(i,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):i[e]=l,m=(i,e)=>{for(var l in e||(e={}))k.call(e,l)&&N(i,l,e[l]);if(v)for(var l of v(e))A.call(e,l)&&N(i,l,e[l]);return i},g=(i,e)=>M(i,R(e));(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.index={},i.Vue))})(this,function(i,e){"use strict";const l={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},type:{type:String,default:"normal"},duration:{type:Number,default:3e3},onClose:{type:Function}},S={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var p=e.defineComponent({name:"DIcon",props:S,setup(n){const{name:t,size:o,color:a,classPrefix:c}=e.toRefs(n);return()=>/^((https?):)?\/\//.test(t.value)?e.createVNode("img",{src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],style:{width:o.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${c.value} ${c.value}-${t.value}`,style:{fontSize:o.value,color:a.value}},null)}}),h=e.defineComponent({emits:["click"],setup(n,{emit:t}){return()=>e.createVNode("div",{class:"devui-notification-icon-close",onClick:o=>t("click",o)},[e.createVNode(p,{name:"close",size:"14px"},null)])}}),C=e.defineComponent({props:{type:{type:String,default:"normal"}},setup(n){const{type:t}=e.toRefs(n),o=e.computed(()=>({"devui-notification-image":!0,[`devui-notification-image-${t.value}`]:!0})),a={info:"info-o",success:"right-o",warning:"warning-o",error:"error-o"};return()=>e.createVNode("span",{class:o.value},[t.value!=="normal"&&e.createVNode(p,{name:a[t.value],size:"16px"},null)])}});function T(n){return{classes:e.computed(()=>({"devui-notification-item-container":!0,[`devui-notification-message-${n.type}`]:!0}))}}function b(n,t){let o=null,a;const c=()=>{var s;clearTimeout(o),o=null,(s=n.onClose)==null||s.call(n),t("update:modelValue",!1)},r=()=>{o&&(clearTimeout(o),o=null)},d=()=>{if(!n.modelValue){const s=n.duration-(Date.now()-a);o=setTimeout(c,s)}},f=()=>{t("destroy")};return e.watch(()=>n.modelValue,s=>{s&&(a=Date.now(),n.duration&&(o=setTimeout(c,n.duration)))}),{interrupt:r,removeReset:d,close:c,handleDestroy:f}}var E="",u=e.defineComponent({name:"DNotification",props:l,emits:["update:modelValue","destroy"],setup(n,{emit:t,slots:o}){const{modelValue:a,title:c,type:r}=e.toRefs(n),{classes:d}=T(n),{interrupt:f,removeReset:s,close:x,handleDestroy:z}=b(n,t);return()=>e.createVNode(e.Transition,{name:"notification-fade",onAfterLeave:z},{default:()=>{var V;return[a.value&&e.createVNode("div",{class:"devui-notification"},[e.createVNode("div",{class:d.value,onMouseenter:f,onMouseleave:s},[e.createVNode("div",{class:"devui-notification-item"},[e.createVNode(h,{onClick:x},null),c.value&&e.createVNode(C,{type:r.value},null),e.createVNode("div",{class:"devui-notification-message"},[e.createVNode("span",{class:"devui-notification-title"},[c.value]),e.createVNode("span",{class:"devui-notification-content"},[(V=o.default)==null?void 0:V.call(o)])])])])])]}})}});function D(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!e.isVNode(n)}const P={modelValue:!1,duration:3e3,type:"normal"};function w(n,t){const o=document.createElement("div"),a=e.createApp({setup(){return e.onUnmounted(()=>{document.body.removeChild(o)}),()=>e.createVNode(u,e.mergeProps(n,{onDestroy:a.unmount}),D(t)?t:{default:()=>[t]})}});return document.body.appendChild(o),a.mount(o),a}function $(n,t){n.modelValue=!1,t==null||t()}class y{static open(t){const o=t.onClose||null,a=t.content;let c;delete t.content;const r=e.reactive(g(m(m({},P),t),{onClose:()=>{$(r,o)}}));w(r,a),r.modelValue=!0,clearTimeout(c),t.duration&&(c=setTimeout(r.onClose,t.duration))}}var j={title:"Notification \u5168\u5C40\u901A\u77E5",category:"\u53CD\u9988",status:"100%",install(n){n.component(u.name,u),n.config.globalProperties.$notificationService=y}};i.Notification=u,i.NotificationService=y,i.default=j,i.notificationProps=l,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+var B=Object.defineProperty,R=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var w=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var V=(i,e,l)=>e in i?B(i,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):i[e]=l,m=(i,e)=>{for(var l in e||(e={}))A.call(e,l)&&V(i,l,e[l]);if(w)for(var l of w(e))E.call(e,l)&&V(i,l,e[l]);return i},g=(i,e)=>R(i,Z(e));(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.index={},i.Vue))})(this,function(i,e){"use strict";const l={modelValue:{type:Boolean,default:!1},title:{type:String,default:""},type:{type:String,default:"normal"},duration:{type:Number,default:3e3},onClose:{type:Function}},N={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var x=e.defineComponent({name:"DIcon",props:N,setup(n){const{name:t,size:o,color:a,classPrefix:r}=e.toRefs(n);return()=>/^((https?):)?\/\//.test(t.value)?e.createVNode("img",{src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],style:{width:o.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${r.value} ${r.value}-${t.value}`,style:{fontSize:o.value,color:a.value}},null)}}),y=e.defineComponent({emits:["click"],setup(n,{emit:t}){return()=>e.createVNode("div",{class:"devui-notification-icon-close",onClick:o=>t("click",o)},[e.createVNode(x,{name:"close",size:"14px"},null)])}});function k(){return e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("defs",null,[e.createVNode("polygon",{id:"path-s",points:"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391            6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"},null)]),e.createVNode("g",{id:"correct",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("mask",{id:"mask-2",fill:"white"},[e.createVNode("use",{"xlink:href":"#path-s"},null)]),e.createVNode("use",{id:"Mask",class:"devui-notification-image-success-path","xlink:href":"#path-s"},null)])])}function v(){return e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{class:"devui-icon-warning-outer",d:"M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117            15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873            0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"},null),e.createVNode("path",{class:"devui-icon-warning-inner","stroke-width":"0.3","fill-rule":"nonzero",d:"M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105            L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"},null)])])}function L(){return e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{id:"info",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{class:"devui-notification-image-info-path",d:"M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z",id:"info"},null)])])}function C(){return e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("defs",null,[e.createVNode("polygon",{id:"path-e",points:"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085            10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425            8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"},null)]),e.createVNode("g",{id:"error",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("mask",{id:"mask-2",fill:"white"},[e.createVNode("use",{"xlink:href":"#path-e"},null)]),e.createVNode("use",{id:"Mask",class:"devui-notification-image-error-path","xlink:href":"#path-e"},null)])])}var S=e.defineComponent({props:{type:{type:String,default:"normal"}},setup(n){const{type:t}=e.toRefs(n),o=e.computed(()=>({"devui-notification-image":!0,[`devui-notification-image-${t.value}`]:!0}));return()=>e.createVNode("span",{class:o.value},[t.value&&t.value!=="normal"&&(t.value==="success"&&e.createVNode(k,null,null)||t.value==="info"&&e.createVNode(L,null,null)||t.value==="warning"&&e.createVNode(v,null,null)||t.value==="error"&&e.createVNode(C,null,null))])}});function T(n){return{classes:e.computed(()=>({"devui-notification-item-container":!0,[`devui-notification-message-${n.type}`]:!0}))}}function M(n,t){let o=null,a;const r=()=>{var s;clearTimeout(o),o=null,(s=n.onClose)==null||s.call(n),t("update:modelValue",!1)},c=()=>{o&&(clearTimeout(o),o=null)},u=()=>{if(!n.modelValue){const s=n.duration-(Date.now()-a);o=setTimeout(r,s)}},f=()=>{t("destroy")};return e.watch(()=>n.modelValue,s=>{s&&(a=Date.now(),n.duration&&(o=setTimeout(r,n.duration)))}),{interrupt:c,removeReset:u,close:r,handleDestroy:f}}var _="",d=e.defineComponent({name:"DNotification",props:l,emits:["update:modelValue","destroy"],setup(n,{emit:t,slots:o}){const{modelValue:a,title:r,type:c}=e.toRefs(n),{classes:u}=T(n),{interrupt:f,removeReset:s,close:j,handleDestroy:z}=M(n,t);return()=>e.createVNode(e.Transition,{name:"notification-fade",onAfterLeave:z},{default:()=>{var h;return[a.value&&e.createVNode("div",{class:"devui-notification"},[e.createVNode("div",{class:u.value,onMouseenter:f,onMouseleave:s},[e.createVNode("div",{class:"devui-notification-item"},[e.createVNode(y,{onClick:j},null),r.value&&e.createVNode(S,{type:c.value},null),e.createVNode("div",{class:"devui-notification-message"},[e.createVNode("span",{class:"devui-notification-title"},[r.value]),e.createVNode("span",{class:"devui-notification-content"},[(h=o.default)==null?void 0:h.call(o)])])])])])]}})}});function b(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!e.isVNode(n)}const I={modelValue:!1,duration:3e3,type:"normal"};function D(n,t){const o=document.createElement("div"),a=e.createApp({setup(){return e.onUnmounted(()=>{document.body.removeChild(o)}),()=>e.createVNode(d,e.mergeProps(n,{onDestroy:a.unmount}),b(t)?t:{default:()=>[t]})}});return document.body.appendChild(o),a.mount(o),a}function P(n,t){n.modelValue=!1,t==null||t()}class p{static open(t){const o=t.onClose||null,a=t.content;let r;delete t.content;const c=e.reactive(g(m(m({},I),t),{onClose:()=>{P(c,o)}}));D(c,a),c.modelValue=!0,clearTimeout(r),t.duration&&(r=setTimeout(c.onClose,t.duration))}}var $={title:"Notification \u5168\u5C40\u901A\u77E5",category:"\u53CD\u9988",status:"100%",install(n){n.component(d.name,d),n.config.globalProperties.$notificationService=p}};i.Notification=d,i.NotificationService=p,i.default=$,i.notificationProps=l,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/notification/style.css

@@ -1 +1 @@
-.devui-notification{position:fixed;top:50px;right:20px;width:20em;word-break:normal;word-wrap:break-word;z-index:1060}.devui-notification a:link,.devui-notification a:visited{color:var(--devui-link-light, #96adfa)}.devui-notification a:hover,.devui-notification a:active{color:var(--devui-link-light-active, #beccfa)}.devui-notification-item-container{position:relative;margin:0 0 8px;opacity:.95;filter:alpha(opacity=95);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-notification-item{position:relative;display:block;padding:12px 16px}.devui-notification-icon-close{position:absolute;top:7px;right:10px;cursor:pointer}.devui-notification-icon-close i.icon{color:var(--devui-light-text, #ffffff)!important}.devui-notification-title{font-size:var(--devui-font-size-card-title, 14px);padding:0 0 calc(.5em - 2px) 0;display:block;font-weight:700}.devui-notification-image{position:absolute;display:inline-block;width:16px;height:16px;border-radius:50%;left:16px;top:14px;padding:0;line-height:1}.devui-notification-image.devui-notification-image-warn i.icon{color:var(--devui-warning, #fac20a)!important}.devui-notification-image.devui-notification-image-info i.icon{color:var(--devui-info, #5e7ce0)!important}.devui-notification-image.devui-notification-image-error i.icon{color:var(--devui-danger, #f66f6a)!important}.devui-notification-image.devui-notification-image-success i.icon{color:var(--devui-success, #50d4ab)!important}.devui-notification-image .devui-notification-image-info-path,.devui-notification-image .devui-notification-image-error-path,.devui-notification-image .devui-notification-image-success-path{fill:var(--devui-light-text, #ffffff)}.devui-notification-message{margin-left:20px}.devui-notification-message .devui-notification-content{font-size:var(--devui-font-size, 12px);margin-top:4px}.devui-notification-message-common .devui-notification-message{margin-left:0}.devui-notification-message p{font-size:var(--devui-font-size, 12px);margin-top:4px}.notification-fade-enter-active,.notification-fade-leave-active{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.notification-fade-enter-from,.notification-fade-leave-to{transform:translate(100%)}
+.devui-notification{position:fixed;top:50px;right:20px;width:20em;word-break:normal;word-wrap:break-word;z-index:1060}.devui-notification a:link,.devui-notification a:visited{color:var(--devui-link-light, #96adfa)}.devui-notification a:hover,.devui-notification a:active{color:var(--devui-link-light-active, #beccfa)}.devui-notification-item-container{position:relative;margin:0 0 8px;opacity:.95;filter:alpha(opacity=95);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-notification-item{position:relative;display:block;padding:12px 16px}.devui-notification-icon-close{position:absolute;top:7px;right:10px;cursor:pointer}.devui-notification-icon-close i.icon{color:var(--devui-light-text, #ffffff)!important}.devui-notification-title{font-size:var(--devui-font-size-card-title, 14px);padding:0 0 calc(.5em - 2px) 0;display:block;font-weight:700}.devui-notification-image{position:absolute;display:inline-block;width:16px;height:16px;border-radius:50%;left:16px;top:14px;padding:0;line-height:1}.devui-notification-image.devui-notification-image-warning path.devui-icon-warning-outer{fill:var(--devui-warning-line, #fa9841)}.devui-notification-image.devui-notification-image-warning path.devui-icon-warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-notification-image.devui-notification-image-info{background-color:var(--devui-info, #5e7ce0)}.devui-notification-image.devui-notification-image-error{background-color:var(--devui-danger, #f66f6a)}.devui-notification-image.devui-notification-image-success{background-color:var(--devui-success, #50d4ab)}.devui-notification-image .devui-notification-image-info-path,.devui-notification-image .devui-notification-image-error-path,.devui-notification-image .devui-notification-image-success-path{fill:var(--devui-light-text, #ffffff)}.devui-notification-message{margin-left:20px}.devui-notification-message .devui-notification-content{font-size:var(--devui-font-size, 12px);margin-top:4px}.devui-notification-message-common .devui-notification-message{margin-left:0}.devui-notification-message p{font-size:var(--devui-font-size, 12px);margin-top:4px}.notification-fade-enter-active,.notification-fade-leave-active{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.notification-fade-enter-from,.notification-fade-leave-to{transform:translate(100%)}