fix(input, select): form item style

src/_base/selection/src/Selection.vue

@@ -353,23 +353,23 @@ export default defineComponent({
           '--text-color': textColor,
           '--text-color-disabled': textColorDisabled,
           // form warning
-          'color-active-warning': colorActiveWarning,
+          '--color-active-warning': colorActiveWarning,
-          'box-shadow-focus-warning': boxShadowFocusWarning,
+          '--box-shadow-focus-warning': boxShadowFocusWarning,
-          'box-shadow-active-warning': boxShadowActiveWarning,
+          '--box-shadow-active-warning': boxShadowActiveWarning,
-          'box-shadow-hover-warning': boxShadowHoverWarning,
+          '--box-shadow-hover-warning': boxShadowHoverWarning,
-          'border-warning': borderWarning,
+          '--border-warning': borderWarning,
-          'border-focus-warning': borderFocusWarning,
+          '--border-focus-warning': borderFocusWarning,
-          'border-hover-warning': borderHoverWarning,
+          '--border-hover-warning': borderHoverWarning,
-          'border-active-warning': borderActiveWarning,
+          '--border-active-warning': borderActiveWarning,
           // form error
-          'color-active-error': colorActiveError,
+          '--color-active-error': colorActiveError,
-          'box-shadow-focus-error': boxShadowFocusError,
+          '--box-shadow-focus-error': boxShadowFocusError,
-          'box-shadow-active-error': boxShadowActiveError,
+          '--box-shadow-active-error': boxShadowActiveError,
-          'box-shadow-hover-error': boxShadowHoverError,
+          '--box-shadow-hover-error': boxShadowHoverError,
-          'border-error': borderError,
+          '--border-error': borderError,
-          'border-focus-error': borderFocusError,
+          '--border-focus-error': borderFocusError,
-          'border-hover-error': borderHoverError,
+          '--border-hover-error': borderHoverError,
-          'border-active-error': borderActiveError
+          '--border-active-error': borderActiveError
         }
       })
     }

src/input/src/Input.vue

@@ -818,6 +818,18 @@ export default defineComponent({
             textColorDisabled,
             boxShadowFocus,
             iconSize,
+            colorFocusWarning,
+            boxShadowFocusWarning,
+            boxShadowHoverWarning,
+            borderWarning,
+            borderFocusWarning,
+            borderHoverWarning,
+            colorFocusError,
+            boxShadowFocusError,
+            boxShadowHoverError,
+            borderError,
+            borderFocusError,
+            borderHoverError,
             [createKey('fontSize', size)]: fontSize,
             [createKey('height', size)]: height
           }
@@ -844,7 +856,21 @@ export default defineComponent({
           '--color-disabled': colorDisabled,
           '--color-focus': colorFocus,
           '--text-color-disabled': textColorDisabled,
-          '--box-shadow-focus': boxShadowFocus
+          '--box-shadow-focus': boxShadowFocus,
+          // form warning
+          '--color-focus-warning': colorFocusWarning,
+          '--box-shadow-focus-warning': boxShadowFocusWarning,
+          '--box-shadow-hover-warning': boxShadowHoverWarning,
+          '--border-warning': borderWarning,
+          '--border-focus-warning': borderFocusWarning,
+          '--border-hover-warning': borderHoverWarning,
+          // form error
+          '--color-focus-error': colorFocusError,
+          '--box-shadow-focus-error': boxShadowFocusError,
+          '--box-shadow-hover-error': boxShadowHoverError,
+          '--border-error': borderError,
+          '--border-focus-error': borderFocusError,
+          '--border-hover-error': borderHoverError
         }
       })
     }

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

@@ -1,4 +1,4 @@
-import { cB, c, cE, cM, cNotM } from '../../../_utils/cssr'
+import { cB, c, cE, cM, cNotM, insideFormItem } from '../../../_utils/cssr'
 
 // vars:
 // --bezier
@@ -232,5 +232,34 @@ export default c([
         fontSize: 'var(--icon-size)'
       })
     ])
-  ])
+  ]),
+  ['warning', 'error'].map(status => insideFormItem(status,
+    cB('input', [
+      cNotM('disabled', [
+        cE('state-border', {
+          border: `var(--border-${status})`
+        }),
+        c('&:hover', [
+          cE('state-border', `
+            box-shadow: var(--box-shadow-hover-${status});
+            border: var(--border-hover-${status});
+          `)
+        ]),
+        c('&:focus', {
+          backgroundColor: `var(--color-focus-${status})`
+        }, [
+          cE('state-border', `
+            box-shadow: var(--box-shadow-focus-${status});
+            border: var(--border-focus-${status});
+          `)
+        ]),
+        cM('focus', [
+          cE('state-border', `
+            box-shadow: var(--box-shadow-focus-${status});
+            border: var(--border-focus-${status});
+          `)
+        ])
+      ])
+    ])
+  ))
 ])

vue3.md

@@ -376,7 +376,7 @@
   - [x] cascader demo async 切换未重置数据，demo 写的有问题
   - [ ] gradient-text transition 又没了
   - [x] md-loader code
-  - [ ] input + form-item style
+  - [x] input + form-item style
   - [x] loadingbar theme
   - [ ] dropdown group + menu use dropdown
   - [x] 多行 message