iov-design 2.15.16 → 2.15.18

package/packages/input/src/input.vue

@@ -8,8 +8,6 @@
       'el-input-group': $slots.prepend || $slots.append || $slots.prefixLabel || $slots.suffixLabel,
       'el-input-group--append': $slots.append,
       'el-input-group--prepend': $slots.prepend,
-      'el-input-group--prefix-label': $slots.prefixLabel,
-      'el-input-group--suffix-label': $slots.suffixLabel,
       'is-focus': ($slots.suffixLabel || $slots.prefixLabel) && focused,
       'el-input--prefix': $slots.prefix || prefixIcon,
       'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
@@ -23,55 +21,61 @@
       <div class="el-input-group__prepend" v-if="$slots.prepend">
         <slot name="prepend"></slot>
       </div>
-      <!-- 前置标签 -->
-      <div class="el-input-group__prefix-label" v-if="$slots.prefixLabel">
-        <slot name="prefixLabel"></slot>
-      </div>
-      <input
-        :tabindex="tabindex"
-        v-if="type !== 'textarea'"
-        class="el-input__inner"
-        v-bind="$attrs"
-        :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
-        :disabled="inputDisabled"
-        :readonly="readonly"
-        :autocomplete="autoComplete || autocomplete"
-        ref="input"
-        @compositionstart="handleCompositionStart"
-        @compositionupdate="handleCompositionUpdate"
-        @compositionend="handleCompositionEnd"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @change="handleChange"
-        :aria-label="label"
-      >
-      <!-- 前置内容 -->
-      <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
-        <slot name="prefix"></slot>
-        <i class="el-input__icon" v-if="prefixIcon" :class="prefixIcon"></i>
-      </span>
-      <!-- 后置内容 -->
-      <span class="el-input__suffix" v-if="getSuffixVisible()">
-        <span class="el-input__suffix-inner">
-          <i v-if="showClear" class="el-input__icon iov-icon-close-mini el-input__clear" @mousedown.prevent @click="clear"></i>
-          <!-- 后置标签 -->
-          <span class="el-input-group__suffix-label" v-if="$slots.suffixLabel">
-            <slot name="suffixLabel"></slot>
-          </span>
-          <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
-            <slot name="suffix"></slot>
-            <i class="el-input__icon" v-if="suffixIcon" :class="suffixIcon"></i>
-          </template>
-          <i v-if="showPwdVisible" class="el-input__icon" :class="passwordVisible ? 'iov-icon-eye' : 'iov-icon-eye-close'" @click="handlePasswordVisible"></i>
-          <span v-if="isWordLimitVisible" class="el-input__count">
-            <span class="el-input__count-inner">
-              {{ textLength }}/{{ upperLimit }}
+      <div class="el-input-group__inner" :class="{
+          'el-input-group--prefix': $slots.prefixLabel,
+          'el-input-group--suffix': $slots.suffixLabel,
+          'is-focus': ($slots.suffixLabel || $slots.prefixLabel) && focused
+        }">
+        <!-- 前置标签 -->
+        <div class="el-input-group__prefix-label" v-if="$slots.prefixLabel">
+          <slot name="prefixLabel"></slot>
+        </div>
+        <input
+          :tabindex="tabindex"
+          v-if="type !== 'textarea'"
+          class="el-input__inner"
+          v-bind="$attrs"
+          :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
+          :disabled="inputDisabled"
+          :readonly="readonly"
+          :autocomplete="autoComplete || autocomplete"
+          ref="input"
+          @compositionstart="handleCompositionStart"
+          @compositionupdate="handleCompositionUpdate"
+          @compositionend="handleCompositionEnd"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :aria-label="label"
+        >
+        <!-- 前置内容 -->
+        <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
+          <slot name="prefix"></slot>
+          <i class="el-input__icon" v-if="prefixIcon" :class="prefixIcon"></i>
+        </span>
+        <!-- 后置内容 -->
+        <span class="el-input__suffix" v-if="getSuffixVisible()">
+          <span class="el-input__suffix-inner">
+            <i v-if="showClear" class="el-input__icon iov-icon-close-mini el-input__clear" @mousedown.prevent @click="clear"></i>
+            <!-- 后置标签 -->
+            <span class="el-input-group__suffix-label" v-if="$slots.suffixLabel">
+              <slot name="suffixLabel"></slot>
+            </span>
+            <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
+              <slot name="suffix"></slot>
+              <i class="el-input__icon" v-if="suffixIcon" :class="suffixIcon"></i>
+            </template>
+            <i v-if="showPwdVisible" class="el-input__icon" :class="passwordVisible ? 'iov-icon-eye' : 'iov-icon-eye-close'" @click="handlePasswordVisible"></i>
+            <span v-if="isWordLimitVisible" class="el-input__count">
+              <span class="el-input__count-inner">
+                {{ textLength }}/{{ upperLimit }}
+              </span>
             </span>
           </span>
