@web-utils/component 2.7.29 → 2.7.31

package/dist/components/editable-tree/style.css

@@ -1 +1,82 @@
-.editable-tree{position:relative}.editable-tree.et-tree-label-overflow-visible .et-tree-label{position:static}.et-tree-wrapper{display:flex;flex-direction:column;width:100%;overflow:auto;text-align:left}.et-tree-wrapper .el-tree{display:table;width:100%;overflow:visible}.et-tree-wrapper .el-button+.el-button{margin-left:8px!important}.et-tree-wrapper .el-input__inner{padding:0 4px}.et-tree-wrapper .custom-tree-node{display:flex;align-items:center;width:100%;padding-right:8px;font-size:14px}.et-tree-wrapper .custom-tree-node:hover .handle-actions{display:block}.et-tree-wrapper .custom-tree-node .handle-actions{display:none;align-self:flex-end}.et-tree-wrapper .custom-tree-node .node-icon{margin-top:2px;margin-right:4px}.et-tree-wrapper .node-label{align-items:center}.et-tree-wrapper .node-input{min-width:140px;margin-right:10px}.et-tree-wrapper .menu{position:fixed;z-index:3;padding:0;background:#fff;border-radius:4px;box-shadow:0 5px 10px #bebebe}.et-tree-wrapper .menu-item{display:block;padding:8px 20px 8px 8px;color:#242f42;font: 11px tahoma,arial,sans-serif;line-height:100%;white-space:nowrap;cursor:pointer;user-select:none}.et-tree-wrapper .menu .menu-item:hover{color:#66b1ff;background-color:#ecf5ff}.et-tree-wrapper .menu-item-icon{margin-right:4px;font-weight:700;font-size:1.3em}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.editable-tree {
+  position: relative;
+}
+.editable-tree.et-tree-label-overflow-visible .et-tree-label {
+  position: static;
+}
+.et-tree-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: auto;
+  text-align: left;
+}
+.et-tree-wrapper .el-tree {
+  display: table;
+  width: 100%;
+  overflow: visible;
+}
+.et-tree-wrapper .el-button + .el-button {
+  margin-left: 8px !important;
+}
+.et-tree-wrapper .el-input__inner {
+  padding: 0 4px;
+}
+.et-tree-wrapper .custom-tree-node {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-right: 8px;
+  font-size: 14px;
+}
+.et-tree-wrapper .custom-tree-node:hover .handle-actions {
+  display: block;
+}
+.et-tree-wrapper .custom-tree-node .handle-actions {
+  display: none;
+  align-self: flex-end;
+}
+.et-tree-wrapper .custom-tree-node .node-icon {
+  margin-top: 2px;
+  margin-right: 4px;
+}
+.et-tree-wrapper .node-label {
+  align-items: center;
+}
+.et-tree-wrapper .node-input {
+  min-width: 140px;
+  margin-right: 10px;
+}
+.et-tree-wrapper .menu {
+  position: fixed;
+  z-index: 3;
+  padding: 0;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 5px 10px #bebebe;
+}
+.et-tree-wrapper .menu-item {
+  display: block;
+  padding: 8px 20px 8px 8px;
+  color: #242f42;
+  font: normal 11px tahoma, arial, sans-serif;
+  line-height: 100%;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+.et-tree-wrapper .menu .menu-item:hover {
+  color: #66b1ff;
+  background-color: #ecf5ff;
+}
+.et-tree-wrapper .menu-item-icon {
+  margin-right: 4px;
+  font-weight: 700;
+  font-size: 1.3em;
+}

package/dist/components/egd-collapse/index.js

@@ -1,14 +1,17 @@
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     staticClass: "el-collapse",
     attrs: {
-      role: "tablist",
+      "role": "tablist",
       "aria-multiselectable": "true"
     }
   }, [_vm._t("default")], 2);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
 const __vue2_script = {
   name: "EgdCollapse",
   componentName: "EgdCollapse",
@@ -43,33 +46,43 @@ const __vue2_script = {
     setActiveNames(activeNames) {
       activeNames = [].concat(activeNames);
       const value = this.accordion ? activeNames[0] : activeNames;
-      this.activeNames = activeNames, this.$emit("input", value), this.$emit("change", value);
+      this.activeNames = activeNames;
+      this.$emit("input", value);
+      this.$emit("change", value);
     },
     handleItemClick(item) {
-      if (this.accordion)
+      if (this.accordion) {
         this.setActiveNames(
           (this.activeNames[0] || this.activeNames[0] === 0) && this.activeNames[0] === item.name ? "" : item.name
         );
-      else {
-        const activeNames = this.activeNames.slice(0), index = activeNames.indexOf(item.name);
-        index > -1 ? activeNames.splice(index, 1) : activeNames.push(item.name), this.setActiveNames(activeNames);
+      } else {
+        const activeNames = this.activeNames.slice(0);
+        const index = activeNames.indexOf(item.name);
+        if (index > -1) {
+          activeNames.splice(index, 1);
+        } else {
+          activeNames.push(item.name);
+        }
+        this.setActiveNames(activeNames);
       }
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const EgdCollapse = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/egd-collapse-item/index.js

@@ -1,8 +1,10 @@
 import Emitter from "element-ui/src/mixins/emitter";
 import { generateId } from "element-ui/src/utils/util";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     staticClass: "el-collapse-item",
     class: {
@@ -11,7 +13,7 @@ var render = function() {
     }
   }, [_c("div", {
     attrs: {
-      role: "tab",
+      "role": "tab",
       "aria-expanded": _vm.isActive,
       "aria-controls": `el-collapse-content-${_vm.id}`,
       "aria-describedby": `el-collapse-content-${_vm.id}`
@@ -19,22 +21,25 @@ var render = function() {
   }, [_c("div", {
     staticClass: "el-collapse-item__header",
     class: {
-      focusing: _vm.focusing,
+      "focusing": _vm.focusing,
       "is-active": _vm.isActive
     },
     attrs: {
-      id: `el-collapse-head-${_vm.id}`,
-      role: "button",
-      tabindex: _vm.disabled ? void 0 : 0
+      "id": `el-collapse-head-${_vm.id}`,
+      "role": "button",
+      "tabindex": _vm.disabled ? void 0 : 0
     },
     on: {
-      click: _vm.handleHeaderClick,
-      keyup: function($event) {
-        return !$event.type.indexOf("key") && _vm._k($event.keyCode, "space", 32, $event.key, [" ", "Spacebar"]) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter") ? null : ($event.stopPropagation(), _vm.handleEnterClick.apply(null, arguments));
+      "click": _vm.handleHeaderClick,
+      "keyup": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "space", 32, $event.key, [" ", "Spacebar"]) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+          return null;
+        $event.stopPropagation();
+        return _vm.handleEnterClick.apply(null, arguments);
       },
-      focus: _vm.handleFocus,
-      blur: function($event) {
-        _vm.focusing = !1;
+      "focus": _vm.handleFocus,
+      "blur": function($event) {
+        _vm.focusing = false;
       }
     }
   }, [_c("i", {
@@ -43,12 +48,12 @@ var render = function() {
       "is-active": _vm.isActive
     },
     staticStyle: {
-      margin: "0 4px 0 0"
+      "margin": "0 4px 0 0"
     }
   }), _vm._t("title", function() {
     return [_vm._v(" " + _vm._s(_vm.title) + " ")];
   }, {
-    title: _vm.title
+    "title": _vm.title
   })], 2)]), _c("ElCollapseTransition", [_c("div", {
     directives: [{
       name: "show",
@@ -58,15 +63,16 @@ var render = function() {
     }],
     staticClass: "el-collapse-item__wrap",
     attrs: {
-      id: `el-collapse-content-${_vm.id}`,
-      role: "tabpanel",
+      "id": `el-collapse-content-${_vm.id}`,
+      "role": "tabpanel",
       "aria-hidden": !_vm.isActive,
       "aria-labelledby": `el-collapse-head-${_vm.id}`
     }
   }, [_c("div", {
     staticClass: "el-collapse-item__content"
   }, [_vm._t("default")], 2)])])], 1);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
 const __vue2_script = {
   name: "EgdCollapseItem",
   componentName: "EgdCollapseItem",
@@ -86,8 +92,8 @@ const __vue2_script = {
   },
   data() {
     return {
-      focusing: !1,
-      isClick: !1,
+      focusing: false,
+      isClick: false,
       id: generateId()
     };
   },
@@ -99,30 +105,40 @@ const __vue2_script = {
   methods: {
     handleFocus() {
       setTimeout(() => {
-        this.isClick ? this.isClick = !1 : this.focusing = !0;
+        if (!this.isClick) {
+          this.focusing = true;
+        } else {
+          this.isClick = false;
+        }
       }, 50);
     },
     handleHeaderClick() {
-      this.disabled || (this.dispatch("EgdCollapse", "item-click", this), this.focusing = !1, this.isClick = !0);
+      if (this.disabled)
+        return;
+      this.dispatch("EgdCollapse", "item-click", this);
+      this.focusing = false;
+      this.isClick = true;
     },
     handleEnterClick() {
       this.dispatch("EgdCollapse", "item-click", this);
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const EgdCollapseItem = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/element-dialog/index.js

@@ -1,11 +1,13 @@
-import { Dialog } from "element-ui";
+import Dialog from "element-ui/lib/dialog";
 import { dialogDrag } from "@web-utils/vue/directives/dialog-drag";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("Transition", {
     attrs: {
-      name: "dialog-fade"
+      "name": "dialog-fade"
     },
     on: {
       "after-enter": _vm.afterEnter,
@@ -28,8 +30,10 @@ var render = function() {
     }],
     staticClass: "el-dialog__wrapper",
     on: {
-      click: function($event) {
-        return $event.target !== $event.currentTarget ? null : _vm.handleWrapperClick.apply(null, arguments);
+      "click": function($event) {
+        if ($event.target !== $event.currentTarget)
+          return null;
+        return _vm.handleWrapperClick.apply(null, arguments);
       }
     }
   }, [_c("div", {
@@ -43,7 +47,7 @@ var render = function() {
     }, _vm.customClass],
     style: _vm.style,
     attrs: {
-      role: "dialog",
+      "role": "dialog",
       "aria-modal": "true",
       "aria-label": _vm.title || "dialog"
     }
@@ -58,25 +62,25 @@ var render = function() {
   }, [_vm._t("header-button"), _vm.showFullScreen ? _c("ElButton", {
     staticClass: "header-button",
     attrs: {
-      type: "text",
-      icon: _vm.fullScreen ? "el-icon-copy-document" : "el-icon-full-screen",
-      size: "medium",
-      title: _vm.fullScreen ? "还原" : "最大化"
+      "type": "text",
+      "icon": _vm.fullScreen ? "el-icon-copy-document" : "el-icon-full-screen",
+      "size": "medium",
+      "title": _vm.fullScreen ? "还原" : "最大化"
     },
     on: {
-      click: _vm.toggleFullScreen
+      "click": _vm.toggleFullScreen
     }
   }) : _vm._e(), _vm.showClose ? _c("ElButton", {
     staticClass: "header-button header-dialog-close",
     attrs: {
       "aria-label": "Close",
-      type: "text",
-      title: "关闭",
-      icon: "el-icon-close",
-      size: "medium"
+      "type": "text",
+      "title": "关闭",
+      "icon": "el-icon-close",
+      "size": "medium"
     },
     on: {
-      click: _vm.handleClose
+      "click": _vm.handleClose
     }
   }) : _vm._e()], 2)], 2), _vm.rendered ? _c("div", {
     staticClass: "el-dialog__body",
@@ -86,33 +90,36 @@ var render = function() {
   }, [_vm.destroyOnClose ? [_vm.visible ? _vm._t("default") : _vm._e()] : _vm._t("default")], 2) : _vm._e(), _vm.shouldShowFooter() ? _c("div", {
     staticClass: "el-dialog__footer"
   }, [_vm._t("footer", null, {
-    handleClose: _vm.handleClose
+    "handleClose": _vm.handleClose
   })], 2) : _vm._e()])])]);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
+const ElementDialog_vue_vue_type_style_index_0_lang = "";
 const defaults = {
   props: {
     modal: {
       type: Boolean,
-      default: !0
+      default: true
     },
     modalAppendToBody: {
       type: Boolean,
-      default: !0
+      default: true
     },
     lockScroll: {
       type: Boolean,
-      default: !0
+      default: true
     },
     closeOnPressEscape: {
       type: Boolean,
-      default: !0
+      default: true
     },
     maxHeight: {
       type: String,
       default: "76vh"
     }
   }
-}, __vue2_script = {
+};
+const __vue2_script = {
   name: "ElementDialog",
   directives: {
     dialogDrag
@@ -125,15 +132,15 @@ const defaults = {
     },
     appendToBody: {
       type: Boolean,
-      default: !0
+      default: true
     },
     closeOnClickModal: {
       type: Boolean,
-      default: !1
+      default: false
     },
     showClose: {
       type: Boolean,
-      default: !0
+      default: true
     },
     showFullScreen: Boolean,
     width: {
@@ -155,21 +162,21 @@ const defaults = {
     },
     center: {
       type: Boolean,
-      default: !0
+      default: true
     },
     destroyOnClose: Boolean,
     flexRow: Boolean,
     flexColumn: Boolean,
     bodyPadding: {
       type: Boolean,
-      default: !0
+      default: true
     },
     embed: Boolean
   },
   data() {
     return {
-      fullScreen: !1,
-      closed: !1
+      fullScreen: false,
+      closed: false
     };
   },
   computed: {
@@ -177,69 +184,115 @@ const defaults = {
       const style = {
         maxHeight: "100%"
       };
-      return this.fullScreen || (style.marginTop = this.top, this.width && (style.width = this.width), style.maxHeight = this.maxHeight), style;
+      if (!this.fullScreen) {
+        style.marginTop = this.top;
+        if (this.width) {
+          style.width = this.width;
+        }
+        style.maxHeight = this.maxHeight;
+      }
+      return style;
     }
   },
   watch: {
     visible(val) {
-      val ? (this.closed = !1, this.$emit("open"), this.$el.addEventListener("scroll", this.updatePopper), this.$nextTick(() => {
-        this.$refs.dialog.scrollTop = 0;
-      }), this.appendToBody && document.body.appendChild(this.$el)) : (this.$el.removeEventListener("scroll", this.updatePopper), this.closed || this.$emit("close"));
+      if (val) {
+        this.closed = false;
+        this.$emit("open");
+        this.$el.addEventListener("scroll", this.updatePopper);
+        this.$nextTick(() => {
+          this.$refs.dialog.scrollTop = 0;
+        });
+        if (this.appendToBody) {
+          document.body.appendChild(this.$el);
+        }
+      } else {
+        this.$el.removeEventListener("scroll", this.updatePopper);
+        if (!this.closed) {
+          this.$emit("close");
+        }
+      }
     }
   },
   mounted() {
-    this.visible && (this.rendered = !0, this.open(), this.appendToBody && document.body.appendChild(this.$el));
+    if (this.visible) {
+      this.rendered = true;
+      this.open();
+      if (this.appendToBody) {
+        document.body.appendChild(this.$el);
+      }
+    }
   },
   destroyed() {
-    this.appendToBody && this.$el && this.$el.parentNode && this.$el.parentNode.removeChild(this.$el);
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
   },
   methods: {
     toggleFullScreen() {
       this.fullScreen = !this.fullScreen;
     },
     enterFullScreen() {
-      this.fullScreen = !0;
+      this.fullScreen = true;
     },
     exitFullScreen() {
-      this.fullScreen = !1;
+      this.fullScreen = false;
     },
     shouldShowFooter() {
       var _a, _b;
-      return !!((_b = (_a = this.$scopedSlots).footer) != null && _b.call(_a));
+      return !!((_b = (_a = this.$scopedSlots).footer) == null ? void 0 : _b.call(_a));
     },
     handleWrapperClick() {
-      this.closeOnClickModal && this.handleClose();
+      if (!this.closeOnClickModal)
+        return;
+      this.handleClose();
     },
     handleClose() {
-      typeof this.beforeClose == "function" ? this.beforeClose(this.hide) : this.hide();
+      if (typeof this.beforeClose === "function") {
+        this.beforeClose(this.hide);
+      } else {
+        this.hide();
+      }
     },
     hide(cancel) {
-      cancel !== !1 && (this.embed ? this.$parent.$emit("update:visible", !1) : this.$emit("update:visible", !1), this.$emit("close"), this.closed = !0);
+      if (cancel !== false) {
+        if (this.embed) {
+          this.$parent.$emit("update:visible", false);
+        } else {
+          this.$emit("update:visible", false);
+        }
+        this.$emit("close");
+        this.closed = true;
+      }
     },
     updatePopper() {
-      this.broadcast("ElSelectDropdown", "updatePopper"), this.broadcast("ElDropdownMenu", "updatePopper");
+      this.broadcast("ElSelectDropdown", "updatePopper");
+      this.broadcast("ElDropdownMenu", "updatePopper");
     },
     afterEnter() {
       this.$emit("opened");
     },
     afterLeave() {
-      this.exitFullScreen(), this.$emit("closed");
+      this.exitFullScreen();
+      this.$emit("closed");
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const ElementDialog = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/element-dialog/style.css

@@ -1 +1,88 @@
-.element-dialog.el-dialog.el-dialog-resizeable{display:flex;flex-direction:column}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__body{position:relative;flex:1 1 auto;padding:0}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__header{position:relative;font-size:18px}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__footer{padding-bottom:10px;text-align:right}.element-dialog.el-dialog.el-dialog-resizeable .dialog-head-group{position:absolute;top:50%;right:14px;transform:translateY(-50%)}.element-dialog.el-dialog.is-fullscreen{position:absolute;top:0!important;left:0!important;width:100%!important;height:100%!important}.element-dialog.el-dialog.el-dialog--center .el-dialog__header{justify-content:center}.element-dialog.el-dialog.el-dialog--flex-column .el-dialog__body{display:flex;flex-direction:column}.element-dialog.el-dialog.el-dialog--flex-row .el-dialog__body{display:flex;flex-direction:row}.element-dialog.el-dialog.el-dialog__body-padding .el-dialog__body{padding:10px}.element-dialog.el-dialog .el-dialog__body{padding:0;overflow:auto}.element-dialog.el-dialog .el-dialog__header{display:flex;flex-direction:row;position:relative;align-items:center;padding:4px 10px;font-size:16px;background-color:#409eff}.element-dialog.el-dialog .el-dialog__header .el-dialog__title{color:#fff;font-weight:400;font-size:16px}.element-dialog.el-dialog .header-button-wrapper{position:absolute;top:50%;right:10px;display:flex;transform:translateY(-50%)}.element-dialog.el-dialog .header-button{padding:2px;color:#fff;border:none;outline:0;cursor:pointer}.element-dialog.el-dialog .header-button.header-dialog-close:hover{background:#e34e55}.element-dialog.el-dialog .header-button:hover{background:rgba(0,0,0,.3)}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.element-dialog.el-dialog.el-dialog-resizeable {
+  display: flex;
+  flex-direction: column;
+}
+.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: 0;
+}
+.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__header {
+  position: relative;
+  font-size: 18px;
+}
+.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__footer {
+  padding-bottom: 10px;
+  text-align: right;
+}
+.element-dialog.el-dialog.el-dialog-resizeable .dialog-head-group {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  transform: translateY(-50%);
+}
+.element-dialog.el-dialog.is-fullscreen {
+  position: absolute;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+.element-dialog.el-dialog.el-dialog--center .el-dialog__header {
+  justify-content: center;
+}
+.element-dialog.el-dialog.el-dialog--flex-column .el-dialog__body {
+  display: flex;
+  flex-direction: column;
+}
+.element-dialog.el-dialog.el-dialog--flex-row .el-dialog__body {
+  display: flex;
+  flex-direction: row;
+}
+.element-dialog.el-dialog.el-dialog__body-padding .el-dialog__body {
+  padding: 10px;
+}
+.element-dialog.el-dialog .el-dialog__body {
+  padding: 0;
+  overflow: auto;
+}
+.element-dialog.el-dialog .el-dialog__header {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 16px;
+  background-color: #409EFF;
+}
+.element-dialog.el-dialog .el-dialog__header .el-dialog__title {
+  color: #fff;
+  font-weight: normal;
+  font-size: 16px;
+}
+.element-dialog.el-dialog .header-button-wrapper {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  display: flex;
+  transform: translateY(-50%);
+}
+.element-dialog.el-dialog .header-button {
+  padding: 2px;
+  color: #fff;
+  border: none;
+  outline: 0;
+  cursor: pointer;
+}
+.element-dialog.el-dialog .header-button.header-dialog-close:hover {
+  background: #e34e55;
+}
+.element-dialog.el-dialog .header-button:hover {
+  background: rgba(0, 0, 0, 0.3);
+}