feat(auto-complete): option group

demo/documentation/components/autoComplete/enUS/group.md

@@ -0,0 +1,30 @@
+# Group
+```html
+<n-auto-complete :options="options" v-model="value" placeholder="Email" />
+```
+```js
+export default {
+  computed: {
+    options () {
+      return [
+        ['Google', '@gmail.com'],
+        ['Netease', '@163.com'],
+        ['Tencent', '@qq.com']
+      ].map(emailInfo => {
+        return {
+          type: 'group',
+          name: emailInfo[0],
+          children: [
+            this.value.split('@')[0] + emailInfo[1]
+          ]
+        }
+      })
+    }
+  },
+  data () {
+    return {
+      value: ''
+    }
+  }
+}
+```

demo/documentation/components/autoComplete/enUS/index.md

@@ -4,6 +4,7 @@ Use as search hint or something similar.
 ```demo
 basic
 size
+group
 custom-input
 after-select
 ```
@@ -18,12 +19,11 @@ after-select
 |theme|`'light' \| 'dark'`|`null`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |value|`string`|`null`||
-|options|`Array<AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
+|options|`Array<string \| AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
 |placeholder|`string`|`null`||
 |blur-after-select|`boolean`|`false`||
 |clear-after-select|`boolean`|`false`||
 
-## API
 ### AutoCompleteOption Type
 |Property|Type|Description|
 |-|-|-|
@@ -37,7 +37,7 @@ after-select
 |-|-|-|
 |type|`'group'`||
 |name|`string`||
-|children|`Array<AutoCompleteOption>`||
+|children|`Array<string | AutoCompleteOption>`||
 
 ## Slots
 |Name|Parameters|Description|

demo/documentation/components/autoComplete/zhCN/group.md

@@ -0,0 +1,30 @@
+# 成组
+```html
+<n-auto-complete :options="options" v-model="value" placeholder="邮箱" />
+```
+```js
+export default {
+  computed: {
+    options () {
+      return [
+        ['谷歌', '@gmail.com'],
+        ['网易', '@163.com'],
+        ['腾讯', '@qq.com']
+      ].map(emailInfo => {
+        return {
+          type: 'group',
+          name: emailInfo[0],
+          children: [
+            this.value.split('@')[0] + emailInfo[1]
+          ]
+        }
+      })
+    }
+  },
+  data () {
+    return {
+      value: ''
+    }
+  }
+}
+```

demo/documentation/components/autoComplete/zhCN/index.md

@@ -4,6 +4,7 @@
 ```demo
 basic
 size
+group
 custom-input
 after-select
 ```
@@ -19,11 +20,26 @@ after-select
 |theme|`'light' \| 'dark'`|`null`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
 |value|`string`|`null`||
-|options|`Array<AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
+|options|`Array<string \| AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
 |placeholder|`string`|`null`||
 |blur-after-select|`boolean`|`false`||
 |clear-after-select|`boolean`|`false`||
 
+### AutoCompleteOption Type
+|属性|类型|介绍|
+|-|-|-|
+|label|`string`||
+|value|`string \| number`|Should be unique in options.|
+|disabled|`boolean`||
+|render|`function`||
+
+### AutoCompleteOptionGroup Type
+|属性|类型|介绍|
+|-|-|-|
+|type|`'group'`||
+|name|`string`||
+|children|`Array<string | AutoCompleteOption>`||
+
 ## Slots
 |名称|参数|说明|
 |-|-|-|

src/AutoComplete/src/main.vue

@@ -45,7 +45,7 @@
             class="n-auto-complete-menu"
             :theme="syntheticTheme"
             :pattern="value"
-            :options="filteredOptions"
+            :options="selectOptions"
             :multiple="false"
             :size="syntheticSize"
             :remote="remote"
@@ -69,8 +69,8 @@ import clickoutside from '../../_directives/clickoutside'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import asformitem from '../../_mixins/asformitem'
-
 import NBaseSelectMenu from '../../_base/SelectMenu'
+import { mapAutoCompleteOptionsToSelectOptions } from './utils'
 
 export default {
   name: 'NAutoComplete',
@@ -141,13 +141,10 @@ export default {
   },
   computed: {
     active () {
-      return !!this.value && this.canBeActivated && !!this.filteredOptions.length
+      return !!this.value && this.canBeActivated && !!this.selectOptions.length
     },
-    filteredOptions () {
-      return this.options.map(literal => typeof literal === 'string' ? ({
-        label: literal,
-        value: literal
-      }) : literal)
+    selectOptions () {
+      return mapAutoCompleteOptionsToSelectOptions(this.options)
     }
   },
   methods: {

src/AutoComplete/src/utils.js

@@ -0,0 +1,26 @@
+export function mapAutoCompleteOptionsToSelectOptions (options) {
+  return (options || []).map(convertAutoCompleteOptionToSelectOption)
+}
+
+function convertAutoCompleteOptionToSelectOption (option) {
+  if (typeof option === 'string') {
+    return {
+      label: option,
+      value: option
+    }
+  } else if (
+    typeof option === 'object' &&
+    option !== null &&
+    option.type === 'group'
+  ) {
+    return {
+      type: 'group',
+      name: option.name,
+      children: option.children.map(groupOption =>
+        convertAutoCompleteOptionToSelectOption(groupOption)
+      )
+    }
+  } else {
+    return option
+  }
+}