+          <i class="el-input__icon" v-if="validateState" :class="['el-input__validateIcon', validateIcon]"></i>
         </span>
-        <i class="el-input__icon" v-if="validateState" :class="['el-input__validateIcon', validateIcon]"></i>
-      </span>
+      </div>
       <!-- 后置元素 -->
       <div class="el-input-group__append" v-if="$slots.append">
         <slot name="append"></slot>
@@ -377,10 +381,10 @@
         const isSelect = pendantEl.querySelector('.el-select');
         const isButton = pendantEl.querySelector('.el-button');
         if (isSelect) {
-          addClass(pendantEl, 'has-select');
+          addClass(pendantEl, 'is-select');
         }
         if (isButton) {
-          addClass(pendantEl, 'has-button');
+          addClass(pendantEl, 'is-button');
         }
       },
       calcIconOffset(place) {
@@ -388,7 +392,7 @@
         if (!elList.length) return;
         let el = null;
         for (let i = 0; i < elList.length; i++) {
-          if (elList[i].parentNode === this.$el) {
+          if (elList[i].parentNode.parentNode === this.$el) {
             el = elList[i];
             break;
           }
@@ -410,9 +414,9 @@
         const embedEl = this.$el.querySelector(`.el-input-group__${place}-label`);
 
         if (this.$slots[pendant] && this.$slots[embed]) {
-          el.style.transform = place === 'prefix' ? `translateX(${pendantEl.offsetWidth + embedEl.offsetWidth}px)` : `translateX(-${pendantEl.offsetWidth}px)`;
+          el.style.transform = place === 'prefix' ? `translateX(${pendantEl.offsetWidth + embedEl.offsetWidth}px)` : '';
         } else if (this.$slots[pendant]) {
-          el.style.transform = place === 'prefix' ? `translateX(${pendantEl.offsetWidth}px)` : `translateX(-${pendantEl.offsetWidth}px)`;
+          el.style.transform = place === 'prefix' ? `translateX(${pendantEl.offsetWidth}px)` : '';
         } else if (this.$slots[embed]) {
           el.style.transform = place === 'prefix' ? `translateX(${embedEl.offsetWidth}px)` : '';
         } else {

package/packages/select/src/select.vue

@@ -8,7 +8,7 @@
       class="el-select__tags"
       v-if="multiple"
       ref="tags"
-      :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }">
+      :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%', left: tagsLeft }">
       <span class="el-tag__group" v-if="collapseTags && selected.length">
         <el-tag
           :closable="!selectDisabled"
@@ -338,7 +338,8 @@
         currentPlaceholder: '',
         menuVisibleOnFocus: false,
         isOnComposition: false,
-        isSilentBlur: false
+        isSilentBlur: false,
+        tagsLeft: 0
       };
     },
 
@@ -649,6 +650,19 @@
         }
       },
 
+      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';
+          }
+        });
+      },
+
       resetInputState(e) {
         if (e.keyCode !== 8) this.toggleLastOptionHitState(false);
         this.inputLength = this.$refs.input.value.length * 15 + 20;
@@ -660,6 +674,12 @@
         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.childNodes;
+            }
+          });
           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
           const tags = this.$refs.tags;
           const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;
