feat(select): support style & class on select option

demo/documentation/components/select/enUS/customOption.md

@@ -1,5 +1,5 @@
 # Custom Option Render
-After a long time of consideration, I decide to drop slot API. However, there is still a way to render options as you like.
+After a long time of consideration, I decide to drop slot API. However, there is still a way to render options as you like. (The example uses render functions, but you can also use the `style` or `class` prop on an `option`.)
 ```html
 <n-select
   v-model="value"

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

@@ -45,17 +45,19 @@ fallback-option
 ### SelectOption Properties
 |Name|Type|Description|
 |-|-|-|
-|label|`string`||
-|value|`string \| number`|Should be unique in options.|
+|class|`string`||
 |disabled|`boolean`||
+|label|`string`||
 |render|`function`||
+|style|`string`||
+|value|`string \| number`|Should be unique in options.|
 
 ### SelectOptionGroup Properties
 |Name|Type|Description|
 |-|-|-|
-|type|`'group'`||
-|name|`string`||
 |children|`Array<SelectOption>`||
+|name|`string`||
+|type|`'group'`||
 
 ## Slots
 |Name|Parameters|Description|
@@ -65,8 +67,9 @@ fallback-option
 ## Event
 |Name|Parameters|Description|
 |-|-|-|
-|change|`(value: Array \| string \| number \| null)`||
-|search|`(value: string)`||
 |blur|`()`|When picker of select blur|
+|change|`(value: Array \| string \| number \| null)`||
 |scroll|`(e: Event)`|When select menu scrolls|
+|search|`(value: string)`||
+
 

demo/documentation/components/select/zhCN/customOption.md

@@ -1,5 +1,5 @@
 # 自定义选项渲染
-经过了很久的思考，我决定放弃支持 Slot API。当然，还是提供自定义渲染选项的方式。
+经过了很久的思考，我决定放弃支持 slot API。当然，还是提供自定义渲染选项的方式。(例子中是渲染函数，但是你可以直接使用 `option` 的 `style` 或 `class` 选项)
 ```html
 <n-select
   v-model="value"

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

@@ -46,17 +46,19 @@ change-debug
 ### SelectOption Properties
 |名称|类型|说明|
 |-|-|-|
-|label|`string`||
-|value|`string \| number`|在选项中应该是唯一的|
+|class|`string`||
 |disabled|`boolean`||
+|label|`string`||
 |render|`function`||
+|style|`string`||
+|value|`string \| number`|在选项中应该是唯一的|
 
 ### SelectOptionGroup Properties
 |名称|类型|说明|
 |-|-|-|
-|type|`'group'`||
-|name|`string`||
 |children|`Array<SelectOption>`||
+|name|`string`||
+|type|`'group'`||
 
 ## Slots
 |名称|参数|说明|
@@ -66,8 +68,8 @@ change-debug
 ## Event
 |名称|参数|说明|
 |-|-|-|
-|change|`(value: Array \| string \| number \| null)`||
-|search|`(value: string)`||
 |blur|`()`|选择器 Blur 时发出|
+|change|`(value: Array \| string \| number \| null)`||
 |scroll|`(e: Event)`|选择菜单在滚动|
+|search|`(value: string)`||
 

src/_base/SelectMenu/src/SelectOption.vue

@@ -1,4 +1,6 @@
 <script>
+import { createClassObject } from '../../../DataTable/src/utils'
+
 export default {
   name: 'NBaseSelectOption',
   inject: {
@@ -43,12 +45,14 @@ export default {
   render (h) {
     const data = this.wrappedOption.data
     const children = (data.render && data.render(h, data, this.selected)) || [ data.label ]
+    const classObject = createClassObject(data.class)
     return h('div', {
       staticClass: 'n-base-select-option',
       class: {
         'n-base-select-option--selected': this.selected,
         'n-base-select-option--disabled': data.disabled,
-        'n-base-select-option--grouped': this.grouped
+        'n-base-select-option--grouped': this.grouped,
+        ...classObject
       },
       attrs: { 'n-option-index': this.index },
       style: data.style,

src/_utils/component/select.js

@@ -76,6 +76,7 @@ function flattenOptions (optionsToBeFlattened) {
           type: OPTION_TYPE.RENDER,
           index: index,
           key: '__NAIVE_SELECT_RENDER__' + index,
+          data: option.__NAIVE_OPTION_DATA__ || option,
           render: option.render,
           grouped: false
         }

src/_utils/vue/createClassObject.js

@@ -0,0 +1,14 @@
+export default function createClassObject (classValue) {
+  if (typeof classValue === 'string') {
+    return classValue
+      .split(' ')
+      .filter(v => v.length)
+      .reduce((prevValue, currentValue) => {
+        prevValue[currentValue] = true
+        return prevValue
+      }, {})
+  } else if (classValue && typeof classValue === 'object') {
+    return classValue
+  }
+  return null
+}