Merge branch 'master' of https://github.com/vueComponent/ant-design

components/affix/index.jsx

@@ -57,7 +57,7 @@ const AffixProps = {
 }
 
 export default {
-  name: 'Affix',
+  name: 'AAffix',
   props: AffixProps,
   mixins: [BaseMixin],
   data () {

components/alert/index.jsx

@@ -33,7 +33,7 @@ export const AlertProps = {
 export default {
   props: AlertProps,
   mixins: [BaseMixin],
-  name: 'Alert',
+  name: 'AAlert',
   data () {
     return {
       closing: true,

components/auto-complete/index.jsx

@@ -32,6 +32,7 @@ const AutoCompleteProps = {
 }
 
 export default {
+  name: 'AAutoComplete',
   props: {
     ...AutoCompleteProps,
     prefixCls: PropTypes.string.def('ant-select'),
@@ -45,8 +46,8 @@ export default {
     ]).def(false),
     defaultActiveFirstOption: PropTypes.bool.def(true),
   },
-  Option,
+  Option: { ...Option, name: 'AAutoCompleteOption' },
-  OptGroup,
+  OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' },
   model: {
     prop: 'value',
     event: 'change',

components/avatar/Avatar.jsx

@@ -2,7 +2,7 @@
 import Icon from '../icon'
 
 export default {
-  name: 'Avatar',
+  name: 'AAvatar',
   props: {
     prefixCls: {
       type: String,

components/back-top/index.jsx

@@ -30,7 +30,7 @@ const BackTopProps = {
 }
 
 export default {
-  name: 'BackTop',
+  name: 'ABackTop',
   mixins: [BaseMixin],
   props: {
     ...BackTopProps,

components/badge/Badge.jsx

@@ -22,6 +22,7 @@ export const BadgeProps = {
 }
 
 export default {
+  name: 'ABadge',
   props: initDefaultProps(BadgeProps, {
     prefixCls: 'ant-badge',
     scrollNumberPrefixCls: 'ant-scroll-number',

components/breadcrumb/Breadcrumb.jsx

@@ -31,6 +31,7 @@ function getBreadcrumbName (route, params) {
 }
 
 export default {
+  name: 'ABreadcrumb',
   props: BreadcrumbProps,
   methods: {
     defaultItemRender ({ route, params, routes, paths }) {

components/breadcrumb/BreadcrumbItem.jsx

@@ -3,7 +3,7 @@ import PropTypes from '../_util/vue-types'
 import { hasProp, getComponentFromProp } from '../_util/props-util'
 
 export default {
-  name: 'BreadcrumbItem',
+  name: 'ABreadcrumbItem',
   __ANT_BREADCRUMB_ITEM: true,
   props: {
     prefixCls: PropTypes.string.def('ant-breadcrumb'),

components/button/button-group.jsx

@@ -13,7 +13,7 @@ const ButtonGroupProps = {
 }
 export { ButtonGroupProps }
 export default {
-  name: 'ButtonGroup',
+  name: 'AButtonGroup',
   props: ButtonGroupProps,
   data () {
     return {

components/button/button.jsx

@@ -5,7 +5,7 @@ const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
 import buttonTypes from './buttonTypes'
 const props = buttonTypes()
 export default {
-  name: 'Button',
+  name: 'AButton',
   __ANT_BUTTON: true,
   props: {
     ...props,

components/calendar/index.jsx

@@ -49,6 +49,7 @@ export const CalendarProps = () => ({
 })
 
 export default {
+  name: 'ACalendar',
   mixins: [BaseMixin],
   props: initDefaultProps(CalendarProps(), {
     locale: {},

components/card/Card.jsx

@@ -8,7 +8,7 @@ import BaseMixin from '../_util/BaseMixin'
 
 const { TabPane } = Tabs
 export default {
-  name: 'Card',
+  name: 'ACard',
   mixins: [BaseMixin],
   props: {
     prefixCls: PropTypes.string.def('ant-card'),

components/card/Grid.jsx

@@ -2,7 +2,7 @@
 import PropTypes from '../_util/vue-types'
 
 export default {
-  name: 'Grid',
+  name: 'ACardGrid',
   props: {
     prefixCls: PropTypes.string.def('ant-card'),
   },

components/card/Meta.jsx

@@ -3,7 +3,7 @@ import PropTypes from '../_util/vue-types'
 import { getComponentFromProp } from '../_util/props-util'
 
 export default {
-  name: 'Meta',
+  name: 'ACardMeta',
   props: {
     prefixCls: PropTypes.string.def('ant-card'),
     title: PropTypes.string,

components/cascader/index.jsx

@@ -83,6 +83,7 @@ function defaultSortFilteredOption (a, b, inputValue) {
 const defaultDisplayRender = ({ labels }) => labels.join(' / ')
 
 export default {
+  name: 'ACascader',
   mixins: [BaseMixin],
   props: CascaderProps,
   model: {

components/checkbox/Checkbox.jsx

@@ -1,7 +1,7 @@
 
 import hasProp from '../_util/props-util'
 export default {
-  name: 'Checkbox',
+  name: 'ACheckbox',
   props: {
     prefixCls: {
       default: 'ant-checkbox',

components/checkbox/Group.jsx

@@ -2,7 +2,7 @@
 import Checkbox from './Checkbox'
 import hasProp from '../_util/props-util'
 export default {
-  name: 'CheckboxGroup',
+  name: 'ACheckboxGroup',
   props: {
     prefixCls: {
       default: 'ant-checkbox-group',

components/col/index.js

@@ -0,0 +1,3 @@
+import { Col } from '../grid'
+
+export default Col

components/col/style/index.js

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

components/collapse/Collapse.jsx

@@ -6,6 +6,7 @@ import RcCollapse from './src'
 import { collapseProps } from './src/commonProps'
 
 export default {
+  name: 'ACollapse',
   model: {
     prop: 'activeKey',
     event: 'change',

components/collapse/CollapsePanel.jsx

@@ -5,6 +5,7 @@ import RcCollapse from './src'
 import { panelProps } from './src/commonProps'
 
 export default {
+  name: 'ACollapsePanel',
   props: {
     name: PropTypes.string,
     ...panelProps,

components/date-picker/RangePicker.jsx

@@ -57,7 +57,7 @@ function fixLocale (value, localeCode) {
 
 export default {
   mixins: [BaseMixin],
-  name: 'RangePicker',
+  name: 'ARangePicker',
   props: initDefaultProps(RangePickerProps(), {
     prefixCls: 'ant-calendar',
     allowClear: true,

components/date-picker/WeekPicker.jsx

@@ -24,7 +24,7 @@ export default {
     format: 'gggg-wo',
     allowClear: true,
   }),
-  name: 'WeekPicker',
+  name: 'AWeekPicker',
   mixins: [BaseMixin],
   data () {
     const value = this.value || this.defaultValue

components/date-picker/index.js

@@ -6,9 +6,9 @@ import RangePicker from './RangePicker'
 import WeekPicker from './WeekPicker'
 import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './interface'
 
-const DatePicker = wrapPicker(createPicker(VcCalendar, DatePickerProps()), DatePickerProps())
+const DatePicker = wrapPicker({ ...createPicker(VcCalendar, DatePickerProps()), name: 'ADatePicker' }, DatePickerProps())
 
-const MonthPicker = wrapPicker(createPicker(MonthCalendar, MonthPickerProps()), MonthPickerProps(), 'YYYY-MM')
+const MonthPicker = wrapPicker({ ...createPicker(MonthCalendar, MonthPickerProps()), name: 'AMonthPicker' }, MonthPickerProps(), 'YYYY-MM')
 
 Object.assign(DatePicker, {
   RangePicker: wrapPicker(RangePicker, RangePickerProps()),

components/date-picker/wrapPicker.js

@@ -25,6 +25,7 @@ function getColumns ({ showHour, showMinute, showSecond, use12Hours }) {
 
 export default function wrapPicker (Picker, props, defaultFormat) {
   return {
+    name: Picker.name,
     props: initDefaultProps(props, {
       format: defaultFormat || 'YYYY-MM-DD',
       transitionName: 'slide-up',

components/divider/index.jsx

@@ -1,6 +1,7 @@
 
 import PropTypes from '../_util/vue-types'
 export default {
+  name: 'ADivider',
   props: {
     prefixCls: PropTypes.string.def('ant'),
     type: PropTypes.oneOf(['horizontal', 'vertical']).def('horizontal'),

components/dropdown/dropdown-button.jsx

@@ -18,6 +18,7 @@ const DropdownButtonProps = {
 }
 export { DropdownButtonProps }
 export default {
+  name: 'ADropdownButton',
   props: DropdownButtonProps,
   methods: {
     onClick (e) {

components/dropdown/dropdown.jsx

@@ -8,6 +8,7 @@ import { getOptionProps, getPropsData } from '../_util/props-util'
 import getDropdownProps from './getDropdownProps'
 const DropdownProps = getDropdownProps()
 const Dropdown = {
+  name: 'ADropdown',
   props: {
     ...DropdownProps,
     prefixCls: PropTypes.string.def('ant-dropdown'),

components/grid/Col.jsx

@@ -30,7 +30,7 @@ export const ColProps = {
 
 export default {
   props: ColProps,
-  name: 'Col',
+  name: 'ACol',
   render () {
     const { span, order, offset, push, pull, prefixCls = 'ant-col', $slots, $attrs, $listeners } = this
     let sizeClassObj = {};

components/grid/Row.jsx

@@ -50,7 +50,7 @@ const responsiveMap = {
 }
 
 export default {
-  name: 'Row',
+  name: 'ARow',
   mixins: [BaseMixin],
   props: {
     ...RowProps,

components/icon/icon.jsx

@@ -1,6 +1,6 @@
 
 export default {
-  name: 'Icon',
+  name: 'AIcon',
   props: {
     prefixCls: {
       default: 'anticon',

components/index.js

@@ -2,7 +2,6 @@
 // this file is not used if use https://github.com/ant-design/babel-plugin-import
 const ENV = process.env.NODE_ENV
 if (ENV !== 'production' &&
-    ENV !== 'test' &&
     typeof console !== 'undefined' &&
     console.warn &&
     typeof window !== 'undefined') {
@@ -13,143 +12,110 @@ if (ENV !== 'production' &&
 }
 /* @remove-on-es-build-end */
 
-import Button from './button'
+export { default as Affix } from './affix'
-const ButtonGroup = Button.Group
-export { Button, ButtonGroup }
 
-import Checkbox from './checkbox'
+// export { default as Anchor } from './anchor'
-const CheckboxGroup = Checkbox.Group
-export { Checkbox, CheckboxGroup }
-
-export { default as Icon } from './icon'
-
-import Radio from './radio'
-const RadioGroup = Radio.Group
-const RadioButton = Radio.Button
-export { Radio, RadioGroup, RadioButton }
-
-import { Row, Col } from './grid'
-export {
-  Row,
-  Col,
-}
-
-export { default as Rate } from './rate'
-
-export { default as Tooltip } from './tooltip'
-
-export { default as Pagination } from './pagination'
-
-import Tag from './tag'
-const CheckableTag = Tag.CheckableTag
-
-export {
-  Tag,
-  CheckableTag,
-}
-
-export { default as Avatar } from './avatar'
-
-export { default as Badge } from './badge'
-
-import Tabs from './tabs'
-const TabPane = Tabs.TabPane
-export {
-  Tabs,
-  TabPane,
-}
-
-import Input from './input'
-
-const InputGroup = Input.Group
-const InputSearch = Input.Search
-const InputTextArea = Input.TextArea
-const Textarea = InputTextArea
-const TextArea = InputTextArea
-
-export { Input, InputGroup, InputSearch, InputTextArea, Textarea, TextArea }
-
-import Breadcrumb from './breadcrumb'
-const BreadcrumbItem = Breadcrumb.Item
-export { Breadcrumb, BreadcrumbItem }
-
-export { default as Popover } from './popover'
-
-export { default as Popconfirm } from './popconfirm'
-
-import Menu from './menu'
-const MenuItem = Menu.Item
-const SubMenu = Menu.SubMenu
-const MenuDivider = Menu.Divider
-const MenuItemGroup = Menu.ItemGroup
-export { Menu, MenuItem, SubMenu, MenuDivider, MenuItemGroup }
-
-import Card from './card'
-const CardMeta = Card.Meta
-const CardGrid = Card.Grid
-export { Card, CardMeta, CardGrid }
-
-import Dropdown from './dropdown'
-const DropdownButton = Dropdown.Button
-export { Dropdown, DropdownButton }
-
-export { default as Divider } from './divider'
-
-import Collapse from './collapse'
-const CollapsePanel = Collapse.Panel
-export { Collapse, CollapsePanel }
-
-import notification from './notification'
-import message from './message'
-
-export { default as Spin } from './spin'
-
-import Select from './select'
-const SelectOption = Select.Option
-const SelectOptGroup = Select.OptGroup
-export { Select, SelectOption, SelectOptGroup }
-
-export { default as Switch } from './switch'
-
-export { default as LocaleProvider } from './locale-provider'
 
 export { default as AutoComplete } from './auto-complete'
 
-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'
 export { default as Alert } from './alert'
-export { default as TimePicker } from './time-picker'
 
-export { notification, message }
+export { default as Avatar } from './avatar'
 
-import Steps from './steps'
+export { default as BackTop } from './back-top'
-const { Step } = Steps
+
-export { Steps, Step }
+export { default as Badge } from './badge'
+
+export { default as Breadcrumb } from './breadcrumb'
+
+export { default as Button } from './button'
 
 export { default as Calendar } from './calendar'
 
-import DatePicker from './date-picker'
+export { default as Card } from './card'
-const { MonthPicker, RangePicker, WeekPicker } = DatePicker
-export { DatePicker, MonthPicker, RangePicker, WeekPicker }
 
-import Table from './table'
+export { default as Collapse } from './collapse'
-const { Column: TableColumn, ColumnGroup: TableColumnGroup } = Table
 
-export { Table, TableColumn, TableColumnGroup }
+// export { default as Carousel } from './carousel'
 
-export { default as version } from './version'
+export { default as Cascader } from './cascader'
 
-export { default as Slider } from './slider'
+export { default as Checkbox } from './checkbox'
 
-export { default as Progress } from './progress'
+export { default as Col } from './col'
 
-import Timeline from './timeline'
+export { default as DatePicker } from './date-picker'
-const TimelineItem = Timeline.Item
+
-export { Timeline, TimelineItem }
+export { default as Divider } from './divider'
+
+export { default as Dropdown } from './dropdown'
+
+// export { default as Form } from './form'
+
+export { default as Icon } from './icon'
+
+export { default as Input } from './input'
 
 export { default as InputNumber } from './input-number'
 
+// export { default as Layout } from './layout'
+
+// export { default as List } from './list'
+
+export { default as LocaleProvider } from './locale-provider'
+
+export { default as message } from './message'
+
+export { default as Menu } from './menu'
+
+export { default as Modal } from './modal'
+
+export { default as notification } from './notification'
+
+export { default as Pagination } from './pagination'
+
+export { default as Popconfirm } from './popconfirm'
+
+export { default as Popover } from './popover'
+
+export { default as Progress } from './progress'
+
+export { default as Radio } from './radio'
+
+export { default as Rate } from './rate'
+
+export { default as Row } from './row'
+
+export { default as Select } from './select'
+
+export { default as Slider } from './slider'
+
+export { default as Spin } from './spin'
+
+export { default as Steps } from './steps'
+
+export { default as Switch } from './switch'
+
+export { default as Table } from './table'
+
 export { default as Transfer } from './transfer'
+
+// export { default as Tree } from './tree'
+
+// export { default as TreeSelect } from './tree-select'
+
+export { default as Tabs } from './tabs'
+
+export { default as Tag } from './tag'
+
+export { default as TimePicker } from './time-picker'
+
+export { default as Timeline } from './timeline'
+
+export { default as Tooltip } from './tooltip'
+
+// export { default as Mention } from './mention'
+
+// export { default as Upload } from './upload'
+
+export { default as version } from './version'

components/input-number/index.jsx

@@ -25,7 +25,7 @@ export const InputNumberProps = {
 }
 
 export default {
-  name: 'InputNumber',
+  name: 'AInputNumber',
   model: {
     prop: 'value',
     event: 'change',

components/input/Group.jsx

@@ -1,6 +1,6 @@
 import { filterEmpty } from '../_util/props-util'
 export default {
-  name: 'InputGruop',
+  name: 'AInputGroup',
   props: {
     prefixCls: {
       default: 'ant-input-group',

components/input/Input.jsx

@@ -12,7 +12,7 @@ function fixControlledValue (value) {
 }
 
 export default {
-  name: 'Input',
+  name: 'AInput',
   props: {
     ...inputProps,
   },

components/input/Search.jsx

@@ -9,7 +9,7 @@ import { getOptionProps, getComponentFromProp } from '../_util/props-util'
 import PropTypes from '../_util/vue-types'
 
 export default {
-  name: 'InputSearch',
+  name: 'AInputSearch',
   props: {
     ...inputProps,
     prefixCls: {

components/input/TextArea.jsx

@@ -26,7 +26,7 @@ function fixControlledValue (value) {
 }
 
 export default {
-  name: 'TextArea',
+  name: 'ATextarea',
   props: {
     ...inputProps,
     autosize: [Object, Boolean],

components/locale-provider/index.jsx

@@ -27,7 +27,7 @@ function setMomentLocale (locale) {
 }
 
 export default {
-  name: 'LocaleProvider',
+  name: 'ALocaleProvider',
   props: {
     locale: PropTypes.object.def({}),
   },

components/menu/index.jsx

@@ -30,12 +30,12 @@ export const menuProps = {
 }
 
 export default {
-  name: 'Menu',
+  name: 'AMenu',
   props: menuProps,
-  Divider,
+  Divider: { ...Divider, name: 'AMenuDivider' },
-  Item,
+  Item: { ...Item, name: 'AMenuItem' },
-  SubMenu,
+  SubMenu: { ...SubMenu, name: 'ASubMenu' },
-  ItemGroup,
+  ItemGroup: { ...ItemGroup, name: 'AMenuItemGroup' },
   provide () {
     return {
       inlineCollapsed: this.getInlineCollapsed(),

components/message/demo/duration.md

@@ -14,11 +14,10 @@ Customize message display duration from default `3s` to `10s`.
   <a-button @click="success">Customized display duration</a-button>
 </template>
 <script>
-import { message } from 'antd'
 export default {
   methods: {
     success () {
-      message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
+      this.$message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
     },
   }
 }

components/message/demo/info.md

@@ -14,11 +14,10 @@ Normal messages as feedbacks.
   <a-button type="primary" @click="info">Display normal message</a-button>
 </template>
 <script>
-  import { message } from 'antd'
   export default {
     methods: {
       info () {
-        message.info('This is a normal message');
+        this.$message.info('This is a normal message');
       },
     }
   }

components/message/demo/loading.md

@@ -14,11 +14,10 @@ Display a global loading indicator, which is dismissed by itself asynchronously.
   <a-button @click="success">Display a loading indicator</a-button>
 </template>
 <script>
-  import { message } from 'antd'
   export default {
     methods: {
       success () {
-        const hide = message.loading('Action in progress..', 0);
+        const hide = this.$message.loading('Action in progress..', 0);
         setTimeout(hide, 2500);
       },
     }

components/message/demo/other.md

@@ -18,17 +18,16 @@ Messages of success, error and warning types.
   </div>
 </template>
 <script>
-  import { message } from 'antd'
   export default {
     methods: {
       success () {
-        message.success('This is a message of success');
+        this.$message.success('This is a message of success');
       },
       error () {
-        message.error('This is a message of error');
+        this.$message.error('This is a message of error');
       },
       warning () {
-        message.warning('This is message of warning');
+        this.$message.warning('This is message of warning');
       },
     }
   }

components/modal/Modal.jsx

@@ -55,6 +55,7 @@ const modalProps = (defaultProps = {}) => {
 }
 
 export default {
+  name: 'AModal',
   props: modalProps({
     prefixCls: 'ant-modal',
     width: 520,

components/modal/demo/confirm-promise.md

@@ -17,12 +17,10 @@ delay closing the dialog.
   </a-button>
 </template>
 <script>
-import { Modal } from 'antd'
-const confirm = Modal.confirm
 export default {
   methods: {
     showConfirm() {
-      confirm({
+      this.$confirm({
         title: 'Do you want to delete these items?',
         content: 'When clicked the OK button, this dialog will be closed after 1 second',
         onOk() {

components/modal/demo/confirm.md

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

components/modal/demo/info.md

@@ -24,7 +24,7 @@ export default {
   methods: {
     info() {
       const h = this.$createElement
-      Modal.info({
+      this.$info({
         title: 'This is a notification message',
         content: h('div',{}, [
           h('p', 'some messages...some messages...'),
@@ -35,7 +35,7 @@ export default {
     },
 
     success() {
-      Modal.success({
+      this.$success({
         title: 'This is a success message',
         content: (  // JSX support
           <div>
@@ -47,14 +47,14 @@ export default {
     },
 
     error() {
-      Modal.error({
+      this.$error({
         title: 'This is an error message',
         content: 'some messages...some messages...',
       });
     },
 
     warning() {
-      Modal.warning({
+      this.$warning({
         title: 'This is a warning message',
         content: 'some messages...some messages...',
       });

components/modal/demo/locale.md

@@ -30,8 +30,6 @@ To customize the text of the buttons, you need to set `okText` and `cancelText`
   </div>
 </template>
 <script>
-import { Modal } from 'antd'
-const confirm = Modal.confirm
 export default {
   data() {
     return {
@@ -46,7 +44,7 @@ export default {
       this.visible = false
     },
     confirm() {
-      confirm({
+      this.$confirm({
         title: 'Confirm',
         content: 'Bla bla ...',
         okText: '确认',

components/modal/demo/manual.md

@@ -14,11 +14,10 @@ Manually destroying a modal.
   <a-button @click="success">Success</a-button>
 </template>
 <script>
-import { Modal } from 'antd'
 export default {
   methods: {
     success() {
-      const modal = Modal.success({
+      const modal = this.$success({
         title: 'This is a notification message',
         content: 'This modal will be destroyed after 1 second',
       });

components/notification/demo/basic.md

@@ -14,11 +14,10 @@ The simplest usage that close the notification box after 4.5s.
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
 <script>
-  import { notification } from 'antd'
   export default {
     methods: {
       openNotification () {
-        notification.open({
+        this.$notification.open({
           message: 'Notification Title',
           description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
         });

components/notification/demo/custom-icon.md

@@ -14,11 +14,10 @@ The icon can be customized to any vue node or (h) => vue node.
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
 <script>
-  import { notification } from 'antd'
   export default {
     methods: {
       openNotification () {
-        notification.open({
+        this.$notification.open({
           message: 'Notification Title',
           description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
           icon: <a-icon type="smile-circle" style="color: #108ee9" />,

components/notification/demo/custom-style.md

@@ -14,11 +14,10 @@ The style and className are available to customize Notification.
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
 <script>
-  import { notification } from 'antd'
   export default {
     methods: {
       openNotification () {
-        notification.open({
+        this.$notification.open({
           message: 'Notification Title',
           description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
           style: {

components/notification/demo/duration.md

@@ -16,11 +16,10 @@ the notification box will never close automatically.
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
 <script>
-  import { notification } from 'antd'
   export default {
     methods: {
       openNotification () {
-        notification.open({
+        this.$notification.open({
           message: 'Notification Title',
           description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
           duration: 0,

components/notification/demo/placement.md

@@ -19,7 +19,6 @@ A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` o
   </div>
 </template>
 <script>
-  import { notification } from 'antd'
   const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
   export default {
     data () {
@@ -30,14 +29,14 @@ A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` o
     },
     watch: {
       selected(val) {
-        notification.config({
+        this.$notification.config({
           placement: val,
         });
       }
     },
     methods: {
       openNotification (val) {
-        notification.open({
+        this.$notification.open({
           message: 'Notification Title',
           description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
         });

components/notification/demo/with-btn.md

@@ -14,7 +14,6 @@ The simplest usage that close the notification box after 4.5s.
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
 <script>
-  import { notification } from 'antd'
   const close = () => {
     console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
   };
@@ -22,7 +21,7 @@ The simplest usage that close the notification box after 4.5s.
     methods: {
       openNotification () {
         const key = `open${Date.now()}`;
-        notification.open({
+        this.$notification.open({
           message: 'Notification Title',
           description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
           btn: (h)=>{
@@ -32,7 +31,7 @@ The simplest usage that close the notification box after 4.5s.
                 size: 'small',
               },
               on: {
-                click: () => notification.close(key)
+                click: () => this.$notification.close(key)
               }
             }, 'Confirm')
           },

components/notification/demo/with-icon.md

@@ -19,11 +19,10 @@ A notification box with a icon at the left side.
   </div>
 </template>
 <script>
-  import { notification } from 'antd'
   export default {
     methods: {
       openNotificationWithIcon (type) {
-        notification[type]({
+        this.$notification[type]({
           message: 'Notification Title',
           description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
         });

components/pagination/Pagination.jsx

@@ -32,6 +32,7 @@ export const PaginationProps = () => ({
 })
 
 export default {
+  name: 'APagination',
   props: {
     ...PaginationProps(),
     prefixCls: PropTypes.string.def('ant-pagination'),

components/popconfirm/index.jsx

@@ -14,7 +14,7 @@ import defaultLocale from '../locale-provider/default'
 const tooltipProps = abstractTooltipProps()
 const btnProps = buttonTypes()
 export default {
-  name: 'popconfirm',
+  name: 'APopconfirm',
   props: {
     ...tooltipProps,
     prefixCls: PropTypes.string.def('ant-popover'),

components/popover/index.jsx

@@ -6,7 +6,7 @@ import { getOptionProps, getComponentFromProp } from '../_util/props-util'
 
 const props = abstractTooltipProps()
 export default {
-  name: 'popover',
+  name: 'APopover',
   props: {
     ...props,
     prefixCls: PropTypes.string.def('ant-popover'),

components/progress/progress.jsx

@@ -31,7 +31,7 @@ export const ProgressProps = {
 }
 
 export default {
-  name: 'Progress',
+  name: 'AProgress',
   props: initDefaultProps(ProgressProps, {
     type: 'line',
     percent: 0,

components/radio/Group.jsx

@@ -1,7 +1,7 @@
 import PropTypes from '../_util/vue-types'
 import Radio from './Radio'
 export default {
-  name: 'RadioGroup',
+  name: 'ARadioGroup',
   props: {
     prefixCls: {
       default: 'ant-radio-group',

components/radio/Radio.jsx

@@ -1,7 +1,7 @@
 import PropTypes from '../_util/vue-types'
 import hasProp from '../_util/props-util'
 export default {
-  name: 'Radio',
+  name: 'ARadio',
   props: {
     prefixCls: {
       default: 'ant-radio',

components/radio/index.js

@@ -3,6 +3,7 @@ import Group from './Group'
 
 const Button = {
   extends: Radio,
+  name: 'ARadioButton',
   props: {
     ...Radio.props,
     prefixCls: {

components/rate/index.jsx

@@ -16,7 +16,7 @@ export const RateProps = {
 }
 
 export default {
-  name: 'Rate',
+  name: 'ARate',
   model: {
     prop: 'value',
     event: 'change',

components/row/index.js

@@ -0,0 +1,2 @@
+import { Row } from '../grid'
+export default Row

components/row/style/index.js

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

components/select/index.jsx

@@ -82,9 +82,9 @@ export {
 }
 
 export default {
-  Option,
+  Option: { ...Option, name: 'ASelectOption' },
-  OptGroup,
+  OptGroup: { ...OptGroup, name: 'ASelectOptGroup' },
-  name: 'Select',
+  name: 'ASelect',
   props: {
     ...SelectProps,
     prefixCls: PropTypes.string.def('ant-select'),

components/slider/index.jsx

@@ -45,7 +45,7 @@ export const SliderProps = () => ({
 })
 
 export default {
-  name: 'Slider',
+  name: 'ASlider',
   model: {
     prop: 'value',
     event: 'change',

components/spin/Spin.jsx

@@ -15,7 +15,7 @@ export const SpinProps = () => ({
 })
 
 export default {
-  name: 'Spin',
+  name: 'ASpin',
   mixins: [BaseMixin],
   props: initDefaultProps(SpinProps(), {
     prefixCls: 'ant-spin',

components/steps/index.jsx

@@ -20,13 +20,13 @@ const getStepsProps = (defaultProps = {}) => {
 }
 
 export default {
-  name: 'Steps',
+  name: 'ASteps',
   props: getStepsProps({
     prefixCls: 'ant-steps',
     iconPrefix: 'ant',
     current: 0,
   }),
-  Step: VcSteps.Step,
+  Step: { ...VcSteps.Step, name: 'AStep' },
   render () {
     const props = getOptionProps(this)
     const stepsProps = {

components/switch/index.jsx

@@ -4,7 +4,7 @@ import { getOptionProps, getComponentFromProp } from '../_util/props-util'
 import VcSwitch from '../vc-switch'
 
 export default {
-  name: 'vSwitch',
+  name: 'ASwitch',
   model: {
     prop: 'checked',
     event: 'change',

components/table/Column.jsx

@@ -1,6 +1,6 @@
 import { ColumnProps } from './interface'
 
 export default {
-  name: 'Column',
+  name: 'ATableColumn',
   props: ColumnProps,
 }

components/table/ColumnGroup.jsx

@@ -2,7 +2,7 @@
 import PropTypes from '../_util/vue-types'
 
 export default {
-  name: 'ColumnGroup',
+  name: 'ATableColumnGroup',
   props: {
     title: PropTypes.any,
   },

components/table/index.jsx

@@ -5,7 +5,7 @@ import { getOptionProps, getKey, getClass,
 } from '../_util/props-util'
 
 const Table = {
-  name: 'Table',
+  name: 'ATable',
   Column: T.Column,
   ColumnGroup: T.ColumnGroup,
   props: T.props,

components/tabs/index.js

@@ -1,6 +1,7 @@
 import Tabs from './tabs'
 import TabPane from '../vc-tabs/src/TabPane'
 import TabContent from '../vc-tabs/src/TabContent'
-Tabs.TabPane = TabPane
+Tabs.TabPane = { ...TabPane, name: 'ATabPane' }
+Tabs.TabContent = { ...TabContent, name: 'ATabContent' }
 export default Tabs
 export { TabPane, TabContent }

components/tabs/tabs.jsx

@@ -4,6 +4,7 @@ import isFlexSupported from '../_util/isFlexSupported'
 import { hasProp, getComponentFromProp, getComponentName, isEmptyElement } from '../_util/props-util'
 import warning from '../_util/warning'
 export default {
+  name: 'ATabs',
   props: {
     prefixCls: { type: String, default: 'ant-tabs' },
     activeKey: String,
@@ -112,7 +113,7 @@ export default {
       if (isEmptyElement(child)) { return }
       const { componentOptions } = child
       const componentName = getComponentName(componentOptions)
-      warning(componentName === 'TabPane', '`Tabs children just support TabPane')
+      warning(componentName === 'ATabPane', '`Tabs children just support TabPane')
       if (componentOptions && componentName === 'TabPane') {
         componentOptions.propsData = componentOptions.propsData || {}
         if (componentOptions.propsData.tab === undefined) {

components/tag/CheckableTag.jsx

@@ -1,6 +1,6 @@
 
 export default {
-  name: 'CheckableTag',
+  name: 'ACheckableTag',
   model: {
     prop: 'checked',
   },

components/tag/Tag.jsx

@@ -4,7 +4,7 @@ import getTransitionProps from '../_util/getTransitionProps'
 import omit from 'omit.js'
 
 export default {
-  name: 'Tag',
+  name: 'ATag',
   props: {
     prefixCls: {
       default: 'ant-tag',

components/time-picker/index.jsx

@@ -58,6 +58,7 @@ export const TimePickerProps = () => ({
 })
 
 export default {
+  name: 'ATimePicker',
   mixins: [BaseMixin],
   props: initDefaultProps(TimePickerProps(), {
     prefixCls: 'ant-time-picker',

components/timeline/Timeline.jsx

@@ -13,7 +13,7 @@ export const TimelineProps = {
 }
 
 export default {
-  name: 'Timeline',
+  name: 'ATimeline',
   props: initDefaultProps(TimelineProps, {
     prefixCls: 'ant-timeline',
   }),

components/timeline/TimelineItem.jsx

@@ -11,7 +11,7 @@ export const TimeLineItemProps = {
 }
 
 export default {
-  name: 'TimelineItem',
+  name: 'ATimelineItem',
   props: initDefaultProps(TimeLineItemProps, {
     prefixCls: 'ant-timeline',
     color: 'blue',

components/tooltip/Tooltip.jsx

@@ -19,7 +19,7 @@ const splitObject = (obj, keys) => {
 }
 const props = abstractTooltipProps()
 export default {
-  name: 'Tooltip',
+  name: 'ATooltip',
   props: {
     ...props,
     title: PropTypes.any,

components/tooltip/demo/placement.md

@@ -94,7 +94,6 @@ The ToolTip has 12 placements choice.
   </div>
 </template>
 <script>
-import { message } from 'antd'
 
 export default {
   data () {

components/transfer/index.jsx

@@ -49,7 +49,7 @@ export const TransferLocale = {
 }
 
 export default {
-  name: 'Transfer',
+  name: 'ATransfer',
   mixins: [BaseMixin],
   props: initDefaultProps(TransferProps, {
     dataSource: [],

components/vc-menu/MenuMixin.js

@@ -135,7 +135,7 @@ export default {
 
     renderCommonMenuItem (child, i, subIndex, extraProps) {
       if (child.tag === undefined) { return child }
-      warning(['MenuItem', 'MenuItemGroup', 'SubMenu', 'MenuDivider'].includes(getComponentName(child.componentOptions)),
+      warning(['MenuItem', 'MenuItemGroup', 'SubMenu', 'MenuDivider', 'AMenuItem', 'AMenuItemGroup', 'ASubMenu', 'AMenuDivider'].includes(getComponentName(child.componentOptions)),
         `Menu children not support ${getComponentName(child.componentOptions)}`,
       )
       const state = this.$data

site/components.js

@@ -0,0 +1,144 @@
+import Vue from 'vue'
+import {
+  Affix,
+  // Anchor,
+  AutoComplete,
+  Alert,
+  Avatar,
+  BackTop,
+  Badge,
+  Breadcrumb,
+  Button,
+  Calendar,
+  Card,
+  Collapse,
+  // Carousel,
+  Cascader,
+  Checkbox,
+  Col,
+  DatePicker,
+  Divider,
+  Dropdown,
+  // Form,
+  Icon,
+  Input,
+  InputNumber,
+  // Layout,
+  // List,
+  LocaleProvider,
+  message,
+  Menu,
+  Modal,
+  notification,
+  Pagination,
+  Popconfirm,
+  Popover,
+  Progress,
+  Radio,
+  Rate,
+  Row,
+  Select,
+  Slider,
+  Spin,
+  Steps,
+  Switch,
+  Table,
+  Transfer,
+  // Tree,
+  // TreeSelect,
+  Tabs,
+  Tag,
+  TimePicker,
+  Timeline,
+  Tooltip,
+  // Mention,
+  // Upload,
+  // version,
+} from 'antd'
+
+Vue.component(Affix.name, Affix) // a-affix
+Vue.component(AutoComplete.name, AutoComplete)
+Vue.component(Alert.name, Alert)
+Vue.component(Avatar.name, Avatar)
+Vue.component(BackTop.name, BackTop)
+Vue.component(Badge.name, Badge)
+Vue.component(Breadcrumb.name, Breadcrumb)
+Vue.component(Breadcrumb.Item.name, Breadcrumb.Item)
+Vue.component(Button.name, Button)
+Vue.component(Button.Group.name, Button.Group)
+
+Vue.component(Calendar.name, Calendar)
+Vue.component(Card.name, Card)
+Vue.component(Card.Meta.name, Card.Meta)
+Vue.component(Card.Grid.name, Card.Grid)
+Vue.component(Collapse.name, Collapse)
+Vue.component(Collapse.Panel.name, Collapse.Panel)
+// Vue.component(Carousel.name, Carousel)
+Vue.component(Cascader.name, Cascader)
+Vue.component(Checkbox.name, Checkbox)
+Vue.component(Checkbox.Group.name, Checkbox.Group)
+Vue.component(Col.name, Col)
+Vue.component(DatePicker.name, DatePicker)
+Vue.component(DatePicker.MonthPicker.name, DatePicker.MonthPicker)
+Vue.component(DatePicker.RangePicker.name, DatePicker.RangePicker)
+Vue.component(DatePicker.WeekPicker.name, DatePicker.WeekPicker)
+Vue.component(Divider.name, Divider)
+Vue.component(Dropdown.name, Dropdown)
+Vue.component(Dropdown.Button.name, Dropdown.Button)
+// Vue.component(Form.name, Form)
+Vue.component(Icon.name, Icon)
+Vue.component(Input.name, Input)
+Vue.component(Input.Group.name, Input.Group)
+Vue.component(Input.Search.name, Input.Search)
+Vue.component(Input.TextArea.name, Input.TextArea)
+Vue.component(InputNumber.name, InputNumber)
+// Vue.component(Layout.name, Layout)
+// Vue.component(List.name, List)
+Vue.component(LocaleProvider.name, LocaleProvider)
+Vue.component(Menu.name, Menu)
+Vue.component(Menu.Item.name, Menu.Item)
+Vue.component(Menu.SubMenu.name, Menu.SubMenu)
+Vue.component(Menu.Divider.name, Menu.Divider)
+Vue.component(Menu.ItemGroup.name, Menu.ItemGroup)
+Vue.component(Modal.name, Modal)
+Vue.component(Pagination.name, Pagination)
+Vue.component(Popconfirm.name, Popconfirm)
+Vue.component(Popover.name, Popover)
+Vue.component(Progress.name, Progress)
+Vue.component(Radio.name, Radio)
+Vue.component(Radio.Group.name, Radio.Group)
+Vue.component(Radio.Button.name, Radio.Button)
+Vue.component(Rate.name, Rate)
+Vue.component(Row.name, Row)
+Vue.component(Select.name, Select)
+Vue.component(Select.Option.name, Select.Option)
+Vue.component(Select.OptGroup.name, Select.OptGroup)
+Vue.component(Slider.name, Slider)
+Vue.component(Spin.name, Spin)
+Vue.component(Steps.name, Steps)
+Vue.component(Steps.Step.name, Steps.Step)
+Vue.component(Switch.name, Switch)
+Vue.component(Table.name, Table)
+Vue.component(Table.Column.name, Table.Column)
+Vue.component(Table.ColumnGroup.name, Table.ColumnGroup)
+Vue.component(Transfer.name, Transfer)
+// Vue.component(Tree.name, Tree)
+// Vue.component(TreeSelect.name, TreeSelect)
+Vue.component(Tabs.name, Tabs)
+Vue.component(Tabs.TabPane.name, Tabs.TabPane)
+Vue.component(Tag.name, Tag)
+Vue.component(Tag.CheckableTag.name, Tag.CheckableTag)
+Vue.component(TimePicker.name, TimePicker)
+Vue.component(Timeline.name, Timeline)
+Vue.component(Timeline.Item.name, Timeline.Item)
+Vue.component(Tooltip.name, Tooltip)
+// Vue.component(Mention.name, Mention)
+// Vue.component(Upload.name, Upload)
+
+Vue.prototype.$message = message
+Vue.prototype.$notification = notification
+Vue.prototype.$info = Modal.info
+Vue.prototype.$success = Modal.success
+Vue.prototype.$error = Modal.error
+Vue.prototype.$warning = Modal.warning
+Vue.prototype.$confirm = Modal.confirm

site/components/header.vue

@@ -25,7 +25,7 @@ export default {
         <a-row>
           <a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
             <router-link to={{ path: '/ant-design' }} id='logo'>
-              <img alt='logo' src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
+              <img alt='logo' style="height: 32px" src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
               <span>  VUE-ANTD</span>
             </router-link>
           </a-col>

site/index.js

@@ -7,7 +7,7 @@ import VueClipboard from 'vue-clipboard2'
 import routes from './routes'
 import Md from './components/md'
 import Api from './components/api'
-import * as Components from '../components/index'
+import './components'
 import demoBox from './components/demoBox'
 
 Vue.use(VueClipboard)
@@ -15,16 +15,6 @@ Vue.use(VueRouter)
 Vue.component(Md.name, Md)
 Vue.component(Api.name, Api)
 Vue.component('demo-box', demoBox)
-Object.keys(Components).forEach(k => {
-  if (k === 'api') {
-    Object.keys(Components[k]).forEach(api => {
-      Vue.prototype[`$${api}`] = Components[k][api]
-    })
-  } else {
-    const name = `a${k.replace(/([A-Z])/g, '-$1').toLowerCase()}`
-    Vue.component(name, Components[k])
-  }
-})
 
 const router = new VueRouter({
   mode: 'history',

webpack.base.config.js

@@ -197,6 +197,7 @@ module.exports = {
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       'antd': path.join(__dirname, 'components'),
+      'vue-antd-ui': path.join(__dirname, 'components'),
       '@': path.join(__dirname, ''),
     },
   },