From 6e8a0016eb36b521def8cc437cc75e6865ec14dd Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Mon, 21 Feb 2022 09:31:18 +0800
Subject: [PATCH] refactor(components): [el-input] use box-shadow to implement
 border (#6031)

* refactor(components): [el-input] use box-shadow to implement border

* fix: select position
---
 docs/examples/input/mixed-input.vue        |  18 +++
 packages/theme-chalk/src/cascader.scss     |  25 ++--
 packages/theme-chalk/src/common/var.scss   |  11 +-
 packages/theme-chalk/src/form.scss         |   4 +-
 packages/theme-chalk/src/input-number.scss |  10 +-
 packages/theme-chalk/src/input.scss        | 163 ++++++++++++++++-----
 packages/theme-chalk/src/select.scss       |   8 +-
 7 files changed, 175 insertions(+), 64 deletions(-)

diff --git a/docs/examples/input/mixed-input.vue b/docs/examples/input/mixed-input.vue
index fc0dfe2363..1d83b7c081 100644
--- a/docs/examples/input/mixed-input.vue
+++ b/docs/examples/input/mixed-input.vue
@@ -27,6 +27,24 @@
       </template>
     </el-input>
   </div>
+  <div class="mt-4">
+    <el-input
+      v-model="input3"
+      placeholder="Please input"
+      class="input-with-select"
+    >
+      <template #prepend>
+        <el-button :icon="Search"></el-button>
+      </template>
+      <template #append>
+        <el-select v-model="select" placeholder="Select" style="width: 110px">
+          <el-option label="Restaurant" value="1"></el-option>
+          <el-option label="Order No." value="2"></el-option>
+          <el-option label="Tel" value="3"></el-option>
+        </el-select>
+      </template>
+    </el-input>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index fdfb7d60ee..3b33d4cf46 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -16,10 +16,7 @@
   &:not(.is-disabled):hover {
     .#{$namespace}-input__inner {
       cursor: pointer;
-      border-color: var(
-        --el-input-hover-border,
-        map.get($input, 'hover-border')
-      );
+      box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
     }
   }
 
@@ -30,10 +27,12 @@
       text-overflow: ellipsis;
 
       &:focus {
-        border-color: var(
-          --el-input-focus-border,
-          map.get($input, 'focus-border')
-        );
+        box-shadow: 0 0 0 1px
+          var(
+            --el-input-focus-border-color,
+            map.get($input, 'focus-border-color')
+          )
+          inset;
       }
     }
 
@@ -65,10 +64,12 @@
 
     @include when(focus) {
       .#{$namespace}-input__inner {
-        border-color: var(
-          --el-input-focus-border,
-          map.get($input, 'focus-border')
-        );
+        box-shadow: 0 0 0 1px
+          var(
+            --el-input-focus-border-color,
+            map.get($input, 'focus-border-color')
+          )
+          inset;
       }
     }
   }
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 5acb56be24..d48fd81828 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -439,15 +439,18 @@ $input: () !default;
 $input: map.merge(
   (
     'text-color': var(--el-text-color-regular),
-    'border': var(--el-border-base),
+    'border': 0 0 0 1px var(--el-input-border-color) inset,
+    'hover-border': 0 0 0 1px var(--el-input-hover-border-color) inset,
+    'focus-border': 0 0 0 1px var(--el-input-focus-border-color) inset,
+    'transparent-border': 0 0 0 1px transparent inset,
     'border-color': var(--el-border-color-base),
     'border-radius': var(--el-border-radius-base),
     'bg-color': var(--el-color-white),
     'icon-color': var(--el-text-color-placeholder),
     'placeholder-color': var(--el-text-color-placeholder),
-    'hover-border': var(--el-border-color-hover),
+    'hover-border-color': var(--el-border-color-hover),
     'clear-hover-color': var(--el-text-color-secondary),
-    'focus-border': var(--el-color-primary),
+    'focus-border-color': var(--el-color-primary),
   ),
   $input
 );
