@web-utils/component 2.7.19 → 2.7.21

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

@@ -1 +1,79 @@
-.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:
+    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,15 +1,15 @@
-import { n } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var i = function() {
-  var e = this, t = e.$createElement, s = e._self._c || t;
-  return s("div", {
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "el-collapse",
     attrs: {
       role: "tablist",
       "aria-multiselectable": "true"
     }
-  }, [e._t("default")], 2);
-}, c = [];
-const l = {
+  }, [_vm._t("default")], 2);
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "EgdCollapse",
   componentName: "EgdCollapse",
   provide() {
@@ -32,48 +32,48 @@ const l = {
     };
   },
   watch: {
-    value(e) {
-      this.activeNames = [].concat(e);
+    value(value) {
+      this.activeNames = [].concat(value);
     }
   },
   created() {
     this.$on("item-click", this.handleItemClick);
   },
   methods: {
-    setActiveNames(e) {
-      e = [].concat(e);
-      const t = this.accordion ? e[0] : e;
-      this.activeNames = e, this.$emit("input", t), this.$emit("change", t);
+    setActiveNames(activeNames) {
+      activeNames = [].concat(activeNames);
+      const value = this.accordion ? activeNames[0] : activeNames;
+      this.activeNames = activeNames, this.$emit("input", value), this.$emit("change", value);
     },
-    handleItemClick(e) {
+    handleItemClick(item) {
       if (this.accordion)
         this.setActiveNames(
-          (this.activeNames[0] || this.activeNames[0] === 0) && this.activeNames[0] === e.name ? "" : e.name
+          (this.activeNames[0] || this.activeNames[0] === 0) && this.activeNames[0] === item.name ? "" : item.name
         );
       else {
-        const t = this.activeNames.slice(0), s = t.indexOf(e.name);
-        s > -1 ? t.splice(s, 1) : t.push(e.name), this.setActiveNames(t);
+        const activeNames = this.activeNames.slice(0), index = activeNames.indexOf(item.name);
+        index > -1 ? activeNames.splice(index, 1) : activeNames.push(item.name), this.setActiveNames(activeNames);
       }
     }
   }
-}, a = {};
-var o = /* @__PURE__ */ n(
-  l,
-  i,
-  c,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  r,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function r(e) {
-  for (let t in a)
-    this[t] = a[t];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const u = /* @__PURE__ */ function() {
-  return o.exports;
+const EgdCollapse = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  u as default
+  EgdCollapse as default
 };

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

@@ -1,76 +1,76 @@
-import a from "element-ui/src/mixins/emitter";
-import { generateId as n } from "element-ui/src/utils/util";
-import { n as c } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var o = function() {
-  var e = this, s = e.$createElement, t = e._self._c || s;
-  return t("div", {
+import Emitter from "element-ui/src/mixins/emitter";
+import { generateId } from "element-ui/src/utils/util";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "el-collapse-item",
     class: {
-      "is-active": e.isActive,
-      "is-disabled": e.disabled
+      "is-active": _vm.isActive,
+      "is-disabled": _vm.disabled
     }
-  }, [t("div", {
+  }, [_c("div", {
     attrs: {
       role: "tab",
-      "aria-expanded": e.isActive,
-      "aria-controls": `el-collapse-content-${e.id}`,
-      "aria-describedby": `el-collapse-content-${e.id}`
+      "aria-expanded": _vm.isActive,
+      "aria-controls": `el-collapse-content-${_vm.id}`,
+      "aria-describedby": `el-collapse-content-${_vm.id}`
     }
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "el-collapse-item__header",
     class: {
-      focusing: e.focusing,
-      "is-active": e.isActive
+      focusing: _vm.focusing,
+      "is-active": _vm.isActive
     },
     attrs: {
-      id: `el-collapse-head-${e.id}`,
+      id: `el-collapse-head-${_vm.id}`,
       role: "button",
-      tabindex: e.disabled ? void 0 : 0
+      tabindex: _vm.disabled ? void 0 : 0
     },
     on: {
-      click: e.handleHeaderClick,
-      keyup: function(i) {
-        return !i.type.indexOf("key") && e._k(i.keyCode, "space", 32, i.key, [" ", "Spacebar"]) && e._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : (i.stopPropagation(), e.handleEnterClick.apply(null, arguments));
+      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));
       },
-      focus: e.handleFocus,
-      blur: function(i) {
-        e.focusing = !1;
+      focus: _vm.handleFocus,
+      blur: function($event) {
+        _vm.focusing = !1;
       }
     }
-  }, [t("i", {
+  }, [_c("i", {
     staticClass: "el-collapse-item__arrow el-icon-arrow-right",
     class: {
-      "is-active": e.isActive
+      "is-active": _vm.isActive
     },
     staticStyle: {
       margin: "0 4px 0 0"
     }
-  }), e._t("title", function() {
-    return [e._v(" " + e._s(e.title) + " ")];
+  }), _vm._t("title", function() {
+    return [_vm._v(" " + _vm._s(_vm.title) + " ")];
   }, {
-    title: e.title
-  })], 2)]), t("ElCollapseTransition", [t("div", {
+    title: _vm.title
+  })], 2)]), _c("ElCollapseTransition", [_c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: e.isActive,
+      value: _vm.isActive,
       expression: "isActive"
     }],
     staticClass: "el-collapse-item__wrap",
     attrs: {
-      id: `el-collapse-content-${e.id}`,
+      id: `el-collapse-content-${_vm.id}`,
       role: "tabpanel",
-      "aria-hidden": !e.isActive,
-      "aria-labelledby": `el-collapse-head-${e.id}`
+      "aria-hidden": !_vm.isActive,
+      "aria-labelledby": `el-collapse-head-${_vm.id}`
     }
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "el-collapse-item__content"
-  }, [e._t("default")], 2)])])], 1);
-}, r = [];
-const d = {
+  }, [_vm._t("default")], 2)])])], 1);
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "EgdCollapseItem",
   componentName: "EgdCollapseItem",
