ele-admin-plus 1.1.7-beta.1 → 1.1.7-beta.3

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

@@ -29,13 +29,13 @@
       flex: 0;
     }
 
-    .el-range__icon {
-      padding-right: 5px;
+    & > .el-input__icon {
+      flex-shrink: 0;
     }
   }
 
   /* 数字输入框 */
-  &.el-input-number .el-input__inner {
+  &.el-input-number.is-controls-right .el-input__inner {
     text-align: left;
   }
 }

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

@@ -95,6 +95,23 @@
   }
 }
 
+.el-cascader > .el-input .el-input__inner {
+  margin: -2px 0;
+  min-height: calc(#{elVar('input', 'height')} + 2px);
+}
+
+/* 多选标签 */
+.el-cascader__tags .el-tag__content,
+.el-cascader__collapse-tag .el-tag__content {
+  display: inline-flex;
+  align-items: center;
+  line-height: 14px;
+}
+
+.el-cascader .el-cascader__tags {
+  padding: 0 0 0 4px;
+}
+
 .el-cascader .el-cascader__tags .el-tag,
 .el-cascader__collapse-tags .el-cascader__collapse-tag .el-tag {
   flex-shrink: 0;
@@ -103,13 +120,46 @@
   border: none;
 }
 
-.el-cascader .el-cascader__tags {
-  top: 2px;
-  transform: none;
-  padding: 0 0 0 4px;
+.el-cascader__tags .el-cascader__search-input {
+  margin: 2px 0 2px 5.8px;
 }
 
-.el-cascader > .el-input .el-input__inner {
-  margin: -2px 0;
-  min-height: calc(#{elVar('input', 'height')} + 2px);
+/* 小尺寸 */
+.el-cascader--small .el-cascader__tags .el-cascader__search-input {
+  height: 18px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-left: 3.8px;
+}
+
+.el-cascader--small .el-cascader__tags .el-tag,
+.el-cascader__collapse-tags .el-cascader__collapse-tag .el-tag--small {
+  margin: 1px 4px 1px 0;
+  height: calc(elVar('component-size', 'small') - 4px - 2px);
+}
+
+/* 大尺寸 */
+.el-cascader--large .el-cascader__tags {
+  padding: 1px 0 1px 6px;
+}
+
+.el-cascader--large .el-cascader__tags .el-tag {
+  height: calc(elVar('component-size', 'large') - 8px - 4px);
+}
+
+.el-cascader--large .el-cascader__tags .el-cascader__search-input {
+  margin-left: 7.8px;
+}
+
+/* 多选搜索框 */
+.el-cascader__tags .el-tag + .el-cascader__search-input {
+  margin-left: 2px;
+}
+
+/* 标签溢出气泡 */
+.el-popper > .el-cascader__collapse-tags {
+  margin: -5px -11px;
+  padding: 8px 10px;
+  background: inherit;
+  border-radius: inherit;
 }

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

@@ -5,6 +5,7 @@
 @use './date-picker/css-var.scss' as *;
 @use './descriptions/css-var.scss' as *;
 @use './image-viewer/css-var.scss' as *;
+@use './input/css-var.scss' as *;
 @use './message-box/css-var.scss' as *;
 @use './notification/css-var.scss' as *;
 @use './popper/css-var.scss' as *;
@@ -23,6 +24,7 @@
   @include set-el-date-picker-var($var);
   @include set-el-descriptions-var($var);
   @include set-el-image-viewer-var($var);
+  @include set-el-input-var($var);
   @include set-el-message-box-var($var);
   @include set-el-notification-var($var);
   @include set-el-popper-var($var);

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

@@ -6,6 +6,7 @@ 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';

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

@@ -6,6 +6,7 @@
 @use './date-picker/index.scss' as datePicker;
 @use './descriptions/index.scss' as descriptions;
 @use './image-viewer/index.scss' as imageViewer;
+@use './input/index.scss' as input;
 @use './message-box/index.scss' as messageBox;
 @use './notification/index.scss' as notification;
 @use './popper/index.scss' as popper;

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

@@ -0,0 +1,31 @@
+@use '../../../../style/util.scss' as *;
+
+/* ElInput 主题变量 */
+@mixin set-el-input-var($var) {
+  .el-input,
+  .el-textarea,
+  .el-range-editor {
+    @include set-ele-var('input', $var);
+    @include set-ele-var('input-error', $var);
+  }
+
+  .el-input--small {
+    @include set-ele-var('input-sm', $var);
+  }
+
+  .el-input--large {
+    @include set-ele-var('input-lg', $var);
+  }
+
+  .el-textarea {
+    @include set-ele-var('textarea', $var);
+  }
+
+  .el-textarea.el-input--small {
+    @include set-ele-var('textarea-sm', $var);
+  }
+
+  .el-textarea.el-input--large {
+    @include set-ele-var('textarea-lg', $var);
+  }
+}

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

@@ -0,0 +1 @@
+import './index.scss';

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

@@ -0,0 +1,453 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-input-var($ele);
+
+/* Input */
+.el-input .el-input__wrapper,
+.el-range-editor.el-input__wrapper {
+  border: eleVar('input', 'border');
+  background: eleVar('input', 'bg');
+  border-radius: eleVar('input', 'radius');
+  padding: eleVar('input', 'padding');
+  transition: all $ele-transition;
+  box-sizing: border-box;
+  position: relative;
+  box-shadow: none;
+}
+
+.el-textarea .el-textarea__inner {
+  background: eleVar('input', 'bg');
+  padding: eleVar('textarea', 'padding');
+  min-height: elVar('component-size') !important;
+  border-radius: eleVar('input', 'radius');
+  border: eleVar('input', 'border');
+  transition: all $ele-transition;
+  box-shadow: none;
+}
+
+/* Hover */
+.el-input .el-input__wrapper:hover,
+.el-textarea .el-textarea__inner:hover,
+.el-select:not(.el-select--disabled):hover .el-input .el-input__wrapper,
+.el-cascader:not(.is-disabled):hover .el-input .el-input__wrapper,
+.el-range-editor:not(.is-disabled):hover,
+body .el-input-number:not(.is-disabled):hover .el-input .el-input__wrapper {
+  border: eleVar('input', 'hover-border');
+  background: eleVar('input', 'hover-bg');
+  box-shadow: eleVar('input', 'hover-shadow');
+}
+
+/* Focus */
+.el-input .el-input__wrapper.is-focus,
+.el-textarea .el-textarea__inner:focus,
+.el-cascader .el-input.el-input--suffix .el-input__wrapper.is-focus,
+.el-cascader .el-input.el-input--suffix.is-focus .el-input__wrapper,
+.el-range-editor.el-input__wrapper.is-active:not(.is-disabled),
+body .el-input-number:not(.is-disabled) .el-input .el-input__wrapper.is-focus {
+  border: eleVar('input', 'focus-border');
+  background: eleVar('input', 'focus-bg');
+  box-shadow: eleVar('input', 'focus-shadow');
+}
+
+/* 层级 */
+.el-input .el-input__wrapper:hover,
+.el-input .el-input__wrapper.is-focus {
+  z-index: 2;
+}
+
+.el-select .el-select__tags,
+.el-cascader .el-cascader__tags,
+.el-input-number .el-input-number__increase,
+.el-input-number .el-input-number__decrease {
+  z-index: 3;
+}
+
+/* 字数统计 */
+.el-input .el-input__wrapper .el-input__count {
+  color: eleVar('input', 'count-color');
+  font-size: eleVar('input', 'count-size');
+  margin-left: eleVar('input', 'icon-space');
+  line-height: normal;
+
+  .el-input__count-inner {
+    padding: 0;
+  }
+}
+
+/* 图标 */
+.el-input .el-input__wrapper .el-input__icon,
+.el-select .el-input .el-input__wrapper .el-select__icon,
+.el-range-editor .el-input__icon.el-range__icon,
+.el-range-editor .el-input__icon.el-range__close-icon,
+.el-input .el-input__wrapper .el-input__prefix-icon {
+  color: eleVar('input', 'icon-color');
+  font-size: eleVar('input', 'icon-size');
+  transition: all $ele-transition;
+  height: 1em;
+}
+
+.el-input .el-input__prefix-inner .el-input__icon,
+.el-select .el-input__prefix-inner .el-select__icon,
+.el-range-editor .el-input__icon.el-range__icon,
+.el-input .el-input__prefix-inner > div {
+  margin-right: eleVar('input', 'icon-space');
+}
+
+.el-input .el-input__suffix-inner .el-input__icon,
+.el-select .el-input__suffix-inner .el-select__icon {
+  margin-left: eleVar('input', 'icon-space');
+}
+
+/* 密码图标 */
+.el-input .el-input__wrapper .el-input__password {
+  margin: eleVar('input', 'eye-margin');
+
+  &:hover {
+    color: eleVar('input', 'icon-hover-color');
+  }
+}
+
+/* 清空图标 */
+.el-input .el-input__wrapper .el-input__clear,
+.el-select .el-input .el-select__caret,
+.el-cascader .el-input__icon.icon-circle-close,
+.el-cascader .el-input__icon.icon-arrow-down,
+.el-date-editor .el-input__icon.clear-icon,
+.el-range-editor .el-input__icon.el-range__close-icon {
+  margin: eleVar('input', 'clear-margin');
+}
+
+.el-input .el-input__wrapper .el-input__clear,
+.el-cascader .el-input__icon.icon-circle-close,
+.el-date-editor .el-input__icon.clear-icon,
+.el-range-editor .el-input__icon.el-range__close-icon {
+  font-size: eleVar('input', 'clear-size');
+}
+
+.el-input .el-input__clear,
+.el-input__icon.icon-circle-close,
+.el-input__icon.clear-icon,
+.el-range-editor .el-input__icon.el-range__close-icon {
+  background: eleVar('input', 'clear-color');
+  border-radius: 50%;
+
+  &:hover {
+    background: eleVar('input', 'clear-hover-color');
+  }
+}
+
+/* 状态图标 */
+.el-input .el-input__wrapper .el-input__validateIcon {
+  margin: eleVar('input', 'status-margin');
+}
+
+.el-input .el-input__clear + .el-input__validateIcon,
+.el-input__icon.icon-circle-close + .el-input__validateIcon,
+.el-input__icon.clear-icon + .el-input__validateIcon {
+  display: none;
+}
+
+/* 清空图标和验证失败图标修改 */
+.el-input__clear > svg > path,
+.el-input__icon.icon-circle-close > svg > path,
+.el-input__icon.clear-icon > svg > path,
+.el-input__icon.el-range__close-icon > svg > path {
+  fill: none;
+  stroke: elVar('bg-color', 'overlay');
+  stroke-width: 100;
+  stroke-linecap: round;
+}
+
+.el-input__clear > svg > path,
+.el-input__icon.icon-circle-close > svg > path,
+.el-input__icon.clear-icon > svg > path,
+.el-input__icon.el-range__close-icon > svg > path,
+.el-form-item.is-error .el-input__validateIcon > svg > path {
+  #{'d'}: path('M320 320L704 704');
+
+  &:last-child {
+    #{'d'}: path('M320 704L704 320');
+  }
+}
+
+/* 验证通过图标修改 */
+.el-input .el-input__validateIcon {
+  font-size: eleVar('input', 'status-size');
+  background: eleVar('input', 'status-color');
+  border-radius: 50%;
+}
+
+.el-input__validateIcon > svg > path {
+  fill: none;
+  stroke: elVar('bg-color', 'overlay');
+  stroke-width: 100;
+  stroke-linecap: round;
+  #{'d'}: path('M755 364 426 700 254 529');
+
+  &:last-child {
+    #{'d'}: path('');
+  }
+}
+
+/* 下拉箭头图标修改 */
+.el-select__caret,
+.el-input__icon.icon-arrow-down {
+  & > svg > path {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 84;
+    stroke-linecap: round;
+    transition: (d $ele-transition, fill $ele-transition);
+    #{'d'}: path('M216 362L512 662L808 362');
+  }
+
+  &.is-reverse > svg > path {
+    #{'d'}: path('M216 662L512 362L808 662');
+  }
+}
+
+.el-select .el-input .el-input__wrapper .el-select__caret.is-reverse,
+.el-cascader .el-input .el-input__icon.icon-arrow-down.is-reverse {
+  transform: none;
+}
+
+/* 下拉清空图标修改 */
+.el-select__caret {
+  & > svg > path[d^='m466'] {
+    stroke: none;
+    fill: eleVar('input', 'clear-color');
+    #{'d'}: path(
+      'M514 972C768 972 975 766 975 512 975 257 768 51 514 51 259 51 53 257 53 512 53 766 259 972 514 972'
+    );
+  }
+
+  & > svg > path + path {
+    stroke: none;
+    fill: elVar('bg-color', 'overlay');
+    #{'d'}: path(
+      'M305 247 507 449 709 247 766 304 564 506 766 708 708 765 506 563 304 765 247 708 449 506 247 304 305 247'
+    );
+  }
+
+  &:hover > svg > path[d^='m466'] {
+    fill: eleVar('input', 'clear-hover-color');
+  }
+}
+
+/* 组合 */
+.el-input {
+  &.el-input-group--prepend > .el-input__wrapper {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &.el-input-group--append > .el-input__wrapper {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .el-input-group__prepend,
+  .el-input-group__append {
+    flex-shrink: 0;
+    color: eleVar('input', 'extra-color');
+    background: eleVar('input', 'extra-bg');
+    padding: eleVar('input', 'extra-padding');
+    line-height: eleVar('input', 'extra-line-height');
+    border-radius: eleVar('input', 'radius');
+    border: eleVar('input', 'border');
+    box-sizing: border-box;
+    box-shadow: none;
+
+    & > .el-button,
+    & > .el-select {
+      margin: eleVar('input', 'extra-preset-margin');
+    }
+  }
+
+  .el-input-group__prepend {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .el-input-group__append {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.el-input.el-input-group.el-input-group--prepend > .el-input-group__prepend,
+.el-input.el-input-group.el-input-group--append > .el-input-group__append {
+  & > .el-select > .select-trigger > .el-input > .el-input__wrapper {
+    background: none;
+    box-shadow: none !important;
+    border-color: transparent;
+  }
+}
+
+/* 禁用 */
+body .el-input.is-disabled .el-input__wrapper,
+body .el-textarea.is-disabled .el-textarea__inner,
+body .el-select.el-select--disabled .el-input.is-disabled .el-input__wrapper,
+.el-range-editor.is-disabled.el-input__wrapper {
+  cursor: not-allowed;
+  border: eleVar('input', 'disabled-border');
+  background: eleVar('input', 'disabled-bg');
+  box-shadow: none;
+}
+
+.el-input.is-disabled .el-input__wrapper .el-input__inner,
+body .el-textarea.is-disabled .el-textarea__inner,
+.el-range-editor.is-disabled.el-input__wrapper input {
+  color: eleVar('input', 'disabled-color');
+  -webkit-text-fill-color: eleVar('input', 'disabled-color');
+}
+
+/* 小尺寸 */
+.el-input.el-input--small .el-input__wrapper {
+  padding: eleVar('input-sm', 'padding');
+}
+
+/* 大尺寸 */
+.el-input.el-input--large .el-input__wrapper {
+  padding: eleVar('input-lg', 'padding');
+}
+
+/* Textarea */
+body .el-textarea .el-input__count {
+  color: eleVar('input', 'count-color');
+  font-size: eleVar('input', 'count-size');
+  background: eleVar('textarea', 'count-bg');
+  padding: eleVar('textarea', 'count-padding');
+  bottom: eleVar('textarea', 'count-bottom');
+  right: eleVar('textarea', 'count-right');
+  box-sizing: border-box;
+  line-height: normal;
+}
+
+.el-textarea.el-input--small .el-textarea__inner {
+  padding: eleVar('textarea-sm', 'padding');
+  min-height: elVar('component-size', 'small') !important;
+}
+
+.el-textarea.el-input--large .el-textarea__inner {
+  padding: eleVar('textarea-lg', 'padding');
+  min-height: elVar('component-size', 'large') !important;
+}
+
+/* Select */
+.el-select .el-input .el-input__wrapper.is-focus,
+.el-select .el-input.el-input--suffix.is-focus .el-input__wrapper {
+  border: eleVar('input', 'focus-border');
+  background: eleVar('input', 'focus-bg');
+  box-shadow: eleVar('input', 'focus-shadow') !important;
+}
+
+/* Cascader */
+.el-cascader .el-input .el-input__wrapper .el-input__icon {
+  height: 1em;
+}
+
+/* DatePicker */
+.el-range-editor.is-disabled.el-input__wrapper input {
+  background: none;
+}
+
+/* InputNumber */
+body .el-input-number.is-disabled .el-input-number__increase,
+body .el-input-number.is-disabled .el-input-number__decrease {
+  color: elVar('disabled', 'text-color');
+  border-color: elVar('disabled', 'border-color');
+
+  &:hover {
+    color: elVar('disabled', 'text-color');
+  }
+}
+
+.el-input-number__increase,
+.el-input-number__decrease {
+  transition: color $ele-transition;
+}
+
+.el-input-number .el-input .el-input__wrapper {
+  padding-right: calc(32px + #{eleVar('input', 'icon-space')});
+}
+
+.el-input-number--small .el-input .el-input__wrapper {
+  padding-right: calc(24px + #{eleVar('input', 'icon-space')});
+}
+
+.el-input-number--large .el-input .el-input__wrapper {
+  padding-right: calc(40px + #{eleVar('input', 'icon-space')});
+}
+
+.el-input-number:not(.is-controls-right) .el-input__wrapper {
+  padding-left: calc(32px + #{eleVar('input', 'icon-space')});
+}
+
+.el-input-number--small:not(.is-controls-right) .el-input__wrapper {
+  padding-left: calc(24px + #{eleVar('input', 'icon-space')});
+}
+
+.el-input-number--large:not(.is-controls-right) .el-input__wrapper {
+  padding-left: calc(40px + #{eleVar('input', 'icon-space')});
+}
+
+/* 表单验证 */
+.el-form-item.is-error {
+  .el-input .el-input__wrapper,
+  .el-textarea .el-textarea__inner,
+  .el-select .el-input .el-input__wrapper,
+  .el-cascader .el-input .el-input__wrapper,
+  .el-range-editor.el-input__wrapper,
+  .el-input-number .el-input:not(.is-disabled) .el-input__wrapper {
+    border: eleVar('input-error', 'border');
+    background: eleVar('input-error', 'bg');
+    box-shadow: none;
+  }
+
+  .el-input .el-input__wrapper:hover,
+  .el-textarea .el-textarea__inner:hover,
+  .el-select .el-input .el-input__wrapper:hover,
+  .el-cascader .el-input .el-input__wrapper:hover,
+  .el-range-editor.el-input__wrapper:hover,
+  .el-input-number:hover .el-input .el-input__wrapper {
+    border: eleVar('input-error', 'hover-border');
+    background: eleVar('input-error', 'hover-bg');
+    box-shadow: eleVar('input-error', 'hover-shadow');
+  }
+
+  .el-input .el-input__wrapper.is-focus,
+  .el-select .el-input.el-input--suffix.is-focus .el-input__wrapper,
+  .el-cascader .el-input.el-input--suffix.is-focus .el-input__wrapper {
+    border: eleVar('input-error', 'focus-border');
+    background: eleVar('input-error', 'focus-bg');
+    box-shadow: eleVar('input-error', 'focus-shadow') !important;
+  }
+
+  .el-textarea .el-textarea__inner:focus,
+  .el-range-editor.el-input__wrapper.is-active,
+  .el-input-number .el-input .el-input__wrapper.is-focus {
+    border: eleVar('input-error', 'focus-border');
+    background: eleVar('input-error', 'focus-bg');
+    box-shadow: eleVar('input-error', 'focus-shadow');
+  }
+
+  .el-input.is-disabled .el-input__wrapper,
+  .el-textarea.is-disabled .el-textarea__inner,
+  .el-select .el-input.is-disabled .el-input__wrapper,
+  .el-cascader .el-input.is-disabled .el-input__wrapper,
+  .el-range-editor.el-input__wrapper.is-disabled,
+  .el-input-number.is-disabled .el-input .el-input__wrapper {
+    border: eleVar('input-error', 'disabled-border');
+    background: eleVar('input-error', 'disabled-bg');
+    box-shadow: none;
+  }
+
+  .el-input__validateIcon {
+    background: eleVar('input-error', 'status-color');
+  }
+}

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

@@ -82,27 +82,70 @@
   }
 }
 
+/* 多选标签 */
+.el-select-tags-wrapper .el-tag__content,
+.el-select__collapse-tag .el-tag__content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.el-select .el-tag__content .el-select__tags-text {
+  line-height: 14px;
+}
+
+.el-select .el-select-tags-wrapper.has-prefix {
+  margin: 0 !important;
+  box-sizing: border-box;
+}
+
+.el-select .el-select__tags {
+  box-sizing: border-box;
+  padding: 0 0 0 4px;
+  left: 0;
+}
+
 .el-select .el-select__tags .el-tag,
 .el-select__collapse-tags .el-select__collapse-tag .el-tag {
   flex-shrink: 0;
-  margin: 4px 4px 0 0;
+  margin: 2px 4px 2px 0;
   height: calc(elVar('component-size') - 4px - 4px);
   border: none;
 }
 
-.el-select .el-select__tags {
-  top: 2px;
-  transform: none;
+.el-select .el-select__tags .el-select__input {
+  margin: 0 0 0 5.8px !important;
 }
 
-.el-select .el-select-tags-wrapper.has-prefix {
-  margin: -2px 0 0 0 !important;
-  display: flex;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  padding: 0 0 0 4px;
+/* 小尺寸 */
+.el-select--small .el-select__tags .el-tag--small,
+.el-select__collapse-tags .el-select__collapse-tag .el-tag--small {
+  margin: 1px 4px 1px 0;
+  height: calc(elVar('component-size', 'small') - 4px - 2px);
+}
+
+.el-select--small .el-select__tags .el-select__input {
+  margin: 0 0 0 3.8px !important;
+}
+
+/* 大尺寸 */
+.el-select--large .el-select__tags {
+  padding: 1px 0 1px 6px;
+}
+
+.el-select--large .el-select__tags .el-tag {
+  height: calc(elVar('component-size', 'large') - 8px - 4px);
+}
+
+.el-select--large .el-select__tags .el-select__input {
+  margin: 0 0 0 7.8px !important;
+}
+
+/* 多选搜索框 */
+.el-select-tags-wrapper.has-prefix + .el-select__input {
+  margin: 0 0 0 2px !important;
 }
 
+/* 标签溢出气泡 */
 .el-popper > .el-select__collapse-tags {
   margin: -5px -11px;
   padding: 8px 10px;

package/es/ele-app/utils.d.ts

@@ -0,0 +1 @@
+export declare function useWave(): void;