fix bugs and add new features (#25)

* fix bugs and add new features

* add unit test

* fix tab/tag/datetime-picker bugs

docs/examples-docs/actionsheet.md

@@ -83,6 +83,7 @@ Vue.component(ActionSheet.name, ActionSheet);
 
 ```js
 import { ActionSheet } from 'vant';
+import 'vant/lib/vant-css/actionSheet.css';
 
 export default {
   components: {

docs/examples-docs/badge.md

@@ -53,6 +53,7 @@ Vue.component(BadgeGroup.name, BadgeGroup);
 
 ```js
 import { Badge, BadgeGroup } from 'vant';
+import 'vant/lib/vant-css/badge.css';
 
 export default {
   components: {

docs/examples-docs/button.md

@@ -44,6 +44,7 @@ Vue.component(Button.name, Button);
 
 ```js
 import { Button } from 'vant';
+import 'vant/lib/vant-css/button.css';
 
 export default {
   components: {
@@ -170,7 +171,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | type | 按钮类型 | `string`  | `default`          | `primary`, `danger`   |
 | size | 按钮尺寸 | `string`  | `normal`          | `large`, `small`, `mini`  |
-| tag | 按钮标签 | `string`  | `button`          | `a`, `span`, ...  |
+| tag | 按钮标签 | `string`  | `button`          | 任何有意义的`html`标签, 如`a`, `span`等  |
 | diabled | 按钮是否禁用 | `boolean`  |  `false`  |      |
 | block | 按钮是否显示为块级元素 | `boolean`  |   `false`   |      |
 | bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean`  |   `false`   |      |

docs/examples-docs/card.md

@@ -22,6 +22,7 @@ Vue.component(Card.name, Card);
 
 ```js
 import { Card } from 'vant';
+import 'vant/lib/vant-css/card.css';
 
 export default {
   components: {

docs/examples-docs/cell.md

@@ -20,9 +20,10 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Cell } from 'vant';
+import { Cell, CellGroup } from 'vant';
 import 'vant/lib/vant-css/cell.css';
 
+Vue.component(CellGroup.name, CellGroup);
 Vue.component(Cell.name, Cell);
 ```
 
@@ -32,9 +33,11 @@ Vue.component(Cell.name, Cell);
 
 ```js
 import { Cell } from 'vant';
+import 'vant/lib/vant-css/cell.css';
 
 export default {
   components: {
+    'van-cell-group': CellGroup,
     'van-cell': Cell
   }
 };
@@ -44,6 +47,8 @@ export default {
 
 #### 基础用法
 
+你可以将`van-cell-group`组件看成一个容器即可。
+
 :::demo 基础用法
 ```html
 <van-cell-group>

docs/examples-docs/checkbox.md

@@ -60,6 +60,7 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
 
 ```js
 import { Checkbox, CheckboxGroup } from 'vant';
+import 'vant/lib/vant-css/checkbox.css';
 
 export default {
   components: {

docs/examples-docs/field.md

@@ -44,6 +44,7 @@ Vue.component(Field.name, Field);
 
 ```js
 import { Field } from 'vant';
+import 'vant/lib/vant-css/field.css';
 
 export default {
   components: {

docs/examples-docs/icon.md

@@ -38,6 +38,7 @@ Vue.component(Icon.name, Icon);
 
 ```js
 import { Icon } from 'vant';
+import 'vant/lib/vant-css/icon.css';
 
 export default {
   components: {

docs/examples-docs/layout.md

@@ -56,6 +56,8 @@ Vue.component(Col.name, Col);
 
 ```js
 import { Row, Col } from 'vant';
+import 'vant/lib/vant-css/col.css';
+import 'vant/lib/vant-css/row.css';
 
 export default {
   components: {
@@ -106,7 +108,7 @@ Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设
 
 :::demo 在列元素之间增加间距
 ```html
-<van-row gutter="10">
+<van-row gutter="20">
   <van-col span="8">
     <div class="gray">span: 8</div>
   </van-col>

docs/examples-docs/loading.md

@@ -44,6 +44,7 @@ Vue.component(Loading.name, Loading);
 
 ```js
 import { Loading } from 'vant';
+import 'vant/lib/vant-css/loading.css';
 
 export default {
   components: {

docs/examples-docs/panel.md

@@ -53,6 +53,7 @@ Vue.component(Panel.name, Panel);
 
 ```js
 import { Panel } from 'vant';
+import 'vant/lib/vant-css/panel.css';
 
 export default {
   components: {

docs/examples-docs/picker.md

@@ -59,6 +59,7 @@ Vue.component(Picker.name, Picker);
 
 ```js
 import { Picker } from 'vant';
+import 'vant/lib/vant-css/picker.css';
 
 export default {
   components: {

docs/examples-docs/popup.md

@@ -102,6 +102,7 @@ Vue.component(Popup.name, Popup);
 
 ```js
 import { Popup } from 'vant';
+import 'vant/lib/vant-css/popup.css';
 
 export default {
   components: {

docs/examples-docs/progress.md

@@ -34,6 +34,7 @@ Vue.component(Progress.name, Progress);
 
 ```js
 import { Progress } from 'vant';
+import 'vant/lib/vant-css/progress.css';
 
 export default {
   components: {

docs/examples-docs/quantity.md

@@ -47,6 +47,7 @@ Vue.component(Quantity.name, Quantity);
 
 ```js
 import { Quantity } from 'vant';
+import 'vant/lib/vant-css/quantity.css';
 
 export default {
   components: {

docs/examples-docs/radio.md

@@ -50,6 +50,7 @@ Vue.component(RadioGroup.name, RadioGroup);
 
 ```js
 import { Radio, RadioGroup } from 'vant';
+import 'vant/lib/vant-css/radio.css';
 
 export default {
   components: {

docs/examples-docs/search.md

@@ -38,6 +38,7 @@ Vue.component(Search.name, Search);
 
 ```js
 import { Search } from 'vant';
+import 'vant/lib/vant-css/search.css';
 
 export default {
   components: {

docs/examples-docs/steps.md

@@ -53,6 +53,7 @@ Vue.component(Step.name, Step);
 
 ```js
 import { Steps, Step } from 'vant';
+import 'vant/lib/vant-css/steps.css';
 
 export default {
   components: {
@@ -97,7 +98,7 @@ export default {
 
 #### 只显示步骤条
 
-当你不设置`title`或`description`属性时，就会🈯️显示步骤条，而没有步骤的详细信息。
+当你不设置`title`或`description`属性时，就会只显示步骤条，而没有步骤的详细信息。
 
 :::demo 只显示步骤条
 ```html
@@ -110,6 +111,22 @@ export default {
 ```
 :::
 
+### 高级用法
+
+可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。
+
+:::demo 高级用法
+```html
+<van-steps :active="active" title="等待商家发货">
+  <van-icon slot="icon" name="like"></van-icon>
+  <p slot="message-extra">流程</p>
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>  
+</van-steps>
+```
+:::
 
 ### Steps API
 

docs/examples-docs/swipe.md

@@ -60,6 +60,7 @@ Vue.component(SwipeItem.name, SwipeItem);
 
 ```js
 import { Swipe, SwipeItem } from 'vant';
+import 'vant/lib/vant-css/swipe.css';
 
 export default {
   components: {

docs/examples-docs/switch.md

@@ -67,6 +67,7 @@ Vue.component(Switch.name, Switch);
 
 ```js
 import { Switch } from 'vant';
+import 'vant/lib/vant-css/switch.css';
 
 export default {
   components: {

docs/examples-docs/tab.md

@@ -74,6 +74,7 @@ Vue.component(Tabs.name, Tabs);
 
 ```js
 import { Tab, Tabs } from 'vant';
+import 'vant/lib/vant-css/tab.css';
 
 export default {
   components: {
@@ -103,7 +104,7 @@ export default {
 
 #### active特定tab
 
-可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
+可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。
 
 :::demo 基础用法
 ```html
@@ -117,6 +118,20 @@ export default {
 ```
 :::
 
+### 设置切换tab的动画时间
+
+通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
+
+:::demo 设置切换tab的动画时间
+```html
+<van-tabs :duration="0.6">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+</van-tabs>
+```
+:::
+
 #### 禁用tab
 
 在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
@@ -124,7 +139,7 @@ export default {
 :::demo 禁用tab
 ```html
 <van-tabs>
-  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项三">内容一</van-tab>
   <van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
   <van-tab title="选项三">内容三</van-tab>
   <van-tab title="选项四">内容四</van-tab>
@@ -235,6 +250,7 @@ export default {
 | classtype | 两种UI | `string`  | `line` |     `line`, `card`      |
 | active | 默认激活的tab | `string`, `number`  | `0` |           |
 | navclass | tabs的内部nav上的自定义classname | `string`  |  |           |
+| duration | 切换tab的动画时间 | `number` | `0.3` | |           |
 
 
 ### van-tab API

docs/examples-docs/tag.md

@@ -32,6 +32,7 @@ Vue.component(Tag.name, Tag);
 
 ```js
 import { Tag } from 'vant';
+import 'vant/lib/vant-css/tag.css';
 
 export default {
   components: {
@@ -44,18 +45,17 @@ export default {
 
 #### 基础用法
 
-`Tag`目前有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
+`Tag`默认是灰色，另外还有有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
 
 :::demo 基础用法
 ```html
 <div class="tags-container">
   <van-tag>返现</van-tag>
-  <van-tag plain>返现</van-tag>
 </div>
 <div class="tags-container">
   <van-tag type="danger">返现</van-tag>
-  <van-tag type="danger">四字标签</van-tag>
+  <van-tag type="success">四字标签</van-tag>
-  <van-tag type="danger">一</van-tag>
+  <van-tag type="primary">一</van-tag>
 </div>
 ```
 :::
@@ -66,6 +66,10 @@ export default {
 
 :::demo 高级用法
 ```html
+<div class="tags-container">
+  <van-tag>返现</van-tag>
+  <van-tag plain>返现</van-tag>
+</div>
 <div class="tags-container">
   <van-tag type="danger">返现</van-tag>
   <van-tag plain type="danger">返现</van-tag>
@@ -78,9 +82,6 @@ export default {
   <van-tag type="success">返现</van-tag>
   <van-tag plain type="success">返现</van-tag>
 </div>
-<div class="tags-container">
-  <van-tag type="danger" mark>返现</van-tag>
-</div>
 ```
 :::
 

docs/examples-docs/uploader.md

@@ -37,6 +37,7 @@ Vue.component(Uploader.name, Uploader);
 
 ```js
 import { Uploader } from 'vant';
+import 'vant/lib/vant-css/uploader.css';
 
 export default {
   components: {

docs/src/nav.config.js

@@ -21,6 +21,10 @@ module.exports = {
         {
           "groupName": "基础组件",
           "list": [
+            {
+              "path": "/layout",
+              "title": "Layout 布局"
+            },
             {
               "path": "/button",
               "title": "Button 按钮"
@@ -37,21 +41,17 @@ module.exports = {
               "path": "/progress",
               "title": "Progress 进度条"
             },
-            {
-              "path": "/panel",
-              "title": "Panel 面板"
-            },
             {
               "path": "/card",
               "title": "Card 图文组件"
             },
             {
-              "path": "/loading",
+              "path": "/panel",
-              "title": "Loading 加载"
+              "title": "Panel 面板"
             },
             {
-              "path": "/layout",
+              "path": "/loading",
-              "title": "Layout 布局"
+              "title": "Loading 加载"
             },
             {
               "path": "/steps",

packages/steps/src/steps.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="van-steps" :class="`van-steps--${steps.length}`">
     <div class="van-steps__status" v-if="title || description">
-      <div class="van-steps__icon" v-if="icon || $slot.icon">
+      <div class="van-steps__icon" v-if="icon || $slots.icon">
         <slot name="icon">
           <van-icon :name="icon" :class="iconClass"></van-icon>
         </slot>

packages/tab/src/tabs.vue

@@ -35,6 +35,11 @@
       type: {
         type: String,
         default: 'line'
+      },
+      // 切换tab的动画时间
+      duration: {
+        type: Number,
+        default: 0.3
       }
     },
 
@@ -66,7 +71,8 @@
 
         return {
           width: offsetWidth,
-          transform: `translate3d(${offsetLeft}, 0px, 0px)`
+          transform: `translate3d(${offsetLeft}, 0px, 0px)`,
+          transitionDuration: `${this.duration}s`
         };
       }
     },

packages/tag/src/main.vue

@@ -5,10 +5,17 @@
 </template>
 
 <script>
+  const ALLOW_TYPE = ['danger', 'success', 'primary'];
+
   export default {
     name: 'van-tag',
     props: {
-      type: String,
+      type: {
+        type: String,
+        validator: function (val) {
+          return ~ALLOW_TYPE.indexOf(val);
+        }
+      },
       mark: Boolean,
       plain: Boolean
     }

packages/vant-css/src/tab.css

@@ -86,7 +86,6 @@
     font-size: 14px;
     line-height: 44px;
     box-sizing: border-box;
-    transition: color .3s cubic-bezier(.645, .045, .355, 1);
     cursor: pointer;
     text-align: center;
     float: left;

test/unit/components/tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-tabs :active="active" @click="handleTabClick" @disabled="handleTabDisabledClick">
+  <van-tabs :active="active" :duration="duration" @click="handleTabClick" @disabled="handleTabDisabledClick">
     <van-tab title="选项一">内容一</van-tab>
     <van-tab title="选项二">内容二</van-tab>
     <van-tab title="选项三" disabled>内容三</van-tab>
@@ -20,7 +20,8 @@ export default {
 
   data() {
     return {
-      active: 0
+      active: 0,
+      duration: 0.5
     };
   },
 

test/unit/specs/tabs.spec.js

@@ -68,4 +68,10 @@ describe('Tabs', () => {
       done();
     });
   });
+
+  it('check animation duration', () => {
+    wrapper = mount(TabsTestComponent);
+
+    expect(wrapper.style.transitionDuration != '').to.be.true;
+  });
 });

test/unit/specs/tag.spec.js

@@ -0,0 +1,29 @@
+import Tag from 'packages/tag';
+import { mount } from 'avoriaz';
+
+describe('Tag', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create without typeProps', () => {
+    wrapper = mount(Tag);
+  });
+
+  it('create with right typeProps', () => {
+    wrapper = mount(Tag, {
+      propsData: {
+        type: 'primary'
+      }
+    })
+  });
+
+  it('create with wrong typeProps', () => {
+    wrapper = mount(Tag, {
+      propsData: {
+        type: 'wrong'
+      }
+    })
+  });
+});