@@ -1207,6 +1210,8 @@ $transition: map.merge(
     'fade-linear': opacity var(--el-transition-duration-fast) linear,
     'border': border-color var(--el-transition-duration-fast)
       var(--el-transition-function-ease-in-out-bezier),
+    'box-shadow': box-shadow var(--el-transition-duration-fast)
+      var(--el-transition-function-ease-in-out-bezier),
     'color': color var(--el-transition-duration-fast)
       var(--el-transition-function-ease-in-out-bezier),
   ),
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index f60ca597b4..de20a0119e 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -204,13 +204,13 @@ $form-item-label-top-margin-bottom: map.merge(
     .#{$namespace}-textarea__inner {
       &,
       &:focus {
-        border-color: var(--el-color-danger);
+        box-shadow: 0 0 0 1px var(--el-color-danger) inset;
       }
     }
     .#{$namespace}-input-group__append,
     .#{$namespace}-input-group__prepend {
       .#{$namespace}-input__inner {
-        border-color: transparent;
+        box-shadow: 0 0 0 1px transparent inset;
       }
     }
     .#{$namespace}-input__validateIcon {
diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
index bd849100cc..9b8033e869 100644
--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -49,10 +49,12 @@
       color: var(--el-color-primary);
 
       & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
-        border-color: var(
-          --el-input-focus-border,
-          map.get($input, 'focus-border')
-        );
+        box-shadow: 0 0 0 1px
+          var(
+            --el-input-focus-border-color,
+            map.get($input, 'focus-border-color')
+          )
+          inset;
       }
     }
 
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 17418bd1ef..69d0b8f603 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -16,6 +16,7 @@
   font-size: var(--el-font-size-base);
 
   @include e(inner) {
+    position: relative;
     display: block;
     resize: vertical;
     padding: 5px 15px;
@@ -27,12 +28,12 @@
     color: var(--el-input-text-color, map.get($input, 'text-color'));
     background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
     background-image: none;
-    border: var(--el-input-border, map.get($input, 'border'));
+    box-shadow: var(--el-input-border, map.get($input, 'border'));
     border-radius: var(
       --el-input-border-radius,
       map.get($input, 'border-radius')
     );
-    transition: var(--el-transition-border);
+    transition: var(--el-transition-box-shadow);
 
     &::placeholder {
       color: var(
@@ -42,18 +43,12 @@
     }
 
     &:hover {
-      border-color: var(
-        --el-input-hover-border,
-        map.get($input, 'hover-border')
-      );
+      box-shadow: var(--el-input-hover-border);
     }
 
     &:focus {
       outline: none;
-      border-color: var(
-        --el-input-focus-border,
-        map.get($input, 'focus-border')
-      );
+      box-shadow: var(--el-input-focus-border);
     }
   }
 
@@ -129,6 +124,7 @@
   }
 
   @include e(inner) {
+    position: relative;
     -webkit-appearance: none;
     background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
     background-image: none;
@@ -136,7 +132,6 @@
       --el-input-border-radius,
       map.get($input, 'border-radius')
     );
-    border: var(--el-input-border, map.get($input, 'border'));
     box-sizing: border-box;
     color: var(--el-input-text-color, map.get($input, 'text-color'));
     display: inline-block;
@@ -145,8 +140,9 @@
     line-height: map.get($input-height, 'default');
     outline: none;
     padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
-    transition: var(--el-transition-border);
+    transition: var(--el-transition-box-shadow);
     width: 100%;
+    box-shadow: var(--el-input-border, map.get($input, 'border'));
 
     &::placeholder {
       color: var(
@@ -156,18 +152,14 @@
     }
 
     &:hover {
-      border-color: var(
-        --el-input-hover-border,
-        map.get($input, 'hover-border')
-      );
+      box-shadow: var(--el-input-hover-border);
+      z-index: 1;
     }
 
     &:focus {
       outline: none;
-      border-color: var(
-        --el-input-focus-border,
-        map.get($input, 'focus-border')
-      );
+      box-shadow: var(--el-input-focus-border);
+      z-index: 2;
     }
   }
 
