[new feature] add Circle component (#608)

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/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/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/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/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'

packages/circle/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="van-circle" :style="style">
+    <svg viewBox="0 0 1060 1060">
+      <path class="van-circle__hover" :style="hoverStyle" :d="path" />
+      <path class="van-circle__layer" :style="layerStyle" :d="path" />
+    </svg>
+    <slot>
+      <div class="van-circle__text">{{ text }}</div>
+    </slot>
+  </div>
+</template>
+
+<script>
+import { create } from '../utils';
+import { raf, cancel } from '../utils/raf';
+
+export default create({
+  name: 'van-circle',
+
+  props: {
+    text: String,
+    value: Number,
+    speed: Number,
+    size: {
+      type: String,
+      default: '100px'
+    },
+    fill: {
+      type: String,
+      default: 'none'
+    },
+    rate: {
+      type: Number,
+      default: 100
+    },
+    layerColor: {
+      type: String,
+      default: '#fff'
+    },
+    color: {
+      type: String,
+      default: '#38f'
+    },
+    strokeWidth: {
+      type: Number,
+      default: 40
+    },
+    clockwise: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  beforeCreate() {
+    this.perimeter = Math.PI * 1000;
+    this.path = 'M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0';
+  },
+
+  computed: {
+    style() {
+      return {
+        width: this.size,
+        height: this.size
+      };
+    },
+
+    layerStyle() {
+      let offset = this.perimeter * (100 - this.value) / 100;
+      offset = this.clockwise ? offset : this.perimeter * 2 - offset;
+      return {
+        stroke: `${this.color}`,
+        strokeDashoffset: `${offset}px`,
+        strokeWidth: `${this.strokeWidth + 1}px`
+      };
+    },
+
+    hoverStyle() {
+      return {
+        fill: `${this.fill}`,
+        stroke: `${this.layerColor}`,
+        strokeWidth: `${this.strokeWidth}px`
+      };
+    }
+  },
+
+  mounted() {
+    this.render();
+  },
+
+  watch: {
+    rate() {
+      this.render();
+    }
+  },
+
+  methods: {
+    render() {
+      this.startTime = Date.now();
+      this.startRate = this.value;
+      this.endRate = this.format(this.rate);
+      this.increase = this.endRate > this.startRate;
+      this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
+      if (this.speed) {
+        cancel(this.rafId);
+        this.rafId = raf(this.animate);
+      } else {
+        this.$emit('input', this.endRate);
+      }
+    },
+
+    animate() {
+      const now = Date.now();
+      const progress = Math.min((now - this.startTime) / this.duration, 1);
+      const rate = progress * (this.endRate - this.startRate) + this.startRate;
+      this.$emit('input', this.format(parseFloat(rate.toFixed(1))));
+      if (this.increase ? rate < this.endRate : rate > this.endRate) {
+        this.rafId = raf(this.animate);
+      }
+    },
+
+    format(rate) {
+      return Math.min(Math.max(rate, 0), 100);
+    }
+  }
+});
+</script>

packages/index.js

@@ -12,6 +12,7 @@ import CellGroup from './cell-group';
 import CellSwipe from './cell-swipe';
 import Checkbox from './checkbox';
 import CheckboxGroup from './checkbox-group';
+import Circle from './circle';
 import Col from './col';
 import ContactCard from './contact-card';
 import ContactEdit from './contact-edit';
@@ -77,6 +78,7 @@ const components = [
   CellSwipe,
   Checkbox,
   CheckboxGroup,
+  Circle,
   Col,
   ContactCard,
   ContactEdit,
@@ -149,6 +151,7 @@ export {
   CellSwipe,
   Checkbox,
   CheckboxGroup,
+  Circle,
   Col,
   ContactCard,
   ContactEdit,

packages/vant-css/src/circle.css

@@ -0,0 +1,32 @@
+@import './common/var.css';
+
+.van-circle {
+  position: relative;
+  text-align: center;
+  display: inline-block;
+
+  svg {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  &__layer {
+    fill: none;
+    stroke-dasharray: 3140px;
+    stroke-dashoffset: 3140px;
+    transform: rotate(90deg);
+    transform-origin: 530px 530px;
+  }
+
+  &__text {
+    top: 50%;
+    left: 0;
+    width: 100%;
+    color: $text-color;
+    position: absolute;
+    transform: translateY(-50%);
+  }
+}

packages/vant-css/src/index.css

@@ -12,7 +12,7 @@
 @import './badge.css';
 @import './button.css';
 @import './cell.css';
-@import './card.css';
+@import './circle.css';
 @import './loading.css';
 @import './nav-bar.css';
 @import './notice-bar.css';
@@ -53,6 +53,7 @@
 /* business components */
 @import './address-edit.css';
 @import './address-list.css';
+@import './card.css';
 @import './contact-card.css';
 @import './contact-list.css';
 @import './contact-edit.css';

test/unit/specs/circle.spec.js

@@ -0,0 +1,65 @@
+import { mount } from 'avoriaz';
+import Circle from 'packages/circle';
+
+describe('Circle', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a circle', () => {
+    wrapper = mount(Circle, {
+      propsData: {
+        text: 'test'
+      }
+    });
+
+    expect(wrapper.hasClass('van-circle')).to.be.true;
+    expect(wrapper.find('.van-circle__text')[0].text()).to.equal('test');
+  });
+
+  it('circle rate', done => {
+    let currentRate = 0;
+    wrapper = mount(Circle, {
+      propsData: {
+        rate: 0,
+        value: 0,
+        clockwise: false
+      }
+    });
+    wrapper.vm.$on('input', rate => {
+      currentRate = rate;
+    });
+    wrapper.vm.rate = 50;
+
+    setTimeout(() => {
+      expect(currentRate).to.equal(50);
+      done();
+    }, 100);
+  });
+
+  it('circle animation', done => {
+    let currentRate = 0;
+    wrapper = mount(Circle, {
+      propsData: {
+        rate: 0,
+        value: 0,
+        speed: 500,
+        clockwise: false
+      }
+    });
+    wrapper.vm.$on('input', rate => {
+      currentRate = rate;
+    });
+    wrapper.vm.rate = 50;
+
+    setTimeout(() => {
+      expect(currentRate === 50).to.be.false;
+      setTimeout(() => {
+        expect(currentRate === 50).to.be.true;
+        done();
+      }, 200);
+    }, 50);
+  });
+});
+