@processmaker/screen-builder 3.1.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.62.0",
+    "@processmaker/vue-form-elements": "0.63.0",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.62.0",
+    "@processmaker/vue-form-elements": "0.63.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

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

@@ -430,7 +430,7 @@ export default {
       return this.value || 'content';
     },
     ariaLabelField() {
-      return this.optionAriaLabel || 'ariaLabel';
+      return this.ariaLabel || 'ariaLabel';
     },
     currentItemToDelete() {
       if (this.removeIndex !== null
@@ -487,7 +487,7 @@ export default {
     this.selectedEndPoint = this.options.selectedEndPoint,
     this.key = this.options.key;
     this.value = this.options.value;
-    this.optionAriaLabel = this.options.optionAriaLabel;
+    this.optionAriaLabel = this.options.ariaLabel;
     this.pmqlQuery = this.options.pmqlQuery;
     this.defaultOptionKey= this.options.defaultOptionKey;
     this.selectedOptions = this.options.selectedOptions;
@@ -549,12 +549,19 @@ export default {
       }
       this.optionsList = [];
       const that = this;
-      jsonList.forEach (item => {
-        that.optionsList.push({
-          [that.keyField]: item[that.keyField],
-          [that.valueField]: item[that.valueField],
-          [that.ariaLabelField]: item[that.ariaLabelField]
-        });
+      jsonList.forEach((item) => {
+        if (that.renderAs === "checkbox") {
+          that.optionsList.push({
+            [that.keyField]: item[that.keyField],
+            [that.valueField]: item[that.valueField],
+            [that.ariaLabelField]: item[that.ariaLabelField]
+          });
+        } else {
+          that.optionsList.push({
+            [that.keyField]: item[that.keyField],
+            [that.valueField]: item[that.valueField]
+          });
+        }
       });
       this.jsonError = '';
     },
@@ -582,7 +589,9 @@ export default {
       this.editIndex = index;
       this.optionContent = this.optionsList[index][this.valueField];
       this.optionValue = this.optionsList[index][this.keyField];
-      this.optionAriaLabel = this.optionsList[index][this.ariaLabelField];
+      if (this.renderAs === "checkbox") {
+        this.optionAriaLabel = this.optionsList[index][this.ariaLabelField];
+      }
       this.optionError = '';
     },
     showAddOption() {
@@ -602,22 +611,28 @@ export default {
           this.optionError = 'An item with the same key already exists';
           return;
         }
-        this.optionsList.push(
-          {
+        if (this.renderAs === "checkbox") {
+          this.optionsList.push({
             [this.valueField]: this.optionContent,
             [this.keyField]: this.optionValue,
-            [this.ariaLabelField]: this.optionAriaLabel,
-          }
-        );
-      }
-      else {
+            [this.ariaLabelField]: this.optionAriaLabel
+          });
+        } else {
+          this.optionsList.push({
+            [this.valueField]: this.optionContent,
+            [this.keyField]: this.optionValue
+          });
+        }
+      } else {
         if (this.optionsList.find((item, index) => { return item[that.keyField] === this.optionValue && index !== this.editIndex ; })) {
           this.optionError = 'An item with the same key already exists';
           return;
         }
         this.optionsList[this.editIndex][this.keyField] = this.optionValue;
         this.optionsList[this.editIndex][this.valueField] = this.optionContent;
-        this.optionsList[this.editIndex][this.ariaLabelField] = this.optionAriaLabel;
+        if (this.renderAs === "checkbox") {
+          this.optionsList[this.editIndex][this.ariaLabelField] = this.optionAriaLabel;
+        }
       }
 
       this.jsonData = JSON.stringify(this.optionsList);

package/src/components/screen-renderer.vue

@@ -110,6 +110,7 @@ export default {
       return this.$refs.component.getCurrentPage();
     },
     setCurrentPage(page) {
+      this.$emit("updatedPage");
       this.$refs.component.setCurrentPage(page);
     },
     afterSubmit() {

package/src/components/task.vue

@@ -32,6 +32,7 @@
             :key="refreshScreen"
             :loop-context="loopContext"
             :taskdraft="this.task"
+            @update-page-task="pageUpdate"
             @update="onUpdate"
             @after-submit="afterSubmit"
             @submit="submit"
@@ -50,6 +51,7 @@
             :watchers="screen.watchers"
             :data="requestData"
             :type="screen.type"
+            @update-page-task="pageUpdate"
             @update="onUpdate"
             @after-submit="afterSubmit"
             @submit="submit"
@@ -107,7 +109,7 @@ export default {
     alwaysAllowEditing: { type: Boolean, default: false },
     disableInterstitial: { type: Boolean, default: false },
     waitLoadingListeners: { type: Boolean, default: false },
-    isWebEntry: { type: Boolean, default: false },
+    isWebEntry: { type: Boolean, default: false }
   },
   data() {
     return {
@@ -365,6 +367,9 @@ export default {
         this.hasErrors = false;
       }
     },
+    pageUpdate() {
+      this.$emit("updated-page-core");
+    },
     resetScreenState() {
       this.loadingButton = false;
       this.disabled = false;

package/src/components/vue-form-builder.vue

@@ -411,7 +411,7 @@
                   ''
                 )}`"
                 :builder="builder"
-                :form-config="extendedPages"
+                :form-config="config"
                 :screen-type="screenType"
                 :current-page="currentPage"
                 :selected-control="selected"

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

@@ -19,6 +19,7 @@
       class="p-0"
       :loop-context="loopContext"
       :taskdraft="taskdraft"
+      @updatePage="setCurrentPage"
       @after-submit="afterSubmit"
       @submit="submit"
     />
@@ -361,6 +362,7 @@ export default {
       return this.$refs.renderer.getCurrentPage();
     },
     setCurrentPage(page) {
+      this.$emit("update-page-task");
       this.$refs.renderer.setCurrentPage(page);
     },
     onContainerObserver(entries) {

package/src/form-builder-controls.js

@@ -224,6 +224,7 @@ export default [
           optionsList: [],
           key:'value',
           value:'content',
+          ariaLabel: 'ariaLabel',
           valueTypeReturned: 'single',
         },
         helper: null,

package/src/mixins/extensions/PageNavigate.js

@@ -13,6 +13,7 @@ export default {
         if (!this.$parent.definition.config[page]) {
           return;
         }
+        this.$parent.$emit("updatePage");
         this.currentPage__ = page;
       };
     },