chore(form): some functional fix

demo/documentation/components/form/enUS/left.md

@@ -3,51 +3,37 @@
 <n-form
   :model="model"
   ref="form"
-  label-position="left"
-  :label-width="120"
+  label-placement="left"
   label-align="right"
+  :label-width="160"
   :style="{
-    maxWidth: '600px'
+    maxWidth: '640px'
   }"
 >
-  <n-form-item-row label="Trigger Name" path="name" required>
-    <n-input placeholder="Trigger Name" v-model="model.name" />
+  <n-form-item-row label="Input" path="inputValue" required>
+    <n-input placeholder="Input" v-model="model.inputValue" />
   </n-form-item-row>
-  <n-form-item-row label="Description" path="description" required>
-    <n-input placeholder="Description" v-model="model.description" />
+  <n-form-item-row label="Textarea" path="textareaValue" required>
+    <n-input placeholder="Textarea" v-model="model.textareaValue" type="textarea"
+      :autosize="{
+        minRows: 3,
+        maxRows: 5
+      }"
+    />
   </n-form-item-row>
-  <n-form-item-row label="Trigger Type" path="type" required>
-    <n-select placeholder="Trigger Type" :options="generalOptions" v-model="model.type"/>
+  <n-form-item-row label="Select" path="selectValue" required>
+    <n-select placeholder="Select" :options="generalOptions" v-model="model.selectValue"/>
   </n-form-item-row>
-  <n-form-item-row label="Start Time" path="startTime" required>
-    <n-date-picker type="datetime" v-model="model.startTime"/>
+  <n-form-item-row label="Multiple Select" path="multipleSelectValue" required>
+    <n-select placeholder="Select" :options="generalOptions" v-model="model.multipleSelectValue" multiple/>
   </n-form-item-row>
-  <n-form-item-row  :gutter="[28, 0]" label="Interval">
-    <n-row :gutter="[28, 0]" >
-      <n-form-item-col :span="12" path="interval.value" required>
-        <n-input placeholder="Interval" v-model="model.interval.value"/>
-      </n-form-item-col>
-      <n-form-item-col :span="12" path="interval.unit" required>
-        <n-select placeholder="Interval Unit" :options="generalOptions" v-model="model.interval.unit"/>
-      </n-form-item-col>
-    </n-row>
+  <n-form-item-row label="Datetime" path="datetimeValue" required>
+    <n-date-picker type="datetime" v-model="model.datetimeValue"/>
   </n-form-item-row>
-  <n-form-item-row label="Status" path="status.value" required>
-    <n-select placeholder="Status" :options="generalOptions" v-model="model.status.value"/>
+  <n-form-item-row label="Switch" path="switchValue" required>
+    <n-switch v-model="model.switchValue" />
   </n-form-item-row>
-  <n-form-item-row label="Type" path="status.type" required>
-    <n-select placeholder="Type" :options="generalOptions" v-model="model.status.type"/>
-  </n-form-item-row>
-  <n-form-item-row label="Tmpfs" path="Tmpfs" required>
-    <n-input v-model="model.Tmpfs" />
-  </n-form-item-row>
-  <n-form-item-row label="Shm Size" path="shmSize" required>
-    <n-input v-model="model.shmSize" />
-  </n-form-item-row>
-  <n-form-item-row label="Host" path="host" required>
-    <n-switch v-model="model.host" />
-  </n-form-item-row>
-  <n-form-item-row label="Checkbox" path="checkboxGroupValue" required>
+  <n-form-item-row label="Checkbox Group" path="checkboxGroupValue" required>
     <n-checkbox-group v-model="model.checkboxGroupValue">
       <n-checkbox value="Option 1">Option 1</n-checkbox>
       <n-checkbox value="Option 2">Option 2</n-checkbox>
@@ -61,7 +47,7 @@
       <n-radio value="Radio 3">Radio 3</n-radio>
     </n-radio-group>
   </n-form-item-row>
