Merge branch 'master' of https://github.com/vueComponent/ant-design

components/collapse/Collapse.vue

@@ -6,6 +6,10 @@ import RcCollapse from './src'
 import { collapseProps } from './src/commonProps'
 
 export default {
+  model: {
+    prop: 'activeKey',
+    event: 'change',
+  },
   props: {
     ...collapseProps,
     bordered: PropTypes.bool.def(true),

components/collapse/CollapsePanel.vue

@@ -21,7 +21,18 @@ export default {
       class: collapsePanelClassName,
       on: $listeners,
     }
-    return <RcCollapse.Panel {...rcCollapePanelProps} >{this.$slots.default}</RcCollapse.Panel>
+    const { default: defaultSlots, header } = this.$slots
+    return (
+      <RcCollapse.Panel {...rcCollapePanelProps} >
+        {defaultSlots}
+        {header ? (
+          <template slot='header'>
+            {header}
+          </template>
+        ) : null}
+
+      </RcCollapse.Panel>
+    )
   },
 }
 </script>

components/collapse/demo/accordion.md

@@ -12,13 +12,13 @@ Accordion mode, only one panel can be expanded at a time. The first panel will b
 <template>
   <div>
     <a-collapse accordion>
-      <a-collapse-panel header="This is panel header 1" name="1">
+      <a-collapse-panel header="This is panel header 1" key="1">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+      <a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3">
+      <a-collapse-panel header="This is panel header 3" key="3">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>

components/collapse/demo/basic.md

@@ -11,14 +11,14 @@ More than one panel can be expanded at a time, the first panel is initialized to
 ```html
 <template>
   <div>
-    <a-collapse v-model="value" @change="changeActivekey">
+    <a-collapse v-model="activeKey" @change="changeActivekey">
-      <a-collapse-panel header="This is panel header 1" name="1">
+      <a-collapse-panel header="This is panel header 1" key="1">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+      <a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3" disabled>
+      <a-collapse-panel header="This is panel header 3" key="3" disabled>
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>
@@ -29,7 +29,7 @@ More than one panel can be expanded at a time, the first panel is initialized to
     data () {
       return {
         text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
-        value: ['1']
+        activeKey: ['1']
       }
     },
     methods: {

components/collapse/demo/borderless.md

@@ -11,14 +11,14 @@ A borderless style of Collapse.
 ```html
 <template>
   <div>
-    <a-collapse :defaultValue="'1'" :bordered="false">
+    <a-collapse defaultActiveKey="1" :bordered="false">
-      <a-collapse-panel header="This is panel header 1" name="1">
+      <a-collapse-panel header="This is panel header 1" key="1">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+      <a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3">
+      <a-collapse-panel header="This is panel header 3" key="3">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>

components/collapse/demo/custom.md