@@ -221,17 +213,15 @@
   @include when(active) {
     .#{$namespace}-input__inner {
       outline: none;
-      border-color: var(
-        --el-input-focus-border,
-        map.get($input, 'focus-color')
-      );
+      box-shadow: 0 0 0 1px
+        var(--el-input-focus-border, map.get($input, 'focus-color')) inset;
     }
   }
 
   @include when(disabled) {
     .#{$namespace}-input__inner {
       background-color: map.get($input-disabled, 'fill');
-      border-color: map.get($input-disabled, 'border');
+      box-shadow: 0 0 0 1px map.get($input-disabled, 'border') inset;
       color: map.get($input-disabled, 'text-color');
       cursor: not-allowed;
 
@@ -247,7 +237,7 @@
 
   @include when(exceed) {
     .#{$namespace}-input__inner {
-      border-color: var(--el-color-danger);
+      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
     }
 
     .#{$namespace}-input__suffix {
@@ -341,7 +331,6 @@
     vertical-align: middle;
     display: table-cell;
     position: relative;
-    border: $border-base;
     border-radius: var(--el-input-border-radius);
     padding: 0 20px;
     width: 1px;
@@ -354,7 +343,7 @@
     .#{$namespace}-select,
     .#{$namespace}-button {
       display: inline-block;
-      margin: -10px -20px;
+      margin: 0 -20px;
     }
 
     button.#{$namespace}-button,
@@ -364,8 +353,6 @@
       border-color: transparent;
       background-color: transparent;
       color: inherit;
-      border-top: 0;
-      border-bottom: 0;
     }
 
     .#{$namespace}-button,
@@ -378,35 +365,133 @@
     border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    box-shadow: 1px 0 0 0 var(--el-input-border-color) inset,
+      0 1px 0 0 var(--el-input-border-color) inset,
+      0 -1px 0 0 var(--el-input-border-color) inset;
   }
 
   @include e(append) {
     border-left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    box-shadow: 0 1px 0 0 var(--el-input-border-color) inset,
+      0 -1px 0 0 var(--el-input-border-color) inset,
+      -1px 0 0 0 var(--el-input-border-color) inset;
   }
 
   @include m(prepend) {
     .#{$namespace}-input__inner {
+      box-shadow: 1px 0 0 0px var(--el-input-border-color) inset,
+        0px 1px 0 0px var(--el-input-border-color) inset,
+        0px -1px 0 0px var(--el-input-border-color) inset;
+    }
+
+    > .#{$namespace}-input__inner {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
+      box-shadow: 0 0 0 1px var(--el-input-border-color) inset;
+      &:hover {
+        box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
+      }
     }
