iov-design 2.15.52 → 2.15.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iov-design",
-  "version": "2.15.52",
+  "version": "2.15.53",
   "description": "A Component Library for Vue.js.",
   "main": "lib/iov-design.common.js",
   "files": [

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/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/src/index.js

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