iov-design 2.15.52 → 2.15.54

package/package.json

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

package/packages/divider/src/main.vue

@@ -2,6 +2,12 @@
   <div
     v-bind="data.attrs"
     v-on="listeners"
+    :style="{
+      borderBottomStyle: props.direction === 'horizontal' && props.type || '',
+      borderBottomColor: props.direction === 'horizontal' && props.color || '',
+      borderRightStyle: props.direction === 'vertical' && props.type || '',
+      borderRightColor: props.direction === 'vertical' && props.color || ''
+    }"
     :class="[data.staticClass, 'el-divider', `el-divider--${props.direction}`]"
   >
     <div
@@ -30,6 +36,14 @@ export default {
       validator(val) {
         return ['left', 'center', 'right'].indexOf(val) !== -1;
       }
+    },
+    color: {
+      type: String,
+      default: '' // $--color-line-1
+    },
+    type: {
+      type: String,
+      default: ''
     }
   }
 };

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/divider.scss

@@ -2,35 +2,36 @@
 @import "mixins/mixins";
 
 @include b(divider) {
-  background-color: $--border-color-base;
   position: relative;
+  border-bottom: 1px dashed $--color-line-1;
 
   @include m(horizontal) {
     display: block;
-    height: 1px;
+    height: 0;
+    font-size: 0;
     width: 100%;
-    margin: 24px 0;
   }
 
   @include m(vertical) {
     display: inline-block;
-    width: 1px;
+    width: 0;
     height: 1em;
     margin: 0 8px;
     vertical-align: middle;
+    border-right: 1px dashed $--color-line-1;
+    border-bottom: 0 none;
     position: relative;
   }
 
   @include e(text) {
     position: absolute;
-    background-color: $--color-white;
-    padding: 0 20px;
-    font-weight: 500;
-    color: $--color-text-primary;
-    font-size: 14px;
+    background-color: #fff;
+    padding: 0 8px;
+    color: $--color-text-6;
+    font-size: 13px;
 
     @include when(left) {
-      left: 20px;
+      left: 16px;
       transform: translateY(-50%);
     }
 
@@ -40,8 +41,8 @@
     }
 
     @include when(right)  {
-      right: 20px;
+      right: 16px;
       transform: translateY(-50%);
     }
   }
-}
+}

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.54',
   locale: locale.use,
   i18n: locale.i18n,
   install,