Merge remote-tracking branch 'upstream/develop' into develop

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

@@ -12,6 +12,7 @@ scrollto
 ## Props
 |Name|Type|Default|Description|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |affix|`boolean`|`false`|If it works like a affix. If set to `true`, it will recieve props from [affix](n-affix#Props)|
 |target|`() => HTMLElement`|A function that returns the nearest scrollable ascendant element|The element that anchor listens to scroll event. (If you want affix & anchor to listen to different target, manually warp anchor in affix instead.)|
 |bound|`number`|`12`||

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

@@ -11,6 +11,7 @@ scrollto
 ## Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |affix|`boolean`|`false`|Anchor 是否像 Affix 一样展示，如果设定为 `true`，它还会接受 [Affix](n-affix#Props) 的 Props|
 |target|`() => HTMLElement`|一个返回最邻近可滚动祖先元素的函数|需要监听滚动的元素（如果你希望 Anchor 和 Affix 分别监听不同的元素，可以手动的组合 Anchor 和 Affix）|
 |bound|`number`|`12`||

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

@@ -14,6 +14,7 @@ targetContainerSelector
 ## Props
 |Name|Type|Default|Description|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |target|`() => HTMLElement`|a function that returns the nearest scrollable ascendant element||
 |right|`number \| string`|`40`||
 |bottom|`number \| string`|`40`||

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

@@ -14,6 +14,7 @@ targetContainerSelector
 ## Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |target|`() => HTMLElement`|一个返回最邻近可滚动父级元素的函数||
 |right|`number`|`40`||
 |bottom|`number`|`40`||

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

@@ -8,6 +8,7 @@ basic
 ### Breadcrumb Props
 |Name|Type|Default|Description|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |seperator|`string`|`'/'`||
 
 ## Slots

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

@@ -8,6 +8,7 @@ basic
 ### Breadcrumb Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |seperator|`string`|`'/'`||
 
 ## Slots

demo/documentation/components/collapse/enUS/basic.md

@@ -5,10 +5,10 @@
     <div>good</div>
   </n-collapse-item>
   <n-collapse-item title="right" name="2">
-    <div>good</div>
+    <div>nice</div>
   </n-collapse-item>
   <n-collapse-item title="right" name="3">
-    <div>test</div>
+    <div>very good</div>
   </n-collapse-item>
 </n-collapse>
 ```

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

@@ -5,6 +5,7 @@ I saw it appears in many side control panels.
 basic
 accordion
 nested
+item-header-click
 ```
 ## V-model
 |Prop|Event|
@@ -35,8 +36,11 @@ nested
 |Name|Parameters|Description|
 |-|-|-|
 |default|`()`||
+|header|`()`||
 
 ## Event
+### Collapse Event
 |Name|Parameters|Description|
 |-|-|-|
-|expanded-names|`(expandedNames: Array<string>)`||
+|expanded-names-change|`(expandedNames: Array<string>)`||
+|item-header-click|`({ name: string, expanded: boolean, event: MouseEvent })`||

demo/documentation/components/collapse/enUS/itemHeaderClick.md

@@ -0,0 +1,43 @@
+# 点击标题
+```html
+<n-collapse
+  v-model="activeNames"
+  @item-header-click="handleItemHeaderClick"
+>
+  <n-collapse-item name="1">
+    <template v-slot:header>
+      Bronze
+    </template>
+    <div>Okay</div>
+  </n-collapse-item>
+  <n-collapse-item name="2">
+    <template v-slot:header>
+      Silver
+    </template>
+    <div>Good</div>
+  </n-collapse-item>
+  <n-collapse-item name="3">
+    <template v-slot:header>
+      Gold
+    </template>
+    <div>Excellent</div>
+  </n-collapse-item>
+</n-collapse>
+```
+```js
+export default {
+  data () {
+    return {
+      activeNames: []
+    }
+  },
+  methods: {
+    handleItemHeaderClick ({
+      name,
+      expanded
+    }) {
+      this.$NMessage.info(`Name: ${name}, Expanded: ${expanded}`)
+    }
+  }
+}
+```

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

@@ -5,6 +5,7 @@
 basic
 accordion
 nested
+item-header-click
 ```
 ## V-model
 |Prop|Event|
@@ -35,9 +36,11 @@ nested
 |名称|参数|说明|
 |-|-|-|
 |default|`()`||
-
+|header|`()`||
 
 ## Event
+### Collapse Event
 |名称|参数|说明|
 |-|-|-|
-|expanded-names|`(expandedNames: Array<string>)`||
+|expanded-names-change|`(expandedNames: Array<string>)`||
+|item-header-click|`({ name: string, expanded: boolean, event: MouseEvent })`||

demo/documentation/components/collapse/zhCN/itemHeaderClick.md

@@ -0,0 +1,43 @@
+# 点击标题
+```html
+<n-collapse
+  v-model="activeNames"
+  @item-header-click="handleItemHeaderClick"
+>
+  <n-collapse-item name="1">
+    <template v-slot:header>
+      青铜
+    </template>
+    <div>可以</div>
+  </n-collapse-item>
+  <n-collapse-item name="2">
+    <template v-slot:header>
+      白银
+    </template>
+    <div>很好</div>
+  </n-collapse-item>
+  <n-collapse-item name="3">
+    <template v-slot:header>
+      黄金
+    </template>
+    <div>真棒</div>
+  </n-collapse-item>
+</n-collapse>
+```
+```js
+export default {
+  data () {
+    return {
+      activeNames: []
+    }
+  },
+  methods: {
+    handleItemHeaderClick ({
+      name,
+      expanded
+    }) {
+      this.$NMessage.info(`Name: ${name}, Expanded: ${expanded}`)
+    }
+  }
+}
+```

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

@@ -71,11 +71,11 @@ format
 ### Date, DateTime Type Events
 |Name|Parameters|Description|
 |-|-|-|
-|change|`(currentValue: number \| null)`||
-|blur|`(currentValue: number \| null)`||
+|change|`(value: number \| null)`||
+|blur|`()`||
 
 ### DateRange, DateTimeRange Type Events
 |Name|Parameters|Description|
 |-|-|-|
-|change|`(currentValue: [number, number] \| null)`||
-|blur|`(currentValue: [number, number] \| null)`||
+|change|`(value: [number, number] \| null)`||
+|blur|`()`||

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

@@ -72,11 +72,11 @@ format
 ### Date, DateTime 类型的 Events
 |名称|参数|说明|
 |-|-|-|
-|change|`(currentValue: number \| null)`||
-|blur|`(currentValue: number \| null)`||
+|change|`(value: number \| null)`||
+|blur|`()`||
 
 ### DateRange, DateTimeRange 类型的 Events
 |名称|参数|说明|
 |-|-|-|
-|change|`(currentValue: [number, number] \| null)`||
-|blur|`(currentValue: [number, number] \| null)`||
+|change|`(value: [number, number] \| null)`||
+|blur|`()`||

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

@@ -23,6 +23,7 @@ size
 ### Radio Props
 |Name|Type|Default|Description|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |name|`string`|`undefined`|The name attribute of the radio element. If not set, name of `radio-group` will be used.|
 |checked-value|`string \| number \| boolean`|`null`||
 |value|`string \| number \| boolean`|`null`||
@@ -39,6 +40,7 @@ size
 ### Radio Group Props
 |Name|Type|Default|Description|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |name|`string`|`null`|The name attribute of the radio elements inside the group.|
 |size|`'small' \| 'medium' \| 'large'`|`small`||
 |value|`string \| number \| boolean`|`null`||

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

@@ -23,6 +23,7 @@ size
 ### Radio Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |name|`string`|`undefined`|单选 radio 元素的 name 属性。如果没有设定会使用 `radio-group` 的 `name`|
 |checked-value|`string \| number \| boolean`|`null`||
 |value|`string \| number \| boolean`|`null`||
@@ -40,6 +41,7 @@ size
 ### Radio Group Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |name|`string`|`null`|选项组内部 radio 元素的 name 属性|
 |size|`'small' \| 'medium' \| 'large'`|`small`||
 |value|`string \| number \| boolean`|`null`||

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

@@ -38,7 +38,7 @@ action
 |filterable|`boolean`|`false`|Whether it can filter options.|
 |filter|`(pattern: string, option: Object) => boolean`|A basic string based search method.||
 |tag|`boolean`|`false`|Whether it can create new option, should be used with `filterable`.|
-|create-option|`(label: string) => SelectOption`|`label => ({ label, value: label })`|How to create a option when you input a string to create a option. Note that `filter` will be applied to the option too. And make sure the value of the created option is not the same as any other option.|
+|on-create|`(label: string) => SelectOption`|`label => ({ label, value: label })`|How to create a option when you input a string to create a option. Note that `filter` will be applied to the created option too. And make sure the value of the created option is not the same as any other option.|
 
 ## API
 ### SelectOption Type

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

@@ -25,6 +25,7 @@ action
 ## Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |loading|`boolean`|`false`||
 |clearable|`boolean`|`false`||
 |value|`Array \| string \| number`|`false`||
@@ -37,7 +38,7 @@ action
 |filterable|`boolean`|`false`|是否可以过滤|
 |filter|`(pattern: string, option: Object) => boolean`|一个简单的字符串搜索算法||
 |tag|`boolean`|`false`|是否可以创建新的选项，需要和 `filterable` 一起使用|
-|create-option|`(label: string) => SelectOption`|`label => ({ label, value: label })`|在输入内容时如何创建一个选项。注意 `filter` 对这个选项同样会生效。同时确保这个选项和其他选项的 `value` 不要有重复|
+|on-create|`(label: string) => SelectOption`|`label => ({ label, value: label })`|在输入内容时如何创建一个选项。注意 `filter` 对这个生成的选项同样会生效。同时确保这个选项和其他选项的 `value` 不要有重复|
 
 
 ## API

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.7.28",
+  "version": "0.7.29",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",

src/Collapse/src/Collapse.vue

@@ -34,25 +34,30 @@ export default {
     }
   },
   methods: {
-    toggleItem (collapse, name) {
+    toggleItem (collapse, name, event) {
       if (this.accordion) {
         if (collapse) {
           this.$emit('expanded-names-change', [name])
+          this.$emit('item-header-click', { name, expanded: true, event })
         } else {
           this.$emit('expanded-names-change', [])
+          this.$emit('item-header-click', { name, expanded: false, event })
         }
       } else {
         if (!Array.isArray(this.expandedNames)) {
           this.$emit('expanded-names-change', [name])
+          this.$emit('item-header-click', { name, expanded: true, event })
         } else {
           const activeNames = intersection(this.expandedNames, this.collectedItemNames)
           const index = activeNames.findIndex(activeName => name === activeName)
           if (~index) {
             activeNames.splice(index, 1)
             this.$emit('expanded-names-change', activeNames)
+            this.$emit('item-header-click', { name, expanded: false, event })
           } else {
             activeNames.push(name)
             this.$emit('expanded-names-change', activeNames)
+            this.$emit('item-header-click', { name, expanded: true, event })
           }
         }
       }

src/Collapse/src/CollapseItem.vue

@@ -14,7 +14,9 @@
     >
       <n-icon type="ios-arrow-forward">
         <ios-arrow-forward />
-      </n-icon>{{ title }}
+      </n-icon><slot name="header">
+        {{ title }}
+      </slot>
     </div>
     <fade-in-height-expand-transition>
       <div
@@ -72,10 +74,10 @@ export default {
     }
   },
   methods: {
-    handleClick () {
+    handleClick (e) {
       const NCollapse = this.NCollapse
       if (NCollapse) {
-        NCollapse.toggleItem(this.collapse, this.name)
+        NCollapse.toggleItem(this.collapse, this.name, e)
       }
     }
   }

src/Radio/src/Radio.vue

@@ -71,6 +71,20 @@ export default {
       },
       default: null
     }
+  },
+  computed: {
+    syntheticTheme () {
+      const theme = this.theme
+      const NRadioGroup = this.NRadioGroup
+      if (theme !== null) {
+        return theme
+      } else if (NRadioGroup && NRadioGroup.syntheticTheme) {
+        return NRadioGroup.syntheticTheme
+      } else {
+        const NConfigProvider = this.NConfigProvider
+        return (NConfigProvider && NConfigProvider.syntheticTheme) || null
+      }
+    }
   }
 }
 </script>

src/Select/src/Select.vue

@@ -202,7 +202,7 @@ export default {
       type: Boolean,
       default: false
     },
-    createOption: {
+    onCreate: {
       type: Function,
       default: label => ({
         label: label,
@@ -494,7 +494,7 @@ export default {
           this.beingCreatedOptions = []
           return
         }
-        const optionBeingCreated = this.createOption(value)
+        const optionBeingCreated = this.onCreate(value)
         if (
           this.adpatedOptions.some(
             option => option.value === optionBeingCreated.value