@processmaker/screen-builder 2.5.20 → 2.5.24

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.5.20",
+  "version": "2.5.24",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2165,9 +2165,9 @@
       }
     },
     "@processmaker/vue-form-elements": {
-      "version": "0.18.4-H",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.18.4-H.tgz",
-      "integrity": "sha512-imuL1cPdPfXEzjz5Qe+uBNpdMxDRYUMGVSx+p/XQSM/2XaBfZvV3gZPKrYCDbw4MPyzhOIGprLcF6AUfU+Wq9g==",
+      "version": "0.18.4-M",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.18.4-M.tgz",
+      "integrity": "sha512-VWdG1T8DYhzJalYBP4qljVPfM9T5Fw8kmUKVznAXvBT9SOh1GqekQeO9iXcdOiDsuQGHiozhwyAYwC/ibavkuw==",
       "dev": true,
       "requires": {
         "@tinymce/tinymce-vue": "2.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.5.20",
+  "version": "2.5.24",
   "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.18.4-H",
+    "@processmaker/vue-form-elements": "0.18.4-M",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
     "@vue/cli-plugin-eslint": "^3.6.0",
@@ -83,7 +83,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.18.4-H",
+    "@processmaker/vue-form-elements": "0.18.4-M",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/ValidationsFactory.js

@@ -139,7 +139,7 @@ class PageNavigateValidations extends Validations {
     if (!this.isVisible()) {
       return;
     }
-    if (!this.screen.pagesValidated.includes(parseInt(this.element.config.eventData))) {
+    if (this.screen.pagesValidated && !this.screen.pagesValidated.includes(parseInt(this.element.config.eventData))) {
       this.screen.pagesValidated.push(parseInt(this.element.config.eventData));
       if (this.screen.config[this.element.config.eventData] && this.screen.config[this.element.config.eventData].items) {
         await ValidationsFactory(this.screen.config[this.element.config.eventData].items, { screen: this.screen, data: this.data }).addValidations(validations);

package/src/components/inspector/options-list.vue

@@ -186,7 +186,7 @@
     <small class="form-text text-muted mb-3">{{ $t("Select 'Single Value' to use parts of the selected object. Select 'Object' to use the entire selected value.") }}</small>
 
     <div v-if="dataSource === dataSourceValues.dataConnector">
-      <div v-if="valueTypeReturned === 'single'">
+      <div>
         <label for="key">{{ $t('Value') }}</label>
         <mustache-helper/>
         <b-form-input id="key" v-model="key" @change="keyChanged" data-cy="inspector-datasource-value"/>
@@ -196,7 +196,7 @@
       <label for="value">{{ $t('Content') }}</label>
       <mustache-helper/>
       <b-form-input id="value" v-model="value" @change="valueChanged" data-cy="inspector-datasource-content"/>
-      <small class="form-text text-muted mb-3">{{ $t('Key name in the selected object to display to the user in the select list. Leave blank to show the entire selected value.') }}</small>
+      <small class="form-text text-muted mb-3">{{ $t('Content to display to the user in the select list.') }}</small>
     </div>
 
     <div v-if="valueTypeReturned === 'single' && dataSource === dataSourceValues.dataObject">

package/src/mixins/Json2Vue.js

@@ -49,6 +49,10 @@ export default {
     };
   },
   methods: {
+    // Convert foo.0.bar to foo[0].bar
+    dot2bracket(str) {
+      return str.replace(/\.\d/g, match => `[${match.substr(1)}]`);
+    },
     submit() {
       this.$emit('submit', this.value);
     },
@@ -327,7 +331,9 @@ export default {
           }
           this.ValidationRules__ = validations;
           this.$nextTick(() => {
-            this.$v.$touch();
+            if (this.$v) {
+              this.$v.$touch();
+            }
           });
         });
       };

package/src/mixins/extensions/DefaultValues.js

@@ -20,15 +20,15 @@ export default {
         }
         // Update vdata
         this.addMounted(screen, `
-          this.setValue(${JSON.stringify(name)}, this.${name}, this.vdata, this);
+          this.setValue(${JSON.stringify(name)}, this.getValue(${JSON.stringify(name)}), this.vdata, this);
         `);
       });
     },
     setupDefaultValue(screen, name, value) {
       const defaultComputedName = `default_${name}__`;
-      this.addData(screen, `${name}_was_filled__`, `!!this.getValue(${JSON.stringify(name)}, this.vdata)`);
+      this.addData(screen, `${name}_was_filled__`, `!!this.getValue(${JSON.stringify(name)}, this.vdata) || !!this.getValue(${JSON.stringify(name)}, data)`);
       this.addMounted(screen, `if (!this.${name}) {
-        this.tryFormField(${JSON.stringify(name)}, () => {this.${name} = ${value};});
+        this.tryFormField(${JSON.stringify(name)}, () => {this.${this.dot2bracket(name)} = ${value};});
       }`);
       screen.computed[defaultComputedName] = {
         get: new Function(`return this.tryFormField(${JSON.stringify(name)}, () => ${value});`),
@@ -46,7 +46,7 @@ export default {
         const name = element.config.name;
         if (this.isComputedVariable(name, definition)) return;
         if (element.config.defaultValue || element.config.initiallyChecked) {
-          const event = `${name}_was_filled__ |= !!$event; !${name}_was_filled__ && (vdata.${name} = default_${name}__)`;
+          const event = `${name}_was_filled__ |= !!$event; !${name}_was_filled__ && (vdata.${this.dot2bracket(name)} = default_${name}__)`;
           this.addEvent(properties, 'input', event);
         }
       },

package/src/mixins/extensions/LoopContainer.js

@@ -25,6 +25,7 @@ export default {
             items: element.items,
           },
         ],
+        watchers: definition.watchers,
       };
 
       let loopContext = '';

package/src/mixins/extensions/Watchers.js

@@ -2,17 +2,24 @@ import watchersMixin from '../../mixins/watchers';
 
 export default {
   methods: {
+    filterWatchers(watcher) {
+      const inContext = !watcher.watching || this.variables.find(({name}) => name === watcher.watching);
+      return inContext;
+    },
     addWatcherVariables(definition) {
       if (definition.watchers) {
-        definition.watchers.forEach((watcher) => {
-          this.registerVariable(watcher.output_variable, {});
+        definition.watchers.filter(this.filterWatchers).forEach((watcher) => {
+          const inContext = !watcher.watching || this.variables.find(({name}) => name === watcher.watching);
+          if (inContext) {
+            this.registerVariable(watcher.output_variable, {});
+          }
         });
       }
     },
     watchers(screen, definition) {
       if (definition.watchers) {
         screen.mixins.push(watchersMixin);
-        definition.watchers.forEach((watcher) => {
+        definition.watchers.filter(this.filterWatchers).forEach((watcher) => {
           this.addMounted(screen, `
             this.$nextTick(() => this.$watch('${watcher.watching}', (newValue) => {
               if (typeof newValue !== 'undefined') {