merge

.gitignore

@@ -59,3 +59,6 @@ typings/
 .idea
 .DS_Store
 dist/
+
+# 备份文件
+/components/test/*

components/_util/ContainerRender.vue

@@ -40,18 +40,25 @@ export default {
       }
     },
 
-    renderComponent (props, ready) {
+    renderComponent (props = {}, ready) {
       const { visible, getComponent, forceRender, getContainer, parent } = this
       const self = this
       if (visible || parent.$refs._component || forceRender) {
+        let el = this.componentEl
         if (!this.container) {
           this.container = getContainer()
+          el = document.createElement('div')
+          this.componentEl = el
+          this.container.appendChild(el)
         }
 
         if (!this._component) {
           this._component = new Vue({
+            data: {
+              comProps: props,
+            },
             parent: self.parent,
-            el: self.container,
+            el: el,
             mounted () {
               this.$nextTick(() => {
                 if (ready) {
@@ -60,9 +67,11 @@ export default {
               })
             },
             render () {
-              return getComponent(props)
+              return getComponent(this.comProps)
             },
           })
+        } else {
+          this._component.comProps = props
         }
       }
     },

components/_util/props-util.js

@@ -1,12 +1,18 @@
-
+const camelizeRE = /-(\w)/g
-const parseStyleText = (cssText = '') => {
+const camelize = (str) => {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
+}
+const parseStyleText = (cssText = '', camel) => {
   const res = {}
   const listDelimiter = /;(?![^(]*\))/g
   const propertyDelimiter = /:(.+)/
   cssText.split(listDelimiter).forEach(function (item) {
     if (item) {
       const tmp = item.split(propertyDelimiter)
-      tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
+      if (tmp.length > 1) {
+        const k = camel ? camelize(tmp[0].trim()) : tmp[0].trim()
+        res[k] = tmp[1].trim()
+      }
     }
   })
   return res
@@ -39,6 +45,18 @@ const getSlotOptions = (ele) => {
   return componentOptions ? componentOptions.Ctor.options || {} : {}
 }
 const getOptionProps = (instance) => {
+  if (instance.componentOptions) {
+    const componentOptions = instance.componentOptions
+    const { propsData = {}, Ctor = {}} = componentOptions
+    const props = (Ctor.options || {}).props || {}
+    const res = {}
+    for (const [k, v] of Object.entries(props)) {
+      if (v.default !== undefined) {
+        res[k] = v
+      }
+    }
+    return { ...res, ...propsData }
+  }
   const { $options = {}, $props = {}} = instance
   return filterProps($props, $options.propsData)
 }
@@ -120,14 +138,22 @@ export function getClass (ele) {
   }
   return cls
 }
-export function getStyle (ele) {
+export function getStyle (ele, camel) {
   let data = {}
   if (ele.data) {
     data = ele.data
   } else if (ele.$vnode && ele.$vnode.data) {
     data = ele.$vnode.data
   }
-  return data.style || parseStyleText(data.staticStyle || '')
+  let style = data.style || data.staticStyle
+  if (typeof style === 'string') {
+    style = parseStyleText(style, camel)
+  } else if (camel && style) { // 驼峰化
+    const res = {}
+    Object.keys(style).forEach(k => (res[camelize(k)] = style[k]))
+    return res
+  }
+  return style
 }
 
 export function getComponentName (opts) {

components/alert/demo/banner.md

@@ -0,0 +1,23 @@
+<cn>
+#### 顶部公告
+页面顶部通告形式，默认有图标且`type` 为 'warning'。
+</cn>
+
+<us>
+#### Banner
+Display Alert as a banner at top of page.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert message="Warning text" banner />
+    <br />
+    <a-alert message="Very long warning text warning text text text text text text text" banner closable />
+    <br />
+    <a-alert :showIcon="false" message="Warning text without icon" banner />
+    <br />
+    <a-alert type="error" message="Error text" banner />
+  </div>
+</template>
+```

components/alert/demo/basic.md

@@ -0,0 +1,15 @@
+<cn>
+#### 基本
+最简单的用法，适用于简短的警告提示。
+</cn>
+
+<us>
+#### basic
+The simplest usage for short messages.
+</us>
+
+```html
+<template>
+  <a-alert message="Success Text" type="success" />
+</template>
+```

components/alert/demo/closable.md

@@ -0,0 +1,38 @@
+<cn>
+#### 可关闭的警告提示
+显示关闭按钮，点击可关闭警告提示。
+</cn>
+
+<us>
+#### Closable
+To show close button.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert
+      message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+      type="warning"
+      closable
+      @close="onClose"
+    />
+    <a-alert
+      message="Error Text"
+      description="Error Description Error Description Error Description Error Description Error Description Error Description"
+      type="error"
+      closable
+      @close="onClose"
+    />
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    onClose(e) {
+      console.log(e, 'I was closed.');
+    }
+  }
+}
+</script>
+```

components/alert/demo/close-text.md

@@ -0,0 +1,15 @@
+<cn>
+#### 自定义关闭
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
+</cn>
+
+<us>
+#### Customized Close Text
+Replace the default icon with customized text.
+</us>
+
+```html
+<template>
+  <a-alert message="Info Text" type="info" closeText="Close Now" />
+</template>
+```

components/alert/demo/description.md

@@ -0,0 +1,39 @@
+<cn>
+#### 含有辅助性文字介绍
+含有辅助性文字介绍的警告提示。
+</cn>
+
+<us>
+#### Description
+Additional description for alert message.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert
+      message="Success Text"
+      type="success"
+    >
+      <p slot="description">
+        Success Description <span style="color: red">Success</span> Description Success Description
+      </p>
+    </a-alert>
+    <a-alert
+      message="Info Text"
+      description="Info Description Info Description Info Description Info Description"
+      type="info"
+    />
+    <a-alert
+      message="Warning Text"
+      description="Warning Description Warning Description Warning Description Warning Description"
+      type="warning"
+    />
+    <a-alert
+      message="Error Text"
+      description="Error Description Error Description Error Description Error Description"
+      type="error"
+    />
+  </div>
+</template>
+```

components/alert/demo/icon.md

@@ -0,0 +1,44 @@
+<cn>
+#### 图标
+可口的图标让信息类型更加醒目。
+</cn>
+
+<us>
+#### Icon
+Decent icon make information more clear and more friendly.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert message="Success Tips" type="success" showIcon />
+    <a-alert message="Informational Notes" type="info" showIcon />
+    <a-alert message="Warning" type="warning" showIcon />
+    <a-alert message="Error" type="error" showIcon />
+    <a-alert
+      message="Success Tips"
+      description="Detailed description and advices about successful copywriting."
+      type="success"
+      showIcon
+    />
+    <a-alert
+      message="Informational Notes"
+      description="Additional description and informations about copywriting."
+      type="info"
+      showIcon
+    />
+    <a-alert
+      message="Warning"
+      description="This is a warning notice about copywriting."
+      type="warning"
+      showIcon
+    />
+    <a-alert
+      message="Error"
+      description="This is an error message about copywriting."
+      type="error"
+      showIcon
+    />
+  </div>
+</template>
+```

components/alert/demo/index.vue

@@ -0,0 +1,55 @@
+<script>
+import Banner from './banner'
+import Basic from './basic'
+import Closable from './closable'
+import CloseText from './close-text'
+import Description from './description'
+import Icon from './icon'
+import Style from './style'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# Alert 警告提示
+          警告提示，展现需要关注的信息。
+## 何时使用
+- 当某个页面需要向用户显示警告的信息时。
+- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
+          ## 代码演示`,
+  us: `# Alert
+          Alert component for feedback.
+## When To Use
+- When you need to show alert messages to users.
+- When you need a persistent static container which is closable by user actions.
+`,
+}
+export default {
+  category: 'Components',
+  subtitle: '警告提示',
+  type: 'Feedback',
+  title: 'Alert',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        < Banner/>
+        <Basic/>
+        <Closable/>
+        <CloseText/>
+        <Description/>
+        <Icon/>
+        <Style/>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
+<style>
+.ant-alert {
+  margin-bottom: 16px;
+}
+</style>

components/alert/demo/style.md

@@ -0,0 +1,20 @@
+<cn>
+#### 四种样式
+共有四种样式 `success`、`info`、`warning`、`error`。
+</cn>
+
+<us>
+#### More types
+There are 4 types of Alert: `success`, `info`, `warning`, `error`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert message="Success Text" type="success" />
+    <a-alert message="Info Text" type="info" />
+    <a-alert message="Warning Text" type="warning" />
+    <a-alert message="Error Text" type="error" />
+  </div>
+</template>
+```

components/alert/index.en-US.md

@@ -0,0 +1,18 @@
+
+## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| banner | Whether to show as banner | boolean | false |
+| closable | Whether Alert can be closed | boolean | - |
+| closeText | Close text to show | string\|slot | - |
+| description | Additional content of Alert | string\|slot | - |
+| message | Content of Alert | string\|slot | - |
+| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
+| iconType | Icon type, effective when `showIcon` is `true` | string | - |
+| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| close | Callback when Alert is closed | Function |

components/alert/index.vue

@@ -0,0 +1,133 @@
+<script>
+import Icon from '../icon'
+import classNames from 'classnames'
+import BaseMixin from '../_util/BaseMixin'
+import PropTypes from '../_util/vue-types'
+import getTransitionProps from '../_util/getTransitionProps'
+import { getComponentFromProp } from '../_util/props-util'
+
+export const AlertProps = {
+  /**
+   * Type of Alert styles, options:`success`, `info`, `warning`, `error`
+   */
+  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']),
+  /** Whether Alert can be closed */
+  closable: PropTypes.bool,
+  /** Close text to show */
+  closeText: PropTypes.any,
+  /** Content of Alert */
+  message: PropTypes.any,
+  /** Additional content of Alert */
+  description: PropTypes.any,
+  /** Callback when close Alert */
+  // onClose?: React.MouseEventHandler<HTMLAnchorElement>;
+  /** Whether to show icon */
+  showIcon: PropTypes.bool,
+  iconType: PropTypes.string,
+  prefixCls: PropTypes.string,
+  banner: PropTypes.bool,
+}
+
+export default {
+  props: AlertProps,
+  mixins: [BaseMixin],
+  name: 'Alert',
+  data () {
+    return {
+      closing: true,
+      closed: false,
+    }
+  },
+  methods: {
+    handleClose (e) {
+      e.preventDefault()
+      const dom = this.$el
+      dom.style.height = `${dom.offsetHeight}px`
+      // Magic code
+      // 重复一次后才能正确设置 height
+      dom.style.height = `${dom.offsetHeight}px`
+
+      this.setState({
+        closing: false,
+      })
+      this.$emit('close', e)
+    },
+    animationEnd () {
+      this.setState({
+        closed: true,
+        closing: true,
+      })
+    },
+  },
+
+  render () {
+    const { prefixCls = 'ant-alert', banner, closing, closed } = this
+    let { closable, type, showIcon, iconType } = this
+    const closeText = getComponentFromProp(this, 'closeText')
+    const description = getComponentFromProp(this, 'description')
+    const message = getComponentFromProp(this, 'message')
+    // banner模式默认有 Icon
+    showIcon = banner && showIcon === undefined ? true : showIcon
+    // banner模式默认为警告
+    type = banner && type === undefined ? 'warning' : type || 'info'
+
+    if (!iconType) {
+      switch (type) {
+        case 'success':
+          iconType = 'check-circle'
+          break
+        case 'info':
+          iconType = 'info-circle'
+          break
+        case 'error':
+          iconType = 'cross-circle'
+          break
+        case 'warning':
+          iconType = 'exclamation-circle'
+          break
+        default:
+          iconType = 'default'
+      }
+
+      // use outline icon in alert with description
+      if (description) {
+        iconType += '-o'
+      }
+    }
+
+    const alertCls = classNames(prefixCls, {
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-close`]: !closing,
+      [`${prefixCls}-with-description`]: !!description,
+      [`${prefixCls}-no-icon`]: !showIcon,
+      [`${prefixCls}-banner`]: !!banner,
+    })
+
+    // closeable when closeText is assigned
+    if (closeText) {
+      closable = true
+    }
+
+    const closeIcon = closable ? (
+      <a onClick={this.handleClose} class={`${prefixCls}-close-icon`}>
+        {closeText || <Icon type='cross' />}
+      </a>
+    ) : null
+    const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
+      appear: false,
+      afterLeave: this.animationEnd,
+    })
+    return closed ? null : (
+      <transition {...transitionProps}>
+        <div v-show={closing} class={alertCls}>
+          {showIcon ? <Icon class={`${prefixCls}-icon`} type={iconType} /> : null}
+          <span class={`${prefixCls}-message`}>{message}</span>
+          <span class={`${prefixCls}-description`}>{description}</span>
+          {closeIcon}
+        </div>
+      </transition>
+    )
+  },
+}
+
+</script>

components/alert/index.zh-CN.md

@@ -0,0 +1,18 @@
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| banner | 是否用作顶部公告 | boolean | false |
+| closable | 默认不显示关闭按钮 | boolean | 无 |
+| closeText | 自定义关闭按钮 | string\|slot | 无 |
+| description | 警告提示的辅助性文字介绍 | string\|slot | 无 |
+| message | 警告提示内容 | string\|slot | 无 |
+| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
+| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - |
+| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| close | 关闭时触发的回调函数 | Function |

components/alert/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'

components/alert/style/index.less

@@ -0,0 +1,169 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@alert-prefix-cls: ~"@{ant-prefix}-alert";
+
+@alert-message-color: @heading-color;
+@alert-text-color: @text-color;
+
+.@{alert-prefix-cls} {
+  .reset-component;
+  position: relative;
+  padding: 8px 15px 8px 37px;
+  border-radius: @border-radius-base;
+
+  &&-no-icon {
+    padding: 8px 15px;
+  }
+
+  &-icon {
+    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
+    left: 16px;
+    position: absolute;
+  }
+
+  &-description {
+    font-size: @font-size-base;
+    line-height: 22px;
+    display: none;
+  }
+
+  &-success {
+    border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
+    background-color: ~`colorPalette("@{success-color}", 1)`;
+    .@{alert-prefix-cls}-icon {
+      color: @success-color;
+    }
+  }
+
+  &-info {
+    border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`;
+    background-color: ~`colorPalette("@{info-color}", 1)`;
+    .@{alert-prefix-cls}-icon {
+      color: @info-color;
+    }
+  }
+
+  &-warning {
+    border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
+    background-color: ~`colorPalette("@{warning-color}", 1)`;
+    .@{alert-prefix-cls}-icon {
+      color: @warning-color;
+    }
+  }
+
+  &-error {
+    border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
+    background-color: ~`colorPalette("@{error-color}", 1)`;
+    .@{alert-prefix-cls}-icon {
+      color: @error-color;
+    }
+  }
+
+  &-close-icon {
+    font-size: @font-size-sm;
+    position: absolute;
+    right: 16px;
+    top: 8px;
+    line-height: 22px;
+    overflow: hidden;
+    cursor: pointer;
+
+    .@{iconfont-css-prefix}-cross {
+      color: @text-color-secondary;
+      transition: color .3s;
+      &:hover {
+        color: #404040;
+      }
+    }
+  }
+
+  &-close-text {
+    position: absolute;
+    right: 16px;
+  }
+
+  &-with-description {
+    padding: 15px 15px 15px 64px;
+    position: relative;
+    border-radius: @border-radius-base;
+    color: @text-color;
+    line-height: @line-height-base;
+  }
+
+  &-with-description&-no-icon {
+    padding: 15px;
+  }
+
+  &-with-description &-icon {
+    position: absolute;
+    top: 16px;
+    left: 24px;
+    font-size: 24px;
+  }
+
+  &-with-description &-close-icon {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    font-size: @font-size-base;
+  }
+
+  &-with-description &-message {
+    font-size: @font-size-lg;
+    color: @alert-message-color;
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  &-with-description &-description {
+    display: block;
+  }
+
+  &&-close {
+    height: 0 !important;
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: all .3s @ease-in-out-circ;
+    transform-origin: 50% 0;
+  }
+
+  &-slide-up-leave {
+    animation: antAlertSlideUpOut .3s @ease-in-out-circ;
+    animation-fill-mode: both;
+  }
+
+  &-banner {
+    border-radius: 0;
+    border: 0;
+    margin-bottom: 0;
+  }
+}
+
+@keyframes antAlertSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes antAlertSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+}

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,
+    const isDot = dot || status
-    },
+    let displayCount = count > overflowCount ? `${overflowCount}+` : count
-    status: {
+    // dot mode don't need count
-      validator: (val) => {
+    if (isDot) {
-        if (!val) return true
+      displayCount = ''
-        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` : '',
     }
-  },
+    const children = filterEmpty($slots.default)
-  computed: {
+    const isZero = displayCount === '0' || displayCount === 0
-    isStatusBadge () {
+    const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
-      const { isHasDefaultSlot, status } = this
+    const hidden = (isEmpty || (isZero && !showZero)) && !isDot
-      return !isHasDefaultSlot && status
+    const statusCls = classNames({
-    },
+      [`${prefixCls}-status-dot`]: !!status,
-    badgeComputedCls () {
+      [`${prefixCls}-status-${status}`]: !!status,
-      const { prefixCls, isHasDefaultSlot, status, dot, count } = this
+    })
-      const isDot = dot || status
+    const scrollNumberCls = classNames({
-      return {
+      [`${prefixCls}-dot`]: isDot,
-        badgeCls: {
+      [`${prefixCls}-count`]: !isDot,
-          [`${prefixCls}`]: true,
+      [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
-          [`${prefixCls}-status`]: !!status,
+      [`${prefixCls}-status-${status}`]: !!status,
-          [`${prefixCls}-not-a-wrapper`]: !isHasDefaultSlot,
+    })
-        },
+    const badgeCls = classNames(prefixCls, {
-        statusCls: {
+      [`${prefixCls}-status`]: !!status,
-          [`${prefixCls}-status-dot`]: !!status,
+      [`${prefixCls}-not-a-wrapper`]: !children.length,
-          [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
+    })
-        },
+    const styleWithOffset = offset ? {
-        scrollNumberCls: {
+      marginTop: offset[0],
-          [`${prefixCls}-dot`]: isDot,
+      marginLeft: offset[1],
-          [`${prefixCls}-count`]: !isDot,
+      ...numberStyle,
-          [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
+    } : numberStyle
-          [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
+    // <Badge status="success" />
-        },
+
-      }
+    if (!children.length && status) {
-    },
+      return (
-    badgeStatus () {
+        <span class={badgeCls} style={styleWithOffset}>
-      const { count, overflowCount, showZero, dot, text } = this
+          <span class={statusCls} />
-      let stateCount = +count > +overflowCount ? `${overflowCount}+` : count
+          <span class={`${prefixCls}-status-text`}>{text}</span>
-      const isDot = dot || text
+        </span>
-      if (isDot) {
+      )
-        stateCount = ''
+    }
-      }
+
-      const isZero = stateCount === '0' || stateCount === 0
+    const scrollNumber = hidden ? null : (
-      const isEmpty = stateCount === null || stateCount === undefined || stateCount === ''
+      <ScrollNumber
-      const isHidden = (isEmpty || (isZero && !showZero)) && !isDot
+        prefixCls={scrollNumberPrefixCls}
-      return {
+        v-show={!hidden}
-        stateCount,
+        class={scrollNumberCls}
-        isHidden,
+        count={displayCount}
-      }
+        title={count}
-    },
+        style={styleWithOffset}
-  },
+      />
-  components: {
+    )
-    Icon,
+
-    ScrollNumber,
+    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.setState({
+        this.lastCount = this.sCount
-        animateStarted: true,
+        // 复原数字初始位置
-        lastCount: oldValue,
+        this.setState({
-      }, () => {
+          animateStarted: true,
+        }, () => {
         // 等待数字位置复原完毕
         // 开始设置完整的数字
-        setTimeout(() => {
+          setTimeout(() => {
-          this.setState({
+            this.setState({
-            animateStarted: false,
+              animateStarted: false,
-            stateCount: newValue,
+              sCount: val,
-          })
+            }, () => {
-        }, 30)
+              this.$emit('animated')
-      })
+            })
+          }, 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
+    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
+      <Tag {...newProps}>
-        class={[prefixCls, className]}
+        { this.renderNumberElement()}
-        title={titleNumber}
+      </Tag>
-        style={styleNumber}>
-        {
-          this.renderNumberElement()
-        }
-      </sup>
     )
   },
 }
+
 </script>

components/badge/demo/basic.md

@@ -0,0 +1,23 @@
+<cn>
+#### 基本
+简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
+</cn>
+
+<us>
+#### basic
+Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge count="5">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge count="0" showZero>
+      <a href="#" class="head-example"></a>
+    </a-badge>
+  </div>
+</template>
+```
+

components/badge/demo/change.md

@@ -0,0 +1,57 @@
+<cn>
+#### 动态
+  展示动态变化的效果。
+</cn>
+
+<us>
+#### Dynamic
+  The count will be animated as it changes.
+</us>
+
+```html
+<template>
+  <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: 5,
+      show: true,
+    }
+  },
+  methods: {
+    decline () {
+      let count = this.count - 1
+      if (count < 0) {
+        count = 0
+      }
+      this.count = count
+    },
+    increase () {
+      this.count++
+    },
+  }
+}
+</script>
+```

components/badge/demo/dot.md

@@ -0,0 +1,30 @@
+<cn>
+#### 讨嫌的小红点
+没有具体的数字。
+</cn>
+
+<us>
+#### Red badge
+This will simply display a red badge, without a specific count.
+</us>
+
+```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

@@ -1,134 +1,59 @@
-<template>
-  <div>
-    基本：
-    <div>
-      <a-badge count=5>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=0 showZero>
-        <a href="#" class="head-example" />
-      </a-badge>
-    </div>
-    <br>
-    独立使用：
-    <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'} " />
-    </div>
-    <br>
-    封顶数字：
-    <div style="margin-top: 10px">
-      <a-badge count=99>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=100>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=99 overflowCount=10>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=1000 overflowCount=999>
-        <a href="#" class="head-example" />
-      </a-badge>
-    </div>
-    <br>
-     讨嫌的小红点：
-    <div style="margin-top: 10px">
-      <a-badge dot>
-        <a-icon type="notification" />
-      </a-badge>
-      <a-badge dot>
-        <a href="#">Link something</a>
-      </a-badge>
-    </div>
-    <br>
-    状态点：
-    <div>
-      <a-badge status="success" />
-      <a-badge status="error" />
-      <a-badge status="default" />
-      <a-badge status="processing" />
-      <a-badge :status="currentStatus" />
-      <a-button @click="changeStatus">改processing</a-button>
-      <br />
-      <a-badge status="success" text="Success" />
-      <br />
-      <a-badge status="error" text="Error" />
-      <br />
-      <a-badge status="default" text="Default" />
-      <br />
-      <a-badge status="processing" text="Processing" />
-      <br />
-      <a-badge status="warning" text="Warning" />
-    </div>
-    <br />
-    动态：
-    <div>
-      <a-badge :count="count">
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-button @click="changeMinsValue()">
-        <a-icon type="minus" />
-      </a-button>
-      <a-button @click="changePlusValue(1)">
-        <a-icon type="plus" />
-      </a-button>
-      <br/>
-      <a-badge :dot="isShow">
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-button @click="changeShow()">toggle</a-button>
-    </div>
-    <br />
-  </div>
-</template>
 <script>
-let i = 0
+  import Basic from './basic.md'
-export default {
+  import NoWapper from './no-wrapper'
-  data () {
+  import Dot from './dot'
-    return {
+  import Change from './change'
-      currentStatus: 'warning',
+  import Overflow from './overflow'
-      count: 3,
+  import Status from './status'
-      isShow: true,
+
-    }
+  import CN from './../index.zh-CN.md'
-  },
+  import US from './../index.en_US.md'
-  methods: {
+
-    changeStatus () {
+  const md = {
-      this.currentStatus = 'processing'
+    cn: `# Badge徽标数
+         图标右上角的圆形徽标数字。
+         ## 何时使用
+         一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
+         ## 代码演示
+        `,
+    us: `# Badge
+         Small numerical value or status descriptor for UI elements.
+         ## 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 id='components-badge-demo'>
+          <md cn={md.cn} us={md.us} />
+          <Basic />
+          <NoWapper />
+          <Overflow />
+          <Dot />
+          <Status />
+          <Change />
+          <api>
+            <CN slot='cn' />
+            <US />
+          </api>
+        </div>
+      )
     },
-    changeMinsValue () {
+  }
-      i++
-      console.dir(i)
-      let count = this.count - 1
-      if (count < 0) {
-        count = 0
-      }
-      this.count = count
-    },
-    changePlusValue () {
-      // setInterval(() => {
-      //   const count = this.count + 1
-      //   this.count = count
-      // }, 300)
-      const count = this.count + 1
-      this.count = count
-    },
-    changeShow () {
-      this.isShow = !this.isShow
-    },
-  },
-}
 </script>
