ele-admin-plus 1.1.9 → 1.2.0-beta.2

package/es/ele-app/style/index.js

@@ -1,4 +1,4 @@
-import './overwrite/index';
-import './scrollbar/index';
-import './common/index';
-import './message/index';
+import "./overwrite/index";
+import "./scrollbar/index";
+import "./common/index";
+import "./message/index";

package/es/ele-app/style/message/css-var.scss

@@ -5,8 +5,4 @@
   .ele-message {
     @include set-ele-var('message', $var);
   }
-
-  .ele-message-mask {
-    @include set-ele-var('message-mask', $var);
-  }
 }

package/es/ele-app/style/message/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/message/index.js

@@ -1,2 +1,2 @@
-import 'element-plus/es/components/message/style/index';
-import './index.scss';
+import "element-plus/es/components/message/style/index";
+import "./index.scss";

package/es/ele-app/style/message/index.scss

@@ -4,121 +4,243 @@
 
 @include set-message-var($ele);
 
-/* 消息提示 */
 .ele-message.el-message {
-  width: max-content;
-  padding: eleVar('message', 'padding');
-  border-radius: eleVar('message', 'radius');
-  box-shadow: eleVar('message', 'shadow');
+  gap: 0;
+  padding: 0;
   border: none;
+  border-radius: 0;
+  background: none;
+  width: max-content;
+  pointer-events: auto;
+  align-items: flex-start;
+  margin: 0 auto eleVar('message', 'space') auto;
+  transition: margin-bottom 0.2s;
+  position: relative !important;
+  left: auto !important;
+  top: auto !important;
+  transform: none;
+  opacity: 1;
+
+  & > .el-message__content {
+    display: none;
+  }
+
+  & > .el-message__icon,
+  & > .el-message__badge {
+    z-index: calc(#{elVar('index', 'popper')} + 2);
+    transition: (
+      margin-top 0.4s,
+      transform elVar('transition-duration'),
+      opacity elVar('transition-duration')
+    );
+  }
 
-  .el-message__content {
+  & > .el-message__icon {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    line-height: normal;
+    font-style: normal;
+    display: flex;
+    flex-shrink: 0;
     color: eleVar('message', 'color');
     font-size: eleVar('message', 'size');
+    padding: eleVar('message', 'padding');
+    box-shadow: eleVar('message', 'shadow');
+    border-radius: eleVar('message', 'radius');
+    background: elVar('color-primary', 'light-9');
+    border: 0 solid elVar('color-primary', 'light-8');
+    z-index: calc(#{elVar('index', 'popper')} + 1);
     box-sizing: border-box;
+    position: relative;
   }
+}
 
-  .el-message__icon {
-    font-size: eleVar('message', 'icon-size');
-    margin: eleVar('message', 'icon-margin');
-  }
+.ele-message + .ele-message {
+  margin-top: 0 !important;
+}
 
-  .el-message__closeBtn {
-    width: eleVar('message', 'close-size');
-    height: eleVar('message', 'close-size');
-    line-height: eleVar('message', 'close-size');
-    color: eleVar('message', 'close-color');
-    font-size: eleVar('message', 'close-font-size');
-    margin: eleVar('message', 'close-margin');
-    border-radius: eleVar('message', 'close-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
-    position: static;
-    top: auto;
-    right: auto;
-    transform: none;
-
-    &:hover {
-      color: eleVar('message', 'close-hover-color');
-      background: eleVar('message', 'close-hover-bg');
-    }
-  }
+.ele-message-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: elVar('color-primary');
+  font-size: eleVar('message', 'icon-size');
+  margin: eleVar('message', 'icon-margin');
+}
 
-  &.is-closable .el-message__content {
-    padding-right: 0;
+.ele-message-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('message', 'close-size');
+  height: eleVar('message', 'close-size');
+  line-height: eleVar('message', 'close-size');
+  color: eleVar('message', 'close-color');
+  font-size: eleVar('message', 'close-font-size');
+  margin: eleVar('message', 'close-margin');
+  border-radius: eleVar('message', 'close-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('message', 'close-hover-color');
+    background: eleVar('message', 'close-hover-bg');
   }
+}
 
-  &.el-message--info {
-    #{elVarName('message', 'text-color')}: elVar('color-primary');
-    #{elVarName('message', 'bg-color')}: elVar('color-primary', 'light-9');
-    #{elVarName('message', 'border-color')}: elVar('color-primary', 'light-8');
-  }
+/* 情景色类型 */
+.ele-message.el-message--success > .el-message__icon {
+  background: elVar('color-success', 'light-9');
+  border-color: elVar('color-success', 'light-7');
 
-  /* 简约风格 */
-  &.is-plain {
-    #{elVarName('message', 'bg-color')}: eleVar('message', 'plain-bg');
+  & > .ele-message-icon {
+    color: elVar('color-success');
   }
+}
 
-  /* 加载框 */
-  &.ele-message-loading {
-    #{elVarName('message', 'text-color')}: elVar('color-primary');
-    #{elVarName('message', 'bg-color')}: elVar('color-primary', 'light-9');
-    #{elVarName('message', 'border-color')}: elVar('color-primary', 'light-8');
+.ele-message.el-message--warning > .el-message__icon {
+  background: elVar('color-warning', 'light-9');
+  border-color: elVar('color-warning', 'light-7');
 
-    &.is-plain {
-      #{elVarName('message', 'bg-color')}: eleVar('message', 'plain-bg');
-    }
+  & > .ele-message-icon {
+    color: elVar('color-warning');
   }
 }
 
-/* 加载框 */
-.ele-message-loading.el-message {
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  transform: none;
-  transition: (opacity elVar('transition-duration'), margin 0.4s, top 0.4s);
+.ele-message.el-message--error > .el-message__icon {
+  background: elVar('color-error', 'light-9');
+  border-color: elVar('color-error', 'light-7');
 
-  &.el-message-fade-enter-from,
-  &.el-message-fade-leave-to {
-    margin-top: -62px;
+  & > .ele-message-icon {
+    color: elVar('color-error');
   }
+}
+
+.ele-message.el-message--info > .el-message__badge > .el-badge__content {
+  background: elVar('color-primary');
+}
+
+/* 简约风格 */
+.ele-message.is-plain.el-message {
+  background: none;
+  box-shadow: none;
+}
+
+.ele-message.is-plain > .el-message__icon,
+.ele-message.is-plain-alert > .el-message__icon {
+  background: eleVar('message', 'plain-bg');
+}
+
+/* 彩色风格 */
+.ele-message.is-alert > .el-message__icon {
+  color: elVar('color-primary');
+  padding: eleVar('message', 'alert-padding');
+  border-width: 1px;
+  box-shadow: none;
+}
+
+.ele-message.is-plain-alert > .el-message__icon {
+  color: elVar('color-primary');
+}
+
+.el-message--success.is-alert > .el-message__icon,
+.el-message--success.is-plain-alert > .el-message__icon {
+  color: elVar('color-success');
+}
+
+.el-message--warning.is-alert > .el-message__icon,
+.el-message--warning.is-plain-alert > .el-message__icon {
+  color: elVar('color-warning');
+}
+
+.el-message--error.is-alert > .el-message__icon,
+.el-message--error.is-plain-alert > .el-message__icon {
+  color: elVar('color-error');
+}
+
+/* 加载框 */
+.ele-message.is-loading {
+  position: static !important;
 
   &::before {
     content: '';
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    transition: opacity elVar('transition-duration');
+    z-index: elVar('index', 'popper');
   }
 
-  & > .el-message__content {
-    position: relative;
+  & > .el-message__badge {
+    display: none;
+  }
+}
+
+/* 遮罩 */
+.ele-message.is-show-mask::before {
+  background: eleVar('message', 'mask-color');
+}
+
+/* 居中 */
+.ele-message.is-centered {
+  margin: 0 !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  align-items: center;
+  justify-content: center;
+
+  &.el-message-fade-enter-from > .el-message__icon,
+  &.el-message-fade-leave-to > .el-message__icon {
+    transform: scale(0.6);
+    margin-top: 0;
   }
+}
+
+/* 进入和关闭动画 */
+.ele-message.el-message-fade-enter-from,
+.ele-message.el-message-fade-leave-to {
+  margin-bottom: 0;
 
   & > .el-message__icon,
-  & > .el-message__content,
-  & > .el-message__closeBtn {
-    z-index: 1;
+  & > .el-message__badge {
+    opacity: 0;
+    margin-top: -88px;
   }
 
-  & > .el-message__icon > .el-icon {
-    font-size: 16px;
-    animation: rotating 1s linear infinite;
+  &::before {
+    opacity: 0;
   }
+}
 
-  /* 遮罩 */
-  &.ele-message-mask {
-    box-shadow:
-      eleVar('message', 'shadow'),
-      0 0 0 eleVar('message-mask', 'size') eleVar('message-mask', 'color');
+/* 容器 */
+.ele-message-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: hidden;
+
+  & > .ele-message:first-child {
+    margin-top: eleVar('message', 'space');
   }
 
-  /* 居中 */
-  &.is-centered {
-    top: 0 !important;
-    bottom: 0;
-    height: max-content;
-    margin: auto;
+  &.is-hide {
+    display: none;
   }
 }

package/es/ele-app/style/overwrite/autocomplete/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/autocomplete/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/autocomplete/index.scss

@@ -24,7 +24,7 @@
     line-height: eleVar('autocomplete', 'item-height');
     padding: eleVar('autocomplete', 'item-padding');
     border-radius: eleVar('autocomplete', 'item-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
 
     & + li {
       margin-top: eleVar('autocomplete', 'item-margin');

package/es/ele-app/style/overwrite/backtop/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/backtop/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/backtop/index.scss

@@ -4,5 +4,5 @@
 /* Backtop */
 body .el-backtop {
   box-shadow: elVar('box-shadow', 'light');
-  transition: (color $ele-transition, background-color $ele-transition);
+  transition: (color $transition-base, background-color $transition-base);
 }

package/es/ele-app/style/overwrite/cascader/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/cascader/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/cascader/index.scss

@@ -21,7 +21,7 @@
     line-height: eleVar('cascader', 'item-height');
     padding: eleVar('cascader', 'item-padding');
     border-radius: eleVar('cascader', 'item-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
 
     & > .el-checkbox,
     & > .el-radio {

package/es/ele-app/style/overwrite/checkbox/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/checkbox/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/checkbox/index.scss

@@ -10,17 +10,19 @@ body .el-checkbox {
     color: eleVar('checkbox', 'color');
     font-size: eleVar('checkbox', 'font-size');
     line-height: eleVar('checkbox', 'size');
-    transition: (color $ele-transition, font-weight $ele-transition);
+    transition: (color $transition-base, font-weight $transition-base);
   }
 
   .el-checkbox__inner {
-    $transit: (border-color $ele-transition, background-color $ele-transition);
     width: eleVar('checkbox', 'size');
     height: eleVar('checkbox', 'size');
     background: eleVar('checkbox', 'bg');
     border: eleVar('checkbox', 'border');
     border-radius: eleVar('checkbox', 'radius');
-    transition: $transit;
+    transition: (
+      border-color $transition-base,
+      background-color $transition-base
+    );
 
     &::after {
       top: 50%;

package/es/ele-app/style/overwrite/color-picker/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/color-picker/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/css-var.scss

@@ -11,7 +11,6 @@
 @use './popper/css-var.scss' as *;
 @use './radio/css-var.scss' as *;
 @use './select/css-var.scss' as *;
-@use './table-filter/css-var.scss' as *;
 @use './tag/css-var.scss' as *;
 @use './tree/css-var.scss' as *;
 @use './tree-select/css-var.scss' as *;
@@ -30,7 +29,6 @@
   @include set-el-popper-var($var);
   @include set-el-radio-var($var);
   @include set-el-select-var($var);
-  @include set-el-table-filter-var($var);
   @include set-el-tag-var($var);
   @include set-el-tree-var($var);
   @include set-el-tree-select-var($var);

package/es/ele-app/style/overwrite/date-picker/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/date-picker/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/date-picker/index.scss

@@ -26,7 +26,7 @@
     line-height: inherit;
     padding: 0;
     box-sizing: border-box;
-    transition: color $ele-transition;
+    transition: color $transition-base;
 
     & + .el-date-picker__header-label {
       margin-left: eleVar('datepicker', 'label-space');
@@ -55,7 +55,7 @@
     line-height: inherit;
     font-size: eleVar('datepicker', 'icon-size');
     color: eleVar('datepicker', 'icon-color');
-    transition: color $ele-transition;
+    transition: color $transition-base;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -139,7 +139,7 @@
     font-size: eleVar('datepicker', 'shortcut-size');
     padding: eleVar('datepicker', 'shortcut-padding');
     border-radius: eleVar('datepicker', 'shortcut-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
     box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -198,9 +198,9 @@
       .el-date-table-cell .el-date-table-cell__text {
         border-radius: eleVar('datepicker', 'cell-radius');
         transition: (
-          color $ele-transition,
-          background-color $ele-transition,
-          border-color $ele-transition
+          color $transition-base,
+          background-color $transition-base,
+          border-color $transition-base
         );
         box-sizing: border-box;
       }
@@ -251,9 +251,9 @@
       line-height: eleVar('datepicker', 'year-height');
       border-radius: eleVar('datepicker', 'year-radius');
       transition: (
-        color $ele-transition,
-        background-color $ele-transition,
-        border-color $ele-transition
+        color $transition-base,
+        background-color $transition-base,
+        border-color $transition-base
       );
       box-sizing: border-box;
       position: static;
@@ -285,8 +285,8 @@
       height: auto;
       padding: eleVar('datepicker', 'year-space');
       transition: (
-        background-color $ele-transition,
-        border-color $ele-transition
+        background-color $transition-base,
+        border-color $transition-base
       );
     }
 
@@ -309,8 +309,8 @@
       height: auto;
       padding: eleVar('datepicker', 'month-space');
       transition: (
-        background-color $ele-transition,
-        border-color $ele-transition
+        background-color $transition-base,
+        border-color $transition-base
       );
     }
 
@@ -353,7 +353,7 @@
       line-height: inherit;
       font-size: eleVar('datepicker', 'icon-size');
       color: eleVar('datepicker', 'icon-color');
-      transition: color $ele-transition;
+      transition: color $transition-base;
       box-sizing: border-box;
       display: flex;
       align-items: center;
@@ -677,7 +677,7 @@
     color: eleVar('timepicker', 'item-color');
     font-size: eleVar('timepicker', 'item-size');
     border-radius: eleVar('timepicker', 'item-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
 
     &:not(.is-disabled):not(.is-active):hover {
       color: eleVar('timepicker', 'item-hover-color');
@@ -710,7 +710,7 @@
     color: elVar('text-color', 'regular');
     font-size: eleVar('timepicker', 'button-size');
     border-radius: eleVar('timepicker', 'button-radius');
-    transition: all $ele-transition;
+    transition: all $transition-base;
     box-sizing: border-box;
 
     &.cancel:hover {
@@ -773,7 +773,7 @@
     color: eleVar('timepicker', 'arrow-color');
     font-size: eleVar('timepicker', 'arrow-size');
     border-radius: eleVar('timepicker', 'item-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
 
     &.arrow-up {
       margin-bottom: eleVar('timepicker', 'line-padding');

package/es/ele-app/style/overwrite/descriptions/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/descriptions/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/descriptions/index.scss

@@ -45,4 +45,8 @@
   .el-descriptions__label.el-descriptions__cell.is-bordered-label {
     background: eleVar('descriptions', 'bg');
   }
+
+  .el-descriptions__cell {
+    word-break: break-all;
+  }
 }

package/es/ele-app/style/overwrite/image-viewer/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/image-viewer/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-app/style/overwrite/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/index.js

@@ -1,18 +1,18 @@
-import './autocomplete/index';
-import './backtop/index';
-import './cascader/index';
-import './checkbox/index';
-import './color-picker/index';
-import './date-picker/index';
-import './descriptions/index';
-import './image-viewer/index';
-import './input/index';
-import './message-box/index';
-import './notification/index';
-import './popper/index';
-import './radio/index';
-import './select/index';
-import './table-filter/index';
-import './tag/index';
-import './tree/index';
-import './tree-select/index';
+import "./autocomplete/index";
+import "./backtop/index";
+import "./cascader/index";
+import "./checkbox/index";
+import "./color-picker/index";
+import "./date-picker/index";
+import "./descriptions/index";
+import "./image-viewer/index";
+import "./input/index";
+import "./message-box/index";
+import "./notification/index";
+import "./popper/index";
+import "./radio/index";
+import "./select/index";
+import "./table-filter/index";
+import "./tag/index";
+import "./tree/index";
+import "./tree-select/index";

package/es/ele-app/style/overwrite/index.scss

@@ -12,7 +12,6 @@
 @use './popper/index.scss' as popper;
 @use './radio/index.scss' as radio;
 @use './select/index.scss' as select;
-@use './table-filter/index.scss' as tableFilter;
 @use './tag/index.scss' as tag;
 @use './tree/index.scss' as tree;
 @use './tree-select/index.scss' as treeSelect;

package/es/ele-app/style/overwrite/input/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-app/style/overwrite/input/index.js

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";