Merge branch 'dev' of https://github.com/youzan/vant into dev

docs/demos/common.js

@@ -31,6 +31,8 @@ Vue.component('demo-section', DemoSection);
 
 Locale.add({
   'zh-CN': {
+    add: '增加',
+    decrease: '减少',
     red: '红色',
     orange: '橙色',
     yellow: '黄色',
@@ -56,6 +58,8 @@ Locale.add({
     passwordPlaceholder: '请输入密码'
   },
   'en-US': {
+    add: 'Add',
+    decrease: 'Decrease',
     red: 'Red',
     orange: 'Orange',
     yellow: 'Yellow',

docs/demos/index.js

@@ -31,6 +31,7 @@ export default {
   'cell-swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe')),
   'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell'), 'cell')), 'cell')),
   'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/checkbox'), 'checkbox')), 'checkbox')),
+  'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/circle'), 'circle')), 'circle')),
   'contact': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/contact'), 'contact')), 'contact')),
   'coupon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/coupon'), 'coupon')), 'coupon')),
   'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker')),

docs/demos/views/circle.vue

@@ -0,0 +1,78 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-circle
+        v-model="currentRate1"
+        :rate="rate"
+        :speed="100"
+        size="120px"
+        :text="currentRate1.toFixed(0) + '%'"
+      />
+      <van-circle
+        v-model="currentRate2"
+        color="#13ce66"
+        fill="#fff"
+        :rate="rate"
+        size="120px"
+        layer-color="#eee"
+        :speed="100"
+        :stroke-width="60"
+        :clockwise="false"
+        :text="currentRate2.toFixed(0) + '%'"
+      />
+      <div>
+        <van-button :text="$t('add')" type="primary" size="small" @click="add" />
+        <van-button :text="$t('decrease')" type="danger" size="small" @click="reduce" />
+      </div>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+const format = rate => Math.min(Math.max(rate, 0), 100);
+
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '样式定制'
+    },
+    'en-US': {
+      title2: 'Custom Style'
+    }
+  },
+
+  data() {
+    return {
+      rate: 30,
+      currentRate1: 0,
+      currentRate2: 0
+    };
+  },
+
+  methods: {
+    add() {
+      this.rate = format(this.rate + 20);
+    },
+
+    reduce() {
+      this.rate = format(this.rate - 20);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-circle {
+  .van-circle {
+    margin-left: 15px;
+  }
+
+  .van-button {
+    margin: 15px 0 0 10px;
+
+    &:first-of-type {
+      margin-left: 15px;
+    }
+  }
+}
+</style>

docs/demos/views/sku.vue

@@ -13,6 +13,7 @@
           :reset-stepper-on-hide="true"
           :reset-selected-sku-on-hide="true"
           :disable-stepper-input="true"
+          :message-config="messageConfig"
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
@@ -23,7 +24,7 @@
     <demo-block :title="$t('title2')">
       <div class="sku-container">
         <van-sku
-          v-model="showBase"
+          v-model="showStepper"
           :sku="$t('sku').sku"
           :goods="$t('sku').goods_info"
           :goods-id="$t('sku').goods_id"
@@ -34,7 +35,7 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
-        <van-button type="primary" @click="showBase = true" block>{{ $t('title2') }}</van-button>
+        <van-button type="primary" @click="showStepper = true" block>{{ $t('title2') }}</van-button>
       </div>
     </demo-block>
 
@@ -94,6 +95,7 @@ export default {
     return {
       showBase: false,
       showCustom: false,
+      showStepper: false,
       initialSku: {
         s1: '30349',
         s2: '1193'
@@ -113,6 +115,14 @@ export default {
             }
           }
         }
+      },
+      messageConfig: {
+        uploadImg: () => {
+          return new Promise((resolve) => {
+            setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
+          });
+        },
+        uploadMaxSize: 3
       }
     };
   },

docs/markdown/en-US/actionsheet.md

@@ -61,6 +61,7 @@ Actionsheet will get another style if there is a `title` prop.
 | cancel-text | Text of cancel button | `String` | - | - |
 | overlay | Whether to show overlay | `Boolean` | - | - |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | - | - |
+| get-container | Return the mount node for actionsheet | `Function` | - | `() => HTMLElement` |
 
 ### Data struct of actions
 

