feat(autoComplete): add inputProps prop

CHANGELOG.en-US.md

@@ -13,6 +13,7 @@
 - `n-button` add `secondary` prop.
 - `n-button` add `tertiary` prop.
 - `n-button` add `quaternary` prop.
+- `n-auto-complete` add `input-props` prop, closes [#1610](https://github.com/TuSimple/naive-ui/issues/1610).
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -13,6 +13,7 @@
 - `n-button` 新增 `secondary` 属性
 - `n-button` 新增 `tertiary` 属性
 - `n-button` 新增 `quaternary` 属性
+- `n-auto-complete` 新增 `input-props` 属性，关闭 [#1610](https://github.com/TuSimple/naive-ui/issues/1610)
 
 ### Fixes
 

src/auto-complete/demos/enUS/index.demo-entry.md

@@ -25,6 +25,7 @@ show-options-by-value
 | default-value | `string` | `null` | Default value of autocomplete. |
 | disabled | `boolean` | `false` | Whether the autocomplete is disabled. |
 | get-show | `(value: string) => boolean` | `undefined` | Use the input to determine whether to show options on focus. |
+| input-props | `HTMLInputAttributes` | `undefined` | The attributes of input element in autocomplete. |
 | loading | `boolean` | `false` | Whether to show a loading status. |
 | options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | Options to autocomplete from. |
 | placeholder | `string` | `'Please Input'` | Autocomplete's placeholder. |

src/auto-complete/demos/zhCN/index.demo-entry.md

@@ -25,6 +25,7 @@ show-options-by-value
 | default-value | `string` | `null` | 自动填充的默认值 |
 | disabled | `boolean` | `false` | 自动填充是否禁用 |
 | get-show | `(value: string) => boolean` | `undefined` | 根据输入值在聚焦的状态中决定是否显示菜单 |
+| input-props | `HTMLInputAttributes` | `undefined` | 自动填充中 input 元素的属性 |
 | loading | `boolean` | `false` | 是否展示加载状态 |
 | options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | 自动填充的自定义选项 |
 | placeholder | `string` | `'请输入'` | 自动填充的提示信息 |

src/auto-complete/src/AutoComplete.tsx

@@ -7,7 +7,8 @@ import {
   Transition,
   PropType,
   withDirectives,
-  CSSProperties
+  CSSProperties,
+  InputHTMLAttributes
 } from 'vue'
 import { createTreeMate, TreeNode } from 'treemate'
 import { VBinder, VTarget, VFollower } from 'vueuc'
@@ -71,6 +72,7 @@ const autoCompleteProps = {
   blurAfterSelect: Boolean,
   clearAfterSelect: Boolean,
   getShow: Function as PropType<(inputValue: string) => boolean>,
+  inputProps: Object as PropType<InputHTMLAttributes>,
   size: String as PropType<'small' | 'medium' | 'large'>,
   options: {
     type: Array as PropType<AutoCompleteOptions>,
@@ -323,6 +325,7 @@ export default defineComponent({
                         disabled={this.mergedDisabled}
                         clearable={this.clearable}
                         loading={this.loading}
+                        inputProps={this.inputProps}
                         onClear={this.handleClear}
                         onFocus={this.handleFocus}
                         onUpdateValue={this.handleInput}

src/auto-complete/tests/AutoComplete.spec.ts

@@ -99,4 +99,17 @@ describe('n-auto-complete', () => {
     expect(document.querySelector('.n-auto-complete-menu')).not.toEqual(null)
     wrapper.unmount()
   })
+
+  it('should work with `input-props` prop', async () => {
+    const wrapper = mount(NAutoComplete, {
+      props: {
+        inputProps: {
+          id: 'input',
+          max: '10'
+        }
+      }
+    })
+    expect(wrapper.find('input').attributes('max')).toEqual('10')
+    wrapper.unmount()
+  })
 })