-<style scoped>
+
-  .head-example {
+<style>
-    width: 42px;
+#components-badge-demo .ant-badge:not(.ant-badge-status) {
-    height: 42px;
+  margin-right: 20px;
-    border-radius: 4px;
+}
-    background: #eee;
+#components-badge-demo .head-example {
-    display: inline-block;
+  width: 42px;
-  }
+  height: 42px;
-  .ant-badge{
+  border-radius: 4px;
-    margin-right: 20px;
+  background: #eee;
-  }
+  display: inline-block;
+}
 </style>

components/badge/demo/link.md

@@ -0,0 +1,19 @@
+<cn>
+#### 可点击
+  用 a 标签进行包裹即可。
+</cn>
+
+<us>
+#### Clickable
+  The badge can be wrapped with `a` tag to make it linkable.
+</us>
+
+```html
+<template>
+  <a href="#">
+    <a-badge count="5">
+      <span class="head-example" />
+    </a-badge>
+  </a>
+</template>
+```

components/badge/demo/no-wrapper.md

@@ -0,0 +1,20 @@
+<cn>
+#### 独立使用
+不包裹任何元素即是独立使用，可自定样式展现。
+在右上角的 badge 则限定为红色。
+</cn>
+
+<us>
+#### Standalone
+Used in standalone when children is empty.
+</us>
+
+```html
+<template>
+  <div>
+    <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>
+```

