iov-design 2.15.24 → 2.15.25

package/package.json

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

package/packages/cascader/src/cascader.vue

@@ -175,9 +175,9 @@ const PopperMixin = {
 };
 
 const InputSizeMap = {
-  medium: 36,
-  small: 32,
-  mini: 28
+  medium: 32,
+  small: 30,
+  mini: 26
 };
 
 export default {
@@ -258,9 +258,10 @@ export default {
       return this.size || _elFormItemSize || (this.$ELEMENT || {}).size;
     },
     tagSize() {
-      return ['small', 'mini'].indexOf(this.realSize) > -1
-        ? 'mini'
-        : 'small';
+      return this.realSize;
+      // return ['small', 'mini'].indexOf(this.realSize) > -1
+      //   ? 'mini'
+      //   : 'small';
     },
     isDisabled() {
       return this.disabled || (this.elForm || {}).disabled;
@@ -355,7 +356,7 @@ export default {
   mounted() {
     const { input } = this.$refs;
     if (input && input.$el) {
-      this.inputInitialHeight = input.$el.offsetHeight || InputSizeMap[this.realSize] || 40;
+      this.inputInitialHeight = Math.max(input.$el.offsetHeight, InputSizeMap[this.realSize]) || 36;
     }
 
     if (!this.isEmptyValue(this.value)) {
@@ -641,6 +642,9 @@ export default {
       if (!inputInner) return;
 
       const tags = $el.querySelector('.el-cascader__tags');
+      const groupPrefix = $el.querySelector('.el-input-group--prefix');
+      const prefix = $el.querySelector('.el-input__prefix');
+      const prefixLabel = $el.querySelector('.el-input-group__prefix-label');
       let suggestionPanelEl = null;
 
       if (suggestionPanel && (suggestionPanelEl = suggestionPanel.$el)) {
@@ -650,8 +654,15 @@ export default {
 
       if (tags) {
         const offsetHeight = Math.round(tags.getBoundingClientRect().height);
-        const height = Math.max(offsetHeight + 6, inputInitialHeight) + 'px';
-        inputInner.style.height = height;
+        const height = Math.max(offsetHeight + 4, inputInitialHeight) + 'px';
+        const inputPaddingLeft = groupPrefix || prefix ? Math.round(window.getComputedStyle(inputInner).paddingLeft.replace(/px/, '')) : 0;
+        const prefixLabelWidth = prefixLabel && Math.round(prefixLabel.getBoundingClientRect().width) || 0;
+        if (groupPrefix) {
+          groupPrefix.style.height = height;
+        } else {
+          inputInner.style.height = height;
+        }
+        tags.style.left = (prefixLabelWidth + inputPaddingLeft) + 'px';
         if (this.dropDownVisible) {
           this.updatePopper();
         }

package/packages/select/src/select.vue

@@ -237,10 +237,9 @@
 
       collapseTagSize() {
         const sizeMap = {
-          '': 'medium',
-          large: 'medium',
-          medium: 'small',
-          small: 'mini',
+          large: '',
+          medium: 'medium',
+          small: 'small',
           mini: 'mini'
         };
         return sizeMap[this.selectSize];
@@ -653,13 +652,11 @@
       resetTagsLeft() {
         this.$nextTick(() => {
           const prefixLabel = this.$el.querySelector('.el-input-group__prefix-label');
-          if (prefixLabel) {
-            const style = prefixLabel && window.getComputedStyle(prefixLabel);
-            const width = +(style.width.replace(/px/, ''));
-            const paddingLeft = +(style.paddingLeft.replace(/px/, ''));
-            const paddingRight = +(style.paddingRight.replace(/px/, ''));
-            this.tagsLeft = (width + paddingLeft + paddingRight) + 'px';
-          }
+          const prefix = this.$el.querySelector('.el-input__prefix');
+          const inputInner = this.$el.querySelector('.el-input__inner');
+          const prefixLabelWidth = prefixLabel && Math.round(prefixLabel.getBoundingClientRect().width) || 0;
+          const inputPaddingLeft = prefixLabel || prefix ? Math.round(window.getComputedStyle(inputInner).paddingLeft.replace(/px/, '')) : 0;
+          this.tagsLeft = (prefixLabelWidth + inputPaddingLeft) + 'px';
         });
       },
 
@@ -673,18 +670,13 @@
         if (this.collapseTags && !this.filterable) return;
         this.$nextTick(() => {
           if (!this.$refs.reference) return;
-          let inputChildNodes = this.$refs.reference.$el.childNodes;
-          // 兼容input组件多加了一层el-input-group__inner
-          Array.from(inputChildNodes).find(child => {
-            if (child && child.classList && child.classList.contains('el-input-group__inner')) {
-              inputChildNodes = child;
-            }
-          });
-          // let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
+          const inputInner = this.$el.querySelector('.el-input__inner');
+          const groupPrefix = this.$el.querySelector('.el-input-group--prefix');
+          const input = groupPrefix || inputInner;
           const tags = this.$refs.tags;
           const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;
           const sizeInMap = this.initialInputHeight || 36;
-          inputChildNodes.style.height = this.selected.length === 0
+          input.style.height = this.selected.length === 0
             ? sizeInMap + 'px'
             : Math.max(
               tags ? (tagsHeight + (tagsHeight > sizeInMap ? 6 : 0)) : 0,

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

@@ -55,19 +55,36 @@
     }
   }
 
+  .el-tag {
+    height: $--input-height - 8px;
+    line-height: $--input-height - 8px;
+  }
+
   @include m(medium) {
     font-size: $--input-medium-font-size;
     line-height: $--input-medium-height;
+    .el-tag--medium {
+      height: $--input-medium-height - 8px;
+      line-height: $--input-medium-height - 8px;
+    }
   }
 
   @include m(small) {
     font-size: $--input-small-font-size;
     line-height: $--input-small-height;
+    .el-tag--small {
+      height: $--input-small-height - 8px;
+      line-height: $--input-small-height - 8px;
+    }
   }
 
   @include m(mini) {
     font-size: $--input-mini-font-size;
     line-height: $--input-mini-height;
+    .el-tag--mini {
+      height: $--input-mini-height - 8px;
+      line-height: $--input-mini-height - 8px;
+    }
   }
 
   @include when(disabled) {
@@ -100,6 +117,8 @@
     line-height: normal;
     text-align: left;
     box-sizing: border-box;
+    z-index: 3;
+    pointer-events: none;
 
     .el-tag {
       display: inline-flex;
@@ -108,6 +127,7 @@
       margin: 2px 0 2px 6px;
       text-overflow: ellipsis;
       color: $--color-text-6;
+      pointer-events: auto;
 
       &.is-disabled {
         color: $--color-text-3;

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

@@ -157,7 +157,13 @@
       box-shadow: $--input-box-shadow;
     }
   }
-
+  @include e((prefix, suffix)) {
+    .el-input__icon {
+      line-height: $--input-height - 2px;
+      display: flex;
+      align-items: center;
+    }
+  }
   @include e(suffix) {
     padding-left: 8px;
     position: absolute;
@@ -434,9 +440,6 @@
     &.is-disabled {
       background-color: $--input-disabled-fill;
     }
-    .el-input__icon {
-      line-height: $--input-height - 2px;
-    }
     .el-input__inner,
     &:focus {
       margin: 0 auto;

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

@@ -144,23 +144,6 @@
     text-overflow: ellipsis;
   }
 
-  @include m(large) {
-    .el-tag--medium {
-      height: 28px;
-    }
-  }
-  @include m(medium) {
-    .el-tag--small {
-      height: 24px;
-    }
-  }
-  @include m(mini) {
-    .el-tag--mini {
-      height: 18px;
-    }
-  }
-
-
   &.is-disabled {
     .el-tag {
       &.el-tag--info {
@@ -178,13 +161,31 @@
     max-width: 100%;
     align-items: center;
     pointer-events: auto;
+    height: $--input-height - 8px;
+    line-height: $--input-height - 8px;
     &.el-tag--info {
       background: $--color-fill-2;
       color: $--color-text-6;
       border: 0 none;
     }
-    &.el-tag--medium {
-      height: 28px;
+  }
+
+  @include m(medium) {
+    .el-tag--medium {
+      height: $--input-medium-height - 8px;
+      line-height: $--input-medium-height - 8px;
+    }
+  }
+  @include m(small) {
+    .el-tag--small {
+      height: $--input-small-height - 8px;
+      line-height: $--input-small-height - 8px;
+    }
+  }
+  @include m(mini) {
+    .el-tag--mini {
+      height: $--input-mini-height - 8px;
+      line-height: $--input-mini-height - 8px;
     }
   }
 }

package/src/index.js

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