@processmaker/screen-builder 3.1.0 → 3.2.0

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
 );
@@ -48888,7 +48888,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 +48930,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 +48973,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 +48999,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 +49011,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 +49140,7 @@ var bee = function() {
   yee,
   !1,
   null,
-  "c8dcdddb",
+  "e8b1152f",
   null,
   null
 );
@@ -51995,7 +51999,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 +52029,7 @@ var yre = function() {
   xre,
   !1,
   null,
-  "8adaccab",
+  "d259169f",
   null,
   null
 );
@@ -52320,6 +52324,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 +53493,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 +53950,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 +53961,7 @@ var Ure = function() {
   Gre,
   !1,
   null,
-  "6b115e25",
+  "fcbd2da6",
   null,
   null
 );