-  <n-form-item-row label="Radio Group" path="radioGroupValue" required>
+  <n-form-item-row label="Radio Button Group" path="radioGroupValue" required>
     <n-radio-group v-model="model.radioGroupValue">
       <n-radio-button value="Radio 1">Radio 1</n-radio-button>
       <n-radio-button value="Radio 2">Radio 2</n-radio-button>
@@ -71,12 +57,28 @@
   <n-form-item-row label="Input Number" path="inputNumberValue" required>
     <n-input-number v-model="model.inputNumberValue"/>
   </n-form-item-row>
-  <n-form-item-row :gutter="24" label="Time Picker" path="timePickerValue" required>
+  <n-form-item-row label="Time Picker" path="timePickerValue" required>
     <n-time-picker v-model="model.timePickerValue" />
   </n-form-item-row>
-  <n-form-item-row :gutter="24" label="Slider" path="sliderValue" required>
+  <n-form-item-row label="Slider" path="sliderValue" required>
     <n-slider v-model="model.sliderValue" :step="5"/>
   </n-form-item-row>
+  <n-form-item-row label="Transfer" path="transferValue" required>
+    <n-transfer
+      v-model="model.transferValue"
+      :options="generalOptions"
+    />
+  </n-form-item-row>
+  <n-form-item-row  :gutter="[28, 0]" label="Nested Path">
+    <n-row :gutter="[28, 0]" >
+      <n-form-item-col :span="12" path="nestedValue.path1" required>
+        <n-input placeholder="Nested Path 1" v-model="model.nestedValue.path1"/>
+      </n-form-item-col>
+      <n-form-item-col :span="12" path="nestedValue.path2" required>
+        <n-select placeholder="Nested Path 2" :options="generalOptions" v-model="model.nestedValue.path2"/>
+      </n-form-item-col>
+    </n-row>
+  </n-form-item-row>
   <n-row :gutter="[0, 24]">
     <n-col :span="24">
       <div style="display: flex; justify-content: flex-end;">