docs/markdown/en-US/circle.md

@@ -0,0 +1,69 @@
+## Circle
+
+### Install
+``` javascript
+import { Circle } from 'vant';
+
+Vue.use(Circle);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-circle
+  v-model="currentRate"
+  :rate="30"
+  :speed="100"
+  :text="text"
+/>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      currentRate: 0
+    };
+  },
+  computed: {
+    text() {
+      return this.currentRate.toFixed(0) + '%'
+    }
+  }
+};
+```
+
+#### Custom style
+
+```html
+<van-circle
+  v-model="currentRate"
+  color="#13ce66"
+  fill="#fff"
+  size="120px"
+  layer-color="#eee"
+  :text="text"
+  :rate="rate"
+  :speed="100"
+  :clockwise="false"
+  :stroke-width="60"
+/>
+```
+
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Current rate | `Number` | - | - |
+| rate | Target rate | `Number` | `100` | - |
+| size | Circle size | `String` | `100px` | - |
+| color | Progress bar color | `String` | `#38f` | - |
+| layer-color | Layer color | `String` | `#fff` | - |
+| fill | Fill color | `String` | `none` | - |
+| speed | Animate speed（rate/s）| `Number` | - | - |
+| text | Text | `String` | - | - |
+| stroke-width | Stroke width | `Number` | `40` | - |
+| clockwise | Is clockwise | `Boolean` | `true` | - |

docs/markdown/en-US/popup.md

@@ -48,3 +48,4 @@ Use `position` prop to set popup display position
 | close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` | - |
 | transition | Transition | `String` | `popup-slide` | - |
 | prevent-scroll | Prevent background scroll | `Boolean` | `false` | - |
+| get-container | Return the mount node for Popup | `Function` | - | `() => HTMLElement` |

docs/markdown/en-US/sku.md

@@ -22,6 +22,7 @@ Vue.use(Sku);
   :reset-stepper-on-hide="resetStepperOnHide"
   :reset-selected-sku-on-hide="resetSelectedSkuOnHide"
   :disable-stepper-input="disableStepperInput"
+  :message-config="messageConfig"
   @buy-clicked="onBuyClicked"
   @add-cart="onAddCartClicked"
 />
@@ -90,6 +91,8 @@ Vue.use(Sku);
 | disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - |
 | stepper-title | Quantity title | `String` | `Quantity` | - |
 | custom-stepper-config | Custom stepper related config | `Object` | `{}` | - |
+| message-config | Message related config | `Object` | `{}` | - |
+| get-container | Return the mount node for sku | `Function` | - | `() => HTMLElement` |
 
 ### Event
 
@@ -200,6 +203,26 @@ customStepperConfig: {
 }
 ```
 
+#### messageConfig Data Structure
+```javascript
+messageConfig: {
+  // the upload image callback
+  uploadImg: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
+    });
+  },
+  // max file size (MB)
+  uploadMaxSize: 3,
+  // placehold config
+  placeholderMap: {
+    text: 'xxx',
+    tel: 'xxx',
+    ...
+  }
+}
+```
+
 #### Event Params Data Structure
 
 ```javascript

docs/markdown/index.js

@@ -25,6 +25,7 @@ export default {
   'zh-CN/changelog-generated': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog-generated.md')), 'zh-CN/changelog-generated')),
   'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')),
   'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')),
+  'zh-CN/circle': wrapper(r => require.ensure([], () => r(require('./zh-CN/circle.md')), 'zh-CN/circle')),
   'zh-CN/contact': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact.md')), 'zh-CN/contact')),
   'zh-CN/coupon': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon.md')), 'zh-CN/coupon')),
   'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')),
@@ -77,6 +78,7 @@ export default {
   'en-US/cell': wrapper(r => require.ensure([], () => r(require('./en-US/cell.md')), 'en-US/cell')),
   'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')),
   'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')),
+  'en-US/circle': wrapper(r => require.ensure([], () => r(require('./en-US/circle.md')), 'en-US/circle')),
   'en-US/contact': wrapper(r => require.ensure([], () => r(require('./en-US/contact.md')), 'en-US/contact')),
   'en-US/coupon': wrapper(r => require.ensure([], () => r(require('./en-US/coupon.md')), 'en-US/coupon')),
   'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')),

docs/markdown/zh-CN/actionsheet.md

@@ -72,6 +72,7 @@ export default {
 | cancel-text | 取消按钮文案 | `String` | - | - |
 | overlay | 是否显示遮罩 | `Boolean` | - | - |
 | close-on-click-overlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
+| get-container | 指定挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` |
 
 ### actions
 

