From ad14a3f40b93b49320be925423d48ad74b316fe3 Mon Sep 17 00:00:00 2001
From: Javey <jiawei23716@sina.com>
Date: Mon, 6 Jul 2020 18:35:20 +0800
Subject: [PATCH] feat(Form): support size to control margin between FormItems,
 close #499

---
 components/form/demos/layout.md    | 12 ++++++++++--
 components/form/form.js            |  6 ++++--
 components/form/form.vdt           |  3 ++-
 components/form/index.md           |  1 +
 components/form/index.styl         |  9 ++++++++-
 components/form/variables.styl     |  8 +++++++-
 components/input/demos/textarea.md |  1 +
 components/input/index.styl        |  1 +
 components/tooltip/index.spec.js   | 14 +++++++-------
 styles/themes/ksyun/index.styl     | 10 ++++++++++
 10 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/components/form/demos/layout.md b/components/form/demos/layout.md
index af4719847..4ef6d887e 100644
--- a/components/form/demos/layout.md
+++ b/components/form/demos/layout.md
@@ -3,7 +3,7 @@ title: 表单布局
 order: 5
 ---
 
-通过`layout`指定表单布局：`horizontal`, `vertical`, `inline`
+通过`layout`指定表单布局：`horizontal`, `vertical`, `inline`，还可以通过`size`控制`FormItem`的间距
 
 ```vdt
 import {Form, FormItem} from 'kpc/components/form';
@@ -11,7 +11,7 @@ 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>
@@ -19,6 +19,13 @@ import {ButtonGroup, Button} from 'kpc/components/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',
         };
     }
 }
diff --git a/components/form/form.js b/components/form/form.js
index ac54fc909..617059542 100644
--- a/components/form/form.js
+++ b/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',
         }
     }
 
diff --git a/components/form/form.vdt b/components/form/form.vdt
index f1fa63e4c..66e21b154 100644
--- a/components/form/form.vdt
+++ b/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 }}
diff --git a/components/form/index.md b/components/form/index.md
index 4b3fef21a..7f83e9c9d 100644
--- a/components/form/index.md
+++ b/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"` &#124; `"small"` &#124; `"mini"` | `"default"` |
 
 # 扩展点
 
diff --git a/components/form/index.styl b/components/form/index.styl
index 7e1b3f87b..565b0ec30 100644
--- a/components/form/index.styl
+++ b/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')
diff --git a/components/form/variables.styl b/components/form/variables.styl
index 1d877626c..396c9302d 100644
--- a/components/form/variables.styl
+++ b/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)
diff --git a/components/input/demos/textarea.md b/components/input/demos/textarea.md
index 16c538b53..fc8876a9b 100644
--- a/components/input/demos/textarea.md
+++ b/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>
 ```
diff --git a/components/input/index.styl b/components/input/index.styl
index aab37b793..289f5f67b 100644
--- a/components/input/index.styl
+++ b/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
diff --git a/components/tooltip/index.spec.js b/components/tooltip/index.spec.js
index bb5126f32..abc62eef3 100644
--- a/components/tooltip/index.spec.js
+++ b/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);
diff --git a/styles/themes/ksyun/index.styl b/styles/themes/ksyun/index.styl
index ef57a3403..22d7a5b78 100644
--- a/styles/themes/ksyun/index.styl
+++ b/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')