From 752c935b1a5a730eb2ef1b61378c7c4b83778d62 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Fri, 9 Mar 2018 17:50:33 +0800
Subject: [PATCH] fix badge and add doc

---
 components/badge/Badge.vue               | 226 +++++++++++------------
 components/badge/ScrollNumber.vue        | 147 ++++++++-------
 components/badge/badgeTypes.js           |  10 -
 components/badge/demo/basic.md           |   4 +-
 components/badge/demo/change.md          |  49 ++---
 components/badge/demo/dot.md             |  12 +-
 components/badge/demo/index.vue          |  28 +--
 components/badge/demo/link.md            |  11 +-
 components/badge/demo/no-wrapper.md      |   6 +-
 components/badge/demo/overflow.md        |  26 +--
 components/badge/index.en_US.md          |  15 +-
 components/badge/index.zh-CN.md          |  15 +-
 components/breadcrumb/demo/basic.vue     |  25 ---
 components/breadcrumb/demo/index.vue     |   4 +-
 components/breadcrumb/demo/separator.vue |  25 ---
 components/breadcrumb/demo/withIcon.vue  |  31 ----
 components/breadcrumb/index.zh-CN.md     |   8 +-
 components/card/index.en-US.md           |   7 +-
 components/card/index.zh-CN.md           |   9 +-
 components/checkbox/demo/basic.md        |   8 +-
 components/checkbox/demo/basic.vue       |  18 --
 components/checkbox/demo/check-all.md    |   7 +-
 components/checkbox/demo/check-all.vue   |  47 -----
 components/checkbox/demo/controller.md   |   5 -
 components/checkbox/demo/controller.vue  |  62 -------
 components/checkbox/demo/disabled.md     |   8 -
 components/checkbox/demo/disabled.vue    |  15 --
 components/checkbox/demo/group.md        |   4 -
 components/checkbox/demo/group.vue       |  44 -----
 components/checkbox/demo/index.vue       |  23 ++-
 components/checkbox/demo/layout.md       |  21 +--
 components/checkbox/demo/layout.vue      |  27 ---
 32 files changed, 305 insertions(+), 642 deletions(-)
 delete mode 100644 components/badge/badgeTypes.js
 delete mode 100644 components/breadcrumb/demo/basic.vue
 delete mode 100644 components/breadcrumb/demo/separator.vue
 delete mode 100644 components/breadcrumb/demo/withIcon.vue
 delete mode 100644 components/checkbox/demo/basic.vue
 delete mode 100644 components/checkbox/demo/check-all.vue
 delete mode 100644 components/checkbox/demo/controller.vue
 delete mode 100644 components/checkbox/demo/disabled.vue
 delete mode 100644 components/checkbox/demo/group.vue
 delete mode 100644 components/checkbox/demo/layout.vue

diff --git a/components/badge/Badge.vue b/components/badge/Badge.vue
index 7f8fe8121..dcc657788 100644
--- a/components/badge/Badge.vue
+++ b/components/badge/Badge.vue
@@ -1,128 +1,114 @@
-<template>
-  <span :class="badgeComputedCls.badgeCls">
-    <template v-if="isStatusBadge">
-      <span :class="badgeComputedCls.statusCls"></span>
-      <span :class="[prefixCls+'-status-text']">{{text}}</span>
-    </template>
-    <template v-else>
-      <slot></slot><transition appear :name="transitionName">
-        <scroll-number
-          v-if="!badgeStatus.isHidden"
-          :prefixCls="scrollNumberPrefixCls"
-          :className="badgeComputedCls.scrollNumberCls"
-          :count="badgeStatus.stateCount"
-          :titleNumber="count"
-          :styleNumber="styles"
-          >
-        </scroll-number>
-      </transition>
-      <span
-        v-if="!badgeStatus.isHidden && text"
-        :class="[prefixCls+'-status-text']">
-        {{text}}
-      </span>
-    </template>
-  </span>
-</template>
 <script>
-import Icon from '../icon'
+import PropTypes from '../_util/vue-types'
 import ScrollNumber from './ScrollNumber'