components/badge/demo/overflow.md

@@ -0,0 +1,28 @@
+<cn>
+#### 封顶数字
+超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
+</cn>
+
+<us>
+#### Overflow Count
+`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
+</us>
+
+```html
+<template>
+  <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>
+```

components/badge/demo/status.md

@@ -0,0 +1,31 @@
+<cn>
+#### 状态点
+  用于表示状态的小圆点。
+</cn>
+
+<us>
+#### Status
+  Standalone badge with status.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge status="success" />
+    <a-badge status="error" />
+    <a-badge status="default" />
+    <a-badge status="processing" />
+    <a-badge status="warning" />
+    <br />
+    <a-badge status="success" text="Success" />
+    <br />
+    <a-badge status="error" text="Error" />
+    <br />
+    <a-badge status="default" text="Default" />
+    <br />
+    <a-badge status="processing" text="Processing" />
+    <br />
+    <a-badge status="warning" text="warning" />
+  </div>
+</template>
+```

components/badge/index.en_US.md

@@ -0,0 +1,22 @@
+## API
+
+````html
+<a-badge :count="5">
+  <a href="#" class="head-example" />
+</a-badge>
+````
+
+```html
+<a-badge :count="5" />
+````
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| 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

@@ -0,0 +1,23 @@
+## API
+
+
+````html
+<a-badge :count="5">
+  <a href="#" class="head-example" />
+</a-badge>
+````
+
+```html
+<a-badge :count="5" />
+````
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| 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.md

@@ -0,0 +1,33 @@
+<cn>
+  #### 基本
+  最简单的用法
+</cn>
+
+<us>
+  #### Basic usage 
+  The simplest use
+</us>
+
+```html
+<template>
+  <Breadcrumb>
+    <BreadcrumbItem>Home</BreadcrumbItem>
+    <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
+    <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
+    <BreadcrumbItem>An Application</BreadcrumbItem>
+  </Breadcrumb>
+</template>
+
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+  components: {
+    Icon,
+    Breadcrumb,
+    BreadcrumbItem: Breadcrumb.Item,
+  },
+}
+</script>
+
+```

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

@@ -1,21 +1,45 @@
-<template>
-  <div>
-    <Basic />
-    <br>
-    <withIcon />
-    <br>
-    <separator />
-  </div>
-</template>
 <script>
