@processmaker/screen-builder 2.21.1 → 2.22.0

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.21.1",
+  "version": "2.22.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1738,9 +1738,9 @@
       }
     },
     "@processmaker/vue-form-elements": {
-      "version": "0.28.2",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.28.2.tgz",
-      "integrity": "sha512-oHFBh/BTfsUmE6RXpTVbi+UfzIKdRBJWwXs2xz/N3I2e8EyQZBotOoK6uq6TsavttLZ2wm4LWKJ9kHygI3FnGw==",
+      "version": "0.28.5",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.28.5.tgz",
+      "integrity": "sha512-vnThQAH0TI/ZSMl4GPQA8H+AooPyv65RZnQzaBEWKUeFSpdwFFUJUIc1lMH4ji4L3qKPBEy/qQFhB541QFeh2w==",
       "dev": true,
       "requires": {
         "@tinymce/tinymce-vue": "2.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.21.1",
+  "version": "2.22.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -44,7 +44,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.28.2",
+    "@processmaker/vue-form-elements": "0.28.5",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -85,7 +85,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.28.1",
+    "@processmaker/vue-form-elements": "0.28.5",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/ValidationsFactory.js

@@ -167,19 +167,8 @@ class FormElementValidations extends Validations {
     }
     const fieldName = this.element.config.name;
     const validationConfig = this.element.config.validation;
+    const conditionalHide = this.element.config.conditionalHide;
 
-    // Disable validations if field is hidden
-    if (this.element.config.conditionalHide) {
-      let visible = true;
-      try {
-        visible = !!Parser.evaluate(this.element.config.conditionalHide, this.data);
-      } catch (error) {
-        visible = false;
-      }
-      if (!visible) {
-        return;
-      }
-    }
 
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
@@ -203,7 +192,22 @@ class FormElementValidations extends Validations {
           params.push(fieldName);
           validationFn = validationFn(...params);
         }
-        fieldValidation[rule] = validationFn;
+        fieldValidation[rule] = function(...props) {
+          const data = props[1];
+          const dataWithParent = this.addReferenceToParents(data);
+          let visible = true;
+          if (conditionalHide) {
+            try {
+              visible = !!Parser.evaluate(conditionalHide, dataWithParent);
+            } catch (error) {
+              visible = false;
+            }
+          }
+          if (!visible) {
+            return true;
+          }
+          return validationFn.apply(this,props);
+        };
       });
     } else if (typeof validationConfig === 'string' && validationConfig) {
       let validationFn = validators[validationConfig];
@@ -212,7 +216,22 @@ class FormElementValidations extends Validations {
         console.error(`Undefined validation rule "${validationConfig}"`);
         return;
       }
-      fieldValidation[validationConfig] = validationFn;
+      fieldValidation[validationConfig] = function(...props) {
+        const data = props[1];
+        const dataWithParent = this.addReferenceToParents(data);
+        let visible = true;
+        if (conditionalHide) {
+          try {
+            visible = !!Parser.evaluate(conditionalHide, dataWithParent);
+          } catch (error) {
+            visible = false;
+          }
+        }
+        if (!visible) {
+          return true;
+        }
+        return validationFn.apply(this,props);
+      };
     }
     if (this.element.items) {
       ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);

package/src/components/renderer/form-record-list.vue

@@ -74,6 +74,7 @@
       :title="$t('Add')"
       header-close-content="×"
       data-cy="modal-add"
+      @shown="emitShownEvent"
     >
       <vue-form-renderer
         :page="0"
@@ -99,6 +100,7 @@
       :title="$t('Edit Record')"
       header-close-content="&times;"
       data-cy="modal-edit"
+      @shown="emitShownEvent"
     >
       <vue-form-renderer
         :page="0"
@@ -259,6 +261,9 @@ export default {
     },
   },
   methods: {
+    emitShownEvent() {
+      window.ProcessMaker.EventBus.$emit('modal-shown');
+    },
     formatIfDate(string) {
       return dateUtils.formatIfDate(string);
     },

package/src/form-control-common-properties.js

@@ -96,7 +96,8 @@ export const keyNameProperty = {
   config: {
     label: 'Variable Name',
     name: 'Variable Name',
-    validation: 'regex:/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*[^.]$/|required|not_in:' + javascriptReservedKeywords,
+    // Update tests/e2e/specs/Builder.spec.js when changing this
+    validation: 'regex:/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$/|required|not_in:' + javascriptReservedKeywords,
     helper: 'A variable name is a symbolic name to reference information.',
   },
 };

package/src/mixins/ScreenBase.js

@@ -102,7 +102,15 @@ export default {
     },
     mustache(text) {
       try {
-        const data = Object.assign({_parent: this._parent}, this.vdata);
+        const data = new Proxy(this, {
+          get(target, name) {
+            if (name === '_parent') {
+              return target._parent;
+            } else {
+              return target.vdata[name];
+            }
+          },
+        });
         return text && Mustache.render(text, data);
       } catch (e) {
         return 'MUSTACHE: ' + e.message;

package/src/mixins/ValidationRules.js

@@ -23,6 +23,7 @@ import {
   and,
   maxItems,
   minItems,
+  type,
 } from 'vuelidate/lib/validators';
 
 export const ValidationMsg = {
@@ -59,6 +60,7 @@ export const ValidationMsg = {
   regex: 'Invalid value',
   maxItems: 'Should NOT have more than {max} items',
   minItems: 'Must have at least {min}',
+  type: 'Invalid type',
 };
 
 export const custom_date = (date) => {
@@ -231,4 +233,5 @@ export const validators = {
   afterOrEqual: after_or_equal,
   maxItems,
   minItems,
+  type,
 };

package/src/mixins/extensions/DefaultValues.js

@@ -35,11 +35,7 @@ export default {
         get: new Function(`return this.tryFormField(${JSON.stringify(name)}, () => ${value});`),
         set() {},
       };
-
-      // Do not reset default values on nested objects after a data has changed
-      const watchOptions = { deep: false };
-
-      this.addWatch(screen, defaultComputedName, `!this.${name}_was_filled__ && this.setValue(${JSON.stringify(name)}, this.${defaultComputedName}, this.vdata, this);`, watchOptions);
+      this.addWatch(screen, defaultComputedName, `!this.${name}_was_filled__ && this.setValue(${JSON.stringify(name)}, this.${defaultComputedName}, this.vdata, this);`);
     },
   },
   mounted() {