fix: the resetFunciton of form

demo/components/formDemo.vue

@@ -271,19 +271,24 @@
             >
               The key in form-model does not support the form with ' . '.<br>
               And does not init the value of parameters with 'undefined'.<br>
-              ResetForm Method: only can reset the item with prop.<br>
+              ResetForm Method: only can reset the item with prop. And Donnot deal the nesting form context<br>
               ValidateForm Method: support validate specified items by the second parameter in form of array.<br>
             </n-form-item>
-            <n-form-item
-              :required-logo="false"
-              prop="input"
-              label="Input"
-            >
-              <n-input
-                v-model="validateForm.input"
-                placeholder="Enter string"
-              />
-            </n-form-item>
+            <n-popover>
+              <template v-slot:activator>
+                <n-form-item
+                  :required-logo="false"
+                  prop="input"
+                  label="Input"
+                >
+                  <n-input
+                    v-model="validateForm.input"
+                    placeholder="Enter string"
+                  />
+                </n-form-item>
+              </template>
+              <span>Test nesting Form Item</span>
+            </n-popover>
             <n-form-item
               prop="muti.deep.select"
               label="Select"

packages/common/Form/src/main.vue

@@ -10,6 +10,7 @@
 </template>
 <script>
 import { deepClone, getObjValue } from '../../../utils/index'
+import { debuglog } from 'util';
 
 export default {
   name: 'NForm',
@@ -100,24 +101,29 @@ export default {
     /**
      * just can reset the value with prop in form-item
      */
-    resetForm () {
-      this.$children.forEach(child => {
-        if (child.prop) {
+    resetForm (target = this) {
+      for (let i = 0; i < target.$children.length; i++) {
+        let child = target.$children[i]
+        if (child.$options.name === 'NFormItem' && child.prop) {
           let keys = child.prop.split('.')
           let obj = this.model
           let j = 0
-          keys.forEach((k, i) => {
-            if (i !== keys.length - 1) {
-              obj = obj[k]
+          keys.forEach((m, n) => {
+            if (n !== keys.length - 1) {
+              obj = obj[m]
             }
-            j = i
+            j = n
           })
           obj[keys[j]] = getObjValue(this.initialValue, keys)
           if (child.validateFlag) {
             child.clearValidateClass()
           }
+        } else if (child.$options.name === 'NForm') {
+          break
+        } else {
+          this.resetForm(child)
         }
-      })
+      }
     }
   }
 }

packages/common/Tab/src/TabPanel.vue

@@ -34,35 +34,34 @@ export default {
     cls () {
       return this.isShow ? 'n-tab-panel n-tab-panel_active' : 'n-tab-panel'
     },
-    order () {
-      return this.$vnode._NaiveTabOrder
+    offset () {
+      return this.NTab.offset
     }
   },
   watch: {
-    order: {
-
+    offset: {
+      handler (n) {
+        this.setTransfer(n)
+        console.log('zhixing', n)
+      },
+      immediate: true
     }
   },
   created () {
     this.NTab.updateLabels()
-    this.initActive()
-    // this.setTransfer('-', )
+    if (this._NaiveTabOrder === this.NTab.active) {
+      this.updateIsShow(true)
+    }
   },
   methods: {
-    updateIsShow (flag, dir = 'left') {
+    updateIsShow (flag) {
       this.isShow = flag
       // window.getComputedStyle(this.NTab.refs['slot'], null).getPropertyValue('width')
       // this.$refs['panel'].classList.toggle('n-tab-panel_active')
       // 这里应该是根据切换的方向(左右) 来设置
     },
-    setTransfer (dir, per) {
-      this.style.transform = 'translateX(' + dir + per + '%)'
-    },
-    initActive () {
-      if ((this.active || (this.NTab.name === this.name && this.name !== undefined)) && this.NTab.active === null) {
-        this.updateIsShow(true)
-        this.NTab.initActive()
-      }
+    setTransfer (per) {
+      this.style.transform = 'translateX(' + per + ')'
     }
   }
 }

packages/common/Tab/src/main.vue

@@ -39,11 +39,13 @@ export default {
   data () {
     return {
       labels: [],
-      active: null // number
+      active: null, // number
+      offset: null
     }
   },
   created () {
     this.updateOrder()
+    this.initOffset()
     // this.initActive()
   },
   beforeMount () {
@@ -79,6 +81,7 @@ export default {
         this.$children[this.active].updateIsShow(false)
         this.active = i
         this.$children[i].updateIsShow(true)
+        this.offset = '-' + this.active * 100 + '%'
       }
     },
     updateOrder () {
@@ -86,6 +89,20 @@ export default {
       this.$slots.default.forEach((i, order) => {
         i._NaiveTabOrder = order
       })
+    },
+    initOffset () {
+      // method duplicate with updateLabels
+      let order = this.$slots.default.findIndex((i) => {
+        let props = i.componentOptions.propsData
+        if ([undefined, false].indexOf(props.active) === -1) {
+          return true
+        }
+        if (this.name === props.name && this.name !== undefined) {
+          return true
+        }
+      })
+      this.active = order > -1 ? order : 0
+      this.offset = '-' + this.active * 100 + '%'
     }
   }
 }

styles/Tab.scss

@@ -20,7 +20,6 @@
   }
   .n-tab--slot {
     display: flex;
-    position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -28,12 +27,11 @@
 }
 
 @include b(tab-panel) {
-  position: absolute;
   flex-shrink: 0;
   width: 100%;
   height: 100%;
   visibility: hidden;
-  transition: width 0.3s;
+  transition: transform 0.3s;
   &.n-tab-panel_active {
     visibility: visible;
   }