docs/markdown/zh-CN/circle.md

@@ -0,0 +1,70 @@
+## Circle 环形进度条
+
+### 使用指南
+``` javascript
+import { Circle } from 'vant';
+
+Vue.use(Circle);
+```
+
+### 代码演示
+
+#### 基础用法
+通过 `rate` 指定目标进度，`v-model` 代表当前进度，`speed` 控制动画速度
+
+```html
+<van-circle
+  v-model="currentRate"
+  :rate="30"
+  :speed="100"
+  :text="text"
+/>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      currentRate: 0
+    };
+  },
+  computed: {
+    text() {
+      return this.currentRate.toFixed(0) + '%'
+    }
+  }
+};
+```
+
+#### 样式定制
+
+```html
+<van-circle
+  v-model="currentRate"
+  color="#13ce66"
+  fill="#fff"
+  size="120px"
+  layer-color="#eee"
+  :text="text"
+  :rate="rate"
+  :speed="100"
+  :clockwise="false"
+  :stroke-width="60"
+/>
+```
+
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前进度 | `Number` | - | - |
+| rate | 目标进度 | `Number` | `100` | - |
+| size | 圆环直径 | `String` | `100px` | - |
+| color | 进度条颜色 | `String` | `#38f` | - |
+| layer-color | 轨道颜色 | `String` | `#fff` | - |
+| fill | 填充颜色 | `String` | `none` | - |
+| speed | 动画速度（单位为 rate/s）| `Number` | - | - |
+| text | 文字 | `String` | - | - |
+| stroke-width | 进度条宽度 | `Number` | `40` | - |
+| clockwise | 是否顺时针增加 | `Boolean` | `true` | - |

docs/markdown/zh-CN/popup.md

@@ -48,3 +48,4 @@ export default {
 | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` | - |
 | transition | transition 名称 | `String` | `popup-slide` | - |
 | prevent-scroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
+| get-container | 指定弹出层挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` |

docs/markdown/zh-CN/sku.md

@@ -22,6 +22,7 @@ Vue.use(Sku);
   :reset-stepper-on-hide="resetStepperOnHide"
   :reset-selected-sku-on-hide="resetSelectedSkuOnHide"
   :disable-stepper-input="disableStepperInput"
+  :message-config="messageConfig"
   @buy-clicked="onBuyClicked"
   @add-cart="onAddCartClicked"
 />
@@ -91,6 +92,8 @@ Vue.use(Sku);
 | disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
 | stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - |
 | custom-stepper-config | 步进器相关自定义配置 | `Object` | `{}` | - |
+| message-config | 留言相关配置 | `Object` | `{}` | - |
+| get-container | 指定挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` |
 
 ### Event
 
@@ -206,6 +209,26 @@ customStepperConfig: {
 }
 ```
 
+#### messageConfig Data Structure
+```javascript
+messageConfig: {
+  // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
+  uploadImg: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
+    });
+  },
+  // 最大上传体积 (MB)
+  uploadMaxSize: 3,
+  // placehold配置
+  placeholderMap: {
+    text: 'xxx',
+    tel: 'xxx',
+    ...
+  }
+}
+```
+
 #### 添加购物车和点击购买回调函数接收的 skuData 对象结构
 ```javascript
 skuData: {

docs/src/doc.config.js

@@ -80,6 +80,10 @@ module.exports = {
                 path: '/cell',
                 title: 'Cell - 单元格'
               },
+              {
+                path: '/circle',
+                title: 'Circle - 环形进度条'
+              },
               {
                 path: '/icon',
                 title: 'Icon - 图标'
@@ -358,6 +362,10 @@ module.exports = {
                 path: '/cell',
                 title: 'Cell'
               },
+              {
+                path: '/circle',
+                title: 'Circle'
+              },
               {
                 path: '/icon',
                 title: 'Icon'