+import classNames from 'classnames'
+import { initDefaultProps, filterEmpty } from '../_util/props-util'
+import getTransitionProps from '../_util/getTransitionProps'
+
+export const BadgeProps = {
+  /** Number to show in badge */
+  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  showZero: PropTypes.bool,
+  /** Max count to show */
+  overflowCount: PropTypes.number,
+  /** whether to show red dot without number */
+  dot: PropTypes.bool,
+  prefixCls: PropTypes.string,
+  scrollNumberPrefixCls: PropTypes.string,
+  status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
+  text: PropTypes.string,
+  offset: PropTypes.array,
+  numberStyle: PropTypes.object.def({}),
+}
 
 export default {
-  name: 'Badge',
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'ant-badge',
-    },
-    scrollNumberPrefixCls: {
-      type: String,
-      default: 'ant-scroll-number',
-    },
-    count: {
-      type: [Number, String],
-    },
-    overflowCount: {
-      type: [Number, String],
-      default: 99,
-    },
-    showZero: {
-      type: Boolean,
-      default: false,
-    },
-    dot: {
-      type: Boolean,
-      default: false,
-    },
-    status: {
-      validator: (val) => {
-        if (!val) return true
-        return ['success', 'processing', 'default', 'error', 'warning'].includes(val)
-      },
-      default: '',
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    styles: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data () {
-    const { prefixCls, $slots } = this
-    const isHasDefaultSlot = $slots && !!$slots.default
-    return {
-      isHasDefaultSlot,
-      transitionName: isHasDefaultSlot ? `${prefixCls}-zoom` : '',
+  props: initDefaultProps(BadgeProps, {
+    prefixCls: 'ant-badge',
+    scrollNumberPrefixCls: 'ant-scroll-number',
+    count: null,
+    showZero: false,
+    dot: false,
+    overflowCount: 99,
+  }),
+
+  render () {
+    const {
+      count,
+      showZero,
+      prefixCls,
+      scrollNumberPrefixCls,
+      overflowCount,
+      dot,
+      status,
+      text,
+      offset,
+      $slots,
+      numberStyle,
+    } = this
+    const isDot = dot || status
+    let displayCount = count > overflowCount ? `${overflowCount}+` : count
+    // dot mode don't need count
+    if (isDot) {
+      displayCount = ''
     }
-  },
-  computed: {
-    isStatusBadge () {
-      const { isHasDefaultSlot, status } = this
-      return !isHasDefaultSlot && status
-    },
-    badgeComputedCls () {
-      const { prefixCls, isHasDefaultSlot, status, dot, count } = this
-      const isDot = dot || status
-      return {
-        badgeCls: {
-          [`${prefixCls}`]: true,
-          [`${prefixCls}-status`]: !!status,
-          [`${prefixCls}-not-a-wrapper`]: !isHasDefaultSlot,
-        },
-        statusCls: {
-          [`${prefixCls}-status-dot`]: !!status,
-          [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
-        },
-        scrollNumberCls: {
-          [`${prefixCls}-dot`]: isDot,
-          [`${prefixCls}-count`]: !isDot,
-          [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
-          [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
-        },
-      }
-    },
-    badgeStatus () {
-      const { count, overflowCount, showZero, dot, text } = this
-      let stateCount = +count > +overflowCount ? `${overflowCount}+` : count
-      const isDot = dot || text
-      if (isDot) {
-        stateCount = ''
-      }
-      const isZero = stateCount === '0' || stateCount === 0
-      const isEmpty = stateCount === null || stateCount === undefined || stateCount === ''
-      const isHidden = (isEmpty || (isZero && !showZero)) && !isDot
-      return {
-        stateCount,
-        isHidden,
-      }
-    },
-  },
-  components: {
-    Icon,
-    ScrollNumber,
+    const children = filterEmpty($slots.default)
+    const isZero = displayCount === '0' || displayCount === 0
+    const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
+    const hidden = (isEmpty || (isZero && !showZero)) && !isDot
+    const statusCls = classNames({
+      [`${prefixCls}-status-dot`]: !!status,
+      [`${prefixCls}-status-${status}`]: !!status,
+    })
+    const scrollNumberCls = classNames({
+      [`${prefixCls}-dot`]: isDot,
+      [`${prefixCls}-count`]: !isDot,
+      [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
+      [`${prefixCls}-status-${status}`]: !!status,
+    })
+    const badgeCls = classNames(prefixCls, {
+      [`${prefixCls}-status`]: !!status,
+      [`${prefixCls}-not-a-wrapper`]: !children.length,
+    })
+    const styleWithOffset = offset ? {
+      marginTop: offset[0],
+      marginLeft: offset[1],
+      ...numberStyle,
+    } : numberStyle
+    // <Badge status="success" />
+
+    if (!children.length && status) {
+      return (
+        <span class={badgeCls} style={styleWithOffset}>
+          <span class={statusCls} />
+          <span class={`${prefixCls}-status-text`}>{text}</span>
+        </span>
+      )
+    }
+
+    const scrollNumber = hidden ? null : (
+      <ScrollNumber
+        prefixCls={scrollNumberPrefixCls}
+        v-show={!hidden}
+        class={scrollNumberCls}
+        count={displayCount}
+        title={count}
+        style={styleWithOffset}
+      />
+    )
+
+    const statusText = (hidden || !text) ? null : (
+      <span class={`${prefixCls}-status-text`}>{text}</span>
+    )
+    const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '')
+
+    return (<span class={badgeCls}>
+      {children}
+      <transition {...transitionProps}>
+        {scrollNumber}
+      </transition>
+      {statusText}
+    </span>)
   },
 }
+
 </script>
diff --git a/components/badge/ScrollNumber.vue b/components/badge/ScrollNumber.vue
index b81832e98..4375ee5fe 100644
--- a/components/badge/ScrollNumber.vue
+++ b/components/badge/ScrollNumber.vue
@@ -1,5 +1,8 @@
 <script>
+import PropTypes from '../_util/vue-types'
 import BaseMixin from '../_util/BaseMixin'
+import { getStyle } from '../_util/props-util'
+import omit from 'omit.js'
 
 function getNumberArray (num) {
   return num
@@ -8,55 +11,54 @@ function getNumberArray (num) {
       .reverse()
       .map(i => Number(i)) : []
 }
+
+const ScrollNumberProps = {
+  prefixCls: PropTypes.string.def('ant-scroll-number'),
+  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(null),
+  component: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+}
+
 export default {
-  name: 'ScrollNumber',
-  props: {
-    className: Object,
-    prefixCls: String,
-    count: [Number, String],
-    titleNumber: [Number, String],
-    styleNumber: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
   mixins: [BaseMixin],
+  props: ScrollNumberProps,
   data () {
-    const { count } = this
     return {
       animateStarted: true,
-      lastCount: 0,
-      stateCount: count,
+      sCount: this.count,
     }
   },
   watch: {
-    count (newValue, oldValue) {
-      // 复原数字初始位置
-      this.setState({
-        animateStarted: true,
-        lastCount: oldValue,
-      }, () => {
+    count (val) {
+      if (this.sCount !== val) {
+        this.lastCount = this.sCount
+        // 复原数字初始位置
+        this.setState({
+          animateStarted: true,
+        }, () => {
         // 等待数字位置复原完毕
         // 开始设置完整的数字
-        setTimeout(() => {
-          this.setState({
-            animateStarted: false,
-            stateCount: newValue,
-          })
-        }, 30)
-      })
+          setTimeout(() => {
+            this.setState({
+              animateStarted: false,
+              sCount: val,
+            }, () => {
+              this.$emit('animated')
+            })
+          }, 5)
+        })
+      }
     },
   },
   methods: {
     getPositionByNum (num, i) {
-      const { animateStarted, lastCount, stateCount } = this
-      if (animateStarted) {
+      if (this.animateStarted) {
         return 10 + num
       }
-      const currentDigit = getNumberArray(stateCount)[i]
-      const lastDigit = getNumberArray(lastCount)[i]
+      const currentDigit = getNumberArray(this.sCount)[i]
+      const lastDigit = getNumberArray(this.lastCount)[i]
       // 同方向则在同一侧切换数字
-      if (stateCount > lastCount) {
+      if (this.sCount > this.lastCount) {
         if (currentDigit >= lastDigit) {
           return 10 + num
         }
@@ -68,60 +70,69 @@ export default {
       return num
     },
     renderNumberList (position) {
-      const childrenArr = new Array(30).fill(1)
-      const childrenHtml = childrenArr.map((item, i) => {
+      const childrenToReturn = []
+      for (let i = 0; i < 30; i++) {
         const currentClassName = (position === i) ? 'current' : ''
-        return <p key={i.toString()} class={currentClassName}>{i % 10}</p>
-      })
-      return childrenHtml
-    },
-    renderCurrentNumber (num, i) {
-      const { animateStarted, prefixCls } = this
-      const position = this.getPositionByNum(num, i)
-      let removeTransition = animateStarted ||
-        (getNumberArray(this.lastCount)[i] === undefined)
-      if (!removeTransition) {
-        removeTransition = ''
+        childrenToReturn.push(<p key={i.toString()} class={currentClassName}>{i % 10}</p>)
       }
-      const styleSpan = {
-        transition: `${removeTransition}` && 'none',
+      return childrenToReturn
+    },
+
+    renderCurrentNumber (num, i) {
+      const position = this.getPositionByNum(num, i)
+      const removeTransition = this.animateStarted || getNumberArray(this.lastCount)[i] === undefined
+      const style = {
+        transition: removeTransition ? 'none' : undefined,
         msTransform: `translateY(${-position * 100}%)`,
         WebkitTransform: `translateY(${-position * 100}%)`,
         transform: `translateY(${-position * 100}%)`,
       }
       return (
-        <span
-          key={i}
-          class={`${prefixCls}-only`}
-          style = {styleSpan}
-        >
-          {
-            this.renderNumberList(position)
-          }
+        <span class={`${this.prefixCls}-only`} style={style} key={i}>
+          {this.renderNumberList(position)}
         </span>
       )
     },
+
     renderNumberElement () {
-      const { stateCount } = this
-      if (!stateCount || isNaN(Number(stateCount))) {
-        return stateCount
+      const { sCount } = this
+      if (!sCount || isNaN(sCount)) {
+        return sCount
       }
-      return getNumberArray(stateCount)
+      return getNumberArray(sCount)
         .map((num, i) => this.renderCurrentNumber(num, i)).reverse()
     },
   },
+
   render () {
-    const { prefixCls, className, titleNumber, styleNumber } = this
+    const { prefixCls, title, component: Tag = 'sup' } = this
+    const style = getStyle(this, true)
+    // fix https://fb.me/react-unknown-prop
+    const restProps = omit(this.$props, [
+      'count',
+      'component',
+      'prefixCls',
+    ])
+    const newProps = {
+      props: {
+        ...restProps,
+        title,
+      },
+      class: prefixCls,
+      style,
+    }
+    // allow specify the border
+    // mock border-color by box-shadow for compatible with old usage:
+    // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
+    if (style && style.borderColor) {
+      newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`
+    }
     return (
-      <sup
-        class={[prefixCls, className]}
-        title={titleNumber}
-        style={styleNumber}>
-        {
-          this.renderNumberElement()
-        }
-      </sup>
+      <Tag {...newProps}>
+        { this.renderNumberElement()}
+      </Tag>
     )
   },
 }
+
 </script>
diff --git a/components/badge/badgeTypes.js b/components/badge/badgeTypes.js
deleted file mode 100644
index 2621a4ce0..000000000
--- a/components/badge/badgeTypes.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import PropTypes from '../_util/vue-types'
-export default () => ({
-  count: PropTypes.number,
-  dot: PropTypes.bool,
-  offset: PropTypes.arrayOf([PropTypes.number, PropTypes.number]),
-  overflowCount: PropTypes.number.def('99'),
-  showZero: PropTypes.bool.def('false'),
-  status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
-  text: PropTypes.string,
-})
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index 30b568973..f14ddd221 100644
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -11,10 +11,10 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
 ```html
 <template>
   <div>
-    <a-badge count=5>
+    <a-badge count="5">
       <a href="#" class="head-example"></a>
     </a-badge>
-    <a-badge count=0 showZero>
+    <a-badge count="0" showZero>
       <a href="#" class="head-example"></a>
     </a-badge>
   </div>
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index b5ade5ddc..a113e5ab7 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -10,29 +10,34 @@
 
 ```html
 <template>
-  <a-badge :count="count">
-    <a href="#" class="head-example"></a>
-  </a-badge>
-  <a-button-group>
-    <a-button @click="decline">
-      <a-icon type="minus"></a-icon>
-    </a-button>
-    <a-button @click="increase">
-      <a-icon type="plus"></a-icon>
-    </a-button>
-  </a-button-group>
-  <br />
-  <a-badge :dot="isShow">
-    <a href="#" class="head-example()"></a>
-  </a-badge>
-  <a-button @click="changeShow()">toggle</a-button>
+  <div>
+    <div>
+      <a-badge :count="count">
+        <a href="#" class="head-example" />
+      </a-badge>
+      <a-button-group>
+        <a-button @click="decline">
+          <a-icon type="minus" />
+        </a-button>
+        <a-button @click="increase">
+          <a-icon type="plus" />
+        </a-button>
+      </a-button-group>
+    </div>
+    <div style="margin-top: 10px">
+      <a-badge :dot="show">
+        <a href="#" class="head-example" />
+      </a-badge>
+      <a-switch v-model="show" />
+    </div>
+  </div>
 </template>
 <script>
 export default {
   data(){
     return {
-      count: 3,
-      isShow: true,
+      count: 5,
+      show: true,
     }
   },
   methods: {
@@ -44,13 +49,9 @@ export default {
       this.count = count
     },
     increase () {
-      const count = this.count+1
-      this.count = count // 为什么不用this.count++?省事还简单？
+      this.count++
     },
-    changeShow () {
-      this.isShow = !this.isShow
-    }
   }
 }
-</script>     
+</script>
 ```
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index fcf04364f..31d082c66 100644
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -10,11 +10,21 @@ This will simply display a red badge, without a specific count.
 
 ```html
 <template>
+<div id="components-badge-demo-dot">
   <a-badge dot>
     <a-icon type="notification" />
   </a-badge>
   <a-badge dot>
     <a href="#">Link something</a>
-</a-badge>
+  </a-badge>
+</div>
 </template>
+<style>
+#components-badge-demo-dot .anticon-notification {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+}
+</style>
 ```
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
index 0b39bcacd..7b47ace61 100644
--- a/components/badge/demo/index.vue
+++ b/components/badge/demo/index.vue
@@ -18,16 +18,16 @@
         `,
     us: `# Badge
          Small numerical value or status descriptor for UI elements.
-         ##When To Use
+         ## When To Use
          Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
-         ##Examples
-        `
+         ## Examples
+        `,
   }
 
   export default {
     render () {
       return (
-        <div>
+        <div id='components-badge-demo'>
           <md cn={md.cn} us={md.us} />
           <Basic />
           <NoWapper />
@@ -46,14 +46,14 @@
 </script>
 
 <style>
-  .head-example {
-    width: 42px;
-    height: 42px;
-    border-radius: 4px;
-    background: #eee;
-    display: inline-block;
-  }
-  .ant-badge{
-    margin-right: 20px;
-  }
+#components-badge-demo .ant-badge:not(.ant-badge-status) {
+  margin-right: 20px;
+}
+#components-badge-demo .head-example {
+  width: 42px;
+  height: 42px;
+  border-radius: 4px;
+  background: #eee;
+  display: inline-block;
+}
 </style>
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index f42d8f2d3..efb8c3ae6 100644
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -10,11 +10,10 @@
 
 ```html
 <template>
-  <a-badge dot>
-    <Icon type="notification"></Icon>
-  </a-badge>
-  <a-badge dot>
-    <a href="#" class="head-example">Link something</a>
-  </a-badge>
+  <a href="#">
+    <a-badge count="5">
+      <span class="head-example" />
+    </a-badge>
+  </a>
 </template>
 ```
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index 20c6de821..0f8735328 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -12,9 +12,9 @@ Used in standalone when children is empty.
 ```html
 <template>
   <div>
-    <a-badge count=25 />
-    <a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
-    <a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
+    <a-badge count="25" />
+    <a-badge count="4" :numberStyle="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
+    <a-badge count="109" :numberStyle= "{backgroundColor: '#52c41a'} " />
   </div>
 </template>
 ```
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index bb219a884..0a23162b9 100644
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -10,17 +10,19 @@
 
 ```html
 <template>
-  <a-badge count=99>
-    <a href="#" class="head-example"></a>
-  </a-badge>
-  <a-badge count=100>
-    <a href="#" class="head-example"></a>
-  </a-badge>
-  <a-badge count=99 overflowCount=10>
-    <a href="#" class="head-example"></a>
-  </a-badge>
-  <a-badge count=1000 overflowCount=999>
-    <a href="#" class="head-example"></a>
-  </a-badge>
+  <div>
+    <a-badge :count="99">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge :count="100">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge :count="99" :overflowCount="10">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge :count="1000" :overflowCount="999">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+  </div>
 </template>
 ```
diff --git a/components/badge/index.en_US.md b/components/badge/index.en_US.md
index 3d363982a..bc2adf5e0 100644
--- a/components/badge/index.en_US.md
+++ b/components/badge/index.en_US.md
@@ -1,21 +1,22 @@
 ## API
 
-```vue
-<a-badge count=5>
+````html
+<a-badge :count="5">
   <a href="#" class="head-example" />
 </a-badge>
-```
+````
 
-```vue
-<a-badge count=5 />
-```
+```html
+<a-badge :count="5" />
+````
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| count | Number to show in badge | number\|ReactNode |  |
+| count | Number to show in badge | number\|string |  |
 | dot | Whether to display a red dot instead of `count` | boolean | `false` |
 | offset | set offset of the badge dot, like [x, y] | [number, number] | - |
 | overflowCount | Max count to show | number | 99 |
 | showZero | Whether to show badge when `count` is zero | boolean | `false` |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
 | text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |
+| numberStyle | sets the display style of the status `dot` | object | '' |
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index 05b9c3ef3..ef80e4898 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -1,22 +1,23 @@
 ## API
 
 
-```vue
-<a-badge count=5>
+````html
+<a-badge :count="5">
   <a href="#" class="head-example" />
 </a-badge>
-```
+````
 
-```vue
-<a-badge count=5 />
-```
+```html
+<a-badge :count="5" />
+````
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number|ReactNode  |  |
+| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number\|string  |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |
 | offset | 设置状态点的位置偏移，格式为 [x, y] | [number, number] | - |
 | overflowCount | 展示封顶的数字值 | number | 99 |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
 | status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |
+| numberStyle | 设置状态点的样式 | object | '' |
diff --git a/components/breadcrumb/demo/basic.vue b/components/breadcrumb/demo/basic.vue
deleted file mode 100644
index c2fd827c7..000000000
--- a/components/breadcrumb/demo/basic.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-<div>
-<md>
-## 基本
-</md>
-<Breadcrumb>
-  <BreadcrumbItem>Home</BreadcrumbItem>
-  <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
-  <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
-  <BreadcrumbItem>An Application</BreadcrumbItem>
-</Breadcrumb>
-</div>
-</template>
-
-<script>
-import '../style'
-import { Icon, Breadcrumb } from 'antd/index'
-export default {
-  components: {
-    Icon,
-    Breadcrumb,
-    BreadcrumbItem: Breadcrumb.Item,
-  },
-}
-</script>
diff --git a/components/breadcrumb/demo/index.vue b/components/breadcrumb/demo/index.vue
index 3b285427d..61e91449a 100644
--- a/components/breadcrumb/demo/index.vue
+++ b/components/breadcrumb/demo/index.vue
@@ -27,7 +27,7 @@
   }
 
   export default {
-    render() {
+    render () {
       return (
         <div>
           <md cn={md.cn} us={md.us} />
@@ -40,6 +40,6 @@
           </api>
         </div>
       )
-    }
+    },
   }
 </script>
diff --git a/components/breadcrumb/demo/separator.vue b/components/breadcrumb/demo/separator.vue
deleted file mode 100644
index 87323cbc4..000000000
--- a/components/breadcrumb/demo/separator.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-<div>
-<md>
-## 自定义分隔符
-</md>
-<Breadcrumb separator=">">
-  <BreadcrumbItem>Home</BreadcrumbItem>
-  <BreadcrumbItem href="">Application Center</BreadcrumbItem>
-  <BreadcrumbItem href="">Application List</BreadcrumbItem>
-  <BreadcrumbItem>An Application</BreadcrumbItem>
-</Breadcrumb>
-</div>
-</template>
-
-<script>
-import '../style'
-import { Icon, Breadcrumb } from 'antd/index'
-export default {
-  components: {
-    Icon,
-    Breadcrumb,
-    BreadcrumbItem: Breadcrumb.Item,
-  },
-}
-</script>
diff --git a/components/breadcrumb/demo/withIcon.vue b/components/breadcrumb/demo/withIcon.vue
deleted file mode 100644
index f83d665e9..000000000
--- a/components/breadcrumb/demo/withIcon.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<div>
-<md>
-## 带有图标
-</md>
-<Breadcrumb>
-  <BreadcrumbItem href="">
-    <Icon type="home" />
-  </BreadcrumbItem>
-  <BreadcrumbItem href="">
-    <Icon type="user" />
-    <span>Application List</span>
-  </BreadcrumbItem>
-  <BreadcrumbItem>
-    Application
-  </BreadcrumbItem>
-</Breadcrumb>
-</div>
-</template>
-
-<script>
-import '../style'
-import { Icon, Breadcrumb } from 'antd/index'
-export default {
-  components: {
-    Icon,
-    Breadcrumb,
-    BreadcrumbItem: Breadcrumb.Item,
-  },
-}
-</script>
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
index 259b4aaef..649557606 100644
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -5,15 +5,13 @@
 | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode |  | - |
 | params | 路由的参数 | object |  | - |
 | routes | router 的路由栈信息 | object\[] |  | - |
-| separator | 分隔符自定义 | string\|ReactNode |  | '/' |
-
-> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。
+| separator | 分隔符自定义 | string\|slot |  | '/' |
 
 ### 和 browserHistory 配合
 
 和 vue-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
 
-```vue
+````html
 import { Link } from 'react-router';
 
 const routes = [{
@@ -32,4 +30,4 @@ function itemRender(route, params, routes, paths) {
 }
 
 return <Breadcrumb itemRender={itemRender} routes={routes}/>;
-```
+````
diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
index 1868ff91a..d7271a6c2 100644
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@@ -1,20 +1,17 @@
-[^_^]:
-    this is a ReactVersion for card. waiting to be transformed
-
 ## API
 
 ### Card
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - |
+| actions | The action list, shows at the bottom of the Card. | slot | - |
 | bodyStyle | Inline style to apply to the card content | object | - |
 | bordered | Toggles rendering of the border around the card | boolean | `true` |
 | cover | Card cover | ReactNode | - |
 | extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
 | hoverable | Lift up when hovering card | boolean | false |
 | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |
-| tabList | List of TabPane's head. | Array&lt;{key: string, tab: ReactNode}> | - |
+| tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - |
 | title | Card title | string\|ReactNode | - |
 | type | Card style type, can be set to `inner` or not set | string | - |
 | onTabChange | Callback when tab is switched | (key) => void | - |
diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
index 55d671fe9..35bf37488 100644
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@@ -1,21 +1,18 @@
-[^_^]:
-    this is a ReactVersion for card. waiting to be transformed
 
-          
 ## API
 
 ### Card
 
 | 参数      | 说明 | 类型 | 默认值 |
 | ---       | --- | --- | --- |
-| actions   | 卡片操作组，位置在卡片底部 | Array<template> | - |
+| actions   | 卡片操作组，位置在卡片底部 |slot | - |
 | bodyStyle | 内容区域自定义样式 | object | - |
 | bordered  | 是否有边框 | boolean | true |
 | cover     | 卡片封面 | ReactNode | - |
-| extra     | 卡片右上角的操作区域 | string\|template | - |
+| extra     | 卡片右上角的操作区域 | string\|slot | - |
 | hoverable | 鼠标移过时可浮起 | boolean | false |
 | loading   | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
-| tabList   | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - |
+| tabList   | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - |
 | title     | 卡片标题 | string\|ReactNode | - |
 | type      | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
 | onTabChange | 页签切换的回调 | (key) => void | - |
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
index 13ec5a74b..4a4948e6e 100644
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -10,21 +10,15 @@ Basic usage of checkbox
 
 ```html
 <template>
-  <div>
-    <a-checkbox @change="onChange">Checkbox</a-checkbox>
-  </div>
+  <a-checkbox @change="onChange">Checkbox</a-checkbox>
 </template>
 <script>
-import { Checkbox } from 'antd'
 export default {
   methods: {
     onChange (e) {
       console.log(`checked = ${e.target.checked}`)
     },
   },
-  components: {
-    Checkbox,
-  },
 }
 </script>
 ```
diff --git a/components/checkbox/demo/basic.vue b/components/checkbox/demo/basic.vue
deleted file mode 100644
index f360e66ef..000000000
--- a/components/checkbox/demo/basic.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <a-checkbox @change="onChange">Checkbox</a-checkbox>
-  </div>
-</template>
-<script>
-import { Checkbox } from 'antd'
-export default {
-  methods: {
-    onChange (e) {
-      console.log(`checked = ${e.target.checked}`)
-    },
-  },
-  components: {
-    Checkbox,
-  },
-}
-</script>
diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md
index eef1f555d..bac267a36 100644
--- a/components/checkbox/demo/check-all.md
+++ b/components/checkbox/demo/check-all.md
@@ -4,7 +4,7 @@
 </cn>
 
 <us>
-#### Check all 
+#### Check all
 The `indeterminate` property can help you to achieve a 'check all' effect.
 </us>
 
@@ -25,7 +25,6 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
   </div>
 </template>
 <script>
-import { Checkbox } from 'antd'
 const plainOptions = ['Apple', 'Pear', 'Orange']
 const defaultCheckedList = ['Apple', 'Orange']
 export default {
@@ -50,10 +49,6 @@ export default {
       })
     },
   },
-  components: {
-    Checkbox,
-    CheckboxGroup: Checkbox.Group,
-  },
 }
 </script>
 
diff --git a/components/checkbox/demo/check-all.vue b/components/checkbox/demo/check-all.vue
deleted file mode 100644
index b1a3f09d3..000000000
--- a/components/checkbox/demo/check-all.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div>
-    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
-      <a-checkbox
-        :indeterminate="indeterminate"
-        @change="onCheckAllChange"
-        :checked="checkAll"
-      >
-        Check all
-      </a-checkbox>
-    </div>
-    <br />
-    <a-checkbox-group :options="plainOptions" v-model="checkedList" @change="onChange" />
-  </div>
-</template>
-<script>
-import { Checkbox } from 'antd'
-const plainOptions = ['Apple', 'Pear', 'Orange']
-const defaultCheckedList = ['Apple', 'Orange']
-export default {
-  data () {
-    return {
-      checkedList: defaultCheckedList,
-      indeterminate: true,
-      checkAll: false,
-      plainOptions,
-    }
-  },
-  methods: {
-    onChange (checkedList) {
-      this.indeterminate = !!checkedList.length && (checkedList.length < plainOptions.length)
-      this.checkAll = checkedList.length === plainOptions.length
-    },
-    onCheckAllChange (e) {
-      Object.assign(this, {
-        checkedList: e.target.checked ? plainOptions : [],
-        indeterminate: false,
-        checkAll: e.target.checked,
-      })
-    },
-  },
-  components: {
-    Checkbox,
-    CheckboxGroup: Checkbox.Group,
-  },
-}
-</script>
diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md
index 9642ef665..310916efd 100644
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -40,7 +40,6 @@ Communicated with other components
   </div>
 </template>
 <script>
-import { Checkbox, Button } from 'antd'
 export default {
   data () {
     return {
@@ -65,10 +64,6 @@ export default {
       this.checked = e.target.checked
     },
   },
-  components: {
-    Checkbox,
-
-  },
 }
 </script>
 ```
diff --git a/components/checkbox/demo/controller.vue b/components/checkbox/demo/controller.vue
deleted file mode 100644
index 72e38acf2..000000000
--- a/components/checkbox/demo/controller.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <p :style="{ marginBottom: '20px' }">
-      <a-checkbox
-        :checked="checked"
-        :disabled="disabled"
-        @change="onChange"
-      >
-        {{label}}
-      </a-checkbox>
-    </p>
-    <p>
-      <a-button
-        type="primary"
-        size="small"
-        @click="toggleChecked"
-      >
-        {{!checked ? 'Check' : 'Uncheck'}}
-      </a-button>
-      <a-button
-        :style="{ marginLeft: '10px' }"
-        type="primary"
-        size="small"
-        @click="toggleDisable"
-      >
-        {{!disabled ? 'Disable' : 'Enable'}}
-      </a-button>
-    </p>
-  </div>
-</template>
-<script>
-import { Checkbox, Button } from 'antd'
-export default {
-  data () {
-    return {
-      checked: true,
-      disabled: false,
-    }
-  },
-  computed: {
-    label () {
-      const { checked, disabled } = this
-      return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`
-    },
-  },
-  methods: {
-    toggleChecked () {
-      this.checked = !this.checked
-    },
-    toggleDisable () {
-      this.disabled = !this.disabled
-    },
-    onChange (e) {
-      this.checked = e.target.checked
-    },
-  },
-  components: {
-    Checkbox,
-
-  },
-}
-</script>
diff --git a/components/checkbox/demo/disabled.md b/components/checkbox/demo/disabled.md
index 229f4b0be..e20f8b52a 100644
--- a/components/checkbox/demo/disabled.md
+++ b/components/checkbox/demo/disabled.md
@@ -16,12 +16,4 @@ Disabled checkbox
     <a-checkbox defaultChecked disabled />
   </div>
 </template>
-<script>
-import { Checkbox } from 'antd'
-export default {
-  components: {
-    Checkbox,
-  },
-}
-</script>
 ```
diff --git a/components/checkbox/demo/disabled.vue b/components/checkbox/demo/disabled.vue
deleted file mode 100644
index fac1e9399..000000000
--- a/components/checkbox/demo/disabled.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div>
-    <a-checkbox :defaultChecked="false" disabled />
-    <br />
-    <a-checkbox defaultChecked disabled />
-  </div>
-</template>
-<script>
-import { Checkbox } from 'antd'
-export default {
-  components: {
-    Checkbox,
-  },
-}
-</script>
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
index dd2032089..eb6c696af 100644
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -21,7 +21,6 @@ Generate a group of checkboxes from an array
   </div>
 </template>
 <script>
-import { Checkbox } from 'antd'
 const plainOptions = ['Apple', 'Pear', 'Orange']
 const options = [
   { label: 'Apple', value: 'Apple' },
@@ -48,9 +47,6 @@ export default {
       console.log('value = ', this.value)
     },
   },
-  components: {
-    Checkbox,
-  },
 }
 </script>
 ```
diff --git a/components/checkbox/demo/group.vue b/components/checkbox/demo/group.vue
deleted file mode 100644
index b7cfcc6a3..000000000
--- a/components/checkbox/demo/group.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div>
-    <a-checkbox-group :options="plainOptions" v-model="value" @change="onChange" />
-    <br />
-    <a-checkbox-group :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
-    <br />
-    <a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
-    <br />
-    <a-checkbox-group :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
-  </div>
-</template>
-<script>
-import { Checkbox } from 'antd'
-const plainOptions = ['Apple', 'Pear', 'Orange']
-const options = [
-  { label: 'Apple', value: 'Apple' },
-  { label: 'Pear', value: 'Pear' },
-  { label: 'Orange', value: 'Orange' },
-]
-const optionsWithDisabled = [
-  { label: 'Apple', value: 'Apple' },
-  { label: 'Pear', value: 'Pear' },
-  { label: 'Orange', value: 'Orange', disabled: false },
-]
-export default {
-  data () {
-    return {
-      plainOptions,
-      options,
-      optionsWithDisabled,
-      value: [],
-    }
-  },
-  methods: {
-    onChange (checkedValues) {
-      console.log('checked = ', checkedValues)
-      console.log('value = ', this.value)
-    },
-  },
-  components: {
-    Checkbox,
-  },
-}
-</script>
diff --git a/components/checkbox/demo/index.vue b/components/checkbox/demo/index.vue
index a27b2f0a7..80fb85fbd 100644
--- a/components/checkbox/demo/index.vue
+++ b/components/checkbox/demo/index.vue
@@ -1,13 +1,12 @@
 <script>
-  import Basic from './basic.md'
-  import CheckAll from './check-all.md'
-  import Controller from './controller.md'
-  import Disabled from './disabled.md'
-  import Group from './group.md'
-  import Layout from './layout.md'
-
-  import CN from './../index.zh-CN.md'
-  import US from './../index.en-US.md'
+  import Basic from './basic'
+  import CheckAll from './check-all'
+  import Controller from './controller'
+  import Disabled from './disabled'
+  import Group from './group'
+  import Layout from './layout'
+  import CN from './../index.zh-CN'
+  import US from './../index.en-US'
 
   const md = {
     cn: `# Checkbox多选框
@@ -23,11 +22,11 @@
          - Used for selecting multiple values from several options.
          - If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
          ## Examples
-        `
+        `,
   }
 
   export default {
-    render() {
+    render () {
       return (
         <div>
           <md cn={md.cn} us={md.us} />
@@ -43,6 +42,6 @@
           </api>
         </div>
       )
-    }
+    },
   }
 </script>
diff --git a/components/checkbox/demo/layout.md b/components/checkbox/demo/layout.md
index 26ed449fa..7068674fb 100644
--- a/components/checkbox/demo/layout.md
+++ b/components/checkbox/demo/layout.md
@@ -11,29 +11,22 @@ We can use Checkbox and Grid Checkbox.group, to implement complex layout
 ```html
 <template>
   <a-checkbox-group @change="onChange">
-    <AntRow>
-      <AntCol :span="8"><a-checkbox value="A">A</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="B">B</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="C">C</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="D">D</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="E">E</a-checkbox></AntCol>
-    </AntRow>
+    <a-row>
+      <a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
+      <a-col :span="8"><a-checkbox value="B">B</a-checkbox></a-col>
+      <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
+      <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
+      <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
+    </a-row>
   </a-checkbox-group>
 </template>
 <script>
-import { Checkbox, Row, Col } from 'antd'
 export default {
   methods: {
     onChange (checkedValues) {
       console.log('checked = ', checkedValues)
     },
   },
-  components: {
-    Checkbox,
-    AntRow: Row,
-    AntCol: Col,
-    CheckboxGroup: Checkbox.Group,
-  },
 }
 </script>
 ```
diff --git a/components/checkbox/demo/layout.vue b/components/checkbox/demo/layout.vue
deleted file mode 100644
index ebc74eef0..000000000
--- a/components/checkbox/demo/layout.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <a-checkbox-group @change="onChange">
-    <AntRow>
-      <AntCol :span="8"><a-checkbox value="A">A</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="B">B</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="C">C</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="D">D</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="E">E</a-checkbox></AntCol>
-    </AntRow>
-  </a-checkbox-group>
-</template>
-<script>
-import { Checkbox, Row, Col } from 'antd'
-export default {
-  methods: {
-    onChange (checkedValues) {
-      console.log('checked = ', checkedValues)
-    },
-  },
-  components: {
-    Checkbox,
-    AntRow: Row,
-    AntCol: Col,
-    CheckboxGroup: Checkbox.Group,
-  },
-}
-</script>