@processmaker/screen-builder 3.1.1 → 3.2.1

package/dist/vue-form-builder.es.js

@@ -14208,7 +14208,7 @@ const jb = /* @__PURE__ */ Sr(HO), Cr = typeof window > "u" ? global : window, a
     },
     pageNavigationBuild(t) {
       this.addData(t, "currentPage__", "this._initialPage"), t.methods.pageNavigate = function(e) {
-        this.$parent.definition.config[e] && (this.currentPage__ = e);
+        this.$parent.definition.config[e] && (this.$parent.$emit("updatePage"), this.currentPage__ = e);
       };
     }
   },
@@ -44816,7 +44816,7 @@ const sK = {
       return this.$refs.component.getCurrentPage();
     },
     setCurrentPage(t) {
-      this.$refs.component.setCurrentPage(t);
+      this.$emit("updatedPage"), this.$refs.component.setCurrentPage(t);
     },
     afterSubmit() {
       this.$emit("after-submit", ...arguments);
@@ -45065,7 +45065,7 @@ const cK = {
       return this.$refs.renderer.getCurrentPage();
     },
     setCurrentPage(t) {
-      this.$refs.renderer.setCurrentPage(t);
+      this.$emit("update-page-task"), this.$refs.renderer.setCurrentPage(t);
     },
     onContainerObserver(t) {
       t[0].target.getBoundingClientRect(), this.parseCss();
@@ -45078,14 +45078,14 @@ const cK = {
 var dK = function() {
   var i;
   var e = this, r = e._self._c;
-  return r("div", { ref: "formRendererContainer", class: [e.containerClass, e.containerDeviceClass], style: e.cssDevice, attrs: { id: "vue-form-renderer", "data-cy": "screen-renderer-container" } }, [r("custom-css-output", [e._v(e._s(e.customCssWrapped))]), r("screen-renderer", { ref: "renderer", staticClass: "p-0", attrs: { value: e.data, _parent: e._parent || ((i = e.data) == null ? void 0 : i._parent), definition: e.definition, "current-page": e.currentPage, "data-cy": "screen-renderer", "show-errors": e.showErrors, "test-screen-definition": e.testScreenDefinition || !1, "loop-context": e.loopContext, taskdraft: e.taskdraft }, on: { "after-submit": e.afterSubmit, submit: e.submit } })], 1);
+  return r("div", { ref: "formRendererContainer", class: [e.containerClass, e.containerDeviceClass], style: e.cssDevice, attrs: { id: "vue-form-renderer", "data-cy": "screen-renderer-container" } }, [r("custom-css-output", [e._v(e._s(e.customCssWrapped))]), r("screen-renderer", { ref: "renderer", staticClass: "p-0", attrs: { value: e.data, _parent: e._parent || ((i = e.data) == null ? void 0 : i._parent), definition: e.definition, "current-page": e.currentPage, "data-cy": "screen-renderer", "show-errors": e.showErrors, "test-screen-definition": e.testScreenDefinition || !1, "loop-context": e.loopContext, taskdraft: e.taskdraft }, on: { updatePage: e.setCurrentPage, "after-submit": e.afterSubmit, submit: e.submit } })], 1);
 }, fK = [], pK = /* @__PURE__ */ ee(
   cK,
   dK,
   fK,
   !1,
   null,
-  "f47c54c2",
+  "fcdcc032",
   null,
   null
 );
@@ -47413,7 +47413,6 @@ const eS = e$.exports, wg = [
       fields: [],
       sourceOptions: "Variable",
       submitCollectionCheck: !0,
-      sourceDisplayOptions: [],
       collectionFields: [],
       collectionFieldsColumns: [],
       variableStore: null,
@@ -47452,25 +47451,6 @@ const eS = e$.exports, wg = [
       singleField: null
     };
   },
-  methods: {
-    displayOptionChange() {
-      this.collectionFields = [], this.collectionFieldsColumns = [], this.pmql = null, this.$root.$emit("collection-changed", !0);
-    },
-    collectionChanged(t) {
-      if (Array.isArray(t)) {
-        const [e] = t;
-        (e == null ? void 0 : e.collection_id) !== this.collectionFields.collectionId && this.$root.$emit("collection-changed", !0);
-      }
-    },
-    getCollectionColumns(t) {
-      const [e] = (t == null ? void 0 : t.dataRecordList) || [];
-      if (e != null && e.data) {
-        const r = e.data;
-        for (const [i, a] of Object.entries(r))
-          this.singleFieldOptions.push({ text: i, value: i });
-      }
-    }
-  },
   computed: {
     options() {
       return Object.fromEntries(
@@ -47513,19 +47493,41 @@ const eS = e$.exports, wg = [
     dataSelectionOptions() {
       this.singleField = null;
     }
+  },
+  mounted() {
+    this.$root.$emit("record-list-option", this.sourceOptions);
+  },
+  methods: {
+    displayOptionChange() {
+      this.collectionFields = [], this.collectionFieldsColumns = [], this.pmql = null, this.$root.$emit("collection-changed", !0);
+    },
+    collectionChanged(t) {
+      if (Array.isArray(t)) {
+        const [e] = t;
+        (e == null ? void 0 : e.collection_id) !== this.collectionFields.collectionId && this.$root.$emit("collection-changed", !0);
+      }
+    },
+    getCollectionColumns(t) {
+      const [e] = (t == null ? void 0 : t.dataRecordList) || [];
+      if (e != null && e.data) {
+        const r = e.data;
+        for (const [i] of Object.entries(r))
+          this.singleFieldOptions.push({ text: i, value: i });
+      }
+    }
   }
 };
 var r$ = function() {
   var e = this, r = e._self._c;
   return r("div", [r("div", [r("label", { attrs: { for: "collectionsource" } }, [e._v(e._s(e.$t("Source of Record List")))]), r("b-form-select", { attrs: { id: "collectionsource", options: e.sourceDisplayOptions, "data-cy": "inspector-collection-data-source" }, on: { change: e.displayOptionChange }, model: { value: e.sourceOptions, callback: function(i) {
     e.sourceOptions = i;
-  }, expression: "sourceOptions" } }), r("small", { staticClass: "mt-3 form-text text-muted" }, [e._v(e._s(e.$t("A record list can display the data of a defined variable or a collection")))])], 1), e.sourceOptions === "Collection" ? r("div", { staticClass: "mt-2" }, [r("CollectionRecordsList", { attrs: { "record-pmql": e.pmql }, on: { change: e.collectionChanged }, model: { value: e.collectionFields, callback: function(i) {
+  }, expression: "sourceOptions" } }), r("small", { staticClass: "mt-3 form-text text-muted" }, [e._v(" " + e._s(e.$t("A record list can display the data of a defined variable or a collection")) + " ")])], 1), e.sourceOptions === "Collection" ? r("div", { staticClass: "mt-2" }, [r("CollectionRecordsList", { attrs: { "record-pmql": e.pmql }, on: { change: e.collectionChanged }, model: { value: e.collectionFields, callback: function(i) {
     e.collectionFields = i;
   }, expression: "collectionFields" } }), r("pmql-input", { staticClass: "mt-3 mb-1", attrs: { "search-type": "collections_w_mustaches", "data-cy": "inspector-collection-pmql", "input-label": "PMQL", condensed: !0, "ai-enabled": !0, placeholder: e.$t("PMQL") }, model: { value: e.pmql, callback: function(i) {
     e.pmql = i;
-  }, expression: "pmql" } }), r("small", { staticClass: "mt-3 form-text text-muted" }, [e._v(e._s(e.$t("Leave this field empty to show all the records of the collection")))]), r("label", { staticClass: "mt-3", attrs: { id: "data-selection" } }, [e._v(e._s(e.$t("Data Selection")))]), r("b-form-select", { attrs: { id: "data-selection", options: e.dataSelectionDisplayOptions, "data-cy": "inspector-collection-data-selection" }, model: { value: e.dataSelectionOptions, callback: function(i) {
+  }, expression: "pmql" } }), r("small", { staticClass: "mt-3 form-text text-muted" }, [e._v(" " + e._s(e.$t("Leave this field empty to show all the records of the collection")) + " ")]), r("label", { staticClass: "mt-3", attrs: { for: "data-selection" } }, [e._v(e._s(e.$t("Data Selection")))]), r("b-form-select", { attrs: { id: "data-selection", options: e.dataSelectionDisplayOptions, "data-cy": "inspector-collection-data-selection" }, model: { value: e.dataSelectionOptions, callback: function(i) {
     e.dataSelectionOptions = i;
-  }, expression: "dataSelectionOptions" } }), r("small", { staticClass: "mt-3 form-text text-muted" }, [e._v(e._s(e.$t("The user can select specific data to be stored into a variable")))]), e.dataSelectionOptions === "single-field" ? r("div", { staticClass: "mt-3" }, [r("label", { attrs: { id: "single-columns" } }, [e._v(e._s(e.$t("Column")))]), r("b-form-select", { attrs: { id: "single-columns", options: e.singleFieldOptions, "data-cy": "inspector-collection-single-field" }, model: { value: e.singleField, callback: function(i) {
+  }, expression: "dataSelectionOptions" } }), r("small", { staticClass: "mt-3 form-text text-muted" }, [e._v(" " + e._s(e.$t("The user can select specific data to be stored into a variable")) + " ")]), e.dataSelectionOptions === "single-field" ? r("div", { staticClass: "mt-3" }, [r("label", { attrs: { for: "single-columns" } }, [e._v(e._s(e.$t("Column")))]), r("b-form-select", { attrs: { id: "single-columns", options: e.singleFieldOptions, "data-cy": "inspector-collection-single-field" }, model: { value: e.singleField, callback: function(i) {
     e.singleField = i;
   }, expression: "singleField" } }, [r("option", { attrs: { disabled: "", value: "" } }, [e._v(e._s(e.$t("Select a column")))])])], 1) : e._e()], 1) : e._e()]);
 }, i$ = [], a$ = /* @__PURE__ */ ee(
@@ -48148,7 +48150,7 @@ var k$ = function() {
   M$,
   !1,
   null,
-  "883e127c",
+  "faf2ec78",
   null,
   null
 );
@@ -48888,7 +48890,7 @@ const gee = {
       return this.value || "content";
     },
     ariaLabelField() {
-      return this.optionAriaLabel || "ariaLabel";
+      return this.ariaLabel || "ariaLabel";
     },
     currentItemToDelete() {
       if (this.removeIndex !== null && this.optionsList.length > 0 && this.optionsList[this.removeIndex] !== void 0) {
@@ -48930,7 +48932,7 @@ const gee = {
     }, 1500);
   },
   mounted() {
-    this.dataSource = this.options.dataSource, this.jsonData = this.options.jsonData, this.dataName = this.options.dataName, this.collectionOptions = this.options.collectionOptions, this.selectedDataSource = this.options.selectedDataSource, this.selectedEndPoint = this.options.selectedEndPoint, this.key = this.options.key, this.value = this.options.value, this.optionAriaLabel = this.options.optionAriaLabel, this.pmqlQuery = this.options.pmqlQuery, this.defaultOptionKey = this.options.defaultOptionKey, this.selectedOptions = this.options.selectedOptions, this.optionsList = this.options.optionsList ? this.options.optionsList : [], this.jsonData = JSON.stringify(this.optionsList), this.showRenderAs = this.options.showRenderAs, this.renderAs = this.options.renderAs, this.allowMultiSelect = this.options.allowMultiSelect, this.valueTypeReturned = this.options.valueTypeReturned;
+    this.dataSource = this.options.dataSource, this.jsonData = this.options.jsonData, this.dataName = this.options.dataName, this.collectionOptions = this.options.collectionOptions, this.selectedDataSource = this.options.selectedDataSource, this.selectedEndPoint = this.options.selectedEndPoint, this.key = this.options.key, this.value = this.options.value, this.optionAriaLabel = this.options.ariaLabel, this.pmqlQuery = this.options.pmqlQuery, this.defaultOptionKey = this.options.defaultOptionKey, this.selectedOptions = this.options.selectedOptions, this.optionsList = this.options.optionsList ? this.options.optionsList : [], this.jsonData = JSON.stringify(this.optionsList), this.showRenderAs = this.options.showRenderAs, this.renderAs = this.options.renderAs, this.allowMultiSelect = this.options.allowMultiSelect, this.valueTypeReturned = this.options.valueTypeReturned;
   },
   methods: {
     monacoMounted(t) {
@@ -48973,10 +48975,13 @@ const gee = {
       this.optionsList = [];
       const e = this;
       t.forEach((r) => {
-        e.optionsList.push({
+        e.renderAs === "checkbox" ? e.optionsList.push({
           [e.keyField]: r[e.keyField],
           [e.valueField]: r[e.valueField],
           [e.ariaLabelField]: r[e.ariaLabelField]
+        }) : e.optionsList.push({
+          [e.keyField]: r[e.keyField],
+          [e.valueField]: r[e.valueField]
         });
       }), this.jsonError = "";
     },
@@ -48996,7 +49001,7 @@ const gee = {
       this.jsonData = JSON.stringify(this.optionsList), this.$emit("change", this.dataObjectOptions);
     },
     showEditOption(t) {
-      this.optionCardType = "edit", this.editIndex = t, this.optionContent = this.optionsList[t][this.valueField], this.optionValue = this.optionsList[t][this.keyField], this.optionAriaLabel = this.optionsList[t][this.ariaLabelField], this.optionError = "";
+      this.optionCardType = "edit", this.editIndex = t, this.optionContent = this.optionsList[t][this.valueField], this.optionValue = this.optionsList[t][this.keyField], this.renderAs === "checkbox" && (this.optionAriaLabel = this.optionsList[t][this.ariaLabelField]), this.optionError = "";
     },
     showAddOption() {
       this.optionCardType = "insert", this.optionContent = "", this.optionValue = "", this.optionAriaLabel = "", this.showOptionCard = !0, this.optionError = "", this.editIndex = null;
@@ -49008,19 +49013,20 @@ const gee = {
           this.optionError = "An item with the same key already exists";
           return;
         }
-        this.optionsList.push(
-          {
-            [this.valueField]: this.optionContent,
-            [this.keyField]: this.optionValue,
-            [this.ariaLabelField]: this.optionAriaLabel
-          }
-        );
+        this.renderAs === "checkbox" ? this.optionsList.push({
+          [this.valueField]: this.optionContent,
+          [this.keyField]: this.optionValue,
+          [this.ariaLabelField]: this.optionAriaLabel
+        }) : this.optionsList.push({
+          [this.valueField]: this.optionContent,
+          [this.keyField]: this.optionValue
+        });
       } else {
         if (this.optionsList.find((e, r) => e[t.keyField] === this.optionValue && r !== 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;
+        this.optionsList[this.editIndex][this.keyField] = this.optionValue, this.optionsList[this.editIndex][this.valueField] = this.optionContent, this.renderAs === "checkbox" && (this.optionsList[this.editIndex][this.ariaLabelField] = this.optionAriaLabel);
       }
       this.jsonData = JSON.stringify(this.optionsList), this.showOptionCard = !1, this.optionError = "", this.editIndex = null;
     },
@@ -49136,7 +49142,7 @@ var bee = function() {
   yee,
   !1,
   null,
-  "c8dcdddb",
+  "e8b1152f",
   null,
   null
 );
@@ -51995,7 +52001,7 @@ var yre = function() {
       return e.shouldShow(a, i) ? r(a.type, e._b({ key: n, tag: "component", staticClass: "border-bottom m-0 p-4", attrs: { "data-cy": "inspector-" + (a.field || a.config.name), "field-name": a.field, "field-accordion": `accordion-${e.accordionName(i).replace(
         " ",
         ""
-      )}`, builder: e.builder, "form-config": e.extendedPages, "screen-type": e.screenType, "current-page": e.currentPage, "selected-control": e.selected }, on: { "update-state": e.updateState, setName: function(s) {
+      )}`, builder: e.builder, "form-config": e.config, "screen-type": e.screenType, "current-page": e.currentPage, "selected-control": e.selected }, on: { "update-state": e.updateState, setName: function(s) {
         e.inspection.config.name = s;
       } }, nativeOn: { focusout: function(s) {
         return e.updateState.apply(null, arguments);
@@ -52025,7 +52031,7 @@ var yre = function() {
   xre,
   !1,
   null,
-  "8adaccab",
+  "d259169f",
   null,
   null
 );
@@ -52320,6 +52326,7 @@ const Ire = Lu(Ere), hae = Lu(jre), mae = Lu([zre]), Lre = Lu([cS, uS]), Fre = N
           optionsList: [],
           key: "value",
           value: "content",
+          ariaLabel: "ariaLabel",
           valueTypeReturned: "single"
         },
         helper: null
@@ -53488,6 +53495,9 @@ const Xre = () => new Promise((t) => {
         this.task.draft.data
       )), this.refreshScreen++), this.$emit("task-updated", this.task), this.task.process_request.status === "ERROR" ? (this.hasErrors = !0, this.$emit("error", this.requestId)) : this.hasErrors = !1;
     },
+    pageUpdate() {
+      this.$emit("updated-page-core");
+    },
     resetScreenState() {
       this.loadingButton = !1, this.disabled = !1, this.$refs.renderer && this.$refs.renderer.$children[0] && (this.$refs.renderer.$children[0].currentPage = 0, this.$refs.renderer.restartValidation());
     },
@@ -53942,9 +53952,9 @@ var Ure = function() {
   var e = this, r = e._self._c;
   return r("div", { staticClass: "tab-pane active show h-100", attrs: { id: "tab-form", role: "tabpanel", "aria-labelledby": "tab-form" } }, [e.screen ? [r("b-overlay", { attrs: { show: e.disabled || e.isSelfService, id: "overlay-background", variant: e.isSelfService ? "white" : "transparent", blur: null, cardStyles: "pointer-events: none;pointer-events: none;inset: 1px", rounded: "sm" }, scopedSlots: e._u([{ key: "overlay", fn: function() {
     return [r("div", { staticClass: "text-center" }, [e.isSelfService ? r("p", [e._v("Please claim this task to continue.")]) : e._e()])];
-  }, proxy: !0 }], null, !1, 2076353390) }, [r("div", { staticClass: "card card-body border-top-0 h-100", class: e.screenTypeClass }, [e.renderComponent === "task-screen" ? r("div", [r("vue-form-renderer", { key: e.refreshScreen, ref: "renderer", class: { loading: e.loadingTask || e.loadingListeners }, attrs: { config: e.screen.config, computed: e.screen.computed, "custom-css": e.screen.custom_css, watchers: e.screen.watchers, "loop-context": e.loopContext, taskdraft: this.task }, on: { update: e.onUpdate, "after-submit": e.afterSubmit, submit: e.submit }, model: { value: e.requestData, callback: function(i) {
+  }, proxy: !0 }], null, !1, 2076353390) }, [r("div", { staticClass: "card card-body border-top-0 h-100", class: e.screenTypeClass }, [e.renderComponent === "task-screen" ? r("div", [r("vue-form-renderer", { key: e.refreshScreen, ref: "renderer", class: { loading: e.loadingTask || e.loadingListeners }, attrs: { config: e.screen.config, computed: e.screen.computed, "custom-css": e.screen.custom_css, watchers: e.screen.watchers, "loop-context": e.loopContext, taskdraft: this.task }, on: { "update-page-task": e.pageUpdate, update: e.onUpdate, "after-submit": e.afterSubmit, submit: e.submit }, model: { value: e.requestData, callback: function(i) {
     e.requestData = i;
-  }, expression: "requestData" } })], 1) : r("div", [r(e.renderComponent, { tag: "component", attrs: { "process-id": e.processId, "instance-id": e.requestId, "token-id": e.taskId, screen: e.screen.config, "csrf-token": e.csrfToken, computed: e.screen.computed, "custom-css": e.screen.custom_css, watchers: e.screen.watchers, data: e.requestData, type: e.screen.type }, on: { update: e.onUpdate, "after-submit": e.afterSubmit, submit: e.submit } })], 1)]), e.shouldAddSubmitButton ? r("div", { staticClass: "card-footer" }, [r("button", { staticClass: "btn btn-primary", attrs: { type: "button" }, on: { click: function(i) {
+  }, expression: "requestData" } })], 1) : r("div", [r(e.renderComponent, { tag: "component", attrs: { "process-id": e.processId, "instance-id": e.requestId, "token-id": e.taskId, screen: e.screen.config, "csrf-token": e.csrfToken, computed: e.screen.computed, "custom-css": e.screen.custom_css, watchers: e.screen.watchers, data: e.requestData, type: e.screen.type }, on: { "update-page-task": e.pageUpdate, update: e.onUpdate, "after-submit": e.afterSubmit, submit: e.submit } })], 1)]), e.shouldAddSubmitButton ? r("div", { staticClass: "card-footer" }, [r("button", { staticClass: "btn btn-primary", attrs: { type: "button" }, on: { click: function(i) {
     return e.submit(null);
   } } }, [e._v(" " + e._s(e.$t("Complete Task")) + " ")])]) : e._e()])] : e._e(), e.showTaskIsCompleted ? [r("div", { staticClass: "card card-body text-center" }, [r("h1", [e._v(" " + e._s(e.$t("Task Completed")) + " "), r("i", { staticClass: "fas fa-clipboard-check" })])])] : e._e()], 2);
 }, Gre = [], Qre = /* @__PURE__ */ ee(
@@ -53953,7 +53963,7 @@ var Ure = function() {
   Gre,
   !1,
   null,
-  "6b115e25",
+  "fcbd2da6",
   null,
   null
 );