iov-design 2.15.51 → 2.15.53

package/packages/select/src/select.vue

@@ -10,22 +10,29 @@
       ref="tags"
       :style="{ 'max-width': inputWidth - 32 + 'px', width: (inputWidth - tagsLeft - 32) + 'px', left: tagsLeft + 'px' }">
       <span class="el-tag__group" v-if="collapseTags && selected.length">
-        <el-tag
-          :closable="!selectDisabled"
-          :size="collapseTagSize"
-          :hit="selected[0].hitState"
-          type="info"
-          @close="deleteTag($event, selected[0])"
-          disable-transitions>
-          <span class="el-select__tags-text">{{ selected[0].currentLabel }}</span>
-        </el-tag>
+        <template v-for="(item, index) in selected">
+          <el-tag
+            :key="getValueKey(item)"
+            v-if="index <= multipleLimitShow - 1"
+            :closable="!selectDisabled"
+            :size="collapseTagSize"
+            :hit="item.hitState"
+            :maxWidth="multipleTagMaxWidth"
+            type="info"
+            @close="deleteTag($event, item)"
+            disable-transitions>
+            <span class="el-select__tags-text">{{ item.currentLabel }}</span>
+          </el-tag>
+        </template>
         <el-tag
           v-if="selected.length > 1"
           :closable="false"
           :size="collapseTagSize"
           type="info"
+          class="el-select__tags-count"
+          :class="{'el-select__tags-count-fixed': collapseTagsFixed}"
           disable-transitions>
-          <span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
+          <span class="el-select__tags-text">{{collapseTagsFixed ? '' : '+'}}{{ selected.length - 1 }}{{ collapseTagsSuffix }}</span>
         </el-tag>
       </span>
       <transition-group class="el-tag__group" @after-leave="resetInputHeight" v-if="!collapseTags">
@@ -35,6 +42,7 @@
           :closable="!item.disabled && !selectDisabled"
           :size="collapseTagSize"
           :hit="item.hitState"
+          :maxWidth="multipleTagMaxWidth"
           type="info"
           @close="deleteTag($event, item)"
           disable-transitions>
@@ -297,6 +305,22 @@
         type: Number,
         default: 0
       },
+      multipleLimitShow: {
+        type: Number,
+        default: 1
+      },
+      multipleTagMaxWidth: {
+        type: String,
+        default: 'none'
+      },
+      collapseTagsSuffix: {
+        type: String,
+        default: ''
+      },
+      collapseTagsFixed: {
+        type: Boolean,
+        default: false
+      },
       placeholder: {
         type: String,
         required: false

package/packages/tag/src/tag.vue

@@ -10,6 +10,10 @@
       color: String,
       size: String,
       icon: String,
+      maxWidth: {
+        type: String,
+        default: 'none'
+      },
       effect: {
         type: String,
         default: 'light',
@@ -47,7 +51,7 @@
           class={ classes }
           style={{ backgroundColor: this.color }}
           on-click={ this.handleClick }>
-          <span class="el-tag__inner">
+          <span class="el-tag__inner" style={{ maxWidth: this.maxWidth }}>
             { this.icon && <i class={`${this.icon} el-tag-icon`}></i> }
             <span class="el-tag__text">{ this.$slots.default }</span>
             {

package/packages/theme-chalk/src/button.scss

@@ -201,7 +201,7 @@
     &.el-button--text {
       padding: 0 8px;
       height: $--button-small-height;
-      line-height: $--button-small-height;
+      line-height: calc(#{$--button-small-height} - 2px);
     }
     @include when(icon-only) {
       font-size: $--button-icon-only-size;
@@ -216,7 +216,7 @@
     &.el-button--text {
       padding: 0 4px;
       height: $--button-mini-height;
-      line-height: $--button-mini-height;
+      line-height: calc(#{$--button-mini-height }- 2px);
     }
     @include when(icon-only) {
       font-size: $--button-icon-only-size;

package/packages/theme-chalk/src/common/var.scss

@@ -510,7 +510,7 @@ $--pagination-hover-color: $--color-primary-6 !default;
 /// color||Color|0
 $--popup-modal-background-color: $--color-black !default;
 /// opacity||Other|1
-$--popup-modal-opacity: 0.5 !default;
+$--popup-modal-opacity: 0.6 !default;
 
 /* Popover
 -------------------------- */

package/packages/theme-chalk/src/loading.scss

@@ -14,7 +14,7 @@
 @include b(loading-mask) {
   position: absolute;
   z-index: 2000;
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, .6);
   margin: 0;
   top: 0;
   right: 0;

package/packages/theme-chalk/src/mixins/_button.scss

@@ -64,7 +64,7 @@
 @mixin button-size($height, $padding-horizontal, $font-size, $border-radius) {
   padding: 0 $padding-horizontal;
   height: $height;
-  line-height: $height;
+  line-height: calc(#{$height} - 2px);
   font-size: $font-size;
   border-radius: $border-radius;
   &.is-round {

package/packages/theme-chalk/src/select.scss

@@ -141,6 +141,13 @@
     align-items: center;
     flex-wrap: wrap;
     pointer-events: none;
+    .el-select__tags-count-fixed {
+      border-radius: 50%;
+      text-align: center;
+      position: absolute;
+      right: 0;
+      justify-content: center;
+    }
   }
 
   @include e(tags-text) {
@@ -167,6 +174,9 @@
     pointer-events: auto;
     height: $--input-height - 8px;
     line-height: $--input-height - 8px;
+    &.el-select__tags-count-fixed {
+      min-width: $--input-height - 8px;
+    }
     &.el-tag--info {
       background: $--color-fill-2;
       color: $--color-text-6;
@@ -178,18 +188,27 @@
     .el-tag--medium {
       height: $--input-medium-height - 8px;
       line-height: $--input-medium-height - 8px;
+      &.el-select__tags-count-fixed {
+        min-width: $--input-medium-height - 8px;
+      }
     }
   }
   @include m(small) {
     .el-tag--small {
       height: $--input-small-height - 8px;
       line-height: $--input-small-height - 8px;
+      &.el-select__tags-count-fixed {
+        min-width: $--input-small-height - 8px;
+      }
     }
   }
   @include m(mini) {
     .el-tag--mini {
       height: $--input-mini-height - 8px;
       line-height: $--input-mini-height - 8px;
+      &.el-select__tags-count-fixed {
+        min-width: $--input-mini-height - 8px;
+      }
     }
   }
 }

package/packages/theme-chalk/src/tag.scss

@@ -243,6 +243,8 @@
   @include e(text) {
     display: inline-block;
     vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .el-tag-icon {

package/packages/theme-chalk/src/upload.scss

@@ -355,7 +355,6 @@
     width: calc(100% - 50px);
 
     .file-name:hover {
-      border-bottom: 1px solid $--color-primary-6;
       color: $--color-primary-6;
     }
   }

package/packages/upload/src/upload-list.vue

@@ -26,7 +26,7 @@
                 <i slot="error" class="el-image__error"></i>
               </el-image>
             </span>
-            <i v-else-if="['text'].includes(listType)" class="el-upload-list__icon" :style="iconStyle(file[fileNameAlias])"></i>
+            <i v-else-if="['text'].includes(listType)" class="el-upload-list__icon" :style="iconStyle(file.name || file[fileNameAlias])"></i>
             <div v-if="['text', 'picture'].includes(listType)" class="el-upload-list__name">
               <span class="file-name">{{file.name || file[fileNameAlias]}}</span>
             </div>

package/src/index.js

@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.51',
+  version: '2.15.53',
   locale: locale.use,
   i18n: locale.i18n,
   install,