Merge pull request #103 from ncform/develop

feat(ncform): Add the globalConfig.scrollToFailField to support auto …

CONFIG.md

@@ -136,6 +136,12 @@
     },
     constants: { // Global constant configuration, can be accessed by {{$const.userName}}
       userName: 'daniel'
+    },
+    scrollToFailField: { // Automatically scroll to fields that failed validation
+      enabled: true, // Enable this feature or not
+      container: 'body', // The container that has to be scrolled.
+      duration: 500, // The duration (in milliseconds) of the scrolling animation
+      offset: -80, // The offset that should be applied when scrolling. 
     }
   }
 }

CONFIG_CN.md

@@ -137,6 +137,12 @@
     },
     constants: { // 全局常量配置，可在dx表达中通过{{$const.}}来访问，如{{$const.userName}}
       userName: 'daniel'
+    },
+    scrollToFailField: { // 自动滚动到校验失败的字段
+      enabled: true, // 是否开启
+      container: 'body', // 滚动的容器。
+      duration: 500, // 滚动动画的持续时间(以毫秒为单位)
+      offset: -80, // 滚动时的偏移量
     }
   }
 }

packages/ncform-common/src/ncform-utils.js

@@ -142,6 +142,12 @@ const ncformUtils = {
           validationMsg: {},
           constants: {
             // 常量数据，可通过{{$const.}}访问
+          },
+          scrollToFailField: { // Automatically scroll to fields that failed validation
+            enabled: true, // enable this feature or not
+            container: 'body',
+            duration: 500, // The duration (in milliseconds) of the scrolling animation
+            offset: -80, // The offset that should be applied when scrolling.
           }
         };
         newFieldVal.globalConfig = newFieldVal.globalConfig || {};

packages/ncform-common/test/unit/ncform-utils.js

@@ -84,7 +84,13 @@ describe('/src/ncform-utils.js', () => {
         invalidFeedbackCls: ""
       },
       validationMsg: {},
-      constants: {}
+      constants: {},
+      scrollToFailField: { // Automatically scroll to fields that failed validation
+        enabled: true, // enable this feature or not
+        container: 'body',
+        duration: 500, // The duration (in milliseconds) of the scrolling animation
+        offset: -80, // The offset that should be applied when scrolling.
+      }
     })
     assert.equal(newFormSchema.properties.name.ui.label, 'name');
     assert.equal(newFormSchema.properties.name.ui.showLabel, true);

packages/ncform/examples/components/vue-ncform/_globalConfig.html

@@ -27,7 +27,7 @@
           <div v-if="item.validPass !== undefined">valid pass: {{ item.validPass }}</div>
 
           <button
-            v-if="['ignoreRulesWhenHidden is true', 'ignoreRulesWhenHidden is false'].indexOf(item.title) >= 0"
+            v-if="['ignoreRulesWhenHidden is true', 'ignoreRulesWhenHidden is false', 'auto scroll to first error'].indexOf(item.title) >= 0"
             class="btn btn-primary"
             @click="submit(item)"
           >
@@ -191,6 +191,39 @@
                   }
                 }
               }
+            },
+            {
+              id: md5('auto scroll to first error'),
+              title: 'auto scroll to first error',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  name: {
+                    type: 'string',
+                    rules: {
+                      required: true
+                    }
+                  },
+                  a1: {
+                    type: 'string',
+                  },
+                  a2: {
+                    type: 'string',
+                  },
+                  a3: {
+                    type: 'string',
+                  }
+                },
+                globalConfig: {
+                  scrollToFailField: {
+                    enabled: true,
+                    container: 'body',
+                    duration: 1000,
+                    offset: -120,
+                  }
+                }
+              }
             }
           ]
         },

packages/ncform/package.json

@@ -71,7 +71,8 @@
     "axios": "^0.18.0",
     "extend": "^3.0.1",
     "lodash-es": "^4.16.2",
-    "vue": "^2.1.8"
+    "vue": "^2.1.8",
+    "vue-scrollto": "^2.17.1"
   },
   "publishConfig": {
     "access": "public"

packages/ncform/src/components/vue-ncform/index.js

@@ -1,5 +1,6 @@
 import _map from "lodash-es/map";
 import _kebabCase from "lodash-es/kebabCase";
+import VueScrollTo from "vue-scrollto";
 import ncform from "./ncform.vue";
 import RegularValidation from "../../regular-validation";
 
@@ -49,7 +50,20 @@ module.exports = {
         return Promise.resolve(false);
       }
 
-      return vm.ncformValidate();
+      return vm.ncformValidate().then(data => {
+        const config = vm.dataFormSchema.globalConfig.scrollToFailField;
+        if (!data.result && config.enabled) {
+          const firstErrorElem = Array.prototype.slice.call(vm.$el.querySelectorAll('.invalid-feedback')).find(elem => elem.style.display !== 'none');
+          if (firstErrorElem) {
+            VueScrollTo.scrollTo(firstErrorElem, {
+              container: config.container,
+              duration: config.duration,
+              offset: config.offset
+            });
+          }
+        }
+        return data;
+      });
     };
 
     Vue.prototype.$ncformReset = function(formName) {