feat(input): focus state with error

src/_mixins/use-theme.js

@@ -13,12 +13,13 @@ function useTheme (resolveId, mountId, style, defaultTheme, props) {
     // keep props to make theme overrideable
     const {
       unstableTheme: { common, self, peers = {} } = {},
-      unstableThemeOverrides: {
-        common: commonOverrides,
-        self: selfOverrides,
-        peers: peersOverrides = {}
-      } = {}
+      unstableThemeOverrides: selfOverrides = {},
+      builtinThemeOverrides: builtinOverrides = {}
     } = props
+    const {
+      common: commonOverrides,
+      peers: peersOverrides = {}
+    } = selfOverrides
     const {
       mergedUnstableTheme: {
         common: injectedGlobalCommon,
@@ -30,13 +31,13 @@ function useTheme (resolveId, mountId, style, defaultTheme, props) {
       } = {},
       mergedUnstableThemeOverrides: {
         common: injectedGlobalCommonOverrides,
-        [resolveId]: {
-          common: injectedCommonOverrides,
-          self: injectedSelfOverrides,
-          peers: injectedPeersOverrides = {}
-        } = {}
+        [resolveId]: injectedSelfOverrides = {}
       } = {}
     } = NConfigProvider
+    const {
+      common: injectedCommonOverrides,
+      peers: injectedPeersOverrides = {}
+    } = injectedSelfOverrides
     const mergedCommon = merge(
       common ||
         injectedCommon ||
@@ -49,6 +50,7 @@ function useTheme (resolveId, mountId, style, defaultTheme, props) {
     )
     const mergedSelf = merge(
       (self || injectedSelf || defaultTheme.self)?.(mergedCommon) || {},
+      builtinOverrides,
       injectedSelfOverrides,
       selfOverrides
     )
@@ -70,6 +72,10 @@ useTheme.props = {
   unstableThemeOverrides: {
     type: Object,
     default: undefined
+  },
+  builtinThemeOverrides: {
+    type: Object,
+    default: undefined
   }
 }
 

src/input/src/Input.vue

@@ -84,7 +84,7 @@
           @keyup="handleKeyUp"
         >
         <div v-if="showPlaceholder1" class="n-input__placeholder">
-          {{ mergedPlaceholder[0] }}
+          <span>{{ mergedPlaceholder[0] }}</span>
         </div>
       </div>
       <n-icon-config-provider
@@ -126,7 +126,7 @@
           @keyup="handleKeyUp"
         >
         <div v-if="showPlaceholder2" class="n-input__placeholder">
-          {{ mergedPlaceholder[1] }}
+          <span>{{ mergedPlaceholder[1] }}</span>
         </div>
       </div>
       <n-icon-config-provider class="n-input__suffix" :depth="disabled ? 5 : 4">
@@ -287,9 +287,10 @@ function createMethods (
     }
     if (
       !(
-        e.relatedTarget === inputRef.value ||
-        e.relatedTarget === input2Ref.value ||
-        e.relatedTarget === textareaRef.value
+        e.relatedTarget !== null &&
+        (e.relatedTarget === inputRef.value ||
+          e.relatedTarget === input2Ref.value ||
+          e.relatedTarget === textareaRef.value)
       )
     ) {
       inputFocusedRef.value = false
@@ -318,10 +319,11 @@ function createMethods (
   }
   const dealWithEvent = (e, type) => {
     if (
-      e.relatedTarget === inputRef.value ||
-      e.relatedTarget === input2Ref.value ||
-      e.relatedTarget === textareaRef.value ||
-      e.relatedTarget === wrapperRef.value
+      e.relatedTarget !== null &&
+      (e.relatedTarget === inputRef.value ||
+        e.relatedTarget === input2Ref.value ||
+        e.relatedTarget === textareaRef.value ||
+        e.relatedTarget === wrapperRef.value)
     ) {
       /**
        * activeElement transfer inside the input, do nothing
@@ -421,6 +423,7 @@ export default defineComponent({
     NBaseClearButton
   },
   props: {
+    ...useTheme.props,
     bordered: {
       type: Boolean,
       default: undefined

src/input/src/styles/input-group.cssr.js

@@ -23,11 +23,11 @@ export default cB('input-group', `
         border-top-right-radius: 0!important;
         border-bottom-right-radius: 0!important;
       `, [
-        cE('input, add-button, border-mask, border', `
+        cE('input, add-button, state-border, border', `
           border-top-right-radius: 0!important;
           border-bottom-right-radius: 0!important;
         `, [
-          cB('input-number-button-border-mask', `
+          cB('input-number-button-state-border', `
             border-top-right-radius: 0!important;
             border-bottom-right-radius: 0!important;
           `),
@@ -44,11 +44,11 @@ export default cB('input-group', `
         border-top-left-radius: 0!important;
         border-bottom-left-radius: 0!important;
       `, [
-        cE('input, minus-button, border-mask, border', `
+        cE('input, minus-button, state-border, border', `
           border-top-left-radius: 0!important;
           border-bottom-left-radius: 0!important;
         `, [
-          cB('input-number-button-border-mask', `
+          cB('input-number-button-state-border', `
             border-top-left-radius: 0!important;
             border-bottom-left-radius: 0!important;
           `),
@@ -63,7 +63,7 @@ export default cB('input-group', `
         border-top-right-radius: 0!important;
         border-bottom-right-radius: 0!important;
       `, [
-        cE('border-mask, border', `
+        cE('state-border, border', `
           border-top-right-radius: 0!important;
           border-bottom-right-radius: 0!important;
         `)
@@ -72,7 +72,7 @@ export default cB('input-group', `
         border-top-left-radius: 0!important;
         border-bottom-left-radius: 0!important;
       `, [
-        cE('border-mask, border', `
+        cE('state-border, border', `
           border-top-left-radius: 0!important;
           border-bottom-left-radius: 0!important;
         `)

src/input/src/styles/input.cssr.js

@@ -50,6 +50,7 @@ export default c([
       border: none;
       outline: none;
       background-color: transparent;
+      text-align: inherit;
       transition:
         caret-color .3s var(--bezier),
         color .3s var(--bezier),
@@ -81,7 +82,12 @@ export default c([
       bottom: 0;
       overflow: hidden;
       color: var(--placeholder-color);
-    `),
+    `, [
+      c('span', {
+        width: '100%',
+        display: 'inline-block'
+      })
+    ]),
     // input
     cB('input-wrapper', `
       display: inline-flex;
@@ -149,7 +155,6 @@ export default c([
         color: var(--text-color);
       `)
     ]),
-
     cM('disabled', {
       cursor: 'not-allowed',
       backgroundColor: 'var(--color-disabled)'
@@ -219,8 +224,7 @@ export default c([
         fontSize: 'var(--icon-size)'
       }),
       cB('icon', {
-        fontSize: 'var(--icon-size)',
-        transition: 'color .3s var(--bezier)'
+        fontSize: 'var(--icon-size)'
       })
     ])
   ])