fix badge and add doc

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: initDefaultProps(BadgeProps, {
-  props: {
+    prefixCls: 'ant-badge',
-    prefixCls: {
+    scrollNumberPrefixCls: 'ant-scroll-number',
-      type: String,
+    count: null,
-      default: 'ant-badge',
+    showZero: false,
-    },
+    dot: false,
-    scrollNumberPrefixCls: {
+    overflowCount: 99,
-      type: String,
+  }),
-      default: 'ant-scroll-number',
+
-    },
+  render () {
-    count: {
+    const {
-      type: [Number, String],
+      count,
-    },
+      showZero,
-    overflowCount: {
+      prefixCls,
-      type: [Number, String],
+      scrollNumberPrefixCls,
-      default: 99,
+      overflowCount,
-    },
+      dot,
-    showZero: {
+      status,
-      type: Boolean,
+      text,
-      default: false,
+      offset,
-    },
+      $slots,
-    dot: {
+      numberStyle,
-      type: Boolean,
+    } = this
-      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` : '',
-    }
-  },
-  computed: {
-    isStatusBadge () {
-      const { isHasDefaultSlot, status } = this
-      return !isHasDefaultSlot && status
-    },
-    badgeComputedCls () {
-      const { prefixCls, isHasDefaultSlot, status, dot, count } = this
     const isDot = dot || status
-      return {
+    let displayCount = count > overflowCount ? `${overflowCount}+` : count
-        badgeCls: {
+    // dot mode don't need count
-          [`${prefixCls}`]: true,
+    if (isDot) {
-          [`${prefixCls}-status`]: !!status,
+      displayCount = ''
-          [`${prefixCls}-not-a-wrapper`]: !isHasDefaultSlot,
+    }
-        },
+    const children = filterEmpty($slots.default)
-        statusCls: {
+    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}`]: !isHasDefaultSlot,
+      [`${prefixCls}-status-${status}`]: !!status,
-        },
+    })
-        scrollNumberCls: {
+    const scrollNumberCls = classNames({
       [`${prefixCls}-dot`]: isDot,
       [`${prefixCls}-count`]: !isDot,
       [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
-          [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
+      [`${prefixCls}-status-${status}`]: !!status,
-        },
+    })
-      }
+    const badgeCls = classNames(prefixCls, {
-    },
+      [`${prefixCls}-status`]: !!status,
-    badgeStatus () {
+      [`${prefixCls}-not-a-wrapper`]: !children.length,
-      const { count, overflowCount, showZero, dot, text } = this
+    })
-      let stateCount = +count > +overflowCount ? `${overflowCount}+` : count
+    const styleWithOffset = offset ? {
-      const isDot = dot || text
+      marginTop: offset[0],
-      if (isDot) {
+      marginLeft: offset[1],
-        stateCount = ''
+      ...numberStyle,
-      }
+    } : numberStyle
-      const isZero = stateCount === '0' || stateCount === 0
+    // <Badge status="success" />
-      const isEmpty = stateCount === null || stateCount === undefined || stateCount === ''
+
-      const isHidden = (isEmpty || (isZero && !showZero)) && !isDot
+    if (!children.length && status) {
-      return {
+      return (
-        stateCount,
+        <span class={badgeCls} style={styleWithOffset}>
-        isHidden,
+          <span class={statusCls} />
-      }
+          <span class={`${prefixCls}-status-text`}>{text}</span>
-    },
+        </span>
-  },
+      )
-  components: {
+    }
-    Icon,
+
-    ScrollNumber,
+    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>

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,
+      sCount: this.count,
-      stateCount: count,
     }
   },
   watch: {
-    count (newValue, oldValue) {
+    count (val) {
+      if (this.sCount !== val) {
+        this.lastCount = this.sCount
         // 复原数字初始位置
         this.setState({
           animateStarted: true,
-        lastCount: oldValue,
         }, () => {
         // 等待数字位置复原完毕
         // 开始设置完整的数字
           setTimeout(() => {
             this.setState({
               animateStarted: false,
-            stateCount: newValue,
+              sCount: val,
+            }, () => {
+              this.$emit('animated')
             })
-        }, 30)
+          }, 5)
         })
+      }
     },
   },
   methods: {
     getPositionByNum (num, i) {
-      const { animateStarted, lastCount, stateCount } = this
+      if (this.animateStarted) {
-      if (animateStarted) {
         return 10 + num
       }
-      const currentDigit = getNumberArray(stateCount)[i]
+      const currentDigit = getNumberArray(this.sCount)[i]
-      const lastDigit = getNumberArray(lastCount)[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 childrenToReturn = []
-      const childrenHtml = childrenArr.map((item, i) => {
+      for (let i = 0; i < 30; i++) {
         const currentClassName = (position === i) ? 'current' : ''
-        return <p key={i.toString()} class={currentClassName}>{i % 10}</p>
+        childrenToReturn.push(<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 = ''
       }
-      const styleSpan = {
+      return childrenToReturn
-        transition: `${removeTransition}` && 'none',
+    },
+
+    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
+        <span class={`${this.prefixCls}-only`} style={style} key={i}>
-          key={i}
+          {this.renderNumberList(position)}
-          class={`${prefixCls}-only`}
-          style = {styleSpan}
-        >
-          {
-            this.renderNumberList(position)
-          }
         </span>
       )
     },
+
     renderNumberElement () {
-      const { stateCount } = this
+      const { sCount } = this
-      if (!stateCount || isNaN(Number(stateCount))) {
+      if (!sCount || isNaN(sCount)) {
-        return stateCount
+        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
-    return (
+    const style = getStyle(this, true)
-      <sup
+    // fix https://fb.me/react-unknown-prop
-        class={[prefixCls, className]}
+    const restProps = omit(this.$props, [
-        title={titleNumber}
+      'count',
-        style={styleNumber}>
+      'component',
-        {
+      'prefixCls',
-          this.renderNumberElement()
+    ])
+    const newProps = {
+      props: {
+        ...restProps,
+        title,
+      },
+      class: prefixCls,
+      style,
     }
-      </sup>
+    // 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 (
+      <Tag {...newProps}>
+        { this.renderNumberElement()}
+      </Tag>
     )
   },
 }
+
 </script>

components/badge/badgeTypes.js

@@ -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,
-})

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>

components/badge/demo/change.md

@@ -10,29 +10,34 @@
 
 ```html
 <template>
+  <div>
+    <div>
       <a-badge :count="count">
-    <a href="#" class="head-example"></a>
+        <a href="#" class="head-example" />
       </a-badge>
       <a-button-group>
         <a-button @click="decline">
-      <a-icon type="minus"></a-icon>
+          <a-icon type="minus" />
         </a-button>
         <a-button @click="increase">
-      <a-icon type="plus"></a-icon>
+          <a-icon type="plus" />
         </a-button>
       </a-button-group>
-  <br />
+    </div>
-  <a-badge :dot="isShow">
+    <div style="margin-top: 10px">
-    <a href="#" class="head-example()"></a>
+      <a-badge :dot="show">
+        <a href="#" class="head-example" />
       </a-badge>
-  <a-button @click="changeShow()">toggle</a-button>
+      <a-switch v-model="show" />
+    </div>
+  </div>
 </template>
 <script>
 export default {
   data(){
     return {
-      count: 3,
+      count: 5,
-      isShow: true,
+      show: true,
     }
   },
   methods: {
@@ -44,12 +49,8 @@ export default {
       this.count = count
     },
     increase () {
-      const count = this.count+1
+      this.count++
-      this.count = count // 为什么不用this.count++?省事还简单？
     },
-    changeShow () {
-      this.isShow = !this.isShow
-    }
   }
 }
 </script>

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>
+</div>
 </template>
+<style>
+#components-badge-demo-dot .anticon-notification {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+}
+</style>
 ```

components/badge/demo/index.vue

@@ -21,13 +21,13 @@
          ## When To Use
          Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
          ## 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 {
+#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;
 }
-  .ant-badge{
-    margin-right: 20px;
-  }
 </style>

components/badge/demo/link.md

@@ -10,11 +10,10 @@
 
 ```html
 <template>
-  <a-badge dot>
+  <a href="#">
-    <Icon type="notification"></Icon>
+    <a-badge count="5">
-  </a-badge>
+      <span class="head-example" />
-  <a-badge dot>
-    <a href="#" class="head-example">Link something</a>
     </a-badge>
+  </a>
 </template>
 ```

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="25" />
-    <a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
+    <a-badge count="4" :numberStyle="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
-    <a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
+    <a-badge count="109" :numberStyle= "{backgroundColor: '#52c41a'} " />
   </div>
 </template>
 ```

components/badge/demo/overflow.md

@@ -10,17 +10,19 @@
 
 ```html
 <template>
-  <a-badge count=99>
+  <div>
+    <a-badge :count="99">
       <a href="#" class="head-example"></a>
     </a-badge>
-  <a-badge count=100>
+    <a-badge :count="100">
       <a href="#" class="head-example"></a>
     </a-badge>
-  <a-badge count=99 overflowCount=10>
+    <a-badge :count="99" :overflowCount="10">
       <a href="#" class="head-example"></a>
     </a-badge>
-  <a-badge count=1000 overflowCount=999>
+    <a-badge :count="1000" :overflowCount="999">
       <a href="#" class="head-example"></a>
     </a-badge>
+  </div>
 </template>
 ```

components/badge/index.en_US.md

@@ -1,21 +1,22 @@
 ## API
 
-```vue
+````html
-<a-badge count=5>
+<a-badge :count="5">
   <a href="#" class="head-example" />
 </a-badge>
-```
+````
 
-```vue
+```html
-<a-badge count=5 />
+<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 | '' |

components/badge/index.zh-CN.md

@@ -1,22 +1,23 @@
 ## API
 
 
-```vue
+````html
-<a-badge count=5>
+<a-badge :count="5">
   <a href="#" class="head-example" />
 </a-badge>
-```
+````
 
-```vue
+```html
-<a-badge count=5 />
+<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 | '' |

components/breadcrumb/demo/basic.vue

@@ -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>

components/breadcrumb/demo/index.vue

@@ -40,6 +40,6 @@
           </api>
         </div>
       )
-    }
+    },
   }
 </script>

components/breadcrumb/demo/separator.vue

@@ -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>

components/breadcrumb/demo/withIcon.vue

@@ -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>

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 |  | '/' |
+| separator | 分隔符自定义 | string\|slot |  | '/' |
-
-> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。
 
 ### 和 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}/>;
-```
+````

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

components/card/index.zh-CN.md

@@ -1,6 +1,3 @@
-[^_^]:
-    this is a ReactVersion for card. waiting to be transformed
-
 
 ## API
 
@@ -8,14 +5,14 @@
 
 | 参数      | 说明 | 类型 | 默认值 |
 | ---       | --- | --- | --- |
-| 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 | - |

components/checkbox/demo/basic.md

@@ -10,21 +10,15 @@ Basic usage of checkbox
 
 ```html
 <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>
 ```

components/checkbox/demo/basic.vue

@@ -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>

components/checkbox/demo/check-all.md

@@ -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>
 

components/checkbox/demo/check-all.vue

@@ -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>

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>
 ```

components/checkbox/demo/controller.vue

@@ -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>

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>
 ```

components/checkbox/demo/disabled.vue

@@ -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>

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>
 ```

components/checkbox/demo/group.vue

@@ -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>

components/checkbox/demo/index.vue

@@ -1,13 +1,12 @@
 <script>
-  import Basic from './basic.md'
+  import Basic from './basic'
-  import CheckAll from './check-all.md'
+  import CheckAll from './check-all'
-  import Controller from './controller.md'
+  import Controller from './controller'
-  import Disabled from './disabled.md'
+  import Disabled from './disabled'
-  import Group from './group.md'
+  import Group from './group'
-  import Layout from './layout.md'
+  import Layout from './layout'
-
+  import CN from './../index.zh-CN'
-  import CN from './../index.zh-CN.md'
+  import US from './../index.en-US'
-  import US from './../index.en-US.md'
 
   const md = {
     cn: `# Checkbox多选框
@@ -23,7 +22,7 @@
          - 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 {
@@ -43,6 +42,6 @@
           </api>
         </div>
       )
-    }
+    },
   }
 </script>

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>
+    <a-row>
-      <AntCol :span="8"><a-checkbox value="A">A</a-checkbox></AntCol>
+      <a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
-      <AntCol :span="8"><a-checkbox value="B">B</a-checkbox></AntCol>
+      <a-col :span="8"><a-checkbox value="B">B</a-checkbox></a-col>
-      <AntCol :span="8"><a-checkbox value="C">C</a-checkbox></AntCol>
+      <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
-      <AntCol :span="8"><a-checkbox value="D">D</a-checkbox></AntCol>
+      <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
-      <AntCol :span="8"><a-checkbox value="E">E</a-checkbox></AntCol>
+      <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
-    </AntRow>
+    </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>
 ```

components/checkbox/demo/layout.vue

@@ -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>