-import Basic from './basic'
+  import Basic from './basic.md'
-import withIcon from './withIcon'
+  import WithIcon from './withIcon.md'
-import separator from './separator'
+  import Separator from './separator.md'
-export default {
+
-  components: {
+  import US from './../index.en-US.md'
-    Basic,
+  import CN from './../index.zh-CN.md'
-    withIcon,
+
-    separator,
+  const md = {
-  },
+    cn: `# Breadcrumb面包屑
-}
+           显示当前页面在系统层级结构中的位置，并能向上返回。
+         ## 何时使用
+         - 当系统拥有超过两级以上的层级结构时；
+         - 当需要告知用户『你在哪里』时；
+         -  当需要向上导航的功能时。
+         ## 代码演示
+        `,
+    us: `# Breadcrumb
+         A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
+         ## When to use
+         - When the system has more than two layers in a hierarchy.
+         - When you need to inform the user of where they are.
+         - When the user may need to navigate back to a higher level.
+         - When the application has multi-layer architecture.
+         ## examples
+        `,
+  }
+
+  export default {
+    render () {
+      return (
+        <div>
+          <md cn={md.cn} us={md.us} />
+          <Basic />
+          <WithIcon />
+          <Separator />
+          <api>
+            <CN slot='cn' />
+            <US />
+          </api>
+        </div>
+      )
+    },
+  }
 </script>

components/breadcrumb/demo/separator.md

@@ -1,15 +1,21 @@
+<cn>
+  #### 分隔符
+  使用` separator=">" `可以自定义分隔符
+</cn>
+
+<us>
+  #### Configuring the Separator
+  The separator can be customized by setting the separator preperty: separator=">"
+</us>
+
+```html
 <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>
@@ -23,3 +29,5 @@ export default {
   },
 }
 </script>
+
+```

components/breadcrumb/demo/withIcon.md

@@ -1,8 +1,15 @@
+<cn>
+  #### 带有图标的
+  图标放在文字前面
+</cn>
+
+<us>
+ #### With an Icon
+ The icon should be placed in front of the text
+</us>
+
+```html
 <template>
-<div>
-<md>
-## 带有图标
-</md>
 <Breadcrumb>
   <BreadcrumbItem href="">
     <Icon type="home" />
@@ -15,7 +22,6 @@
     Application
   </BreadcrumbItem>
 </Breadcrumb>
-</div>
 </template>
 
 <script>
@@ -29,3 +35,5 @@ export default {
   },
 }
 </script>
+
+```

components/breadcrumb/index.en-US.md

@@ -0,0 +1,35 @@
+## API
+
+| Property | Description | Type | Optional | Default |
+| -------- | ----------- | ---- | -------- | ------- |
+| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode |  | - |
+| params | Routing parameters | object |  | - |
+| routes | The routing stack information of router | object\[] |  | - |
+| separator | Custom separator | string\|ReactNode |  | `/` |
+
+> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.
+
+### Use with browserHistory
+
+The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
+
+```vue
+import { Link } from 'react-router';
+
+const routes = [{
+  path: 'index',
+  breadcrumbName: 'home'
+}, {
+  path: 'first',
+  breadcrumbName: 'first'
+}, {
+  path: 'second',
+  breadcrumbName: 'second'
+}];
+function itemRender(route, params, routes, paths) {
+  const last = routes.indexOf(route) === routes.length - 1;
+  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+}
+
+return <Breadcrumb itemRender={itemRender} routes={routes} />;
+```

components/breadcrumb/index.zh-CN.md

@@ -0,0 +1,33 @@
+## API
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- |
+| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode |  | - |
+| params | 路由的参数 | object |  | - |
+| routes | router 的路由栈信息 | object\[] |  | - |
+| separator | 分隔符自定义 | string\|slot |  | '/' |
+
+### 和 browserHistory 配合
+
+和 vue-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
+
+````html
+import { Link } from 'react-router';
+
+const routes = [{
+  path: 'index',
+  breadcrumbName: '首页'
+}, {
+  path: 'first',
+  breadcrumbName: '一级面包屑'
+}, {
+  path: 'second',
+  breadcrumbName: '当前页面'
+}];
+function itemRender(route, params, routes, paths) {
+  const last = routes.indexOf(route) === routes.length - 1;
+  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+}
+
+return <Breadcrumb itemRender={itemRender} routes={routes}/>;
+````

components/button/demo/ghost.md

@@ -7,6 +7,7 @@
 #### Ghost Button
 `ghost` property will make button's background transparent, it is common used in colored background.
 </us>
+
 ```html
 <template>
   <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">

components/card/demo/basic.md

@@ -0,0 +1,20 @@
+<cn>
+#### 典型卡片
+包含标题、内容、操作区域。
+</cn>
+
+<us>
+#### Basic card
+A basic card containing a title, content and an extra corner content.
+</us>
+
+```html
+<template>
+  <a-card title="Card Title">
+    <a href="#" slot="extra">more</a>
+    <p>card content</p>
+    <p>card content</p>
+    <p>card content</p>
+  </a-card>
+</template>
+```

components/card/demo/colRowCard.md

@@ -0,0 +1,33 @@
+<cn>
+  #### 栅格卡片
+  在系统概览页面常常和栅格进行配合。
+</cn>
+
+<us>
+  #### Card in column
+  Cards usually cooperate with grid column layout in overview page.
+</us>
+
+```html
+<template>
+  <div style="background-color: #ececec; padding: 20px;">
+    <a-row :gutter="16">
+      <a-col :span="8">
+        <a-card title="Card title" :bordered=false>
+          <p>card content</p>
+        </a-card>
+      </a-col>
+      <a-col :span="8">
+        <a-card title="Card title" :bordered=false>
+          <p>card content</p>
+        </a-card> 
+      </a-col>
+      <a-col :span="8">
+        <a-card title="Card title" :bordered=false>
+          <p>card content</p>
+        </a-card>   
+      </a-col>
+    </a-row>
+  </div>
+</template>
+```

components/card/demo/colRowCard.vue

@@ -4,29 +4,17 @@
 ## 栅格卡片
 </md>
 <div style="background: #ECECEC; padding: 30px">
-  <Row :gutter="16">
+  <a-row :gutter="16">
-    <Col :span="8">
+    <a-col :span="8">
-      <Card title="Card title" :bordered="false">Card content</Card>
+      <a-card title="Card title" :bordered="false">Card content</a-card>
-    </Col>
+    </a-col>
-    <Col :span="8">
+    <a-col :span="8">
-      <Card title="Card title" :bordered="false">Card content</Card>
+      <a-card title="Card title" :bordered="false">Card content</a-card>
-    </Col>
+    </a-col>
-    <Col :span="8">
+    <a-col :span="8">
-      <Card title="Card title" :bordered="false">Card content</Card>
+      <a-card title="Card title" :bordered="false">Card content</a-card>
-    </Col>
+    </a-col>
-  </Row>
+  </a-row>
 </div>
 </div>
 </template>
-
-<script>
-import '../style'
-import { Card, Col, Row } from 'antd'
-export default {
-  components: {
-    Card,
-    Col,
-    Row,
-  },
-}
-</script>

components/card/demo/concise.md

@@ -0,0 +1,19 @@
+<cn>
+  #### 简洁卡片
+  只包含内容区域
+</cn>
+
+<us>
+  #### Simple card
+  A simple card only containing a content area.
+</us>
+
+```html
+<template>
+  <a-card style="width:300px">
+    <p>Card content</p>
+    <p>Card content</p>
+    <p>Card content</p>
+  </a-card>
+</template>
+```

components/card/demo/grid.md

@@ -0,0 +1,37 @@
+[>_<]:
+    这个卡片没起作用还报错！一堆的那种！！！
+
+<cn>
+####  网格型内嵌卡片
+一种常见的卡片内容区隔模式。
+</cn>
+
+<us>
+#### Grid card
+Grid style card content.
+</us>
+
+```html
+<template>
+<Card title="Card Title">
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+</Card>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+    CardGrid: Card.Grid,
+  },
+}
+</script>
+```

components/card/demo/index.vue

@@ -1,46 +1,53 @@
-<template>
-  <div>
-    <Basic />
-    <br>
-    <NoBorder />
-    <br>
-    <Concise />
-    <br>
-    <ColRowCard />
-    <br>
-    <Loading />
-    <br>
-    <Grid />
-    <br>
-    <Inline />
-    <br>
-    <TabsCard />
-    <br>
-    <MoreConfigs />
-    <br>
-  </div>
-</template>
 <script>
-import Basic from './basic'
+import Basic from './basic.md'
-import NoBorder from './noBorder'
+import NoBorder from './noBorder.md'
-import Concise from './concise'
+import Concise from './concise.md'
-import ColRowCard from './colRowCard'
+import ColRowCard from './colRowCard.md'
-import Loading from './loading'
+import Loading from './loading.md'
-import Grid from './grid'
+import Grid from './grid.md'
-import Inline from './inline'
+import Inline from './inline.md'
-import TabsCard from './tabsCard'
+import TabsCard from './tabsCard.md'
-import MoreConfigs from './moreConfigs'
+import MoreConfigs from './moreConfigs.md'
+
+import CN from './../index.zh-CN.md'
+import US from './../index.en-US.md'
+
+import '../style'
+
+const md = {
+  cn: `# Card 卡片
+         通用卡片容器
+       ## 何时使用
+         最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
+       ## 代码演示
+        `,
+  us: `# Card
+         Simple rectangular container.
+       ##When To Use
+         A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
+       ##Examples
+        `
+}
 export default {
-  components: {
+  render() {
-    Basic,
+    return (
-    NoBorder,
+      <div>
-    Concise,
+        <md cn={md.cn} us={md.us} />
-    ColRowCard,
+        <Basic />
-    Loading,
+        <NoBorder />
-    Grid,
+        <Concise />
-    Inline,
+        <ColRowCard />
-    TabsCard,
+        <Loading />
-    MoreConfigs,
+        <Grid />
+        <Inline />
+        <TabsCard />
+        <MoreConfigs />
+        <api>
+          <CN slot='cn' />
+          <US />
+        </api>
+      </div>
+    )
   },
 }
 </script>

components/card/demo/inline.md

@@ -0,0 +1,27 @@
+<cn>
+  #### 内部卡片
+  可以放在普通卡片内部，展示多层级结构的信息
+</cn>
+
+<us>
+  #### Inner card
+  It can be placed inside the ordinary card to display the information of the multilevel structure
+</us>
+
+```html
+<template>
+  <a-card title="Card title">
+    <p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500"
+    >Group title</p>
+    <a-card title="Inner card title">
+      <a href="#" slot="extra">More</a>
+      Inner Card content
+    </a-card>
+    <a-card title="Inner card title">
+      <a href="#" slot="extra">More</a>
+      Inner Card content
+    </a-card>
+  </a-card>
+</template>
+
+``` 

components/card/demo/loading.md

@@ -0,0 +1,18 @@
+<cn>
+  #### 预加载的卡片
+  数据读入前会有文本块样式
+</cn>
+<us>
+  #### Loading card
+  Shows a loading indirector while the contents of the card is being featched
+</us>
+
+```html
+<template>
+  <a-card loading title="Card title" style="width: 34%;">
+    whatever content
+  </a-card>
+</template>
+```
+
+

components/card/demo/moreConfigs.md

@@ -0,0 +1,47 @@
+<cn>
+  #### 更灵活的内容展示
+  可以利用 `Card.Meta` 支持更灵活的内容
+</cn>
+
+<us>
+  #### Customized content
+  You can use `Card.Meta` to support more flexible content.
+</us>
+
+```html
+<template>
+<Card
+  hoverable
+  style="width: 300px"
+>
+  <img
+    alt="example"
+    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+    slot="cover"
+  />
+  <ul class="ant-card-actions" slot="actions">
+    <li style="width: 33.3333%;"><Icon type="setting" /></li>
+    <li style="width: 33.3333%;"><Icon type="edit" /></li>
+    <li style="width: 33.3333%;"> <Icon type="ellipsis" /></li>
+  </ul>
+  <Meta
+    title="Card title"
+    description="This is the description">
+    <Avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+  </Meta>
+</Card>
+</template>
+
+<script>
+import '../style'
+import { Card, Icon, Avatar } from 'antd'
+export default {
+  components: {
+    Card,
+    Icon,
+    Avatar,
+    Meta: Card.Meta,
+  },
+}
+</script>
+```

components/card/demo/noBorder.md

@@ -0,0 +1,30 @@
+<cn>
+  #### 无边框
+  在灰色背景上使用无边框的卡片
+</cn>
+<us>
+  #### No border
+  A borderless card on a gray background.
+</us>
+
+```html
+<template>
+<div style="background:#ECECEC; padding:30px">
+  <Card title="Card title" :bordered="false" style="width: 300px">
+    <p>Card content</p>
+    <p>Card content</p>
+    <p>Card content</p>
+  </Card>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+  },
+}
+</script>
+```

components/card/demo/tabsCard.md

@@ -0,0 +1,83 @@
+<cn>
+  #### 带页签的卡片
+  可承载更多内容
+</cn>
+
+<us>
+  #### With tabs
+  More content can be hosted
+</us>
+
+```html
+<template>
+<div>
+  <div>
+    <Card
+      style="width:100%"
+      title="Card title"
+      :tabList="tabList"
+      @tabChange="key => onTabChange(key, 'key')"
+    >
+      <a href="#" slot="extra">More</a>
+      {{contentList[key]}}
+    </Card>
+    <br /><br />
+    <Card
+      style="width:100%"
+      :tabList="tabListNoTitle"
+      @tabChange="key => onTabChange(key, 'noTitleKey')"
+    >
+      <div v-html="contentListNoTitle[noTitleKey]"></div>
+    </Card>
+  </div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  data () {
+    return {
+      tabList: [{
+        key: 'tab1',
+        tab: 'tab1',
+      }, {
+        key: 'tab2',
+        tab: 'tab2',
+      }],
+      contentList: {
+        tab1: 'content1',
+        tab2: 'content2',
+      },
+      tabListNoTitle: [{
+        key: 'article',
+        tab: 'article',
+      }, {
+        key: 'app',
+        tab: 'app',
+      }, {
+        key: 'project',
+        tab: 'project',
+      }],
+      contentListNoTitle: {
+        article: '<p>article content</p>',
+        app: '<p>app content</p>',
+        project: '<p>project content</p>',
+      },
+      key: 'tab1',
+      noTitleKey: 'article',
+    }
+  },
+  methods: {
+    onTabChange (key, type) {
+      console.log(key, type)
+      this[type] = key
+    },
+  },
+  components: {
+    Card,
+  },
+}
+</script>
+
+```

components/card/index.en-US.md

@@ -0,0 +1,34 @@
+## API
+
+### Card
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| 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<{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 | - |
+
+### Card.Grid
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| className | className of container | string | - |
+| style | style object of container | object | - |
+
+### Card.Meta
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| avatar | avatar or icon | ReactNode | - |
+| className | className of container | string | - |
+| description | description content | ReactNode | - |
+| style | style object of container | object | - |
+| title | title content | ReactNode | - |

components/card/index.zh-CN.md

@@ -0,0 +1,35 @@
+
+## API
+
+### Card
+
+| 参数      | 说明 | 类型 | 默认值 |
+| ---       | --- | --- | --- |
+| actions   | 卡片操作组，位置在卡片底部 |slot | - |
+| bodyStyle | 内容区域自定义样式 | object | - |
+| bordered  | 是否有边框 | boolean | true |
+| cover     | 卡片封面 | ReactNode | - |
+| extra     | 卡片右上角的操作区域 | string\|slot | - |
+| hoverable | 鼠标移过时可浮起 | boolean | false |
+| loading   | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
+| tabList   | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - |
+| title     | 卡片标题 | string\|ReactNode | - |
+| type      | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
+| onTabChange | 页签切换的回调 | (key) => void | - |
+
+### Card.Grid
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| className | 网格容器类名 | string | - |
+| style | 定义网格容器类名的样式 | object | - |
+
+### Card.Meta
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| avatar   | 头像/图标 | ReactNode | - |
+| className | 容器类名 | string | - |
+| description | 描述内容 | ReactNode | - |
+| style | 定义容器类名的样式 | object | - |
+| title | 标题内容 | ReactNode | - |

components/checkbox/demo/basic.md

@@ -0,0 +1,24 @@
+<cn>
+#### 基本用法
+简单的checkbox
+</cn>
+
+<us>
+#### Basic
+Basic usage of checkbox
+</us>
+
+```html
+<template>
+  <a-checkbox @change="onChange">Checkbox</a-checkbox>
+</template>
+<script>
+export default {
+  methods: {
+    onChange (e) {
+      console.log(`checked = ${e.target.checked}`)
+    },
+  },
+}
+</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

@@ -1,3 +1,14 @@
+<cn>
+#### 全选
+在实现全选效果时，你可能会用到`indeterminate`属性
+</cn>
+
+<us>
+#### Check all
+The `indeterminate` property can help you to achieve a 'check all' effect.
+</us>
+
+```html
 <template>
   <div>
     <div :style="{ borderBottom: '1px solid #E9E9E9' }">
@@ -14,7 +25,6 @@
   </div>
 </template>
 <script>
-import { Checkbox } from 'antd'
 const plainOptions = ['Apple', 'Pear', 'Orange']
 const defaultCheckedList = ['Apple', 'Orange']
 export default {
@@ -39,9 +49,7 @@ export default {
       })
     },
   },
-  components: {
-    Checkbox,
-    CheckboxGroup: Checkbox.Group,
-  },
 }
 </script>
+
+```

components/checkbox/demo/controller.md