@@ -11,14 +11,17 @@ Customize the background, border and margin styles for each panel.
 ```html
 <template>
   <div>
-    <a-collapse :defaultValue="'1'" :bordered="false">
+    <a-collapse defaultActiveKey="1" :bordered="false">
-      <a-collapse-panel header="This is panel header 1" name="1" :style="customStyle">
+      <a-collapse-panel key="1" :style="customStyle">
+        <template slot="header">
+          This is panel header 1<a-icon type="question-circle-o" />
+        </template>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :style="customStyle">
+      <a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3" :style="customStyle">
+      <a-collapse-panel header="This is panel header 3" key="3" :style="customStyle">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>

components/collapse/demo/mix.md

@@ -12,17 +12,17 @@
 <template>
   <div>
     <a-collapse @change="changeActivekey">
-      <a-collapse-panel header="This is panel header 1" name="1">
+      <a-collapse-panel header="This is panel header 1" key="1">
-        <a-collapse :defaultValue="'1'">
+        <a-collapse defaultActiveKey="4">
-          <a-collapse-panel header="This is panel nest panel" name="1">
+          <a-collapse-panel header="This is panel nest panel" key="4">
             <p>{{text}}</p>
           </a-collapse-panel>
         </a-collapse>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+      <a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3">
+      <a-collapse-panel header="This is panel header 3" key="3">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>

components/collapse/demo/noarrow.md

@@ -11,11 +11,11 @@ You can disable showing arrow icon by passing `:showArrow="false"` to `a-collaps
 ```html
 <template>
   <div>
-    <a-collapse :defaultValue="'1'" @change="changeActivekey">
+    <a-collapse defaultActiveKey="1" @change="changeActivekey">
-      <a-collapse-panel header="This is panel header with arrow icon" name="1">
+      <a-collapse-panel header="This is panel header with arrow icon" key="1">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header with no arrow icon" name="2" :showArrow="false">
+      <a-collapse-panel header="This is panel header with no arrow icon" key="2" :showArrow="false">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>

components/collapse/index.en-US.md

@@ -4,8 +4,8 @@
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| value | name of the active panel | \[]\|string | No default value. In `accordion` mode, it's the name of the first panel. |
+| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
-| defaultValue | name of the initial active panel | string | - |
+| defaultActiveKey | Key of the initial active panel | string | - |
 | change | Callback function executed when active panel is changed | Function | - |
 
 ### Collapse.Panel
@@ -14,5 +14,5 @@
 | -------- | ----------- | ---- | ------- |
 | disabled | If `true`, panel cannot be opened or closed | boolean | `false` |
 | header | Title of the panel | string | - |
-| name | Unique name identifying the panel from among its siblings | string | - |
+| key | Unique key identifying the panel from among its siblings | string | - |
 | showArrow | If `false`, panel will not show arrow icon | boolean | `true` |

components/collapse/index.zh-CN.md

@@ -4,8 +4,8 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前激活 tab 面板的 name | []\|string | 默认无，accordion模式下默认第一个元素 |
+| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
-| defaultValue | 初始化选中面板的 name | string | 无 |
+| defaultActiveKey | 初始化选中面板的 key | string | 无 |
 | change | 切换面板的回调 | Function | 无 |
 
 ### Collapse.Panel
@@ -14,4 +14,4 @@
 | --- | --- | --- | --- |
 | disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
 | header | 面板头内容 | string | 无 |
-| name | 对应 activeKey | string | 无 |
+| key | 对应 activeKey | string | 无 |

components/collapse/src/Collapse.vue

@@ -17,15 +17,19 @@ function _toArray (activeKey) {
 export default {
   name: 'Collapse',
   mixins: [BaseMixin],
+  model: {
+    prop: 'activeKey',
+    event: 'change',
+  },
   props: {
     ...collapseProps,
     openAnimation: PropTypes.object,
   },
   data () {
-    const { value, defaultValue, openAnimation, prefixCls } = this.$props
+    const { activeKey, defaultActiveKey, openAnimation, prefixCls } = this.$props
-    let currentActiveKey = defaultValue
+    let currentActiveKey = defaultActiveKey
-    if (hasProp(this, 'value')) {
+    if (hasProp(this, 'activeKey')) {
-      currentActiveKey = value
+      currentActiveKey = activeKey
     }
     const currentOpenAnimations = openAnimation || openAnimationFactory(prefixCls)
     return {
@@ -57,18 +61,19 @@ export default {
       const newChildren = []
       this.$slots.default.forEach((child, index) => {
         if (isEmptyElement(child)) return
-        const { header, headerClass, disabled, name = String(index) } = getPropsData(child)
+        const { header, headerClass, disabled } = getPropsData(child)
         let isActive = false
+        const key = child.key || String(index)
         if (accordion) {
-          isActive = activeKey[0] === name
+          isActive = activeKey[0] === key
         } else {
-          isActive = activeKey.indexOf(name) > -1
+          isActive = activeKey.indexOf(key) > -1
         }
 
         let panelEvents = {}
         if (!disabled && disabled !== '') {
           panelEvents = {
-            itemClick: () => { this.onClickItem(name) },
+            itemClick: () => { this.onClickItem(key) },
           }
         }
 
@@ -93,11 +98,10 @@ export default {
     setActiveKey (activeKey) {
       this.setState({ stateActiveKey: activeKey })
       this.$emit('change', this.accordion ? activeKey[0] : activeKey)
-      this.$emit('input', this.accordion ? activeKey[0] : activeKey)
     },
   },
   watch: {
-    value (val) {
+    activeKey (val) {
       this.setState({
         stateActiveKey: _toArray(val),
       })

components/collapse/src/Panel.vue

@@ -36,6 +36,7 @@ export default {
       [`${prefixCls}-header`]: true,
       [headerClass]: headerClass,
     }
+    const headerCon = header || $slots.header
     const itemCls = {
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-active`]: isActive,
@@ -50,7 +51,7 @@ export default {
           aria-expanded={isActive}
         >
           {showArrow && <i class='arrow' />}
-          {header}
+          {headerCon}
         </div><transition
           {...transitionProps}
         >

components/collapse/src/PanelContent.vue

@@ -8,8 +8,14 @@ export default {
     isActive: PropTypes.bool,
     destroyInactivePanel: PropTypes.bool,
   },
+  data () {
+    return {
+      _isActive: undefined,
+    }
+  },
   render () {
-    if (!this.isActive) {
+    this._isActive = this._isActive || this.isActive
+    if (!this._isActive) {
       return null
     }
     const { prefixCls, isActive, destroyInactivePanel } = this.$props

components/collapse/src/commonProps.js

@@ -2,11 +2,11 @@ import PropTypes from '../../_util/vue-types'
 
 const collapseProps = {
   prefixCls: PropTypes.string.def('ant-collapse'),
-  value: PropTypes.oneOfType([
+  activeKey: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
   ]),
-  defaultValue: PropTypes.oneOfType([
+  defaultActiveKey: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
   ]),