@processmaker/screen-builder 2.76.0 → 2.76.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.76.0",
+  "version": "2.76.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -39,7 +39,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.49.1",
+    "@processmaker/vue-form-elements": "0.49.2",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -88,7 +88,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.49.1",
+    "@processmaker/vue-form-elements": "0.49.2",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/ValidationsFactory.js

@@ -36,6 +36,14 @@ class Validations {
    */
   isVisible() {
     // Disable validations if field is hidden
+    const visibleInDevice =
+      this.element.visibleInDevice === null || this.element.visibleInDevice === undefined
+        ? true
+        : this.element.visibleInDevice;
+    if (!visibleInDevice) {
+      return false;
+    }
+
     let visible = true;
     if (this.element.config.conditionalHide) {
       try {
@@ -177,13 +185,13 @@ class FormLoopValidations extends Validations {
     });
 
     if (Object.keys(siblingValidations).length != 0) {
-      // Update the loop validations with its siblings. 
+      // Update the loop validations with its siblings.
       const loopValidations = get(validations, this.element.config.name);
       if (loopValidations.hasOwnProperty('$each')) {
-        merge(loopValidations['$each'], siblingValidations);    
+        merge(loopValidations['$each'], siblingValidations);
       }
       set(validations[this.element.config.name]['$each'], loopValidations);
-    } 
+    }
   }
   camelCase(name) {
     return name.replace(/_\w/g, m => m.substr(1, 1).toUpperCase());
@@ -249,6 +257,9 @@ class FormElementValidations extends Validations {
     const conditionalHide = this.element.config.conditionalHide;
     const parentVisibilityRule = this.parentVisibilityRule;
     const insideLoop = this.insideLoop || false;
+    const deviceConfig = this.element.config.deviceVisibility
+      ? this.element.config.deviceVisibility
+      : { showForDesktop: true, showForMobile: true };
 
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
@@ -280,7 +291,7 @@ class FormElementValidations extends Validations {
             const parentDataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level + nextParentLevel);
             let isParentVisible = true;
             try {
-              isParentVisible = !!Parser.evaluate(parentVisibilityRule, parentDataWithParent);              
+              isParentVisible = !!Parser.evaluate(parentVisibilityRule, parentDataWithParent);
             } catch (error) {
               isParentVisible = false;
             }
@@ -289,6 +300,21 @@ class FormElementValidations extends Validations {
               return true;
             }
           }
+
+          // Check Device Visibility
+          let visibleInDevice = true;
+          try {
+            const isMobileScreen = this.$root.$children[0].$refs.renderer.definition.isMobile;
+            visibleInDevice =
+              (isMobileScreen && deviceConfig.showForMobile) ||
+              (!isMobileScreen && deviceConfig.showForDesktop);
+          } catch (error) {
+            visibleInDevice = true;
+          }
+          if (!visibleInDevice) {
+            return true;
+          }
+
           // Check Field Visibility
           let visible = true;
           if (conditionalHide) {

package/src/mixins/VisibilityRule.js

@@ -1,23 +1,26 @@
-import { Parser } from "expr-eval";
+import { Parser } from 'expr-eval';
 
 export default {
   methods: {
     visibilityRuleIsVisible(rule, name, deviceVisibility) {
-      const visibility = deviceVisibility || {showForDesktop: true, showForMobile: true, isMobile: false};
+      const visibility = deviceVisibility || { showForDesktop: true, showForMobile: true, isMobile: false };
       const visibleInDevice =
-        (visibility.isMobile && visibility.showForMobile) ||
-        (!visibility.isMobile && visibility.showForDesktop);
+        (visibility.isMobile && visibility.showForMobile) || (!visibility.isMobile && visibility.showForDesktop);
 
       try {
         if (rule && rule.trim().length > 0) {
           const dataWithParent = this.getDataReference();
           const isVisible = Boolean(Parser.evaluate(rule, dataWithParent));
+
           return isVisible && visibleInDevice;
         }
+
         return visibleInDevice;
       } catch (e) {
-        return visibleInDevice;
+        // empty.
       }
+
+      return false;
     }
   }
 };

package/src/mixins/extensions/VisibilityRule.js

@@ -7,6 +7,11 @@ export default {
         const visibility = element.config.deviceVisibility || { showForDesktop: true, showForMobile: true }
         const restrictDeviceVisibility = !visibility.showForDesktop || !visibility.showForMobile;
 
+
+        element.visibleInDevice =
+          (definition.isMobile && visibility.showForMobile) ||
+          (!definition.isMobile && visibility.showForDesktop);
+
         if (element.config.conditionalHide || restrictDeviceVisibility) {
           const deviceVisibility = JSON.stringify( { ...visibility, isMobile: definition.isMobile } );
           wrapper.setAttribute(