From 371f6c1c7f7c8b8580f54d8ba9a61f7ddb7446b2 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 24 Oct 2017 22:41:06 -0500
Subject: [PATCH] [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    |  5 +++--
 docs/examples-docs/zh-CN/tabbar.md    |  5 +++--
 docs/examples-docs/zh-CN/toast.md     |  1 +
 packages/icon/index.vue               |  4 +++-
 packages/tabbar-item/index.vue        |  7 +++++--
 packages/toast/index.js               |  1 +
 packages/toast/toast.vue              |  6 +++++-
 packages/vant-css/scripts/build.sh    |  4 ++--
 packages/vant-css/src/coupon-list.css |  2 +-
 packages/vant-css/src/icon.css        |  4 ++--
 packages/vant-css/src/tabbar.css      | 16 ++++++++++++++++
 packages/vant-css/src/toast.css       |  9 +++++++++
 12 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/docs/examples-docs/en-US/tabbar.md b/docs/examples-docs/en-US/tabbar.md
index 4a83ccdac..f0f4f6f01 100644
--- a/docs/examples-docs/en-US/tabbar.md
+++ b/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` | - | - |
diff --git a/docs/examples-docs/zh-CN/tabbar.md b/docs/examples-docs/zh-CN/tabbar.md
index 3108771e7..355afc6ab 100644
--- a/docs/examples-docs/zh-CN/tabbar.md
+++ b/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` | - | - |
diff --git a/docs/examples-docs/zh-CN/toast.md b/docs/examples-docs/zh-CN/toast.md
index 802afb135..651cc5949 100644
--- a/docs/examples-docs/zh-CN/toast.md
+++ b/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 不会消失 |
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index 8560237b0..7e3b89521 100644
--- a/packages/icon/index.vue
+++ b/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>
diff --git a/packages/tabbar-item/index.vue b/packages/tabbar-item/index.vue
index 0e82852a9..7b77393bd 100644
--- a/packages/tabbar-item/index.vue
+++ b/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() {
diff --git a/packages/toast/index.js b/packages/toast/index.js
index afe934c2c..265cf425e 100644
--- a/packages/toast/index.js
+++ b/packages/toast/index.js
@@ -6,6 +6,7 @@ let instance;
 const defaultOptions = {
   visible: true,
   type: 'text',
+  position: 'middle',
   duration: 3000,
   forbidClick: false,
   clear: () => {
diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue
index 71ec40c32..82d392678 100644
--- a/packages/toast/toast.vue
+++ b/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'
     }
   },
 
diff --git a/packages/vant-css/scripts/build.sh b/packages/vant-css/scripts/build.sh
index de0c3475e..5827ba6ea 100644
--- a/packages/vant-css/scripts/build.sh
+++ b/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;
 
diff --git a/packages/vant-css/src/coupon-list.css b/packages/vant-css/src/coupon-list.css
index f1cfb48fe..140915811 100644
--- a/packages/vant-css/src/coupon-list.css
+++ b/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;
diff --git a/packages/vant-css/src/icon.css b/packages/vant-css/src/icon.css
index 2522ef749..459abd05d 100644
--- a/packages/vant-css/src/icon.css
+++ b/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;
 
diff --git a/packages/vant-css/src/tabbar.css b/packages/vant-css/src/tabbar.css
index cbfab2b49..15dc13bc8 100644
--- a/packages/vant-css/src/tabbar.css
+++ b/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;
     }
diff --git a/packages/vant-css/src/toast.css b/packages/vant-css/src/toast.css
index 652fe20cb..ac323dbb4 100644
--- a/packages/vant-css/src/toast.css
+++ b/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 {