feat(form): implement using scroll-into-view-if-needed

package.json

@@ -158,6 +158,7 @@
     "highlight.js": "^11.8.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "scroll-into-view-if-needed": "^3.1.0",
     "seemly": "^0.3.8",
     "treemate": "^0.3.11",
     "vdirs": "^0.1.8",

src/form/demos/zhCN/index.demo-entry.md

@@ -47,7 +47,7 @@ feedback-style.vue
 | require-mark-placement | `'left' \| 'right' \| 'right-hanging'` | `'right'` | 必填星号的位置 | `'right-hanging'` 2.24.0 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |  |
 | validate-messages | `FormValidateMessages` | `undefined` | `async-validator` 的默认验证信息 | 2.27.0 |
-| auto-scroll-to-error | `boolean` | `false` | 自动滚动到验证错误的表单项 |  |
+| scroll-to-first-error | `boolean` \| [Options](https://github.com/scroll-into-view/scroll-into-view-if-needed#options) | `false` | 提交失败自动滚动到第一个错误字段 |  |
 
 #### FormItemRule Type
 

src/form/src/Form.tsx

@@ -26,6 +26,8 @@ import type {
 } from './interface'
 import { type ExtractPublicPropTypes, keysOf } from '../../_utils'
 import { formInjectionKey, formItemInstsInjectionKey } from './context'
+import scrollIntoView from 'scroll-into-view-if-needed'
+import type { Options } from 'scroll-into-view-if-needed'
 
 export const formProps = {
   ...(useTheme.props as ThemeProps<FormTheme>),
@@ -63,7 +65,7 @@ export const formProps = {
     default: undefined
   },
   validateMessages: Object as PropType<Partial<FormValidateMessages>>,
-  autoScrollToError: {
+  scrollToFirstError: {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   }
@@ -129,10 +131,18 @@ export default defineComponent({
               })
             }
             if (formInvalid) {
-              if (props.autoScrollToError) {
-                formElRef.value
-                  ?.querySelector('.n-form-item-feedback--error')
-                  ?.parentElement?.parentElement?.scrollIntoView()
+              if (props.scrollToFirstError) {
+                const errorElement = formElRef.value?.querySelector(
+                  '.n-form-item-feedback--error'
+                )?.parentElement?.parentElement
+
+                if (errorElement) {
+                  let defaultScrollToFirstError: Options = { block: 'nearest' }
+                  if (typeof props.scrollToFirstError === 'object') {
+                    defaultScrollToFirstError = props.scrollToFirstError
+                  }
+                  scrollIntoView(errorElement, defaultScrollToFirstError)
+                }
               }
               // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
               reject(errors.length ? errors : undefined)