@@ -1,3 +1,14 @@
+<cn>
+#### 受控的checkbox
+联动checkbox
+</cn>
+
+<us>
+#### Controlled Checkbox
+Communicated with other components
+</us>
+
+```html
 <template>
   <div>
     <p :style="{ marginBottom: '20px' }">
@@ -29,7 +40,6 @@
   </div>
 </template>
 <script>
-import { Checkbox, Button } from 'antd'
 export default {
   data () {
     return {
@@ -54,9 +64,6 @@ export default {
       this.checked = e.target.checked
     },
   },
-  components: {
-    Checkbox,
-
-  },
 }
 </script>
+```

components/checkbox/demo/disabled.md

@@ -1,3 +1,14 @@
+<cn>
+#### 不可用
+checkbox 不可用
+</cn>
+
+<us>
+#### Disabled
+Disabled checkbox
+</us>
+
+```html
 <template>
   <div>
     <a-checkbox :defaultChecked="false" disabled />
@@ -5,11 +16,4 @@
     <a-checkbox defaultChecked disabled />
   </div>
 </template>
-<script>
+```
-import { Checkbox } from 'antd'
-export default {
-  components: {
-    Checkbox,
-  },
-}
-</script>

components/checkbox/demo/group.md

@@ -1,3 +1,14 @@
+<cn>
+#### Checkbox组
+方便的从数组生成checkbox
+</cn>
+
+<us>
+#### Checkbox group
+Generate a group of checkboxes from an array
+</us>
+
+```html
 <template>
   <div>
     <a-checkbox-group :options="plainOptions" v-model="value" @change="onChange" />
@@ -10,7 +21,6 @@
   </div>
 </template>
 <script>
-import { Checkbox } from 'antd'
 const plainOptions = ['Apple', 'Pear', 'Orange']
 const options = [
   { label: 'Apple', value: 'Apple' },
@@ -37,8 +47,6 @@ export default {
       console.log('value = ', this.value)
     },
   },
-  components: {
-    Checkbox,
-  },
 }
 </script>
+```

components/checkbox/demo/index.vue

@@ -1,35 +1,47 @@
-<template>
-  <div>
-    <h1>Basic</h1>
-    <Basic />
-    <h1>CheckAll</h1>
-    <CheckAll />
-    <h1>Controller</h1>
-    <Controller />
-    <h1>Disabled</h1>
-    <Disabled />
-    <h1>Group</h1>
-    <Group />
-    <h1>Layout</h1>
-    <Layout />
-  </div>
-</template>
 <script>
-import Basic from './basic'
+  import Basic from './basic'
-import CheckAll from './check-all'
+  import CheckAll from './check-all'
-import Controller from './controller'
+  import Controller from './controller'
-import Disabled from './disabled'
+  import Disabled from './disabled'
+  import Group from './group'
+  import Layout from './layout'
+  import CN from './../index.zh-CN'
+  import US from './../index.en-US'
 