-  mixins: [a],
+  mixins: [Emitter],
   inject: ["collapse"],
   props: {
     title: {
@@ -88,7 +88,7 @@ const d = {
     return {
       focusing: !1,
       isClick: !1,
-      id: n()
+      id: generateId()
     };
   },
   computed: {
@@ -109,24 +109,24 @@ const d = {
       this.dispatch("EgdCollapse", "item-click", this);
     }
   }
-}, l = {};
-var p = /* @__PURE__ */ c(
-  d,
-  o,
-  r,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  u,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function u(e) {
-  for (let s in l)
-    this[s] = l[s];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const _ = /* @__PURE__ */ function() {
-  return p.exports;
+const EgdCollapseItem = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  _ as default
+  EgdCollapseItem as default
 };

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

@@ -1,72 +1,81 @@
-import { Dialog as s } from "element-ui";
-import { dialogDrag as a } from "@web-utils/core/dist/directives/index";
-import { n } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var r = function() {
-  var e = this, l = e.$createElement, t = e._self._c || l;
-  return t("Transition", {
+import { Dialog } from "element-ui";
+import { drag, hasOwn } from "@web-utils/core";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+function bindDrag(el, binding) {
+  var _a, _b;
+  const dialogHeaderEl = el.querySelector(".el-dialog__header"), dragDom = el.querySelector(".el-dialog");
+  dialogHeaderEl && (binding.arg ? dialogHeaderEl.style.cssText += ";cursor:default;" : dialogHeaderEl.style.cssText += ";cursor:move;", drag(dragDom, dialogHeaderEl, hasOwn(binding.value, "limit") ? (_a = binding.value) == null ? void 0 : _a.limit : !0, { onMove: (_b = binding.value) == null ? void 0 : _b.onMove }));
+}
+const dialogDrag = {
+  bind: (el, binding) => bindDrag(el, binding),
+  update: (el, binding) => bindDrag(el, binding)
+};
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("Transition", {
     attrs: {
       name: "dialog-fade"
     },
     on: {
-      "after-enter": e.afterEnter,
-      "after-leave": e.afterLeave
+      "after-enter": _vm.afterEnter,
+      "after-leave": _vm.afterLeave
     }
-  }, [t("div", {
+  }, [_c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: e.visible,
+      value: _vm.visible,
       expression: "visible"
     }, {
       name: "dialog-drag",
       rawName: "v-dialog-drag:[fullScreen]",
       value: {
-        onMove: e.updatePopper
+        onMove: _vm.updatePopper
       },
       expression: "{ onMove: updatePopper }",
-      arg: e.fullScreen
+      arg: _vm.fullScreen
     }],
     staticClass: "el-dialog__wrapper",
     on: {
-      click: function(o) {
-        return o.target !== o.currentTarget ? null : e.handleWrapperClick.apply(null, arguments);
+      click: function($event) {
+        return $event.target !== $event.currentTarget ? null : _vm.handleWrapperClick.apply(null, arguments);
       }
     }
-  }, [t("div", {
+  }, [_c("div", {
     ref: "dialog",
     class: ["el-dialog", "element-dialog", "el-dialog-resizeable", "normalize", {
-      "is-fullscreen": e.fullScreen,
-      "el-dialog__body-padding": e.bodyPadding,
-      "el-dialog--center": e.center,
-      "el-dialog--flex-row": e.flexRow,
-      "el-dialog--flex-column": e.flexColumn
-    }, e.customClass],
-    style: e.style,
+      "is-fullscreen": _vm.fullScreen,
+      "el-dialog__body-padding": _vm.bodyPadding,
+      "el-dialog--center": _vm.center,
+      "el-dialog--flex-row": _vm.flexRow,
+      "el-dialog--flex-column": _vm.flexColumn
+    }, _vm.customClass],
+    style: _vm.style,
     attrs: {
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": e.title || "dialog"
+      "aria-label": _vm.title || "dialog"
     }
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "el-dialog__header"
-  }, [e._t("title", function() {
-    return [t("span", {
+  }, [_vm._t("title", function() {
+    return [_c("span", {
       staticClass: "el-dialog__title"
-    }, [e._v(e._s(e.title))])];
-  }), t("div", {
+    }, [_vm._v(_vm._s(_vm.title))])];
+  }), _c("div", {
     staticClass: "header-button-wrapper"
-  }, [e._t("header-button"), e.showFullScreen ? t("ElButton", {
+  }, [_vm._t("header-button"), _vm.showFullScreen ? _c("ElButton", {
     staticClass: "header-button",
     attrs: {
       type: "text",
-      icon: e.fullScreen ? "el-icon-copy-document" : "el-icon-full-screen",
+      icon: _vm.fullScreen ? "el-icon-copy-document" : "el-icon-full-screen",
       size: "medium",
-      title: e.fullScreen ? "还原" : "最大化"
+      title: _vm.fullScreen ? "还原" : "最大化"
     },
     on: {
-      click: e.toggleFullScreen
+      click: _vm.toggleFullScreen
     }
-  }) : e._e(), e.showClose ? t("ElButton", {
+  }) : _vm._e(), _vm.showClose ? _c("ElButton", {
     staticClass: "header-button header-dialog-close",
     attrs: {
       "aria-label": "Close",
@@ -76,20 +85,20 @@ var r = function() {
       size: "medium"
     },
     on: {
-      click: e.handleClose
+      click: _vm.handleClose
     }
-  }) : e._e()], 2)], 2), e.rendered ? t("div", {
+  }) : _vm._e()], 2)], 2), _vm.rendered ? _c("div", {
     staticClass: "el-dialog__body",
     style: {
-      height: e.fullScreen ? "100%" : e.height
+      height: _vm.fullScreen ? "100%" : _vm.height
     }
-  }, [e.destroyOnClose ? [e.visible ? e._t("default") : e._e()] : e._t("default")], 2) : e._e(), e.shouldShowFooter() ? t("div", {
+  }, [_vm.destroyOnClose ? [_vm.visible ? _vm._t("default") : _vm._e()] : _vm._t("default")], 2) : _vm._e(), _vm.shouldShowFooter() ? _c("div", {
     staticClass: "el-dialog__footer"
-  }, [e._t("footer", null, {
-    handleClose: e.handleClose
-  })], 2) : e._e()])])]);
-}, d = [];
-const u = {
+  }, [_vm._t("footer", null, {
+    handleClose: _vm.handleClose
+  })], 2) : _vm._e()])])]);
+}, staticRenderFns = [];
+const defaults = {
   props: {
     modal: {
       type: Boolean,
@@ -112,12 +121,12 @@ const u = {
       default: "76vh"
     }
   }
-}, c = {
+}, __vue2_script = {
   name: "ElementDialog",
   directives: {
-    dialogDrag: a
+    dialogDrag
   },
-  mixins: [...s.mixins, u],
+  mixins: [...Dialog.mixins, defaults],
   props: {
     title: {
       type: String,
@@ -174,15 +183,15 @@ const u = {
   },
   computed: {
     style() {
-      const e = {
+      const style = {
         maxHeight: "100%"
       };
-      return this.fullScreen || (e.marginTop = this.top, this.width && (e.width = this.width), e.maxHeight = this.maxHeight), e;
+      return this.fullScreen || (style.marginTop = this.top, this.width && (style.width = this.width), style.maxHeight = this.maxHeight), style;
     }
   },
   watch: {
-    visible(e) {
-      e ? (this.closed = !1, this.$emit("open"), this.$el.addEventListener("scroll", this.updatePopper), this.$nextTick(() => {
+    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"));
     }
@@ -204,8 +213,8 @@ const u = {
       this.fullScreen = !1;
     },
     shouldShowFooter() {
-      var e, l;
-      return !!((l = (e = this.$scopedSlots).footer) != null && l.call(e));
+      var _a, _b;
+      return !!((_b = (_a = this.$scopedSlots).footer) != null && _b.call(_a));
     },
     handleWrapperClick() {
       this.closeOnClickModal && this.handleClose();
@@ -213,8 +222,8 @@ const u = {
     handleClose() {
       typeof this.beforeClose == "function" ? this.beforeClose(this.hide) : this.hide();
     },
-    hide(e) {
-      e !== !1 && (this.embed ? this.$parent.$emit("update:visible", !1) : this.$emit("update:visible", !1), this.$emit("close"), this.closed = !0);
+    hide(cancel) {
+      cancel !== !1 && (this.embed ? this.$parent.$emit("update:visible", !1) : this.$emit("update:visible", !1), this.$emit("close"), this.closed = !0);
     },
     updatePopper() {
       this.broadcast("ElSelectDropdown", "updatePopper"), this.broadcast("ElDropdownMenu", "updatePopper");
@@ -226,24 +235,24 @@ const u = {
       this.exitFullScreen(), this.$emit("closed");
     }
   }
-}, i = {};
-var p = /* @__PURE__ */ n(
-  c,
-  r,
-  d,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  h,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function h(e) {
-  for (let l in i)
-    this[l] = i[l];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const _ = /* @__PURE__ */ function() {
-  return p.exports;
+const ElementDialog = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  _ as default
+  ElementDialog as default
 };

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

@@ -1 +1,82 @@
-.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: 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);
+}