refactor(form): working in progress, styles, dom structure

packages/common/Form/src/FormItem.vue

@@ -2,8 +2,11 @@
   <div
     class="n-form-item"
     :class="{
-      [`n-form-item--${synthesizedLabelPosition}-label`]: synthesizedLabelPosition,
+      [`n-form-item--${synthesizedLabelPosition}-labelled`]: synthesizedLabelPosition,
-      [`n-form-item--required`]: synthesizedRequired
+      [`n-form-item--required`]: synthesizedRequired,
+      [`n-form-item--no-label`]: !(label || $slots.label),
+      [`n-form-item--has-feedback`]: hasFeedback,
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
   >
     <label
@@ -11,29 +14,31 @@
       :class="`n-form-item-label`"
       :style="synthesizedLabelStyle"
     >
-      <span :class="`n-form-item-label__span`">
+      <template v-if="$slots.label">
-        <template v-if="$slots.label">
+        <slot name="label" />
-          <slot name="label" />
+      </template>
-        </template>
+      <template v-else>
-        <template v-else>
+        {{ label }}
-          {{ label }}
+      </template>
-        </template>
-      </span>
     </label>
     <div
-      class="n-form-item-content"
+      class="n-form-item-blank"
-      :class="validated ? `n-form-item-content--error` : `n-form-item-content--pass`"
+      :class="validated ? `n-form-item-blank--error` : `n-form-item-blank--pass`"
     >
       <slot />
-      <div :class="`n-form-item-explain`">
-        <transition name="n-fade-down">
-          <span
-            v-if="explain"
-            class="n-form-item-explain__content"
-          >{{ explain }}</span>
-        </transition>
-      </div>
     </div>
+    <transition
+      name="n-fade-down"
+      @before-enter="handleBeforeEnter"
+      @after-leave="handleAfterLeave"
+    >
+      <div
+        v-if="explain"
+        class="n-form-item-feedback"
+      >
+        {{ explain }}
+      </div>
+    </transition>
   </div>
 </template>
 <script>
@@ -97,7 +102,8 @@ export default {
   data () {
     return {
       explain: null,
-      validated: false
+      validated: false,
+      hasFeedback: false
     }
   },
   computed: {
@@ -227,6 +233,12 @@ export default {
         this.$on('focus', this.handleContentFocus)
         this.$on('change', this.handleContentChange)
       }
+    },
+    handleBeforeEnter () {
+      this.hasFeedback = true
+    },
+    handleAfterLeave () {
+      this.hasFeedback = false
     }
   }
 }

packages/common/Input/src/main.vue

@@ -198,7 +198,7 @@ export default {
     },
     lazyFocus: {
       type: Boolean,
-      default: true
+      default: false
     },
     forceFocus: {
       type: Boolean,

styles/Form.scss

@@ -4,11 +4,10 @@
 @include b(form) {
   width: 100%;
   font-size: 14px;
-  color: rgba(255, 255, 255, 1);
   @include m(inline) {
     width: 100%;
     display: inline-flex;
-    align-items: flex-end;
+    align-items: flex-start;
     align-content: space-around;
     @include b(form-item) {
       width: auto;
@@ -17,95 +16,51 @@
       }
     }
   }
-  .n-form-item__label--top {
-    display: block;
-    .n-form-item__label {
-      display: block;
-      padding-top: 0;
-      overflow-wrap: unset;
-      padding-top: 0;
-      align-items: center;
-      text-align: left;
-    }
-  }
-  .n-form-item__label--require .n-form-item__label-span::before {
-    float: right;
-    content: '*';
-    color:rgba(255, 146, 164, 1);
-    margin-left: 5px;
-  }
-  .n-form-item__label--left .n-form-item__label {
-    text-align: left;
-  }
-  .n-form-item__label--right .n-form-item__label {
-    text-align: right;
-  }
-  .n-form-item__label--center .n-form-item__label {
-    text-align: center;
-  }
-  .n-form--disable {
-    box-shadow: inset 0 0 0px 1px rgb(99, 96, 96);
-    background-color: rgba(255, 255, 255, 0.1);
-    cursor: not-allowed;
-    &:hover {
-      box-shadow: inset 0 0 0px 1px rgb(99, 96, 96);
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
 }
 
-@include b(form-item) {
+@include themes-mixin {
-  display: flex;
+  @include b(form-item) {
-  width: 100%;
+    display: flex;
-  align-items: center;
+    width: 100%;
-  margin-bottom: 24px;
+    align-items: center;
-  @include m(top-label) {
+    margin-bottom: 24px;
-    align-items: flex-start;
+    @include m(top-labelled) {
-    flex-direction: column;
+      align-items: flex-start;
-    margin: 0 18px 0 0;
+      flex-direction: column;
+      margin-right: 18px;
+      @include m(no-label) {
+        padding-top: 22px;
+      }
+      @include b(form-item-label) {
+        width: 100%;
+        padding-bottom: 8px;
+        padding-left: 2px;
+      }
+    }
+    @include m(has-feedback) {
+      margin-bottom: 2px;
+    }
     @include b(form-item-label) {
-      width: 100%;
+      transition: color .3s $default-cubic-bezier;
-      padding-bottom: 8px;
+      color: $--n-text-color;
+      height: 22px;
+      box-sizing: border-box;
+      font-size: 13px;
+    }
+    @include b(form-item-blank) {
+      position: relative;
+      flex-grow: 1;
+    }
+    @include b(form-item-feedback) {
       padding-left: 2px;
-    }
+      padding-top: 6px;
-  }
+      box-sizing: border-box;
-  @include b(form-item-label) {
+      min-height: 20px;
-    height: 22px;
+      color: $--error-6;
-    box-sizing: border-box;
+      font-size: 13px;
-    font-size: 13px;
+      transform-origin: top left;
-  }
+      transition: color .3s $default-cubic-bezier;
-  @include b(form-item-content) {
-    position: relative;
-    flex-grow: 1;
-  }
-  @include b(form-item-explain) {
-    box-sizing: border-box;
-    margin-top: 4px;
-    min-height: 20px;
-    line-height: 1.5;
-    color: rgba(255, 146, 164, 1);
-    font-size: 13px;
-    padding-left: 2px;
-    transform-origin: top left;
-    @include e(content) {
-      display: inline-block;
       @include fade-down-transition($from-offset: -3px);
-      // @include fade-in-scale-up-transition();
+    } 
-    }
   }
-  .n-form-item__content--pass {
+}
-    .n-form-item__validate {
-      visibility: hidden;
-    }
-  }
-  .n-form-item__content--error {
-    .n-form-item__validate {
-      visibility: visible;
-    }
-    // 后期可以通过属性优化, 精确定位
-    input, select, textarea {
-      box-shadow: inset 0 0 0px 1px rgba(255, 146, 164, 1);
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-}