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

Author: tangjinzhou

components/_util/BaseMixin.js

@@ -1,4 +1,3 @@
-import { getOptionProps } from './props-util'
 
 export default {
   directives: {
@@ -17,9 +16,9 @@ export default {
   methods: {
     setState (state, callback) {
       const newState = typeof state === 'function' ? state(this.$data) : state
-      if (this.getDerivedStateFromProps) {
-        Object.assign(newState, this.getDerivedStateFromProps(getOptionProps(this), this.$data, true) || {})
-      }
+      // if (this.getDerivedStateFromProps) {
+      //   Object.assign(newState, this.getDerivedStateFromProps(getOptionProps(this), { ...this.$data, ...newState }, true) || {})
+      // }
       Object.assign(this.$data, newState)
       this.$nextTick(() => {
         callback && callback()

components/tree-select/__tests__/__snapshots__/demo.test.js.snap

@@ -1,25 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `
-<span class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection
-            ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></span></span>
-`;
+exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></span></span>`;
 
 exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
-<span class="ant-select ant-select-enabled" style="width: 300px;"><span role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection
-            ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li title="Node1" unselectable="unselectable" class="ant-select-selection__choice"><span class="ant-select-selection__choice__remove"><i class="ant-select-remove-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span><span class="ant-select-selection__choice__content">Node1</span></li>
-<li class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input role="textbox" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></span></li>
-</div><span class="ant-select-search__field__placeholder" style="display: none;">Please select</span></span>
-</span>
+<span role="combobox" aria-haspopup="listbox" tabindex="-1" class="ant-select ant-select-enabled" style="width: 300px;"><span class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li unselectable="unselectable" role="menuitem" title="Node1" class="ant-select-selection__choice"><span class="ant-select-selection__choice__remove"><i class="ant-select-remove-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span><span class="ant-select-selection__choice__content">Node1</span></li>
+<li class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input type="text" aria-label="filter select" aria-autocomplete="list" aria-multiline="false" class="ant-select-search__field" style="width: 0px;"><span class="ant-select-search__field__mirror">&nbsp;</span></span></li>
+</div>
+</span></span>
 `;
 
 exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
-<span class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection
-            ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input role="textbox" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></span></li>
+<span role="combobox" aria-haspopup="listbox" tabindex="-1" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input type="text" aria-label="filter select" aria-autocomplete="list" aria-multiline="false" class="ant-select-search__field" style="width: 0px;"><span class="ant-select-search__field__mirror">&nbsp;</span></span></li>
 </div><span class="ant-select-search__field__placeholder" style="display: block;">Please select</span></span></span>
 `;
 
-exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
-<span class="ant-select ant-select-enabled" style="width: 300px;"><span role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection
-            ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></span></span>
-`;
+exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span></span></span>`;
+
+exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `<span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled" style="width: 300px;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></span></span>`;

components/tree-select/demo/basic.md

@@ -22,7 +22,7 @@ The most basic usage.
   >
     <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
       <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
-        <a-tree-select-node value='leaf1' title='my leaf' key='random' />
+        <a-tree-select-node :selectable="false" value='leaf1' title='my leaf' key='random' />
         <a-tree-select-node value='leaf2' title='your leaf' key='random1' />
       </a-tree-select-node>
       <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
@@ -39,12 +39,13 @@ The most basic usage.
 export default {
   data () {
     return {
+      treeExpandedKeys: [],
       value: undefined,
     }
   },
   methods: {
     onChange (value) {
-      console.log(arguments)
+      console.log(value)
       this.value = value
     },
   },

components/tree-select/demo/checkable.md

@@ -18,7 +18,6 @@ Multiple and checkable.
     treeCheckable
     :showCheckedStrategy="SHOW_PARENT"
     searchPlaceholder='Please select'
-    treeNodeFilterProp='label'
   />
 </template>
 
@@ -27,29 +26,29 @@ import { TreeSelect } from 'ant-design-vue'
 const SHOW_PARENT = TreeSelect.SHOW_PARENT
 
 const treeData = [{
-  label: 'Node1',
+  title: 'Node1',
   value: '0-0',
   key: '0-0',
   children: [{
-    label: 'Child Node1',
+    title: 'Child Node1',
     value: '0-0-0',
     key: '0-0-0',
   }],
 }, {
-  label: 'Node2',
+  title: 'Node2',
   value: '0-1',
   key: '0-1',
   children: [{
-    label: 'Child Node3',
+    title: 'Child Node3',
     value: '0-1-0',
     key: '0-1-0',
     disabled: true,
   }, {
-    label: 'Child Node4',
+    title: 'Child Node4',
     value: '0-1-1',
     key: '0-1-1',
   }, {
-    label: 'Child Node5',
+    title: 'Child Node5',
     value: '0-1-2',
     key: '0-1-2',
   }],
@@ -64,7 +63,7 @@ export default {
   },
   methods: {
     onChange (value) {
-      console.log('onChange ', value, arguments)
+      console.log('onChange ', value)
       this.value = value
     },
   },

components/tree-select/demo/index.vue

@@ -3,6 +3,7 @@ import Basic from './basic'
 import Checkable from './checkable'
 import Multiple from './multiple'
 import TreeData from './treeData'
+import Suffix from './suffix'
 
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
@@ -35,6 +36,7 @@ export default {
         <Checkable/>
         <Multiple/>
         <TreeData/>
+        <Suffix />
         <api>
           <template slot='cn'>
             <CN/>

components/tree-select/demo/multiple.md

@@ -47,14 +47,14 @@ export default {
   },
   methods: {
     onChange (value) {
-      console.log(arguments)
+      console.log(value)
       this.value = value
     },
     onSearch () {
-      console.log(arguments)
+      console.log(...arguments)
     },
     onSelect () {
-      console.log(arguments)
+      console.log(...arguments)
     },
   },
 }

components/tree-select/demo/suffix.md

@@ -0,0 +1,54 @@
+<cn>
+#### 后缀图标
+最简单的用法。
+</cn>
+
+<us>
+#### Suffix
+The most basic usage.
+</us>
+
+```html
+<template>
+  <a-tree-select
+    showSearch
+    style="width: 300px"
+    :value="value"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    placeholder='Please select'
+    allowClear
+    treeDefaultExpandAll
+    @change="onChange"
+  >
+    <a-icon slot="suffixIcon" type="smile" />
+    <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
+      <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
+        <a-tree-select-node value='leaf1' title='my leaf' key='random' />
+        <a-tree-select-node value='leaf2' title='your leaf' key='random1' />
+      </a-tree-select-node>
+      <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
+        <a-tree-select-node value='sss' key='random3'>
+          <b style="color: #08c" slot="title">sss</b>
+        </a-tree-select-node>
+      </a-tree-select-node>
+    </a-tree-select-node>
+  </a-tree-select>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      value: undefined,
+    }
+  },
+  methods: {
+    onChange (value) {
+      console.log(value)
+      this.value = value
+    },
+  },
+}
+</script>
+```

components/tree-select/demo/treeData.md

@@ -16,33 +16,32 @@ The tree structure can be populated using `treeData` property. This is a quick a
     :treeData="treeData"
     placeholder='Please select'
     treeDefaultExpandAll
-    labelInValue
     v-model="value"
   >
-    <span style="color: #08c" slot="label" slot-scope="{key, value}" v-if="key='0-0-1'">
+    <span style="color: #08c" slot="title" slot-scope="{key, value}" v-if="key='0-0-1'">
       <a-icon type="home"/>Child Node1 {{value}}
     </span>
   </a-tree-select>
 </template>
 
 <script>
 const treeData = [{
-  label: 'Node1',
+  title: 'Node1',
   value: '0-0',
   key: '0-0',
   children: [{
     value: '0-0-1',
     key: '0-0-1',
-    scopedSlots: { // custom label
-      label: 'label',
+    scopedSlots: { // custom title
+      title: 'title',
     },
   }, {
-    label: 'Child Node2',
+    title: 'Child Node2',
     value: '0-0-2',
     key: '0-0-2',
   }],
 }, {
-  label: 'Node2',
+  title: 'Node2',
   value: '0-1',
   key: '0-1',
 }]

components/tree-select/index.en-US.md

@@ -21,23 +21,25 @@
 | showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
 | showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false |
 | size | To set the size of the select input, options: `large` `small` | string | 'default' |
+| suffixIcon | The custom suffix icon | VNode \| slot | - |
 | treeCheckable | Whether to show checkbox on the treeNodes | boolean | false |
 | treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false |
 | treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array<{ value, label, children, [disabled, disableCheckbox, selectable] }> | \[] |
 | treeDataSimpleMode | Enable simple mode of treeData.(treeData should like this: [{id:1, pId:0, value:'1', label:"test1",...},...], pId is parent node's id) | false\|Array<{ id: string, pId: string, rootPId: null }> | false |
 | treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
 | treeDefaultExpandedKeys | Default expanded treeNodes | string\[] | - |
+| treeExpandedKeys | Set expanded keys | string\[] | - |
 | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' |
 | treeNodeLabelProp | Will render as content of select | string | 'title' |
 | value(v-model) | To set the current selected treeNode(s). | string\|string\[] | - |
-| suffixIcon | The custom suffix icon | VNode \| slot | - |
 
 ### Events
 | Events Name | Description | Arguments |
 | --- | --- | --- |
 | change | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) |
 | search | A callback function, can be executed when the search input changes. | function(value: string) |
 | select | A callback function, can be executed when you select a treeNode. | function(value, node, extra) |
+| treeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) |
 
 ### Tree Methods
 
@@ -52,6 +54,7 @@
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| selectable | can be selected | boolean | true |
 | disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
 | disabled | Disabled or not | boolean | false |
 | isLeaf | Leaf node or not | boolean | false |

components/tree-select/index.jsx

@@ -136,10 +136,12 @@ const TreeSelect = {
           dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
           treeCheckable: checkable,
           notFoundContent: notFoundContent || locale.notFoundContent,
+          __propsSymbol__: Symbol(),
         },
         class: cls,
         on: { ...this.$listeners, change: this.onChange },
         ref: 'vcTreeSelect',
+        scopedSlots: this.$scopedSlots,
       }
       return (
         <VcTreeSelect {...VcTreeSelectProps}>{filterEmpty(this.$slots.default)}</VcTreeSelect>