@@ -812,7 +832,10 @@
 
       handleResize() {
         this.resetInputWidth();
-        if (this.multiple) this.resetInputHeight();
+        if (this.multiple) {
+          this.resetInputHeight();
+          this.resetTagsLeft();
+        }
       },
 
       checkDefaultFirstOption() {

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

@@ -144,19 +144,20 @@
   }
 
   @include when(error) {
-    & .el-input-group--prefix-label,
-    & .el-input-group--suffix-label {
-      & {
-        border-color: $--color-danger-6;
-      }
-      &.is-focus {
+    .el-input-group__inner {
+      &.el-input-group--prefix,
+      &.el-input-group--suffix {
         border-color: $--color-danger-6;
-        box-shadow: 0 0 0 2px rgba(245,63,63,0.1);
-      }
-      & .el-input__inner,
-      & .el-input__inner:focus {
-        border-color: transparent;
-        box-shadow: none;
+        z-index: 3;
+        &.is-focus {
+          border-color: $--color-danger-6;
+          box-shadow: 0 0 0 2px rgba(245,63,63,0.1);
+        }
+        .el-input__inner,
+        .el-input__inner:focus {
+          border-color: transparent;
+          box-shadow: none;
+        }
       }
     }
     & .el-input__inner,
@@ -173,7 +174,7 @@
     & .el-input-group__prepend {
       & .el-input__inner,
       & .el-input__inner:focus {
-        border-color: transparent;
+        border-color: $--color-line-2;
         box-shadow: none;
       }
     }

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

@@ -293,8 +293,8 @@
       line-height: $--input-medium-height - 2px;
     }
 
-    &.el-input-group--prefix-label,
-    &.el-input-group--suffix-label {
+    .el-input-group--prefix,
+    .el-input-group--suffix {
       height: $--input-medium-height;
       .el-input__inner {
         height: $--input-medium-height - 2px;
@@ -327,8 +327,8 @@
       line-height: $--input-small-height - 2px;
     }
 
-    &.el-input-group--prefix-label,
-    &.el-input-group--suffix-label {
+    .el-input-group--prefix,
+    .el-input-group--suffix {
       height: $--input-small-height;
       .el-input__inner {
         height: $--input-small-height - 2px;
@@ -361,8 +361,8 @@
       line-height: $--input-mini-height - 2px;
     }
 
-    &.el-input-group--prefix-label,
-    &.el-input-group--suffix-label {
+    .el-input-group--prefix,
+    .el-input-group--suffix {
       height: $--input-mini-height;
       .el-input__inner {
         height: $--input-mini-height - 2px;
@@ -384,28 +384,32 @@
     display: block;
     // border-radius: 0;
   }
-  .el-input__inner {
-    z-index: 1;
+  .el-input-group__inner {
+    flex: 1;
+    display: flex;
+    position: relative;
     &:hover {
-      z-index: 1;
+      z-index: 2;
     }
-    &:focus {
+    .el-input__inner:focus {
       z-index: 2;
     }
   }
   @include m(append) {
-    .el-input__inner {
+    .el-input__inner,
+    .el-input-group__inner {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
   @include m(prepend) {
-    .el-input__inner {
+    .el-input__inner,
+    .el-input-group__inner {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
-  @include m((prefix-label, suffix-label)) {
+  @include m((prefix, suffix)) {
     color: $--input-font-color;
     background-color: $--input-background-color;
     background-image: none;
@@ -426,6 +430,7 @@
       outline: none;
       border-color: $--input-focus-border;
       box-shadow: $--input-box-shadow;
+      z-index: 2;
     }
     &.is-disabled {
       background-color: $--input-disabled-fill;
@@ -460,15 +465,31 @@
     border-radius: $--input-border-radius;
     height: $--input-height - 2px;
     line-height: $--input-height - 2px;
+    box-sizing: border-box;
 
     &:focus {
       outline: none;
     }
+    .el-select {
+      .el-input.is-focus .el-input__inner {
+        border: 0 none;
+        box-shadow: none;
+      }
+    }
+  }
+
+  @include e(prefix-label) {
+    .el-select {
+      margin-left: -12px;
+    }
   }
 
   @include e(suffix-label) {
     padding: 0 12px 0 0;
     display: inline;
+    .el-select {
+      margin-right: -12px;
+    }
   }
 
   @include e((append, prepend)) {
@@ -490,16 +511,27 @@
       box-shadow: $--input-box-shadow;
     }
 
-    &.has-select,
-    &.has-button {
+    &.is-select,
+    &.is-button {
       border: 0 none;
       padding: 0;
       .el-input__suffix {
         background: none;
       }
-    }
-    &.has-button {
-      z-index: 2;
+      // &:hover {
+      //   z-index: 2;
+      // }
+      // &:hover {
+      //   .el-input {
+      //     z-index: 2;
+      //   }
+      // }
+      // .el-input.is-focus {
+      //   z-index: 2;
+      // }
+      // .el-input__inner:focus {
+      //   z-index: 2;
+      // }
     }
     .is-focus {
       .el-input__inner {

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

@@ -130,7 +130,7 @@
     position: absolute;
     line-height: normal;
     white-space: normal;
-    z-index: $--index-normal;
+    z-index: 3;
     top: 50%;
     transform: translateY(-50%);
     display: flex;

package/src/index.js

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