-import Group from './group'
+  const md = {
-import Layout from './layout'
+    cn: `# Checkbox多选框
-export default {
+           多选框
-  components: {
+         ## 何时使用
-    Basic,
+         - 在一组可选项中进行多项选择时；
-    CheckAll,
+         - 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
-    Disabled,
+         ## 代码演示
-    Controller,
+        `,
-    Group,
+    us: `# Checkbox
-    Layout,
+           Checkbox
-  },
+         ## When to use
-}
+         - 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 () {
+      return (
+        <div>
+          <md cn={md.cn} us={md.us} />
+          <Basic />
+          <CheckAll />
+          <Disabled />
+          <Controller />
+          <Group />
+          <Layout />
+          <api>
+            <CN slot='cn' />
+            <US />
+          </api>
+        </div>
+      )
+    },
+  }
 </script>

components/checkbox/demo/layout.md

@@ -0,0 +1,32 @@
+<cn>
+#### 布局
+Checkbox.Group内嵌Checkbox并与Grid组件一起使用，可以实现灵活的布局
+</cn>
+
+<us>
+#### Use with grid
+We can use Checkbox and Grid Checkbox.group, to implement complex layout
+</us>
+
+```html
+<template>
+  <a-checkbox-group @change="onChange">
+    <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>
+export default {
+  methods: {
+    onChange (checkedValues) {
+      console.log('checked = ', checkedValues)
+    },
+  },
+}
+</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>

components/checkbox/index.en-US.md

@@ -0,0 +1,30 @@
+## API
+
+### Checkbox
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| autoFocus | get focus when component mounted | boolean | false |
+| checked | Specifies whether the checkbox is selected. | boolean | false |
+| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false |
+| disabled | Disable checkbox | boolean | false |
+| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
+
+### Checkbox Group
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| defaultValue | Default selected value | string\[] | \[] |
+| disabled | Disable all checkboxes | boolean | false |
+| options | Specifies options | string\[] | \[] |
+| value | Used for setting the currently selected value. | string\[] | \[] |
+| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - |
+
+## Methods
+
+### Checkbox
+
+| Name | Description |
+| ---- | ----------- |
+| blur() | remove focus |
+| focus() | get focus |

components/checkbox/index.zh-CN.md

@@ -0,0 +1,29 @@
+## API
+
+### Checkbox
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false |
+| checked | 指定当前是否选中 | boolean | false |
+| defaultChecked | 初始是否选中 | boolean | false |
+| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
+| onChange | 变化时回调函数 | Function(e:Event) | - |
+
+### Checkbox Group
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认选中的选项 | string\[] | \[] |
+| options | 指定可选项 | string\[] | \[] |
+| value | 指定选中的选项 | string\[] | \[] |
+| onChange | 变化时回调函数 | Function(checkedValue) | - |
+
+## 方法
+
+### Checkbox
+
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
+| focus() | 获取焦点 |

components/dropdown/src/Dropdown.vue

@@ -89,7 +89,7 @@ export default {
         const overlayNode = this.getPopupDomNode()
         const rootNode = this.$el
         if (rootNode && overlayNode && rootNode.offsetWidth > overlayNode.offsetWidth) {
-          overlayNode.style.width = `${rootNode.offsetWidth}px`
+          overlayNode.style.minWidth = `${rootNode.offsetWidth}px`
           if (this.$refs.trigger &&
             this.$refs.trigger._component &&
             this.$refs.trigger._component.alignInstance) {

components/grid/Col.vue

@@ -1,83 +1,72 @@
 <script>
-  //  Equal or Larger Than 0
+import PropTypes from '../_util/vue-types'
-  function elt0 (value) {
-    return value >= 0
-  }
-  //  equal to 0(default) or more
-  const DEFAULT_0_OR_MORE = {
-    'default': 0,
-    validator: elt0,
-  }
 
-  export default {
+const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    name: 'Ant-Col',
-    props: {
-      prefixCls: {
-        'default': 'ant-col',
-        type: String,
-      },
-      span: Number,
-      order: DEFAULT_0_OR_MORE,
-      offset: DEFAULT_0_OR_MORE,
-      push: DEFAULT_0_OR_MORE,
-      pull: DEFAULT_0_OR_MORE,
-      xs: [Number, Object],
-      sm: [Number, Object],
-      md: [Number, Object],
-      lg: [Number, Object],
-      xl: [Number, Object],
-    },
-    inject: {
-      parentRow: { 'default': undefined },
-    },
-    computed: {
-      classes () {
-        const { prefixCls, span, order, offset, push, pull } = this
-        let sizeClassObj = {};
-        ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
-          let sizeProps = {}
-          if (typeof this[size] === 'number') {
-            sizeProps.span = this[size]
-          } else if (typeof this[size] === 'object') {
-            sizeProps = this[size] || {}
-          }
 
-          sizeClassObj = {
+export const ColSize = PropTypes.shape({
-            ...sizeClassObj,
+  span: stringOrNumber,
-            [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+  order: stringOrNumber,
-            [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+  offset: stringOrNumber,
-            [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
+  push: stringOrNumber,
-            [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+  pull: stringOrNumber,
-            [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+}).loose
-          }
+
-        })
+const objectOrNumber = PropTypes.oneOfType([PropTypes.number, ColSize])
-        return {
+
-          [`${prefixCls}`]: true,
+export const ColProps = {
-          [`${prefixCls}-${span}`]: span !== undefined,
+  span: objectOrNumber,
-          [`${prefixCls}-order-${order}`]: order,
+  order: objectOrNumber,
-          [`${prefixCls}-offset-${offset}`]: offset,
+  offset: objectOrNumber,
-          [`${prefixCls}-push-${push}`]: push,
+  push: objectOrNumber,
-          [`${prefixCls}-pull-${pull}`]: pull,
+  pull: objectOrNumber,
-          ...sizeClassObj,
+  xs: PropTypes.oneOfType([PropTypes.number, ColSize]),
-        }
+  sm: PropTypes.oneOfType([PropTypes.number, ColSize]),
-      },
+  md: PropTypes.oneOfType([PropTypes.number, ColSize]),
-      gutter () {
+  lg: PropTypes.oneOfType([PropTypes.number, ColSize]),
-        const parent = this.parentRow
+  xl: PropTypes.oneOfType([PropTypes.number, ColSize]),
-        return parent ? +parent.gutter : 0
+  xxl: PropTypes.oneOfType([PropTypes.number, ColSize]),
-      },
+  prefixCls: PropTypes.string,
-    },
+}
-    render (h) {
+
-      const style = {}
+export default {
-      if (this.gutter) {
+  props: ColProps,
-        style.paddingLeft = this.gutter / 2 + 'px'
+  name: 'Col',
-        style.paddingRight = style.paddingLeft
+  render () {
+    const { span, order, offset, push, pull, prefixCls = 'ant-col', $slots, $attrs, $listeners } = this
+    let sizeClassObj = {};
+    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
+      let sizeProps = {}
+      if (typeof this[size] === 'number') {
+        sizeProps.span = this[size]
+      } else if (typeof this[size] === 'object') {
+        sizeProps = this[size] || {}
       }
-      // why only unnamed slots
+
-      return h('div', {
+      sizeClassObj = {
-        'class': this.classes,
+        ...sizeClassObj,
-        style,
+        [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-      }, this.$slots['default'])
+        [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
-    },
+        [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
-  }
+        [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+        [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+      }
+    })
+    const classes = {
+      [`${prefixCls}-${span}`]: span !== undefined,
+      [`${prefixCls}-order-${order}`]: order,
+      [`${prefixCls}-offset-${offset}`]: offset,
+      [`${prefixCls}-push-${push}`]: push,
+      [`${prefixCls}-pull-${pull}`]: pull,
+      ...sizeClassObj,
+    }
+    const divProps = {
+      on: $listeners,
+      attrs: $attrs,
+      class: classes,
+    }
+    return <div {...divProps}>{$slots.default}</div>
+  },
+}
+
 </script>
 

components/grid/Row.vue

@@ -1,84 +1,151 @@
-<template>
-  <div :class="classes" :style="modifiedStyle">
-    <slot  />
-  </div>
-</template>
 <script>
-  export default {
+import PropTypes from '../_util/vue-types'
-    name: 'Ant-Row',
+import BaseMixin from '../_util/BaseMixin'
-    props: {
+import { cloneElement } from '../_util/vnode'
-      prefixCls: {
+import { isEmptyElement, getStyle, getOptionProps } from '../_util/props-util'
-        'default': 'ant-row',
+// matchMedia polyfill for
-        type: String,
+// https://github.com/WickyNilliams/enquire.js/issues/82
+let enquire = null
+if (typeof window !== 'undefined') {
+  const matchMediaPolyfill = (mediaQuery) => {
+    return {
+      media: mediaQuery,
+      matches: false,
+      addListener () {
       },
-      type: {
+      removeListener () {
-        validator (value) {
-          //  flex can't work before IE11
-          if (document.all && document.compatMode) {
-            console.error('you cannot use flex in the old browser')
-            return false
-          }
-          return ['flex', ''].includes(value)
-        },
       },
-      gutter: {
+    }
-        'default': 0,
-        validator: k => k >= 0,
-      },
-      align: {
-        'default': 'top',
-        validator (value) {
-          return ['top', 'middle', 'bottom'].includes(value)
-        },
-      },
-      justify: {
-        'default': 'start',
-        validator (value) {
-          return ['start', 'end', 'center', 'space-around', 'space-between'].includes(value)
-        },
-      },
-    },
-    data () {
-      const half = this.gutter / 2
-      return {
-        modifiedStyle: {
-          'margin-left': -half + 'px',
-          'margin-right': -half + 'px',
-        },
-      }
-    },
-    provide() {
-      return {
-        parentRow: this,
-      }
-    },
-    computed: {
-      classes () {
-        const { prefixCls, type, align, justify } = this
-        return {
-          [`${prefixCls}`]: true,
-          [`${prefixCls}-${type}`]: type,
-          [`${prefixCls}-${type}-${justify}`]: type && justify,
-          [`${prefixCls}-${type}-${align}`]: type && align,
-        }
-      },
-    },
-    methods: {
-      handleClick (event) {
-        if (this.clicked) {
-          return
-        }
-        this.clicked = true
-        clearTimeout(this.timeout)
-        this.timeout = setTimeout(() => (this.clicked = false), 500)
-        this.$emit('click', event)
-      },
-    },
-    beforeDestroy () {
-      if (this.timeout) {
-        clearTimeout(this.timeout)
-      }
-    },
   }
+  window.matchMedia = window.matchMedia || matchMediaPolyfill
+  enquire = require('enquire.js')
+}
+
+const BreakpointMap = PropTypes.shape({
+  xs: PropTypes.string,
+  sm: PropTypes.string,
+  md: PropTypes.string,
+  lg: PropTypes.string,
+  xl: PropTypes.string,
+  xxl: PropTypes.strin,
+}).loose
+
+const RowProps = {
+  gutter: PropTypes.oneOfType([PropTypes.number, BreakpointMap]),
+  type: PropTypes.oneOf(['flex']),
+  align: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
+  prefixCls: PropTypes.string,
+}
+
+const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs']
+
+const responsiveMap = {
+  xs: '(max-width: 575px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
+  xxl: '(min-width: 1600px)',
+}
+
+export default {
+  name: 'Row',
+  mixins: [BaseMixin],
+  props: {
+    ...RowProps,
+    gutter: PropTypes.oneOfType([PropTypes.number, BreakpointMap]).def(0),
+  },
+  data () {
+    return {
+      screens: {},
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      Object.keys(responsiveMap)
+        .map((screen) => enquire.register(responsiveMap[screen], {
+          match: () => {
+            if (typeof this.gutter !== 'object') {
+              return
+            }
+            this.setState((prevState) => ({
+              screens: {
+                ...prevState.screens,
+                [screen]: true,
+              },
+            }))
+          },
+          unmatch: () => {
+            if (typeof this.gutter !== 'object') {
+              return
+            }
+            this.setState((prevState) => ({
+              screens: {
+                ...prevState.screens,
+                [screen]: false,
+              },
+            }))
+          },
+          // Keep a empty destory to avoid triggering unmatch when unregister
+          destroy () {},
+        },
+        ))
+    })
+  },
+  beforeDestroy () {
+    Object.keys(responsiveMap)
+      .map((screen) => enquire.unregister(responsiveMap[screen]))
+  },
+  methods: {
+    getGutter () {
+      const { gutter } = this
+      if (typeof gutter === 'object') {
+        for (let i = 0; i <= responsiveArray.length; i++) {
+          const breakpoint = responsiveArray[i]
+          if (this.state.screens[breakpoint] && gutter[breakpoint] !== undefined) {
+            return gutter[breakpoint]
+          }
+        }
+      }
+      return gutter
+    },
+  },
+
+  render () {
+    const {
+      type, justify, align,
+      prefixCls = 'ant-row', $slots,
+    } = this
+    const gutter = this.getGutter()
+    const classes = {
+      [prefixCls]: !type,
+      [`${prefixCls}-${type}`]: type,
+      [`${prefixCls}-${type}-${justify}`]: type && justify,
+      [`${prefixCls}-${type}-${align}`]: type && align,
+    }
+    const rowStyle = gutter > 0 ? {
+      marginLeft: `${gutter / -2}px`,
+      marginRight: `${gutter / -2}px`,
+    } : {}
+    const cols = ($slots.default || []).map((col) => {
+      if (isEmptyElement(col)) {
+        return null
+      }
+      if (getOptionProps(col) && gutter > 0) {
+        return cloneElement(col, {
+          style: {
+            paddingLeft: `${gutter / 2}px`,
+            paddingRight: `${gutter / 2}px`,
+            ...getStyle(col, true),
+          },
+        })
+      }
+      return col
+    })
+    return <div class={classes} style={rowStyle}>{cols}</div>
+  },
+}
 </script>
 

components/grid/demo/align.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row type="flex" justify="center" align="top">
-      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
-    </ant-row>
-
-    <p>Align Center</p>
-    <ant-row type="flex" justify="space-around" align="middle">
-      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
-    </ant-row>
-
-    <p>Align Bottom</p>
-    <ant-row type="flex" justify="space-between" align="bottom">
-      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import Vue from 'vue'
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  const DemoBox = Vue.component('DemoBox', {
-    props: ['value'],
-    template: `<p :style="{height: value + 'px'}">{{value}}</p>`,
-  })
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col,
-      DemoBox,
-    },
-  }
-
-
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-  .height-100 {
-    height: 100px;
-  }
-</style>

components/grid/demo/basic.md

@@ -0,0 +1,35 @@
+<cn>
+#### 基础栅格
+从堆叠到水平排列。
+使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。
+</cn>
+
+<us>
+#### Basic Grid
+From the stack to the horizontal arrangement.
+You can create a basic grid system by using a single set of `Row` and `Col` grid assembly, all of the columns (Col) must be placed in `Row`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-row>
+      <a-col :span="12">col-12</a-col>
+      <a-col :span="12">col-12</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="8">col-8</a-col>
+      <a-col :span="8">col-8</a-col>
+      <a-col :span="8">col-8</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="6">col-6</a-col>
+      <a-col :span="6">col-6</a-col>
+      <a-col :span="6">col-6</a-col>
+      <a-col :span="6">col-6</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+

components/grid/demo/basic.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="basic">
-    <ant-row>
-      <ant-col class="color1" :span="24" >100%</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="6" >25%</ant-col>
-      <ant-col class="color1" :span="6" :offset="6" >25%</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="8" >33.33%</ant-col>
-      <ant-col class="color1" :span="8" :offset="8" >33.33%</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="12" >50%</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="18" >66.66%</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less" scoped>
-  .basic {
-    background: linear-gradient(90deg,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
-  }
-  .basic div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .show-block {
-    margin: 20px 0;
-  }
-  .color1 {
-    background: rgba(0, 191, 255, 0.52);
-    color: white;
-  }
-</style>

components/grid/demo/complex.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
-      <ant-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color2">Col</ant-col>
-      <ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/flex-align.md

@@ -0,0 +1,41 @@
+<cn>
+#### Flex 对齐
+Flex 子元素垂直对齐。
+</cn>
+
+<us>
+#### Flex Alignment
+Flex child elements vertically aligned.
+</us>
+
+```html
+<template>
+  <div>
+    <p>Align Top</p>
+    <a-row type="flex" justify="center" align="top">
+      <a-col :span="4"><p class="height-100">col-4</p></a-col>
+      <a-col :span="4"><p class="height-50">col-4</p></a-col>
+      <a-col :span="4"><p class="height-120">col-4</p></a-col>
+      <a-col :span="4"><p class="height-80">col-4</p></a-col>
+    </a-row>
+
+    <p>Align Center</p>
+    <a-row type="flex" justify="space-around" align="middle">
+      <a-col :span="4"><p class="height-100">col-4</p></a-col>
+      <a-col :span="4"><p class="height-50">col-4</p></a-col>
+      <a-col :span="4"><p class="height-120">col-4</p></a-col>
+      <a-col :span="4"><p class="height-80">col-4</p></a-col>
+    </a-row>
+
+    <p>Align Bottom</p>
+    <a-row type="flex" justify="space-between" align="bottom">
+      <a-col :span="4"><p class="height-100">col-4</p></a-col>
+      <a-col :span="4"><p class="height-50">col-4</p></a-col>
+      <a-col :span="4"><p class="height-120">col-4</p></a-col>
+      <a-col :span="4"><p class="height-80">col-4</p></a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+

components/grid/demo/flex-order.md

@@ -0,0 +1,25 @@
+<cn>
+#### Flex 排序
+从堆叠到水平排列。
+通过 Flex 布局的 Order 来改变元素的排序。
+</cn>
+
+<us>
+#### Flex Order
+To change the element sort by Flex layout order.
+</us>
+
+```html
+<template>
+  <div>
+    <a-row type="flex">
+      <a-col :span="6" :order="4">1 col-order-4</a-col>
+      <a-col :span="6" :order="3">2 col-order-3</a-col>
+      <a-col :span="6" :order="2">3 col-order-2</a-col>
+      <a-col :span="6" :order="1">4 col-order-1</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+

components/grid/demo/flex-order.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row type="flex">
-      <ant-col :span="6" :order="4" class="color1">1 col-order-4</ant-col>
-      <ant-col :span="6" :order="3" class="color2">2 col-order-3</ant-col>
-      <ant-col :span="6" :order="2" class="color1">3 col-order-2</ant-col>
-      <ant-col :span="6" :order="1" class="color2">4 col-order-1</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/flex.md

@@ -0,0 +1,58 @@
+<cn>
+#### Flex 布局
+Flex 布局基础。
+使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
+</cn>
+
+<us>
+#### Flex Layout
+Use `row-flex` define `flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.
+</us>
+
+```html
+<template>
+  <div>
+    <p>sub-element align left</p>
+    <a-row type="flex" justify="start">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+
+    <p>sub-element align center</p>
+    <a-row type="flex" justify="center">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+
+    <p>sub-element align right</p>
+    <a-row type="flex" justify="end">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+
+    <p>sub-element monospaced arrangement</p>
+    <a-row type="flex" justify="space-between">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+
+    <p>sub-element align full</p>
+    <a-row type="flex" justify="space-around">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+

components/grid/demo/flex.vue

@@ -1,68 +0,0 @@
-<template>
-  <div class="grid">
-    <p>sub-element align left</p>
-    <ant-row type="flex" justify="start">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-
-    <p>sub-element align center</p>
-    <ant-row type="flex" justify="center">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-
-    <p>sub-element align right</p>
-    <ant-row type="flex" justify="end">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-
-    <p>sub-element monospaced arrangement</p>
-    <ant-row type="flex" justify="space-between">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-
-    <p>sub-element align full</p>
-    <ant-row type="flex" justify="space-around">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/flexible.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
-      <ant-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" class="color2">Col</ant-col>
-      <ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/gutter.md

@@ -0,0 +1,44 @@
+<cn>
+#### 区块间隔
+栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数)
+如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。
+</cn>
+
+<us>
+#### Grid Gutter
+You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)
+You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.
+</us>
+
+```html
+<template>
+  <div class="gutter-example">
+    <a-row :gutter="16">
+      <a-col class="gutter-row" :span="6">
+        <div class="gutter-box">col-6</div>
+      </a-col>
+      <a-col class="gutter-row" :span="6">
+        <div class="gutter-box">col-6</div>
+      </a-col>
+      <a-col class="gutter-row" :span="6">
+        <div class="gutter-box">col-6</div>
+      </a-col>
+      <a-col class="gutter-row" :span="6">
+        <div class="gutter-box">col-6</div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<style>
+.gutter-example .ant-row > div {
+  background: transparent;
+  border: 0;
+}
+.gutter-box {
+  background: #00A0E9;
+  padding: 5px 0;
+}
+</style>
+```
+
+

components/grid/demo/gutter.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="grid" style="overflow: hidden;">
-    <ant-row :gutter="24">
-      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
-      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
-      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
-      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/index.vue

@@ -1,75 +1,137 @@
-<template>
-  <div class="topLevel">
-    <h1>基础布局</h1>
-    <basic/>
-    <h1>恩。基础</h1>
-    <layout/>
-    <h1>区块间隔</h1>
-    <gutter/>
-    <h1>偏移</h1>
-    <offset/>
-    <h1>栅格排序</h1>
-    <pull/>
-    <h1>FLEX</h1>
-    <flex/>
-    <h1>对齐</h1>
-    <align/>
-    <h1>Flex排序</h1>
-    <flex-order/>
-    <h1>响应式设计</h1>
-    <flexible/>
-    <h1>复杂一点</h1>
-    <complex/>
-  </div>
-</template>
 <script>
-import { Grid } from 'antd'
+import Basic from './basic'
-const { Row, Col } = Grid
+import FlexAlign from './flex-align'
-import Basic from './basic.vue'
+import FlexOrder from './flex-order'
-import Layout from './layout.vue'
+import Flex from './flex'
-import Gutter from './gutter.vue'
+import Gutter from './gutter'
-import Offset from './offset.vue'
+import Offset from './offset'
-import Pull from './pull.vue'
+import ResponsiveMore from './responsive-more'
-import Flex from './flex.vue'
+import Responsive from './responsive'
-import Align from './align.vue'
+import Sort from './sort'
-import FlexOrder from './flex-order.vue'
+import CN from '../index.zh-CN.md'
-import Flexible from './flexible.vue'
+import US from '../index.en-US.md'
-import Complex from './complex.vue'
+const md = {
+  cn: `# Grid 栅格
+          24 栅格系统。
+          ## 设计理念
+          `,
+  us: `# Grid
+24 Grids System。
+## Design concept`,
+}
+const md2 = {
+  cn: `
+  在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
+划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
+## 概述
+布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
+- 通过\`row\`在水平方向建立一组\`column\`（简写col）
+- 你的内容应当放置于\`col\`内，并且，只有\`col\`可以作为\`row\`的直接元素
+- 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用\`.col-8\`来创建
+- 如果一个\`row\`中的\`col\`总和超过 24，那么多余的\`col\`会作为一个整体另起一行排列
+## Flex 布局
+我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
+Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。
+          ## 代码演示
+  `,
+  us: `
+  In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 aliquots.
+
+We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.
+
+## Outline
+
+In the grid system, we define the frame outside the information area based on \`row\` and \`column\`, to ensure that every area can have stable arrangement.
+
+Following is a brief look at how it works:
+
+- Establish a set of \`column\` in the horizontal space defined by \`row\` (abbreviated col)
+- Your content elements should be placed directly in the \`col\`, and only \`col\` should be placed directly in \`row\`
+- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by \`.col-8\` (\`span=8\`).
+- If the sum of \`col\` spans in a \`row\` are more than 24, then the overflowing \`col\` as a whole will start a new line arrangement.
+
+## Flex layout
+Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using \`order\`.
+Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
+  `,
+}
 export default {
-  components: {
+  category: 'Components',
-    AntRow: Row,
+  subtitle: '栅格',
-    AntCol: Col,
+  type: 'Layout',
-    Basic,
+  cols: 1,
-    Layout,
+  title: 'Grid',
-    Gutter,
+  render () {
-    Offset,
+    return (
-    Pull,
+      <div>
-    Flex,
+        <md cn={md.cn} us={md.us}/>
-    Align,
+        <div class='grid-demo'>
-    FlexOrder,
+          <div class='ant-row demo-row'>
-    Flexible,
+            <div class='ant-col-24 demo-col demo-col-1'>
-    Complex,
+    100%
+            </div>
+          </div>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-6 demo-col demo-col-2'>
+    25%
+            </div>
+            <div class='ant-col-6 demo-col demo-col-3'>
+    25%
+            </div>
+            <div class='ant-col-6 demo-col demo-col-2'>
+    25%
+            </div>
+            <div class='ant-col-6 demo-col demo-col-3'>
+    25%
+            </div>
+          </div>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-8 demo-col demo-col-4'>
+    33.33%
+            </div>
+            <div class='ant-col-8 demo-col demo-col-5'>
+    33.33%
+            </div>
+            <div class='ant-col-8 demo-col demo-col-4'>
+    33.33%
+            </div>
+          </div>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-12 demo-col demo-col-1'>
+    50%
+            </div>
+            <div class='ant-col-12 demo-col demo-col-3'>
+    50%
+            </div>
+          </div>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-16 demo-col demo-col-4'>
+    66.66%
+            </div>
+            <div class='ant-col-8 demo-col demo-col-5'>
+    33.33%
+            </div>
+          </div>
+        </div>
+        <md cn={md2.cn} us={md2.us}/>
+        <div id='components-grid-demo-all'>
+          <Basic/>
+          <FlexAlign/>
+          <FlexOrder/>
+          <Flex/>
+          <Gutter/>
+          <Offset/>
+          <ResponsiveMore/>
+          <Responsive/>
+          <Sort/>
+        </div>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
   },
 }
 </script>
-<style lang="less">
+
-  .topLevel .ant-row{
-    margin: 10px 0;
-  }
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .show-block {
-    margin: 20px 0;
-  }
-  .color1 {
-    background: #00bfff;
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/layout.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col class="color1" :span="12" >col-12</ant-col>
-      <ant-col class="color2" :span="12" >col-12</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="8" >col-8</ant-col>
-      <ant-col class="color2" :span="8" >col-8</ant-col>
-      <ant-col class="color1" :span="8" >col-8</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="6" >col-6</ant-col>
-      <ant-col class="color2" :span="6" >col-6</ant-col>
-      <ant-col class="color1" :span="6" >col-6</ant-col>
-      <ant-col class="color2" :span="6" >col-6</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/offset.md

@@ -0,0 +1,30 @@
+<cn>
+#### 左右偏移
+列偏移。
+使用 `offset` 可以将列向右侧偏。例如，`:offset="4"` 将元素向右侧偏移了 4 个列（column）的宽度。
+</cn>
+
+<us>
+#### a-column offset
+`Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width.
+</us>
+
+```html
+<template>
+  <div>
+    <a-row>
+      <a-col :span="8">col-8</a-col>
+      <a-col :span="8" :offset="8">col-8</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
+      <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12" :offset="6">col-12 col-offset-6</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+

components/grid/demo/offset.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col :span="8" class="color1">col-8</ant-col>
-      <ant-col :span="8" :offset="8" class="color2">col-8</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col :span="6" :offset="6" class="color1">col-6 col-offset-6</ant-col>
-      <ant-col :span="6" :offset="6" class="color2">col-6 col-offset-6</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col :span="12" :offset="6" class="color1">col-12 col-offset-6</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/pull.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col :span="18" :push="6" class="color1">col-18 col-push-6</ant-col>
-      <ant-col :span="6" :pull="18" class="color2">col-6 col-pull-18</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>

components/grid/demo/responsive-more.md

@@ -0,0 +1,23 @@
+<cn>
+#### 其他属性的响应式
+`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` `xxl` 属性中来使用。
+其中 `:xs="6"` 相当于 `:xs="{ span: 6 }"`。
+</cn>
+
+<us>
+#### More responsive
+`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` properties to use,
+where `:xs="6"` is equivalent to `:xs="{span: 6}"`.
+</us>
+
+```html
+<template>
+  <a-row>
+    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
+    <a-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
+    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
+  </a-row>
+</template>
+```
+
+

components/grid/demo/responsive.md

@@ -0,0 +1,21 @@
+<cn>
+#### 响应式布局
+参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设五个响应尺寸：`xs` `sm` `md` `lg` `xl`  `xxl`。
+</cn>
+
+<us>
+#### 响应式布局
+Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset five dimensions: `xs` `sm` `md` `lg` `xl`.
+</us>
+
+```html
+<template>
+  <a-row>
+    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
+    <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</a-col>
+    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
+  </a-row>
+</template>
+```
+
+

components/grid/demo/sort.md

@@ -0,0 +1,23 @@
+<cn>
+#### 栅格排序
+列排序。
+通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。
+</cn>
+
+<us>
+#### Grid sort
+By using `push` and` pull` class you can easily change column order.
+</us>
+
+```html
+<template>
+  <div>
+    <a-row>
+      <a-col :span="18" :push="6">col-18 col-push-6</a-col>
+      <a-col :span="6" :pull="18">col-6 col-pull-18</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+

components/grid/index.en-US.md

@@ -0,0 +1,28 @@
+## API
+
+### Row
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
+| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | number/object | 0 |
+| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |
+| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string |  |
+
+### Col
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| offset | the number of cells to offset Col from the left | number | 0 |
+| order | raster order, used in `flex` layout mode | number | 0 |
+| pull | the number of cells that raster is moved to the left | number | 0 |
+| push | the number of cells that raster is moved to the right | number | 0 |
+| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none |
+| xs | `<576px` and also default setting, could be a `span` value or an object containing above props | number\|object | - |
+| sm | `≥576px`, could be a `span` value or an object containing above props | number\|object | - |
+| md | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
+| lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
+| xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
+| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
+
+The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).

components/grid/index.js

@@ -1,6 +1,7 @@
-import Row from './Row.vue'
+import Row from './Row'
-import Col from './Col.vue'
+import Col from './Col'
 
-export default {
+export {
-  Col, Row,
+  Row,
+  Col,
 }

components/grid/index.zh-CN.md

@@ -0,0 +1,28 @@
+## API
+
+### Row
+
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
+| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number/object | 0 |
+| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
+| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string |  |
+
+### Col
+
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
+| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |
+| pull | 栅格向左移动格数 | number | 0 |
+| push | 栅格向右移动格数 | number | 0 |
+| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |
+| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+
+响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

components/index.js

@@ -13,7 +13,11 @@ const RadioGroup = Radio.Group
 const RadioButton = Radio.Button
 export { Radio, RadioGroup, RadioButton }
 
-export { default as Grid } from './grid'
+import { Row, Col } from './grid'
+export {
+  Row,
+  Col,
+}
 
 export { default as Rate } from './rate'
 
@@ -21,10 +25,6 @@ export { default as Tooltip } from './tooltip'
 
 export { default as Pagination } from './pagination'
 
-export { default as Row } from './grid/Row'
-
-export { default as Col } from './grid/Col'
-
 export { default as Tag } from './tag'
 
 export { default as Avatar } from './avatar'
@@ -88,24 +88,12 @@ export { default as Affix } from './affix'
 export { default as Cascader } from './cascader'
 export { default as BackTop } from './back-top'
 export { default as Modal } from './modal'
-import {
+export { default as Alert } from './alert'
-  info,
+export { default as TimePicker } from './time-picker'
-  success,
-  error,
-  warning,
-  warn,
-  confirm,
-} from './modal'
 
 const api = {
   notification,
   message,
-  modalInfo: info,
-  modalSuccess: success,
-  modalError: error,
-  modalWarning: warning,
-  modalWarn: warn,
-  modalConfirm: confirm,
 }
 export { api }
 

components/locale-provider/default.js

@@ -1,13 +1,13 @@
-// import Pagination from 'rc-pagination/lib/locale/en_US'
+import Pagination from '../vc-pagination/locale/en_US'
 // import DatePicker from '../date-picker/locale/en_US'
-// import TimePicker from '../time-picker/locale/en_US'
+import TimePicker from '../time-picker/locale/en_US'
 // import Calendar from '../calendar/locale/en_US'
 
 export default {
   locale: 'en',
-  // Pagination,
+  Pagination,
   // DatePicker,
-  // TimePicker,
+  TimePicker,
   // Calendar,
   Table: {
     filterTitle: 'Filter menu',

components/locale-provider/zh_CN.js

@@ -1,13 +1,13 @@
-// import Pagination from 'rc-pagination/lib/locale/zh_CN'
+import Pagination from '../vc-pagination/locale/zh_CN'
 // import DatePicker from '../date-picker/locale/zh_CN'
-// import TimePicker from '../time-picker/locale/zh_CN'
+import TimePicker from '../time-picker/locale/zh_CN'
 // import Calendar from '../calendar/locale/zh_CN'
 
 export default {
   locale: 'zh-cn',
-  // Pagination,
+  Pagination,
   // DatePicker,
-  // TimePicker,
+  TimePicker,
   // Calendar,
   Table: {
     filterTitle: '筛选',

components/modal/Modal.vue

@@ -63,6 +63,10 @@ export default {
     visible: false,
     okType: 'primary',
   }),
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
   // static info: ModalFunc;
   // static success: ModalFunc;
   // static error: ModalFunc;
@@ -72,6 +76,7 @@ export default {
   methods: {
     handleCancel (e) {
       this.$emit('cancel', e)
+      this.$emit('change', false)
     },
 
     handleOk (e) {
@@ -131,7 +136,7 @@ export default {
       props: {
         ...this.$props,
         title,
-        footer: typeof footer === undefined ? defaultFooter : footer,
+        footer: footer === undefined ? defaultFooter : footer,
         visible: visible,
         mousePosition,
       },

components/modal/confirm.js

@@ -2,7 +2,10 @@ import Vue from 'vue'
 import ConfirmDialog from './ConfirmDialog'
 export default function confirm (config) {
   const div = document.createElement('div')
+  const el = document.createElement('div')
+  div.appendChild(el)
   document.body.appendChild(div)
+
   let confirmDialogInstance = null
   function close (...args) {
     destroy(...args)
@@ -23,7 +26,7 @@ export default function confirm (config) {
 
   function render (props) {
     return new Vue({
-      el: div,
+      el: el,
       render () {
         return <ConfirmDialog {...props} />
       },

components/modal/demo/async.md

@@ -0,0 +1,57 @@
+
+<cn>
+#### 异步关闭
+点击确定后异步关闭对话框，例如提交表单。
+</cn>
+
+<us>
+#### Asynchronously close
+Asynchronously close a modal dialog when a user clicked OK button, for example,
+you can use this pattern when you submit a form.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">Open</a-button>
+    <a-modal
+      title="Title"
+      :visible="visible"
+      @ok="handleOk"
+      :confirmLoading="confirmLoading"
+      @cancel="handleCancel"
+    >
+      <p>{{ModalText}}</p>
+    </a-modal>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      ModalText: 'Content of the modal',
+      visible: false,
+      confirmLoading: false,
+    }
+  },
+  methods: {
+    showModal() {
+      this.visible = true
+    },
+    handleOk(e) {
+      this.ModalText = 'The modal will be closed after two seconds';
+      this.confirmLoading = true;
+      setTimeout(() => {
+        this.visible = false;
+        this.confirmLoading = false;
+      }, 2000);
+    },
+    handleCancel(e) {
+      console.log('Clicked cancel button');
+      this.visible = false
+    },
+  }
+}
+</script>
+```
+

components/modal/demo/basic.md

@@ -15,9 +15,8 @@ Basic modal.
     <a-button type="primary" @click="showModal">Open</a-button>
     <a-modal
       title="Basic Modal"
-      :visible="visible"
+      v-model="visible"
       @ok="handleOk"
-      @cancel="handleCancel"
     >
       <p>Some contents...</p>
       <p>Some contents...</p>
@@ -40,10 +39,6 @@ export default {
       console.log(e);
       this.visible = false
     },
-    handleCancel(e) {
-      console.log(e);
-      this.visible = false
-    },
   }
 }
 </script>

components/modal/demo/confirm-promise.md

@@ -0,0 +1,40 @@
+
+<cn>
+#### 确认对话框
+使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
+</cn>
+
+<us>
+#### Confirmation modal dialog
+To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
+delay closing the dialog.
+</us>
+
+```html
+<template>
+  <a-button @click="showConfirm">
+    Confirm
+  </a-button>
+</template>
+<script>
+import { Modal } from 'antd'
+const confirm = Modal.confirm
+export default {
+  methods: {
+    showConfirm() {
+      confirm({
+        title: 'Do you want to delete these items?',
+        content: 'When clicked the OK button, this dialog will be closed after 1 second',
+        onOk() {
+          return new Promise((resolve, reject) => {
+            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+          }).catch(() => console.log('Oops errors!'));
+        },
+        onCancel() {},
+      });
+    },
+  }
+}
+</script>
+```
+

components/modal/demo/confirm.md

@@ -21,10 +21,12 @@ To use `confirm()` to popup a confirmation modal dialog.
   </div>
 </template>
 <script>
+import { Modal } from 'antd'
+const confirm = Modal.confirm
 export default {
   methods: {
     showConfirm() {
-      this.$modalConfirm({
+      confirm({
         title: 'Do you Want to delete these items?',
         content: 'Some descriptions',
         onOk() {
@@ -33,11 +35,12 @@ export default {
         onCancel() {
           console.log('Cancel');
         },
+        class: 'test',
       });
     },
 
     showDeleteConfirm() {
-      this.$modalConfirm({
+      confirm({
         title: 'Are you sure delete this task?',
         content: 'Some descriptions',
         okText: 'Yes',

components/modal/demo/footer.md

@@ -0,0 +1,67 @@
+
+<cn>
+#### 自定义页脚
+更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。
+不需要默认确定取消按钮时，你可以把 `footer` 设为 `null`。
+</cn>
+
+<us>
+#### Customized Footer
+A more complex example which define a customized footer button bar,
+the dialog will change to loading state after clicking submit button, when the loading is over,
+the modal dialog will be closed.
+You could set `footer` to `null` if you don't need default footer buttons.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">
+      Open
+    </a-button>
+    <a-modal
+      v-model="visible"
+      title="Title"
+      onOk="handleOk"
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel">Return</a-button>
+        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+          Submit
+        </a-button>
+      </template>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </a-modal>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      visible: false,
+    }
+  },
+  methods: {
+    showModal() {
+      this.visible = true;
+    },
+    handleOk(e) {
+      this.loading = true;
+      setTimeout(() => {
+        this.visible = false;
+        this.loading = false;
+      }, 3000);
+    },
+    handleCancel(e) {
+      this.visible = false;
+    },
+  }
+}
+</script>
+```
+

components/modal/demo/index.vue

@@ -0,0 +1,63 @@
+<script>
+import Async from './async'
+import Basic from './basic'
+import ConfirmPromise from './confirm-promise'
+import Confirm from './confirm'
+import Footer from './footer'
+import Info from './info'
+import Locale from './locale'
+import Manual from './manual'
+import Position from './position'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# Modal 对话框
+          模态对话框。
+## 何时使用
+需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 \`Modal\` 在当前页面正中打开一个浮层，承载相应的操作。
+另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 \`antd.Modal.confirm()\` 等方法。
+          ## 代码演示`,
+  us: `# Modal
+          Modal dialogs.
+## When To Use
+When requiring users to interact with the application, but without jumping to a new page and interrupting
+the user's workflow, you can use \`Modal\` to create a new floating layer over the current page to get user
+feedback or display information.
+Additionally, if you need show a simple confirmation dialog, you can use \`antd.Modal.confirm()\`,
+and so on.
+`,
+}
+export default {
+  type: 'Feedback',
+  category: 'Components',
+  subtitle: '对话框',
+  title: 'Modal',
+  render () {
+    return (
+      <div id='components-modal-demo'>
+        <md cn={md.cn} us={md.us}/>
+        <Async/>
+        <Basic/>
+        <ConfirmPromise/>
+        <Confirm/>
+        <Footer/>
+        <Info/>
+        <Locale/>
+        <Manual/>
+        <Position/>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
+
+<style>
+#components-modal-demo .ant-btn {
+  margin-right: 8px;
+}
+</style>

components/modal/demo/info.md

@@ -0,0 +1,66 @@
+
+<cn>
+#### 信息提示
+各种类型的信息提示，只提供一个按钮用于关闭。
+</cn>
+
+<us>
+#### Information modal dialog
+In the various types of information modal dialog, only one button to close dialog is provided.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button @click="info">Info</a-button>
+    <a-button @click="success">Success</a-button>
+    <a-button @click="error">Error</a-button>
+    <a-button @click="warning">Warning</a-button>
+  </div>
+</template>
+<script>
+import { Modal } from 'antd'
+export default {
+  methods: {
+    info() {
+      const h = this.$createElement
+      Modal.info({
+        title: 'This is a notification message',
+        content: h('div',{}, [
+          h('p', 'some messages...some messages...'),
+          h('p', 'some messages...some messages...'),
+        ]),
+        onOk() {},
+      });
+    },
+
+    success() {
+      Modal.success({
+        title: 'This is a success message',
+        content: (  // JSX support
+          <div>
+            <p>some messages...some messages...</p>
+            <p>some messages...some messages...</p>
+          </div>
+        ),
+      });
+    },
+
+    error() {
+      Modal.error({
+        title: 'This is an error message',
+        content: 'some messages...some messages...',
+      });
+    },
+
+    warning() {
+      Modal.warning({
+        title: 'This is a warning message',
+        content: 'some messages...some messages...',
+      });
+    },
+  }
+}
+</script>
+```
+

components/modal/demo/locale.md

@@ -0,0 +1,60 @@
+
+<cn>
+#### 国际化
+设置 `okText` 与 `cancelText` 以自定义按钮文字。
+</cn>
+
+<us>
+#### Internationalization
+To customize the text of the buttons, you need to set `okText` and `cancelText` props.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">Modal</a-button>
+    <a-modal
+      title="Modal"
+      v-model="visible"
+      @ok="hideModal"
+      okText="确认"
+      cancelText="取消"
+    >
+      <p>Bla bla ...</p>
+      <p>Bla bla ...</p>
+      <p>Bla bla ...</p>
+    </a-modal>
+    <br />
+    <br />
+    <a-button @click="confirm">Confirm</a-button>
+  </div>
+</template>
+<script>
+import { Modal } from 'antd'
+const confirm = Modal.confirm
+export default {
+  data() {
+    return {
+      visible: false,
+    }
+  },
+  methods: {
+    showModal() {
+      this.visible = true
+    },
+    hideModal() {
+      this.visible = false
+    },
+    confirm() {
+      confirm({
+        title: 'Confirm',
+        content: 'Bla bla ...',
+        okText: '确认',
+        cancelText: '取消',
+      });
+    }
+  }
+}
+</script>
+```
+

components/modal/demo/manual.md

@@ -0,0 +1,31 @@
+
+<cn>
+#### 手动移除
+手动关闭modal。
+</cn>
+
+<us>
+#### Manual to destroy
+Manually destroying a modal.
+</us>
+
+```html
+<template>
+  <a-button @click="success">Success</a-button>
+</template>
+<script>
+import { Modal } from 'antd'
+export default {
+  methods: {
+    success() {
+      const modal = Modal.success({
+        title: 'This is a notification message',
+        content: 'This modal will be destroyed after 1 second',
+      });
+      setTimeout(() => modal.destroy(), 1000);
+    }
+  }
+}
+</script>
+```
+