feat(Form): support size to control margin between FormItems, close #499

components/form/demos/layout.md

@@ -3,22 +3,29 @@ title: 表单布局
 order: 5
 ---
 
-通过`layout`指定表单布局：`horizontal`, `vertical`, `inline`
+通过`layout`指定表单布局：`horizontal`, `vertical`, `inline`，还可以通过`size`控制`FormItem`的间距
 
 ```vdt
 import {Form, FormItem} from 'kpc/components/form';
 import {Input} from 'kpc/components/input';
 import {Select, Option} from 'kpc/components/select';
 import {ButtonGroup, Button} from 'kpc/components/button';
 
-<Form layout={{ self.get('layout') }}>
+<Form layout={{ self.get('layout') }} size={{ self.get('size') }}>
     <FormItem label="Layout">
         <ButtonGroup checkType="radio" v-model="layout">
             <Button value="horizontal">horizontal</Button>
             <Button value="vertical">vertical</Button>
             <Button value="inline">inline</Button>
         </ButtonGroup>
     </FormItem>
+    <FormItem label="Size">
+        <ButtonGroup checkType="radio" v-model="size">
+            <Button value="default">default</Button>
+            <Button value="small">small</Button>
+            <Button value="mini">mini</Button>
+        </ButtonGroup>
+    </FormItem>
     <FormItem label="Input" model="model.input" rules={{ {required: true} }}>
         <Input v-model="model.input" />
     </FormItem>
@@ -48,6 +55,7 @@ export default class extends Intact {
                 checkbox: [],
             },
             layout: 'horizontal',
+            size: 'default',
         };
     }
 }

components/form/form.js

@@ -5,9 +5,9 @@ import '../../styles/kpc.styl';
 import './index.styl';
 
 export default class Form extends Intact {
-    static methods = methods; 
+    static methods = methods;
 
-    static messages = messages; 
+    static messages = messages;
 
     static classNames = classNames;
 
@@ -22,6 +22,7 @@ export default class Form extends Intact {
         labelWidth: [String, Number],
         layout: ['horizontal', 'vertical', 'inline'],
         starOnRequired: Boolean,
+        size: ['default', 'small', 'mini'],
     };
 
     static events = {
@@ -35,6 +36,7 @@ export default class Form extends Intact {
             labelWidth: undefined,
             layout: 'horizontal',
             starOnRequired: false,
+            size: 'default',
         }
     }
 

components/form/form.vdt

@@ -1,11 +1,12 @@
 import {getRestProps} from '../utils';
 
-const {children, className, layout} = self.get();
+const {children, className, layout, size} = self.get();
 
 const classNameObj = {
     'k-form': true,
     [className]: className,
     [`k-${layout}`]: layout,
+    [`k-${size}`]: size !== 'default',
 };
 
 <form {{ ...getRestProps(self) }} class={{ classNameObj }}

components/form/index.md

@@ -29,6 +29,7 @@ sidebar: doc
 | isDirty | 组件是否被污染，组件只有被污染后，才会进行表单验证 | `Boolean` | `false` |
 | force | 如果组件被污染，让`FormItem`更新时，强制验证。你也可以配合`isDirty`属性，指定强制验证的时机 [#6][1]。`force`的意思是：在组件的`update`生命周期函数中去调用`validate`验证`FormItem`；默认情况下组件会`watch` `rules`以及`model`，只有在它们变化时才验证 | `Boolean` | `false` |
 | fluid | `FormItem`的宽度默认是被子元素撑开的，添加该属性可以渲染`100%`的宽度 | `Boolean` | `false` |
+| size | 控制`FormItem`的间距 | `"default"` | `"small"` | `"mini"` | `"default"` |
 
 # 扩展点
 

components/form/index.styl

@@ -93,6 +93,13 @@
             text-align left
             line-height inherit
             margin-bottom $form-item-vertical-label-margin-bottom 
-
+    // size
+    for size in small mini
+        &.k-{size}
+            .k-form-item
+                margin lookup('$form-' + size + '-item-margin')
+            &.k-inline
+                .k-form-item
+                    margin-right lookup('$form-' + size + '-item-inline-margin-right')
 
 requireTheme('form')

components/form/variables.styl

@@ -18,5 +18,11 @@ $form-item-invalid-border := 1px solid $danger-color
 $form-item-append-padding := 0 unit(10 / $rem, rem)
 
 // layout
-$form-item-inline-margin-right := unit(16 / $rem, rem)
+$form-item-inline-margin-right := unit(15 / $rem, rem)
 $form-item-vertical-label-margin-bottom := unit(8 / $rem, rem)
+
+// size
+$form-small-item-margin := 0 0 unit(15 / $rem, rem) 0
+$form-small-item-inline-margin-right := unit(10 / $rem, rem)
+$form-mini-item-margin := 0 0 unit(10 / $rem, rem) 0
+$form-mini-item-inline-margin-right := unit(5 / $rem, rem)

components/input/demos/textarea.md

@@ -11,6 +11,7 @@ import Input from 'kpc/components/input';
 <div>
     <Input type="textarea" placeholder="please enter" />
     <br />
+    <br />
     <Input type="textarea" rows="5" placeholder="please enter" />
 </div>
 ```

components/input/index.styl

@@ -146,6 +146,7 @@
         padding $input-textarea-padding
         height auto
         line-height 1.5
+        vertical-align top
 
     // fake dom for get value's width
     .k-fake

components/tooltip/index.spec.js

@@ -13,13 +13,13 @@ import {mount, unmount, dispatchEvent, getElement, wait} from 'test/utils';
 describe('Tooltip', () => {
     let instance;
 
-    // afterEach((done) => {
-        // if (instance) {
-            // unmount(instance);
-            // instance = null;
-        // }
-        // setTimeout(done, 500);
-    // });
+    afterEach((done) => {
+        if (instance) {
+            unmount(instance);
+            instance = null;
+        }
+        setTimeout(done, 500);
+    });
 
     it('should show and hide content correctly', async () => {
         instance = mount(BasicDemo);

styles/themes/ksyun/index.styl

@@ -338,4 +338,14 @@ $colorpicker-small-padding := 2px
 $colorpicker-mini-width := 40px 
 $colorpicker-mini-padding = 1px
 
+/**
+ * form
+ */
+$form-item-margin := 0 0 24px 0
+$form-item-inline-margin-right := 16px
+$form-small-item-margin := 0 0 16px 0
+$form-small-item-inline-margin-right := 12px
+$form-mini-item-margin := 0 0 8px 0
+$form-mini-item-inline-margin-right := 8px
+
 @require('../default.styl')