-    .#{$namespace}-select
-      .#{$namespace}-input.is-focus
-      .#{$namespace}-input__inner {
-      border-color: transparent;
+
+    @include e(prepend) {
+      .#{$namespace}-select {
+        .#{$namespace}-input {
+          .#{$namespace}-input__inner {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            &:focus {
+              outline: none;
+              box-shadow: 1px 0 0 0px var(--el-input-focus-border-color) inset,
+                1px 0 0 0px var(--el-input-focus-border-color),
+                0px 1px 0 0px var(--el-input-focus-border-color) inset,
+                0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
+            }
+          }
+          &.is-focus {
+            .#{$namespace}-input__inner {
+              box-shadow: 1px 0 0 0px var(--el-input-focus-border-color) inset,
+                1px 0 0 0px var(--el-input-focus-border-color),
+                0px 1px 0 0px var(--el-input-focus-border-color) inset,
+                0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
+              z-index: 2;
+              &:focus {
+                outline: none;
+                box-shadow: 1px 0 0 0px var(--el-input-focus-border-color) inset,
+                  1px 0 0 0px var(--el-input-focus-border-color),
+                  0px 1px 0 0px var(--el-input-focus-border-color) inset,
+                  0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
+              }
+            }
+          }
+        }
+        &:hover {
+          .#{$namespace}-input__inner {
+            box-shadow: 1px 0 0 0px var(--el-input-hover-border-color) inset,
+              1px 0 0 0px var(--el-input-hover-border-color),
+              0px 1px 0 0px var(--el-input-hover-border-color) inset,
+              0px -1px 0 0px var(--el-input-hover-border-color) inset !important;
+          }
+        }
+      }
     }
   }
 
   @include m(append) {
-    .#{$namespace}-input__inner {
+    > .#{$namespace}-input__inner {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
-    .#{$namespace}-select
-      .#{$namespace}-input.is-focus
-      .#{$namespace}-input__inner {
-      border-color: transparent;
+    @include e(append) {
+      .#{$namespace}-select {
+        .#{$namespace}-input {
+          .#{$namespace}-input__inner {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            box-shadow: -1px 0 0 0px var(--el-input-border-color),
+              -1px 0 0 0px var(--el-input-border-color) inset,
+              0px 1px 0 0px var(--el-input-border-color) inset,
+              0px -1px 0 0px var(--el-input-border-color) inset;
+            &:focus {
+              outline: none;
+              box-shadow: -1px 0 0 0px var(--el-input-focus-border-color),
+                -1px 0 0 0px var(--el-input-focus-border-color) inset,
+                0px 1px 0 0px var(--el-input-focus-border-color) inset,
+                0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
+            }
+          }
+          &.is-focus {
+            .#{$namespace}-input__inner {
+              outline: none;
+              box-shadow: -1px 0 0 0px var(--el-input-focus-border-color),
+                -1px 0 0 0px var(--el-input-focus-border-color) inset,
+                0px 1px 0 0px var(--el-input-focus-border-color) inset,
+                0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
+              &:focus {
+                outline: none;
+                box-shadow: -1px 0 0 0px var(--el-input-focus-border-color),
+                  -1px 0 0 0px var(--el-input-focus-border-color) inset,
+                  0px 1px 0 0px var(--el-input-focus-border-color) inset,
+                  0px -1px 0 0px var(--el-input-focus-border-color) inset !important;
+              }
+            }
+          }
+        }
+        &:hover {
+          .#{$namespace}-input__inner {
+            box-shadow: -1px 0 0 0px var(--el-input-hover-border-color),
+              -1px 0 0 0px var(--el-input-hover-border-color) inset,
+              0px 1px 0 0px var(--el-input-hover-border-color) inset,
+              0px -1px 0 0px var(--el-input-hover-border-color) inset;
+          }
+        }
+      }
     }
   }
 }
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index 86fffef519..b40f1d91f9 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -36,7 +36,7 @@
 
   &:hover:not(.#{$namespace}-select--disabled) {
     .#{$namespace}-input__inner {
-      border-color: var(--el-select-border-color-hover);
+      box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset;
     }
   }
 
@@ -47,7 +47,7 @@
     display: inline-flex;
 
     &:focus {
-      border-color: var(--el-select-input-focus-border-color) !important;
+      box-shadow: 0 0 0 1px var(--el-select-input-focus-border-color) inset;
     }
   }
 
@@ -88,7 +88,7 @@
         cursor: not-allowed;
 
         &:hover {
-          border-color: var(--el-select-disabled-border);
+          box-shadow: 0 0 0 1px var(--el-select-disabled-border) inset;
         }
       }
       & .#{$namespace}-select__caret {
@@ -97,7 +97,7 @@
     }
 
     &.is-focus .#{$namespace}-input__inner {
-      border-color: var(--el-select-input-focus-border-color) !important;
+      box-shadow: 0 0 0 1px var(--el-select-input-focus-border-color) inset !important;
     }
   }