[new feature] Toast support position prop (#244)

* [bugfix] Checkbox border render error in weixin browser

* [bugfix] TreeSelect dependency path error

* [bugfix] Swipe should clear autoplay timer when destroyed

* [bugfix] Optimize component dependency analyze when build style entry

* merge

* update yarn.lock

* update README.md

* update README.md

* update README.md

* update README.md

* update README.md

* [Doc] add more badges in README.md

* update README.md

* [bugfix] Address & Contact list style

* fix: contact test cases

* [bugfix] popup style missing when build style entry

* [bugfix] Search: onSearch event arguments missing

* [Doc] add demo pages

* update zan-doc@0.3.7

* fix: build entry error

* [Doc] add goods demo

* [bugfix] button primary background color

* [Doc] update doc detail

* [new feature] Coupon add 'showExchangeBar' prop && add empty style

* [new feature] Toast support `position` prop

* [new feature] Tabbar add 'info' prop

docs/examples-docs/en-US/tabbar.md

@@ -32,8 +32,8 @@ Vue.component(TabbarItem.name, TabbarItem);
 <van-tabbar v-model="active">
   <van-tabbar-item icon="shop">Tab</van-tabbar-item>
   <van-tabbar-item icon="chat" dot>Tab</van-tabbar-item>
-  <van-tabbar-item icon="records">Tab</van-tabbar-item>
-  <van-tabbar-item icon="gold-coin">Tab</van-tabbar-item>
+  <van-tabbar-item icon="records" info="5">Tab</van-tabbar-item>
+  <van-tabbar-item icon="gold-coin" info="20">Tab</van-tabbar-item>
 </van-tabbar>
 ```
 
@@ -96,3 +96,4 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | icon | Icon name | `String` | - | Names from Icon Component |
 | dot | Whether to show red dot | `Boolean` | - | - |
+| info | Info message | `String` | - | - |

docs/examples-docs/zh-CN/tabbar.md

@@ -44,8 +44,8 @@ Vue.component(TabbarItem.name, TabbarItem);
 <van-tabbar v-model="active">
   <van-tabbar-item icon="shop">标签</van-tabbar-item>
   <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
-  <van-tabbar-item icon="records">标签</van-tabbar-item>
-  <van-tabbar-item icon="gold-coin">标签</van-tabbar-item>
+  <van-tabbar-item icon="records" info="5">标签</van-tabbar-item>
+  <van-tabbar-item icon="gold-coin" info="20">标签</van-tabbar-item>
 </van-tabbar>
 ```
 
@@ -108,3 +108,4 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
 | dot | 是否显示小红点 | `Boolean` | - | - |
+| info | 图标右上角提示信息 | `String` | - | - |

docs/examples-docs/zh-CN/toast.md

@@ -162,5 +162,6 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
 | message | 内容 | `String` | `''` | - |
+| position | 位置 | `String` | `middle` | `top` `bottom` |
 | forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
 | duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |

packages/icon/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <i :class="['van-icon', 'van-icon-' + name]" @click="$emit('click', $event)" />
+  <i :class="['van-icon', 'van-icon-' + name]" @click="$emit('click', $event)">
+    <slot></slot>
+  </i>
 </template>
 
 <script>

packages/tabbar-item/index.vue

@@ -2,7 +2,9 @@
   <div :class="['van-tabbar-item', { 'van-tabbar-item--active': active }]" @click="onClick">
     <div :class="['van-tabbar-item__icon', { 'van-tabbar-item__icon-dot': dot }]">
       <slot name="icon">
-        <van-icon v-if="icon" :name="icon" />
+        <van-icon v-if="icon" :name="icon">
+          <div v-if="info" class="van-tabbar-item__info">{{ info }}</div>
+        </van-icon>
       </slot>
     </div>
     <div class="van-tabbar-item__text">
@@ -23,7 +25,8 @@ export default {
 
   props: {
     icon: String,
-    dot: Boolean
+    dot: Boolean,
+    info: String
   },
 
   data() {

packages/toast/index.js

@@ -6,6 +6,7 @@ let instance;
 const defaultOptions = {
   visible: true,
   type: 'text',
+  position: 'middle',
   duration: 3000,
   forbidClick: false,
   clear: () => {

packages/toast/toast.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="van-toast-fade">
     <div class="van-toast-wrapper" v-show="visible">
-      <div :class="['van-toast', 'van-toast--' + displayStyle]">
+      <div :class="['van-toast', `van-toast--${displayStyle}`, `van-toast--${position}`]">
         <!-- text only -->
         <div v-if="displayStyle === 'text'" class="van-toast__text">{{ message }}</div>
         <div v-if="displayStyle === 'html'" class="van-toast__text" v-html="message" />
@@ -46,6 +46,10 @@ export default {
     forbidClick: {
       type: Boolean,
       default: false
+    },
+    position: {
+      type: String,
+      default: 'middle'
     }
   },
 

packages/vant-css/scripts/build.sh

@@ -44,11 +44,11 @@ cat > $basepath/../src/icon.css <<EOF
 }
 
 .van-icon {
-    display: inline-block;
+  font-style: normal;
+  display: inline-block;
 }
 .van-icon::before {
   font-family: "vant-icon" !important;
-  font-style: normal;
   font-weight: normal;
   speak: none;
 

packages/vant-css/src/coupon-list.css

@@ -101,7 +101,7 @@
       text-align: center;
 
       p {
-        color: #999;
+        color: $gray-dark;
         margin: 15px 0;
         font-size: 14px;
         line-height: 20px;

packages/vant-css/src/icon.css

@@ -10,11 +10,11 @@
 }
 
 .van-icon {
-    display: inline-block;
+  font-style: normal;
+  display: inline-block;
 }
 .van-icon::before {
   font-family: "vant-icon" !important;
-  font-style: normal;
   font-weight: normal;
   speak: none;
 

packages/vant-css/src/tabbar.css

@@ -43,6 +43,22 @@
       }
     }
 
+    &__info {
+      color: #fff;
+      top: -5px;
+      right: -100%;
+      font-size: 12px;
+      transform: scale(.8);
+      box-sizing: border-box;
+      padding: 0 3px;
+      text-align: center;
+      min-width: 18px;
+      line-height: 18px;
+      border-radius: 9px;
+      background-color: $red;
+      position: absolute;
+    }
+
     &--active {
       color: $blue;
     }

packages/vant-css/src/toast.css

@@ -54,6 +54,15 @@
       padding-top: 10px;
     }
   }
+
+  &--top {
+    top: 50px;
+  }
+
+  &--bottom {
+    top: auto;
+    bottom: 50px;
+  }
 }
 
 .van-toast-fade-enter, .van-toast-fade-leave-to {