DeepSelect: rename to TreeSelect

docs/examples-docs/changelog.md

@@ -21,7 +21,7 @@
 
 **合并的 Pull Request (可能有不兼容改动):**
 
-- Add deep-select component and fix a popup bug. [\#103](https://github.com/youzan/vant/pull/103) ([Tinysymphony](https://github.com/Tinysymphony))
+- Add tree-select component and fix a popup bug. [\#103](https://github.com/youzan/vant/pull/103) ([Tinysymphony](https://github.com/Tinysymphony))
 - Doc: update Step/Loading/Tag/Badge documents [\#101](https://github.com/youzan/vant/pull/101) ([chenjiahan](https://github.com/chenjiahan))
 
 ## [v0.8.7](https://github.com/youzan/vant/tree/v0.8.7) (2017-08-29)

docs/examples-docs/tree-select.md

@@ -74,13 +74,13 @@ export default {
 }
 </script>
 
-## DeepSelect 分类选择
+## TreeSelect 分类选择
 
 ### 使用指南
 ``` javascript
-import { DeepSelect } from 'vant';
+import { TreeSelect } from 'vant';
 
-Vue.component(DeepSelect.name, DeepSelect);
+Vue.component(TreeSelect.name, TreeSelect);
 ```
 
 ### 代码演示
@@ -89,13 +89,13 @@ Vue.component(DeepSelect.name, DeepSelect);
 
 :::demo 基础用法
 ```html
-<van-deep-select
+<van-tree-select
   :items="items"
   :main-active-index="mainActiveIndex"
   :active-id="activeId"
   @navclick="onNavClick"
   @itemclick="onItemClick"
-></van-deep-select>
+></van-tree-select>
 ```
 
 ```javascript

docs/src/doc.config.js

@@ -98,6 +98,10 @@ module.exports = {
                 "path": "/progress",
                 "title": "Progress 进度条"
               },
+              {
+                "path": "/search",
+                "title": "Search 搜索"
+              },
               {
                 "path": "/stepper",
                 "title": "Stepper 步进器"
@@ -106,6 +110,10 @@ module.exports = {
                 "path": "/steps",
                 "title": "Steps 步骤条"
               },
+              {
+                "path": "/swipe",
+                "title": "Swipe 轮播"
+              },
               {
                 "path": "/tab",
                 "title": "Tab 标签"
@@ -114,14 +122,6 @@ module.exports = {
                 "path": "/tag",
                 "title": "Tag 标记"
               },
-              {
-                "path": "/swipe",
-                "title": "Swipe 轮播"
-              },
-              {
-                "path": "/search",
-                "title": "Search 搜索"
-              },
               {
                 "path": "/waterfall",
                 "title": "Waterfall 瀑布流"
@@ -192,7 +192,11 @@ module.exports = {
               {
                 "path": "/switch-cell",
                 "title": "SwitchCell 开关单元格"
-              }
+              },
+              {
+                "path": "/tree-select",
+                "title": "TreeSelect 分类选择"
+              },
             ]
           },
           {
@@ -203,17 +207,13 @@ module.exports = {
                 "title": "Area 省市区选择"
               },
               {
-                "path": "/deep-select",
-                "title": "DeepSelect 分类选择"
+                "path": "/coupon",
+                "title": "Coupon 优惠券选择器"
               },
               {
                 "path": "/goods-action",
                 "title": "GoodsAction 商品页行动点"
               },
-              {
-                "path": "/coupon",
-                "title": "Coupon 优惠券选择器"
-              },
               {
                 "path": "/pay-order",
                 "title": "PayOrder 提交订单栏"

packages/index.js

@@ -13,7 +13,6 @@ import Col from './col';
 import CouponCell from './coupon-cell';
 import CouponList from './coupon-list';
 import DatetimePicker from './datetime-picker';
-import DeepSelect from './deep-select';
 import Dialog from './dialog';
 import Field from './field';
 import GoodsAction from './goods-action';
@@ -30,12 +29,12 @@ import Picker from './picker';
 import Popup from './popup';
 import Progress from './progress';
 import PullRefresh from './pull-refresh';
-import Stepper from './stepper';
 import Radio from './radio';
 import RadioGroup from './radio-group';
 import Row from './row';
 import Search from './search';
 import Step from './step';
+import Stepper from './stepper';
 import Steps from './steps';
 import Swipe from './swipe';
 import SwipeItem from './swipe-item';
@@ -45,6 +44,7 @@ import Tab from './tab';
 import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
+import TreeSelect from './tree-select';
 import Uploader from './uploader';
 import Waterfall from './waterfall';
 
@@ -65,7 +65,6 @@ const components = [
   CouponCell,
   CouponList,
   DatetimePicker,
-  DeepSelect,
   Field,
   GoodsAction,
   GoodsActionBigBtn,
@@ -79,12 +78,12 @@ const components = [
   Popup,
   Progress,
   PullRefresh,
-  Stepper,
   Radio,
   RadioGroup,
   Row,
   Search,
   Step,
+  Stepper,
   Steps,
   Swipe,
   SwipeItem,
@@ -93,6 +92,7 @@ const components = [
   Tab,
   Tabs,
   Tag,
+  TreeSelect,
   Uploader
 ];
 
@@ -127,7 +127,6 @@ export {
   CouponCell,
   CouponList,
   DatetimePicker,
-  DeepSelect,
   Dialog,
   Field,
   GoodsAction,
@@ -144,12 +143,12 @@ export {
   Popup,
   Progress,
   PullRefresh,
-  Stepper,
   Radio,
   RadioGroup,
   Row,
   Search,
   Step,
+  Stepper,
   Steps,
   Swipe,
   SwipeItem,
@@ -159,6 +158,7 @@ export {
   Tabs,
   Tag,
   Toast,
+  TreeSelect,
   Uploader,
   Waterfall
 };

packages/tree-select/index.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="van-deep-select" :style="{ height: mainHeight + 'px' }">
-    <div class="van-deep-select__nav">
+  <div class="van-tree-select" :style="{ height: mainHeight + 'px' }">
+    <div class="van-tree-select__nav">
       <div
         v-for="(item, index) in items"
-        class="van-deep-select__nitem"
-        :class="{ 'van-deep-select__nitem--active': mainActiveIndex === index }"
-        @click="onNavClick(index)">
+        class="van-tree-select__nitem"
+        :class="{ 'van-tree-select__nitem--active': mainActiveIndex === index }"
+        @click="$emit('navclick', index)">
         {{ item.text }}
       </div>
     </div>
-    <div class="van-deep-select__content" :style="{ height: itemHeight + 'px' }">
+    <div class="van-tree-select__content" :style="{ height: itemHeight + 'px' }">
       <div
         v-for="item in subItems"
         :key="item.id"
-        class="van-deep-select__item"
-        :class="{ 'van-deep-select__item--active': activeId === item.id }"
+        class="van-tree-select__item"
+        :class="{ 'van-tree-select__item--active': activeId === item.id }"
         @click="onItemSelect(item)">
         {{ item.text }}
         <van-icon
           v-if="activeId === item.id"
           name="success"
-          class="van-deep-select__selected"
+          class="van-tree-select__selected"
         ></van-icon>
       </div>
     </div>
@@ -31,7 +31,7 @@
 import Icon from 'packages/icon';
 
 export default {
-  name: 'van-deep-select',
+  name: 'van-tree-select',
 
   components: {
     'van-icon': Icon
@@ -40,9 +40,7 @@ export default {
   props: {
     items: {
       type: Array,
-      default () {
-        return [];
-      }
+      default: () => []
     },
     mainActiveIndex: {
       type: Number,
@@ -73,12 +71,8 @@ export default {
   },
 
   methods: {
-    onNavClick(index) {
-      this.$emit('navclick', index);
-    },
     onItemSelect(data) {
-      const exportData = Object.assign({}, data);
-      this.$emit('itemclick', exportData);
+      this.$emit('itemclick', { ...data });
     }
   }
 };

packages/vant-css/src/index.css

@@ -12,7 +12,6 @@
 @import './badge.css';
 @import './button.css';
 @import './cell.css';
-@import './cell-swipe.css';
 @import './card.css';
 @import './icon.css';
 @import './loading.css';
@@ -42,10 +41,11 @@
 @import './toast.css';
 
 /* high order components */
+@import './cell-swipe.css';
 @import './switch-cell.css';
+@import './tree-select.css';
 
 /* business components */
-@import './deep-select.css';
 @import './goods-action.css';
 @import './notice-bar.css';
 @import './coupon.css';

packages/vant-css/src/tree-select.css

@@ -2,7 +2,7 @@
 @import "./mixins/clearfix.css";
 @import './common/var.css';
 
-.van-deep-select {
+.van-tree-select {
   user-select: none;
   position: relative;
   @mixin clearfix;

test/unit/specs/tree-select.spec.js

@@ -1,19 +1,19 @@
-import DeepSelect from 'packages/deep-select';
+import TreeSelect from 'packages/tree-select';
 import { mount } from 'avoriaz';
 
-describe('DeepSelect', () => {
+describe('TreeSelect', () => {
   let wrapper;
   afterEach(() => {
     wrapper && wrapper.destroy();
   });
 
-  it('create an empty deep-select', () => {
-    wrapper = mount(DeepSelect);
+  it('create an empty tree-select', () => {
+    wrapper = mount(TreeSelect);
     expect(wrapper.hasStyle('height', '0px')).to.be.true;
   });
 
-  it('create a deep-select correctly', () => {
-    wrapper = mount(DeepSelect, {
+  it('create a tree-select correctly', () => {
+    wrapper = mount(TreeSelect, {
       propsData: {
         items: [{
           text: 'A',
@@ -25,13 +25,13 @@ describe('DeepSelect', () => {
         maxHeight: 200
       }
     });
-    expect(wrapper.hasClass('van-deep-select')).to.be.true;
+    expect(wrapper.hasClass('van-tree-select')).to.be.true;
     expect(wrapper.hasStyle('height', '44px')).to.be.true;
     expect(wrapper.vm.maxHeight).to.equal(200);
   });
 
   it('interact with this component', () => {
-    wrapper = mount(DeepSelect, {
+    wrapper = mount(TreeSelect, {
       propsData: {
         items: [{
           text: 'A',
@@ -58,10 +58,10 @@ describe('DeepSelect', () => {
     wrapper.vm.$on('itemclick', item => {
       wrapper.vm.activeId = item.id;
     });
-    const secondNav = wrapper.find('.van-deep-select__nitem')[1];
+    const secondNav = wrapper.find('.van-tree-select__nitem')[1];
     secondNav.trigger('click');
     expect(wrapper.vm.mainActiveIndex).to.equal(1);
-    const target = wrapper.find('.van-deep-select__item')[0];
+    const target = wrapper.find('.van-tree-select__item')[0];
     target.trigger('click');
     expect(wrapper.vm.activeId).to.equal(345);
   });