@@ -96,27 +98,23 @@ export default {
   data () {
     return {
       model: {
-        name: null,
-        description: null,
-        type: null,
-        startTime: null,
-        interval: {
-          value: null,
-          unit: null
+        inputValue: null,
+        textareaValue: null,
+        selectValue: null,
+        multipleSelectValue: null,
+        datetimeValue: null,
+        nestedValue: {
+          path1: null,
+          path2: null
         },
-        status: {
-          value: null,
-          type: null
-        },
-        host: false,
-        tmpfs: null,
-        shmSize: null,
+        switchValue: false,
         checkboxGroupValue: null,
         radioGroupValue: null,
         radioButtonGroupValue: null,
         inputNumberValue: null,
         timePickerValue: null,
-        sliderValue: 0
+        sliderValue: 0,
+        transferValue: null
       },
       generalOptions: [
         'groode',

packages/common/Cascader/src/BaseCascader.vue

@@ -87,6 +87,7 @@ import themeable from '../../../mixins/themeable'
 import clickoutside from '../../../directives/clickoutside'
 import CascaderMenu from './CascaderMenu'
 import { getType, traverseWithCallback } from './utils'
+import asformitem from '../../../mixins/asformitem'
 
 import {
   rootedOptions,
@@ -107,7 +108,7 @@ export default {
   directives: {
     clickoutside
   },
-  mixins: [withapp, themeable, detachable, toggleable, placeable],
+  mixins: [withapp, themeable, detachable, toggleable, placeable, asformitem()],
   props: {
     options: {
       type: Array,

packages/common/Form/src/FormItem.vue

@@ -2,12 +2,11 @@
   <div
     class="n-form-item"
     :class="{
-      [`n-form-item--${synthesizedLabelPosition}-labelled`]: synthesizedLabelPosition,
+      [`n-form-item--${synthesizedLabelPlacement}-labelled`]: synthesizedLabelPlacement,
       [`n-form-item--${synthesizedLabelAlign}-label-aligned`]: synthesizedLabelAlign,
       [`n-form-item--required`]: synthesizedRequired,
       [`n-form-item--no-label`]: !(label || $slots.label),
       [`n-form-item--has-feedback`]: hasFeedback,
-      [`n-form-item--may-have-feedback`]: path,
       [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
   >
@@ -26,21 +25,23 @@
       >
         <slot />
       </div>
-      <transition
-        name="n-fade-down"
-        @before-enter="handleBeforeEnter"
-        @after-leave="handleAfterLeave"
-      >
-        <div
-          v-if="explains.length"
-          class="n-form-item-feedback"
+      <div v-if="path" class="n-form-item-feedback-wrapper">
+        <transition
+          name="n-fade-down"
+          @before-enter="handleBeforeEnter"
+          @after-leave="handleAfterLeave"
         >
-          <span
-            v-for="(explain, i) in explains"
-            :key="i"
-          >{{ explain }}<br v-if="i + 1 !== explains.length"></span>
-        </div>
-      </transition>
+          <div
+            v-if="explains.length"
+            class="n-form-item-feedback"
+          >
+            <span
+              v-for="(explain, i) in explains"
+              :key="i"
+            >{{ explain }}<br v-if="i + 1 !== explains.length"></span>
+          </div>
+        </transition>
+      </div>
     </div>
   </div>
 </template>
@@ -75,7 +76,7 @@ export default {
       type: String,
       default: null
     },
-    labelPosition: {
+    labelPlacement: {
       type: String,
       default: null
     },
@@ -141,7 +142,7 @@ export default {
       return null
     },
     styleLabelWidth () {
-      if (this.synthesizedLabelPosition === 'top') return null
+      if (this.synthesizedLabelPlacement === 'top') return null
       if (this.synthesizedLabelWidth === null) return null
       return `${this.synthesizedLabelWidth}px`
     },
@@ -151,9 +152,9 @@ export default {
         return this.path
       } else return null
     },
-    synthesizedLabelPosition () {
-      if (this.labelPosition) return this.labelPosition
-      if (this.NForm && this.NForm.labelPosition) return this.NForm.labelPosition
+    synthesizedLabelPlacement () {
+      if (this.labelPlacement) return this.labelPlacement
+      if (this.NForm && this.NForm.labelPlacement) return this.NForm.labelPlacement
       return 'top'
     },
     synthesizedLabelAlign () {

packages/common/Form/src/main.vue

@@ -4,6 +4,7 @@
     :class="{
       'n-form--inline': inline
     }"
+    @keydown.enter.prevent="handleKeyDownEnter"
   >
     <slot />
   </form>
@@ -31,7 +32,7 @@ export default {
       type: String,
       default: 'left'
     },
-    labelPosition: {
+    labelPlacement: {
       type: String,
       default: 'top'
     },
@@ -95,6 +96,9 @@ export default {
         }
       }
       this.value = this.initialValue
+    },
+    handleKeyDownEnter () {
+
     }
   }
 }

styles/Form.scss

@@ -21,9 +21,6 @@
 @include themes-mixin {
   @include b(form-item) {
     width: 100%;
-    @include m(may-have-feedback) {
-      padding-bottom: 20px;
-    }
     @include m(right-label-aligned) {
       @include b(form-item-label) {
         text-align: right;
@@ -87,13 +84,14 @@
       }
     }
     @include b(form-item-blank) {
-      line-height: 40px;
-      min-height: 40px;
+      padding-top: 3px;
+      padding-bottom: 3px;
+      min-height: 34px;
       display: flex;
       align-items: center;
       position: relative;
     }
-    @include b(form-item-feedback) {
+    @include b(form-item-feedback-wrapper) {
       padding-left: 2px;
       padding-top: 0px;
       box-sizing: border-box;
@@ -103,7 +101,9 @@
       transform-origin: top left;
       line-height: 1.25;
       transition: color .3s $default-cubic-bezier;
-      @include fade-down-transition($from-offset: -3px);
+      @include b(form-item-feedback) {
+        @include fade-down-transition($from-offset: -3px);
+      }
     } 
   }
 }