feat: add tree-select

components/_util/props-util.js

@@ -117,6 +117,16 @@ const getComponentFromProp = (instance, prop) => {
   }
 }
 
+const getAllProps = (ele) => {
+  let data = ele.data || {}
+  let componentOptions = ele.componentOptions || {}
+  if (ele.$vnode) {
+    data = ele.$vnode.data || {}
+    componentOptions = ele.$vnode.componentOptions || {}
+  }
+  return { ...data.props, ...data.attrs, ...componentOptions.propsData }
+}
+
 const getPropsData = (ele) => {
   let componentOptions = ele.componentOptions
   if (ele.$vnode) {
@@ -247,5 +257,6 @@ export {
   isValidElement,
   camelize,
   getSlots,
+  getAllProps,
 }
 export default hasProp

components/auto-complete/index.jsx

@@ -21,7 +21,7 @@ import { getComponentFromProp, getOptionProps, filterEmpty, isValidElement } fro
 // }
 
 const AutoCompleteProps = {
-  ...AbstractSelectProps,
+  ...AbstractSelectProps(),
   value: SelectValue,
   defaultValue: SelectValue,
   dataSource: PropTypes.array,

components/index.js

@@ -102,7 +102,7 @@ import { default as Transfer } from './transfer'
 
 import { default as Tree } from './tree'
 
-// import { default as TreeSelect } from './tree-select'
+import { default as TreeSelect } from './tree-select'
 
 import { default as Tabs } from './tabs'
 
@@ -196,6 +196,8 @@ const components = [
   Transfer,
   Tree,
   Tree.TreeNode,
+  TreeSelect,
+  TreeSelect.TreeNode,
   Tabs,
   Tabs.TabPane,
   Tag,
@@ -269,6 +271,7 @@ export {
   Table,
   Transfer,
   Tree,
+  TreeSelect,
   Tabs,
   Tag,
   TimePicker,

components/select/index.jsx

@@ -5,7 +5,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver'
 import defaultLocale from '../locale-provider/default'
 import { getComponentFromProp, getOptionProps, filterEmpty } from '../_util/props-util'
 
-const AbstractSelectProps = {
+const AbstractSelectProps = () => ({
   prefixCls: PropTypes.string,
   size: PropTypes.oneOf(['small', 'large', 'default']),
   notFoundContent: PropTypes.any,
@@ -28,7 +28,7 @@ const AbstractSelectProps = {
   autoFocus: PropTypes.bool,
   backfill: PropTypes.bool,
   showArrow: PropTypes.bool,
-}
+})
 const Value = PropTypes.shape({
   key: PropTypes.string,
 }).loose
@@ -45,7 +45,7 @@ const SelectValue = PropTypes.oneOfType([
 ])
 
 const SelectProps = {
-  ...AbstractSelectProps,
+  ...AbstractSelectProps(),
   value: SelectValue,
   defaultValue: SelectValue,
   mode: PropTypes.oneOf(['default', 'multiple', 'tags', 'combobox']),

components/style.js

@@ -46,3 +46,4 @@ import './layout/style'
 import './form/style'
 import './anchor/style'
 import './list/style'
+import './tree-select/style'

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

@@ -0,0 +1,31 @@
+// 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 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;"><b></b></span></span>
+</span>
+`;
+
+exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
+<span class="ant-select ant-select-enabled 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"></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>
+`;
+
+exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
+<span class="ant-select ant-select-enabled ant-select-allow-clear 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>
+</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 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;"><b></b></span></span>
+</span>
+`;

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

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('tree-select')

components/tree-select/__tests__/index.test.js

@@ -0,0 +1,6 @@
+import TreeSelect from '..'
+import focusTest from '../../../tests/shared/focusTest'
+
+describe('TreeSelect', () => {
+  focusTest(TreeSelect)
+})

components/tree-select/demo/basic.md

@@ -0,0 +1,53 @@
+<cn>
+#### 基本用法
+最简单的用法。
+</cn>
+
+<us>
+#### Basic
+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-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(arguments)
+      this.value = value
+    },
+  },
+}
+</script>
+```

components/tree-select/demo/checkable.md

@@ -0,0 +1,73 @@
+<cn>
+#### 可勾选
+使用勾选框实现多选功能。
+</cn>
+
+<us>
+#### Checkable
+Multiple and checkable.
+</us>
+
+```html
+<template>
+  <a-tree-select
+    style="width: 300px"
+    :treeData="treeData"
+    :value="value"
+    @change="onChange"
+    treeCheckable
+    :showCheckedStrategy="SHOW_PARENT"
+    searchPlaceholder='Please select'
+    treeNodeFilterProp='label'
+  />
+</template>
+
+<script>
+import { TreeSelect } from 'vue-antd-ui'
+const SHOW_PARENT = TreeSelect.SHOW_PARENT
+
+const treeData = [{
+  label: 'Node1',
+  value: '0-0',
+  key: '0-0',
+  children: [{
+    label: 'Child Node1',
+    value: '0-0-0',
+    key: '0-0-0',
+  }],
+}, {
+  label: 'Node2',
+  value: '0-1',
+  key: '0-1',
+  children: [{
+    label: 'Child Node3',
+    value: '0-1-0',
+    key: '0-1-0',
+    disabled: true,
+  }, {
+    label: 'Child Node4',
+    value: '0-1-1',
+    key: '0-1-1',
+  }, {
+    label: 'Child Node5',
+    value: '0-1-2',
+    key: '0-1-2',
+  }],
+}]
+export default {
+  data () {
+    return {
+      value: ['0-0-0'],
+      treeData,
+      SHOW_PARENT,
+    }
+  },
+  methods: {
+    onChange (value) {
+      console.log('onChange ', value, arguments)
+      this.value = value
+    },
+  },
+}
+</script>
+```

components/tree-select/demo/index.vue

@@ -0,0 +1,48 @@
+<script>
+import Basic from './basic'
+import Checkable from './checkable'
+import Multiple from './multiple'
+import TreeData from './treeData'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# 树型选择控件。
+  ## 何时使用
+
+类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。
+
+        ## 代码演示`,
+  us: `# TreeSelect
+  ## When To Use
+
+\`TreeSelect\` is similar to \`Select\`, but the values are provided in a tree like structure.
+Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.
+## Examples
+  `,
+}
+export default {
+  category: 'Components',
+  subtitle: '树选择',
+  type: 'Data Entry',
+  title: 'TreeSelect',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic/>
+        <Checkable/>
+        <Multiple/>
+        <TreeData/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>

components/tree-select/demo/multiple.md

@@ -0,0 +1,62 @@
+<cn>
+#### 多选
+多选的树选择。
+</cn>
+
+<us>
+#### Multiple Selection
+Multiple selection usage.
+</us>
+
+```html
+<template>
+  <a-tree-select
+    showSearch
+    style="width: 300px"
+    :value="value"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    placeholder='Please select'
+    allowClear
+    multiple
+    treeDefaultExpandAll
+    @change="onChange"
+    @search="onSearch"
+    @select="onSelect"
+  >
+    <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(arguments)
+      this.value = value
+    },
+    onSearch () {
+      console.log(arguments)
+    },
+    onSelect () {
+      console.log(arguments)
+    },
+  },
+}
+</script>
+```