feat: add form demo

components/checkbox/Checkbox.jsx

@@ -1,7 +1,8 @@
-
+import classNames from 'classnames'
-import hasProp from '../_util/props-util'
+import hasProp, { getClass, getStyle } from '../_util/props-util'
 import PropTypes from '../_util/vue-types'
 export default {
+  inheritAttrs: false,
   name: 'ACheckbox',
   props: {
     prefixCls: {
@@ -104,9 +105,13 @@ export default {
       onChange = () => checkboxGroupContext.toggleOption({ value: props.value })
       disabled = props.disabled || checkboxGroupContext.disabled
     }
+    const classString = classNames(getClass(this), {
+      [`${prefixCls}-wrapper`]: true,
+    })
     return (
       <label
-        class={`${prefixCls}-wrapper`}
+        class={classString}
+        style={getStyle(this)}
         onMouseenter={this.onMouseEnter}
         onMouseleave={this.onMouseLeave}
       >

components/form/FormItem.jsx

@@ -117,8 +117,8 @@ export default {
       return this.getChildAttr(FIELD_DATA_PROP)
     },
 
-    onHelpAnimEnd  (_key, helpShow) {
+    onHelpAnimEnd  () {
-      this.setState({ helpShow })
+      this.setState({ helpShow: false })
     },
 
     renderHelp () {
@@ -132,6 +132,9 @@ export default {
       const transitionProps = getTransitionProps('show-help', {
         afterLeave: this.onHelpAnimEnd,
       })
+      if (children) {
+        this.setState({ helpShow: true })
+      }
       return (
         <transition
           {...transitionProps}
@@ -286,7 +289,7 @@ export default {
       return label ? (
         <Col {...colProps} >
           <label
-            htmlFor={id || this.getId()}
+            for={id || this.getId()}
             class={labelClassName}
             title={typeof label === 'string' ? label : ''}
             onClick={this.onLabelClick}

components/form/demo/advanced-search.md

@@ -0,0 +1,134 @@
+<cn>
+#### 高级搜索
+三列栅格式的表单排列方式，常用于数据表格的高级搜索。
+有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
+</cn>
+
+<us>
+#### Advanced search
+Three columns layout is often used for advanced searching of data table.
+Because the width of label is not fixed, you may need to adjust it by customizing its style.
+</us>
+
+```html
+<script>
+import { Form } from 'vue-antd-ui'
+
+const AdvancedSearchForm = {
+  data () {
+    return {
+      expand: false,
+    }
+  },
+  methods: {
+    handleSearch  (e) {
+      e.preventDefault()
+      this.form.validateFields((error, values) => {
+        console.log('error', error)
+        console.log('Received values of form: ', values)
+      })
+    },
+
+    handleReset () {
+      this.form.resetFields()
+    },
+
+    toggle  () {
+      this.expand = !this.expand
+    },
+
+    // To generate mock Form.Item
+    getFields () {
+      const count = this.expand ? 10 : 6
+      const { getFieldDecorator } = this.form
+      const children = []
+      for (let i = 0; i < 10; i++) {
+        children.push(
+          <a-col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
+            <a-form-item label={`Field ${i}`}>
+              {getFieldDecorator(`field-${i}`, {
+                rules: [{
+                  required: true,
+                  message: 'Input something!',
+                }],
+              })(
+                <a-input placeholder='placeholder' />
+              )}
+            </a-form-item>
+          </a-col>
+        )
+      }
+      return children
+    },
+  },
+
+  render () {
+    return (
+      <a-form
+        class='ant-advanced-search-form'
+        onSubmit={this.handleSearch}
+      >
+        <a-row gutter={24}>{this.getFields()}</a-row>
+        <a-row>
+          <a-col span={24} style={{ textAlign: 'right' }}>
+            <a-button type='primary' htmlType='submit'>Search</a-button>
+            <a-button style={{ marginLeft: '8px' }} onClick={this.handleReset}>
+              Clear
+            </a-button>
+            <a style={{ marginLeft: '8px', fontSize: '12px' }} onClick={this.toggle}>
+              Collapse <a-icon type={this.expand ? 'up' : 'down'} />
+            </a>
+          </a-col>
+        </a-row>
+      </a-form>
+    )
+  },
+}
+
+const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm)
+
+export default {
+  render () {
+    return (
+      <div id='components-form-demo-advanced-search'>
+        <WrappedAdvancedSearchForm />
+        <div class='search-result-list'>Search Result List</div>
+      </div>
+    )
+  },
+}
+
+</script>
+<style>
+.ant-advanced-search-form {
+  padding: 24px;
+  background: #fbfbfb;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+.ant-advanced-search-form .ant-form-item {
+  display: flex;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#components-form-demo-advanced-search .ant-form {
+  max-width: none;
+}
+#components-form-demo-advanced-search .search-result-list {
+  margin-top: 16px;
+  border: 1px dashed #e9e9e9;
+  border-radius: 6px;
+  background-color: #fafafa;
+  min-height: 200px;
+  text-align: center;
+  padding-top: 80px;
+}
+</style>
+```
+
+
+

components/form/demo/normal-login.md

@@ -0,0 +1,79 @@
+<cn>
+#### 登录框
+普通的登录框，可以容纳更多的元素。
+</cn>
+
+<us>
+#### Login Form
+Normal login form which can contain more elements.
+</us>
+
+```html
+<script>
+import { Form } from 'vue-antd-ui'
+
+const NormalLoginForm = {
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    },
+  },
+
+  render () {
+    const { getFieldDecorator } = this.form
+    return (
+      <a-form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
+        <a-form-item>
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: 'Please input your username!' }],
+          })(
+            <a-input prefix={<a-icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
+          )}
+        </a-form-item>
+        <a-form-item>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: 'Please input your Password!' }],
+          })(
+            <a-input prefix={<a-icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
+          )}
+        </a-form-item>
+        <a-form-item>
+          {getFieldDecorator('remember', {
+            valuePropName: 'checked',
+            initialValue: true,
+          })(
+            <a-checkbox>Remember me</a-checkbox>
+          )}
+          <a class='login-form-forgot' href=''>Forgot password</a>
+          <a-button type='primary' htmlType='submit' class='login-form-button'>
+            Log in
+          </a-button>
+          Or <a href=''>register now!</a>
+        </a-form-item>
+      </a-form>
+    )
+  },
+}
+
+export default Form.create()(NormalLoginForm)
+</script>
+<style>
+#components-form-demo-normal-login .login-form {
+  max-width: 300px;
+}
+#components-form-demo-normal-login .login-form-forgot {
+  float: right;
+}
+#components-form-demo-normal-login .login-form-button {
+  width: 100%;
+}
+</style>
+```
+
+
+

components/form/demo/test.vue

@@ -1,6 +1,5 @@
 <script>
-import { Form, Icon, Input, Button, Checkbox } from 'antd'
+import { Form } from 'vue-antd-ui'
-const FormItem = Form.Item
 
 const NormalLoginForm = {
   methods: {
@@ -17,35 +16,35 @@ const NormalLoginForm = {
   render () {
     const { getFieldDecorator } = this.form
     return (
-      <Form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
+      <a-form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
-        <FormItem>
+        <a-form-item>
           {getFieldDecorator('userName', {
             rules: [{ required: true, message: 'Please input your username!' }],
           })(
-            <Input prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
+            <a-input prefix={<a-icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
           )}
-        </FormItem>
+        </a-form-item>
-        <FormItem>
+        <a-form-item>
           {getFieldDecorator('password', {
             rules: [{ required: true, message: 'Please input your Password!' }],
           })(
-            <Input prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
+            <a-input prefix={<a-icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
           )}
-        </FormItem>
+        </a-form-item>
-        <FormItem>
+        <a-form-item>
           {getFieldDecorator('remember', {
             valuePropName: 'checked',
             initialValue: true,
           })(
-            <Checkbox>Remember me</Checkbox>
+            <a-checkbox>Remember me</a-checkbox>
           )}
           <a class='login-form-forgot' href=''>Forgot password</a>
-          <Button type='primary' htmlType='submit' class='login-form-button'>
+          <a-button type='primary' htmlType='submit' class='login-form-button'>
             Log in
-          </Button>
+          </a-button>
           Or <a href=''>register now!</a>
-        </FormItem>
+        </a-form-item>
-      </Form>
+      </a-form>
     )
   },
 }

components/input/Input.jsx

@@ -1,8 +1,8 @@
-
+import classNames from 'classnames'
 import TextArea from './TextArea'
 import omit from 'omit.js'
 import inputProps from './inputProps'
-import { hasProp, getComponentFromProp } from '../_util/props-util'
+import { hasProp, getComponentFromProp, getStyle, getClass } from '../_util/props-util'
 
 function fixControlledValue (value) {
   if (typeof value === 'undefined' || value === null) {
@@ -12,6 +12,7 @@ function fixControlledValue (value) {
 }
 
 export default {
+  inheritAttrs: false,
   name: 'AInput',
   props: {
     ...inputProps,
@@ -96,10 +97,15 @@ export default {
         [wrapperClassName]: (addonBefore || addonAfter),
       }
 
+      const groupClassName = classNames(`${props.prefixCls}-group-wrapper`, {
+        [`${props.prefixCls}-group-wrapper-sm`]: props.size === 'small',
+        [`${props.prefixCls}-group-wrapper-lg`]: props.size === 'large',
+      })
       if (addonBefore || addonAfter) {
         return (
           <span
-            class={`${props.prefixCls}-group-wrapper`}
+            class={groupClassName}
+            style={getStyle(this)}
           >
             <span class={className}>
               {addonBefore}
@@ -118,7 +124,7 @@ export default {
       )
     },
     renderLabeledIcon (children) {
-      const { prefixCls } = this.$props
+      const { prefixCls, size } = this.$props
       let prefix = getComponentFromProp(this, 'prefix')
       let suffix = getComponentFromProp(this, 'suffix')
       if (!prefix && !suffix) {
@@ -136,10 +142,14 @@ export default {
           {suffix}
         </span>
       ) : null
-
+      const affixWrapperCls = classNames(getClass(this), `${prefixCls}-affix-wrapper`, {
+        [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
+        [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
+      })
       return (
         <span
-          class={`${prefixCls}-affix-wrapper`}
+          class={affixWrapperCls}
+          style={getStyle(this)}
         >
           {prefix}
           {children}
@@ -167,7 +177,7 @@ export default {
           keydown: handleKeyDown,
           input: handleChange,
         },
-        class: getInputClassName(),
+        class: classNames(getInputClassName(), getClass(this)),
         ref: 'input',
       }
       return this.renderLabeledIcon(