add input demo and local provider

components/align/Align.vue

@@ -4,7 +4,6 @@ import align from 'dom-align'
 import addEventListener from '../_util/Dom/addEventListener'
 import { cloneElement } from '../_util/vnode.js'
 import isWindow from './isWindow'
-import isEqual from 'lodash.isequal'
 function noop () {
 }
 
@@ -44,42 +43,46 @@ export default {
     }
   },
   mounted () {
-    this.prevProps = { ...this.$props }
-    const props = this.$props
-    // if parent ref not attached .... use document.getElementById
-    !this.aligned && this.forceAlign()
-    if (!props.disabled && props.monitorWindowResize) {
-      this.startMonitorWindowResize()
-    }
+    this.$nextTick(() => {
+      this.prevProps = { ...this.$props }
+      const props = this.$props
+      // if parent ref not attached .... use document.getElementById
+      !this.aligned && this.forceAlign()
+      if (!props.disabled && props.monitorWindowResize) {
+        this.startMonitorWindowResize()
+      }
+    })
   },
   updated () {
-    const prevProps = this.prevProps
-    const props = this.$props
-    let reAlign = false
-    if (!props.disabled && this.visible) {
-      if (prevProps.disabled || prevProps.align !== props.align) {
-        reAlign = true
-      } else {
-        const lastTarget = prevProps.target()
-        const currentTarget = props.target()
-        if (isWindow(lastTarget) && isWindow(currentTarget)) {
-          reAlign = false
-        } else if (lastTarget !== currentTarget) {
+    this.$nextTick(() => {
+      const prevProps = this.prevProps
+      const props = this.$props
+      let reAlign = false
+      if (!props.disabled && this.visible) {
+        if (prevProps.disabled || prevProps.align !== props.align) {
           reAlign = true
+        } else {
+          const lastTarget = prevProps.target()
+          const currentTarget = props.target()
+          if (isWindow(lastTarget) && isWindow(currentTarget)) {
+            reAlign = false
+          } else if (lastTarget !== currentTarget) {
+            reAlign = true
+          }
         }
       }
-    }
 
-    if (reAlign) {
-      this.forceAlign()
-    }
+      if (reAlign) {
+        this.forceAlign()
+      }
 
-    if (props.monitorWindowResize && !props.disabled) {
-      this.startMonitorWindowResize()
-    } else {
-      this.stopMonitorWindowResize()
-    }
-    this.prevProps = { ...this.$props }
+      if (props.monitorWindowResize && !props.disabled) {
+        this.startMonitorWindowResize()
+      } else {
+        this.stopMonitorWindowResize()
+      }
+      this.prevProps = { ...this.$props }
+    })
   },
   beforeDestroy () {
     this.stopMonitorWindowResize()

components/button/demo/index.vue

@@ -32,7 +32,6 @@ export default {
         <Ghost />
         <Icon/>
         <Loading />
-        <h1>TODO ： Multiple</h1>
         <Multiple />
         <Size />
         <api>

components/button/demo/multiple.md

@@ -9,13 +9,29 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
 </us>
 
 ```html
-// TODO: 依赖组件开发中
 <template>
   <div>
     <a-button type="primary">Primary</a-button>
-    <a-button>Default</a-button>
-    <a-button type="dashed">Dashed</a-button>
-    <a-button type="danger">Danger</a-button>
+    <a-button>secondary</a-button>
+    <a-dropdown overlay={menu}>
+      <a-menu slot="overlay" @click="handleMenuClick">
+        <a-menu-item key="1">1st item</a-menu-item>
+        <a-menu-item key="2">2nd item</a-menu-item>
+        <a-menu-item key="3">3rd item</a-menu-item>
+      </a-menu>
+      <a-button>
+        Actions <a-icon type="down" />
+      </a-button>
+    </a-dropdown>
   </div>
 </template>
+<script>
+export default {
+  methods: {
+    handleMenuClick(e) {
+      console.log('click', e);
+    }
+  }
+}
+</script>
 ```

components/index.js

@@ -76,3 +76,5 @@ const SelectOption = Select.Option
 const SelectOptGroup = Select.OptGroup
 export { Select, SelectOption, SelectOptGroup }
 
+export { default as LocaleProvider } from './locale-provider'
+

components/input/Input.vue

@@ -2,7 +2,7 @@
 import TextArea from './TextArea'
 import omit from 'omit.js'
 import inputProps from './inputProps'
-import hasProp from '../_util/props-util'
+import { hasProp, getComponentFromProp } from '../_util/props-util'
 
 function fixControlledValue (value) {
   if (typeof value === 'undefined' || value === null) {
@@ -68,8 +68,9 @@ export default {
       }
     },
     renderLabeledInput (children) {
-      const props = this.props
-      let { addonBefore, addonAfter } = this.$slots
+      const props = this.$props
+      let addonAfter = getComponentFromProp(this, 'addonAfter')
+      let addonBefore = getComponentFromProp(this, 'addonBefore')
       // Not wrap when there is not addons
       if ((!addonBefore && !addonAfter)) {
         return children
@@ -117,7 +118,8 @@ export default {
     },
     renderLabeledIcon (children) {
       const { prefixCls } = this.$props
-      let { prefix, suffix } = this.$slots
+      let prefix = getComponentFromProp(this, 'prefix')
+      let suffix = getComponentFromProp(this, 'suffix')
       if (!prefix && !suffix) {
         return children
       }

components/input/demo/addon.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div style="margin-bottom: 16px">
+      <a-input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
+    </div>
+    <div style="margin-bottom: 16px">
+      <a-input defaultValue="mysite">
+        <a-select slot="addonBefore" defaultValue="Http://" style="width: 90px">
+          <a-select-option value="Http://">Http://</a-select-option>
+          <a-select-option value="Https://">Https://</a-select-option>
+        </a-select>
+        <a-select slot="addonAfter" defaultValue=".com" style="width: 80px">
+          <a-select-option value=".com">.com</a-select-option>
+          <a-select-option value=".jp">.jp</a-select-option>
+          <a-select-option value=".cn">.cn</a-select-option>
+          <a-select-option value=".org">.org</a-select-option>
+        </a-select>
+      </a-input>
+    </div>
+    <div style="margin-bottom: 16px">
+      <a-input defaultValue="mysite">
+        <a-icon slot="addonAfter" type="setting"/>
+      </a-input>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>

components/input/demo/index.vue

@@ -12,6 +12,8 @@
     <Size />
     <h1>TextArea</h1>
     <TextArea />
+    <h1>Addon</h1>
+    <Addon />
   </div>
 </template>
 <script>
@@ -21,6 +23,7 @@ import Presuffix from './presuffix'
 import SearchInput from './search-input'
 import Size from './size'
 import TextArea from './textarea'
+import Addon from './addon'
 export default {
   components: {
     Basic,
@@ -29,6 +32,7 @@ export default {
     SearchInput,
     Size,
     TextArea,
+    Addon,
   },
 }
 </script>

components/input/inputProps.js

@@ -1,3 +1,4 @@
+import PropTypes from '../_util/vue-types'
 export default {
   prefixCls: {
     default: 'ant-input',
@@ -22,17 +23,16 @@ export default {
     type: Boolean,
   },
   readOnly: Boolean,
-  // addonBefore: React.ReactNode,
-  // addonAfter: React.ReactNode,
+  addonBefore: PropTypes.any,
+  addonAfter: PropTypes.any,
   // onPressEnter?: React.FormEventHandler<any>;
   // onKeyDown?: React.FormEventHandler<any>;
   // onChange?: React.ChangeEventHandler<HTMLInputElement>;
   // onClick?: React.FormEventHandler<any>;
   // onFocus?: React.FormEventHandler<any>;
   // onBlur?: React.FormEventHandler<any>;
-  // autoComplete: String;
-  // prefix: React.ReactNode,
-  // suffix: React.ReactNode,
+  prefix: PropTypes.any,
+  suffix: PropTypes.any,
   spellCheck: Boolean,
   autoFocus: Boolean,
 }

components/locale-provider/index.vue

@@ -56,7 +56,7 @@ export default {
     // changeConfirmLocale()
   },
   render () {
-    return this.$slots.default
+    return this.$slots.default[0]
   },
 }
 

components/locale-provider/zh_CN.js

@@ -0,0 +1,44 @@
+// import Pagination from 'rc-pagination/lib/locale/zh_CN'
+// import DatePicker from '../date-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,
+  // DatePicker,
+  // TimePicker,
+  // Calendar,
+  Table: {
+    filterTitle: '筛选',
+    filterConfirm: '确定',
+    filterReset: '重置',
+    emptyText: '暂无数据',
+    selectAll: '全选当页',
+    selectInvert: '反选当页',
+  },
+  Modal: {
+    okText: '确定',
+    cancelText: '取消',
+    justOkText: '知道了',
+  },
+  Popconfirm: {
+    cancelText: '取消',
+    okText: '确定',
+  },
+  Transfer: {
+    notFoundContent: '无匹配结果',
+    searchPlaceholder: '请输入搜索内容',
+    itemUnit: '项',
+    itemsUnit: '项',
+  },
+  Select: {
+    notFoundContent: '无匹配结果',
+  },
+  Upload: {
+    uploading: '文件上传中',
+    removeFile: '删除文件',
+    uploadError: '上传错误',
+    previewFile: '预览文件',
+  },
+}

components/trigger/Popup.vue

@@ -27,14 +27,8 @@ export default {
   data () {
     return {
       destroyPopup: false,
-      initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化,避免位置计算不正确
     }
   },
-  mounted () {
-    this.$nextTick(() => {
-      this.initAlign = true
-    })
-  },
   beforeDestroy () {
     this.$el.remove()
   },
@@ -128,13 +122,15 @@ export default {
       let useTransition = !!transitionName
       const transitionEvent = {
         beforeEnter: (el) => {
-          el.style.display = el.__vOriginalDisplay
+          // el.style.display = el.__vOriginalDisplay
           // this.$refs.alignInstance.forceAlign()
         },
         enter: (el, done) => {
           // align updated后执行动画
           this.$nextTick(() => {
-            animate(el, `${transitionName}-enter`, done)
+            this.$refs.alignInstance.$nextTick(() => {
+              animate(el, `${transitionName}-enter`, done)
+            })
           })
         },
         leave: (el, done) => {
@@ -194,7 +190,7 @@ export default {
 
     getMaskElement () {
       const props = this.$props
-      let maskElement
+      let maskElement = null
       if (props.mask) {
         const maskTransition = this.getMaskTransitionName()
         maskElement = (
@@ -222,15 +218,11 @@ export default {
   },
 
   render () {
-    const { destroyPopup, getMaskElement, getPopupElement, initAlign } = this
+    const { destroyPopup, getMaskElement, getPopupElement } = this
     return (
       <div>
-        {initAlign ? (
-          getMaskElement(),
-          destroyPopup
-            ? null : getPopupElement()
-        ) : null }
-
+        {getMaskElement()}
+        { destroyPopup ? null : getPopupElement()}
       </div>
     )
   },

components/trigger/index.vue

@@ -338,6 +338,7 @@ export default {
               popupProps: { ...popupProps },
             }
           },
+          parent: self,
           el: div,
           render () {
             const { popupEvents, ...otherProps } = this.popupProps

examples/components/demo.vue

@@ -1,29 +1,34 @@
 <script>
 import * as AllDemo from '../demo'
 import Header from './header'
+import zhCN from 'antd/locale-provider/zh_CN'
+import enUS from 'antd/locale-provider/default'
 export default {
   render () {
     const { name, demo } = this.$route.params // eslint-disable-line
     let { lang } = this.$route.params
     const Demo = AllDemo[name]
+    let locale = zhCN
     if (lang !== 'cn') {
       lang = 'us'
+      locale = enUS
     }
     return (
-      <div class='site'>
-        <Header />
-        <div class='main-wrapper'>
-          <a-menu class='nav' selectedKeys={[name]}>
-            {Object.keys(AllDemo).map(d => <a-menu-item key={d}>
-              <router-link to={{ path: `/${lang}/components/${d}` }}>{d}</router-link>
-            </a-menu-item>)}
-          </a-menu>
-          <div class='content main-container'>
-            {Demo ? <Demo /> : '正在紧急开发中...'}
+      <a-locale-provider locale={locale}>
+        <div class='site'>
+          <Header />
+          <div class='main-wrapper'>
+            <a-menu class='nav' selectedKeys={[name]}>
+              {Object.keys(AllDemo).map(d => <a-menu-item key={d}>
+                <router-link to={{ path: `/${lang}/components/${d}` }}>{d}</router-link>
+              </a-menu-item>)}
+            </a-menu>
+            <div class='content main-container'>
+              {Demo ? <Demo /> : '正在紧急开发中...'}
+            </div>
           </div>
         </div>
-
-      </div>
+      </a-locale-provider>
     )
   },
 }

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/select/demo/${d}.md`),
+    component: import(`../components/input/demo/${d}`),
   }
 }
 export default [