feat: From 组件新增 labelCol、wrapperCol (#1365)

* From 组件新增 labelCol、wrapperCol

* 1 Form 组件 types 补充
2 Button 组件 文档优化
3 Radio 组件 样式优化

Author: PanStar

components/button/demo/basic.md

@@ -1,11 +1,11 @@
 <cn>
 #### 按钮类型
-按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+按钮有五种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
 </cn>
 
 <us>
 #### Type
-There are `primary` button, `default` button, `dashed` button and `danger` button and `link` button in antd.
+There are `primary` button, `default` button, `dashed` button , `danger` button and `link` button in antd.
 </us>
 
 ```tpl

components/form/Form.jsx

@@ -1,5 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
+import { ColProps } from '../grid/Col';
 import Vue from 'vue';
 import isRegExp from 'lodash/isRegExp';
 import warning from '../_util/warning';
@@ -59,6 +60,8 @@ export const WrappedFormUtils = {
 
 export const FormProps = {
   layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
+  labelCol: PropTypes.shape(ColProps).loose,
+  wrapperCol: PropTypes.shape(ColProps).loose,
   form: PropTypes.object,
   // onSubmit: React.FormEventHandler<any>;
   prefixCls: PropTypes.string,

components/form/FormItem.jsx

@@ -314,7 +314,8 @@ export default {
     },
 
     renderWrapper(prefixCls, children) {
-      const { wrapperCol = {} } = this;
+      const { FormProps: { wrapperCol: wrapperColForm = {} } = {} } = this;
+      const { wrapperCol = wrapperColForm } = this;
       const { class: cls, style, id, on, ...restProps } = wrapperCol;
       const className = classNames(`${prefixCls}-item-control-wrapper`, cls);
       const colProps = {
@@ -369,7 +370,8 @@ export default {
     },
 
     renderLabel(prefixCls) {
-      const { labelCol = {}, colon, id } = this;
+      const { FormProps: { labelCol: labelColForm = {} } = {} } = this;
+      const { labelCol = labelColForm, colon, id } = this;
       const label = getComponentFromProp(this, 'label');
       const required = this.isRequired();
       const {

components/form/demo/validate-other.vue

@@ -9,13 +9,13 @@ Demonstration of validation configuration for form controls which are not shown
 </us>
 
 <template>
-  <a-form id="components-form-demo-validate-other" :form="form" @submit="handleSubmit">
-    <a-form-item v-bind="formItemLayout" label="Plain Text">
+  <a-form id="components-form-demo-validate-other" :form="form" v-bind="formItemLayout" @submit="handleSubmit">
+    <a-form-item label="Plain Text">
       <span class="ant-form-text">
         China
       </span>
     </a-form-item>
-    <a-form-item v-bind="formItemLayout" label="Select" has-feedback>
+    <a-form-item label="Select" has-feedback>
       <a-select
         v-decorator="[
           'select',
@@ -32,7 +32,7 @@ Demonstration of validation configuration for form controls which are not shown
       </a-select>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Select[multiple]">
+    <a-form-item label="Select[multiple]">
       <a-select
         v-decorator="[
           'select-multiple',
@@ -57,25 +57,25 @@ Demonstration of validation configuration for form controls which are not shown
       </a-select>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="InputNumber">
+    <a-form-item label="InputNumber">
       <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
       <span class="ant-form-text">
         machines
       </span>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Switch">
+    <a-form-item label="Switch">
       <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Slider">
+    <a-form-item label="Slider">
       <a-slider
         v-decorator="['slider']"
         :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
       />
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Radio.Group">
+    <a-form-item label="Radio.Group">
       <a-radio-group v-decorator="['radio-group']">
         <a-radio value="a">
           item 1
@@ -89,7 +89,7 @@ Demonstration of validation configuration for form controls which are not shown
       </a-radio-group>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Radio.Button">
+    <a-form-item label="Radio.Button">
       <a-radio-group v-decorator="['radio-button']">
         <a-radio-button value="a">
           item 1
@@ -103,7 +103,7 @@ Demonstration of validation configuration for form controls which are not shown
       </a-radio-group>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Checkbox.Group">
+    <a-form-item label="Checkbox.Group">
       <a-checkbox-group
         v-decorator="['checkbox-group', { initialValue: ['A', 'B'] }]"
         style="width: 100%;"
@@ -138,15 +138,11 @@ Demonstration of validation configuration for form controls which are not shown
       </a-checkbox-group>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Rate">
+    <a-form-item label="Rate">
       <a-rate v-decorator="['rate', { initialValue: 3.5 }]" allow-half />
     </a-form-item>
 
-    <a-form-item
-      v-bind="formItemLayout"
-      label="Upload"
-      extra="longgggggggggggggggggggggggggggggggggg"
-    >
+    <a-form-item label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
       <a-upload
         v-decorator="[
           'upload',
@@ -163,7 +159,7 @@ Demonstration of validation configuration for form controls which are not shown
       </a-upload>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Dragger">
+    <a-form-item label="Dragger">
       <div class="dropbox">
         <a-upload-dragger
           v-decorator="[

components/form/index.en-US.md

@@ -7,6 +7,8 @@
 | form | Decorated by `Form.create()` will be automatically set `this.form` property, so just pass to form. If you use the template syntax, you can use `this.$form.createForm(this, options)` | object | n/a |
 | hideRequiredMark | Hide required mark of all form items | Boolean | false |
 | layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
+| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) |  |
+| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) |  |
 | autoFormCreate(deprecated) | Automate Form.create, Recommended for use under the `template` component, and cannot be used with `Form.create()`. You should use `$form.createForm` to instead it after 1.1.9. | Function(form) |  |
 | options(deprecated) | The `options` corresponding to `Form.create(options)`. You should use `$form.createForm` to instead it after 1.1.9. | Object | {} |
 

components/form/index.zh-CN.md

@@ -7,6 +7,8 @@
 | form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，如果使用 template 语法，可以使用 this.\$form.createForm(this, options) | object | 无 |
 | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
 | layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
+| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) |  |
+| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) |  |
 | selfUpdate | 自定义字段更新逻辑，说明[见下](/components/form-cn/#selfUpdate)，需 1.3.17 版本以上 | boolean | false |
 
 ### 事件

components/radio/style/index.less

@@ -184,18 +184,18 @@ span.@{radio-prefix-cls} + * {
     line-height: @input-height-sm - 2px;
   }
 
-  &:not(:first-child) {
-    &::before {
-      position: absolute;
-      top: 0;
-      left: -1px;
-      display: block;
-      width: 1px;
-      height: 100%;
-      background-color: @border-color-base;
-      content: '';
-    }
-  }
+  // &:not(:first-child) {
+  //   &::before {
+  //     position: absolute;
+  //     top: 0;
+  //     left: -1px;
+  //     display: block;
+  //     width: 1px;
+  //     height: 100%;
+  //     background-color: @border-color-base;
+  //     content: '';
+  //   }
+  // }
   &:first-child {
     border-left: @border-width-base @border-style-base @border-color-base;
     border-radius: @border-radius-base 0 0 @border-radius-base;

types/form/form.d.ts

@@ -3,6 +3,7 @@
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
 import { AntdComponent } from '../component';
+import { Col } from '../grid/col';
 import Vue from 'vue';
 import { FormItem } from './form-item';
 
@@ -348,13 +349,25 @@ export declare class Form extends AntdComponent {
    */
   hideRequiredMark: boolean;
 
+  /**
+   * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>
+   * @type Col
+   */
+  labelCol: Col;
+
   /**
    * Define form layout
    * @default 'horizontal'
    * @type string
    */
   layout: 'horizontal' | 'inline' | 'vertical';
 
+  /**
+   * The layout for input controls, same as labelCol
+   * @type Col
+   */
+  wrapperCol: Col;
+
   /**
    * Automate Form.create, Recommended for use under the template component, and cannot be used with Form.create().
    * You should use $form.createForm to instead it after 1.1.9.