refactor(selection): placeholder part

src/_base/selection/src/Selection.vue

@@ -122,7 +122,7 @@
           ref="patternInput"
           class="n-base-selection-label__input"
           :value="(patternInputFocused && active) ? pattern : label"
-          :placeholder="selectedOption ? label : placeholder"
+          :placeholder="null"
           :readonly="!disabled && filterable && (active || autofocus) ? false : 'readonly'"
           :disabled="disabled"
           tabindex="-1"
@@ -131,6 +131,12 @@
           @blur="handlePatternInputBlur"
           @input="handlePatternInputInput"
         >
+        <div
+          v-if="!pattern && (active || !selectedOption)"
+          class="n-base-selection-label__placeholder"
+        >
+          {{ filterablePlaceholder }}
+        </div>
         <n-base-suffix
           class="n-base-selection__mark"
           :loading="loading"
@@ -158,11 +164,10 @@
           {{ label }}
         </div>
         <div
-          v-else
-          key="placeholder"
-          class="n-base-selection-label__input n-base-selection-label__input--placeholder"
+          v-if="!(label && label.length)"
+          class="n-base-selection-label__placeholder"
         >
-          {{ labelPlaceholder }}
+          {{ placeholder }}
         </div>
         <n-base-suffix
           class="n-base-selection__mark"
@@ -304,7 +309,7 @@ export default {
       if (!this.syntheticClearable) return true
       else return !(this.hover && this.selected)
     },
-    labelPlaceholder () {
+    filterablePlaceholder () {
       return this.selectedOption ? this.selectedOption.label : this.placeholder
     },
     label () {

src/_base/selection/src/styles/themed-base.js

@@ -115,6 +115,7 @@ export default c([
       }, [
         cE('input', {
           raw: `
+            line-height: inherit;
             outline: none;
             cursor: pointer;
             box-sizing: border-box;
@@ -129,15 +130,21 @@ export default c([
           `,
           color: pallete.textColor,
           transition: `color .3s ${cubicBezierEaseInOut}`
-        }, [
-          c('&::placeholder', {
-            transition: `color .3s ${cubicBezierEaseInOut}`,
-            color: pallete.placeholderColor
-          }),
-          cM('placeholder', {
-            color: pallete.placeholderColor
-          })
-        ])
+        }),
+        cE('placeholder', {
+          lineHeight: 'inherit',
+          pointerEvents: 'none',
+          position: 'absolute',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          padding: `0 26px 0 14px`,
+          color: pallete.placeholderColor,
+          transition: `color .3s ${cubicBezierEaseInOut}`
+        })
       ]),
       cNotM('disabled', [
         cM('focus', [

src/select/src/Select.vue

@@ -73,7 +73,7 @@
               :pattern="pattern"
               :tree-mate="treeMate"
               :multiple="multiple"
-              :size="mergedSize"
+              size="medium"
               :filterable="filterable"
               :value="value"
               @menu-toggle-option="handleToggleOption"