@processmaker/screen-builder 2.84.0 → 2.84.2

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

@@ -48400,7 +48400,7 @@ const $X = {
      * @param {PageItem} page - The selected page item.
      */
     onClickPage(t) {
-      this.$emit("clickPage", t);
+      this.$emit("clickPage", this.data[t]);
     }
   }
 };
@@ -48419,7 +48419,7 @@ var PX = function() {
   DX,
   !1,
   null,
-  "3da78c3f",
+  "18f6828f",
   null,
   null
 );
@@ -48497,8 +48497,7 @@ var BX = function() {
   null,
   null
 );
-const UX = WX.exports;
-const av = 200, GX = {
+const UX = WX.exports, av = 200, GX = {
   props: {
     /**
      * The configuration of all the pages
@@ -48659,34 +48658,36 @@ const JX = {
   },
   data() {
     return {
+      originalName: "",
       draggedItem: 0,
       draggedOverItem: 0,
-      itemsClone: [],
       editRowIndex: null
     };
   },
   computed: {
     sortedItems() {
-      return this.filteredItems.sort((t, e) => t.order - e.order);
-    }
-  },
-  watch: {
-    items: {
-      handler(t) {
-        this.itemsClone = [...t];
-      },
-      immediate: !0
+      return [...this.filteredItems].sort(
+        (e, r) => e.order - r.order
+      );
     }
   },
   methods: {
-    onBlur() {
-      this.editRowIndex = -1;
+    validateState(t, e) {
+      const r = !t, a = this.items.filter((i) => i !== e).find((i) => i.name === t);
+      return r || a ? !1 : null;
     },
-    onClick(t, e) {
-      if (this.editRowIndex === -1 || this.editRowIndex === e) {
+    validateError(t, e) {
+      return t ? this.$t("The Page Name field is required.") : this.items.filter((i) => i !== e).find((i) => i.name === t) ? this.$t("Must be unique.") : "";
+    },
+    onFocus(t, e) {
+      this.originalName = t;
+    },
+    async onBlur(t, e) {
+      this.validateState(t, e) === !1 && (e.name = this.originalName), await this.$nextTick(), setTimeout(() => {
         this.editRowIndex = null;
-        return;
-      }
+      }, 250);
+    },
+    onClick(t, e) {
       this.editRowIndex = e, this.$emit("item-edit", t);
     },
     dragStart(t, e) {
@@ -48697,24 +48698,30 @@ const JX = {
     },
     dragEnd(t) {
       t.target.classList.remove("dragging");
-      const e = this.itemsClone.findIndex((a) => a.order === this.draggedItem), r = this.itemsClone.findIndex((a) => a.order === this.draggedOverItem);
-      if (e !== r) {
-        const a = this.itemsClone[r].order, i = this.draggedItem > this.draggedOverItem ? 1 : -1;
-        if (e < r) {
-          for (let n = e + 1; n <= r; n++) {
-            const s = this.itemsClone[n].order;
-            this.itemsClone[n].order = s + i;
-          }
-          this.itemsClone[e].order = a;
-        } else if (e > r) {
-          for (let n = r; n <= e - 1; n++) {
-            const s = this.itemsClone[n].order;
-            this.itemsClone[n].order = s + i;
-          }
-          this.itemsClone[e].order = a;
+      const e = [...this.items].sort(
+        (i, n) => i.order - n.order
+      ), r = e.findIndex(
+        (i) => i.order === this.draggedItem
+      ), a = e.findIndex(
+        (i) => i.order === this.draggedOverItem
+      );
+      if (r !== a) {
+        const i = e[a].order, n = this.draggedItem > this.draggedOverItem ? 1 : -1;
+        if (r < a) {
+          for (let s = r + 1; s <= a; s++) {
+            const o = e[s].order;
+            e[s].order = o + n;
+          }
+          e[r].order = i;
+        } else if (r > a) {
+          for (let s = a; s <= r - 1; s++) {
+            const o = e[s].order;
+            e[s].order = o + n;
+          }
+          e[r].order = i;
         }
       }
-      this.$emit("ordered", this.itemsClone);
+      this.$emit("ordered", e);
     },
     dragOver(t) {
       t.preventDefault();
@@ -48724,11 +48731,15 @@ const JX = {
 var ZX = function() {
   var e = this, r = e._self._c;
   return r("div", { staticClass: "row mt-3" }, [r("div", { staticClass: "col p-0 border rounded-lg sortable-list" }, [e._m(0), r("div", { staticClass: "sortable-container", on: { dragover: e.dragOver } }, e._l(e.sortedItems, function(a, i) {
-    return r("div", { key: i, staticClass: "sortable-item sortable-draggable", attrs: { "data-order": a.order, "data-test": `item-${a.order}`, title: a.name, draggable: "true" }, on: { dragstart: (n) => e.dragStart(n, a.order), dragenter: (n) => e.dragEnter(n, a.order), dragend: e.dragEnd } }, [e._m(1, !0), r("div", { staticClass: "rounded sortable-item-name" }, [e.editRowIndex === i ? r("b-form-input", { attrs: { type: "text", autofocus: "" }, on: { blur: function(n) {
-      return n.stopPropagation(), e.onBlur();
+    return r("div", { key: i, staticClass: "sortable-item sortable-draggable", attrs: { "data-order": a.order, "data-test": `item-${a.order}`, title: a.name, draggable: "true" }, on: { dragstart: (n) => e.dragStart(n, a.order), dragenter: (n) => e.dragEnter(n, a.order), dragend: e.dragEnd } }, [e._m(1, !0), r("div", { staticClass: "rounded sortable-item-name" }, [e.editRowIndex === i ? r("b-form-input", { attrs: { type: "text", autofocus: "", required: "", state: e.validateState(a.name, a), error: e.validateError(a.name, a) }, on: { blur: function(n) {
+      return n.stopPropagation(), e.onBlur(a.name, a);
+    }, keydown: function(n) {
+      return !n.type.indexOf("key") && e._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : (n.stopPropagation(), e.onBlur(a.name, a));
+    }, focus: function(n) {
+      return e.onFocus(a.name, a);
     } }, model: { value: a.name, callback: function(n) {
       e.$set(a, "name", n);
-    }, expression: "item.name" } }) : r("span", [e._v(e._s(a.name))])], 1), r("div", { staticClass: "border rounded-lg sortable-item-action" }, [r("button", { staticClass: "btn", on: { click: function(n) {
+    }, expression: "item.name" } }) : r("span", [e._v(e._s(a.name))])], 1), r("div", { staticClass: "border rounded-lg sortable-item-action" }, [e.editRowIndex === i ? r("button", { staticClass: "btn" }, [r("i", { staticClass: "fas fa-check" })]) : r("button", { staticClass: "btn", on: { click: function(n) {
       return n.stopPropagation(), e.onClick(a, i);
     } } }, [r("i", { staticClass: "fas fa-edit" })]), r("div", { staticClass: "sortable-item-vr" }), r("button", { staticClass: "btn", on: { click: function(n) {
       return e.$emit("item-delete", a);
@@ -48746,7 +48757,7 @@ var ZX = function() {
   XX,
   !1,
   null,
-  "b9ba844a",
+  "94c99e35",
   null,
   null
 );
@@ -48914,6 +48925,9 @@ const oee = [
     };
   },
   computed: {
+    sortedPages() {
+      return [...this.config].sort((t, e) => t.order - e.order);
+    },
     builder() {
       return this;
     },
@@ -48993,7 +49007,7 @@ const oee = [
       return ((r = (e = this.config[t]) == null ? void 0 : e.items) == null ? void 0 : r.length) === 0;
     },
     onClick(t) {
-      this.$refs.tabsBar.openPageByIndex(t);
+      this.$refs.tabsBar.openPageByIndex(this.config.indexOf(t));
     },
     checkPageName(t, e = !1) {
       return !e && !this.showAddPageValidations ? null : t.trim() ? this.config.map((a) => a.name).filter((a) => a !== this.originalPageName).includes(t) ? this.$t("Must be unique.") : "" : this.$t("The Page Name field is required.");
@@ -49370,45 +49384,45 @@ var dee = function() {
   })], 2)], 1)], 1), r("b-col", { ref: "screen-container", staticClass: "overflow-auto mh-100 p-0 d-flex flex-column position-relative", attrs: { id: "screen-container" } }, [r("tabs-bar", { ref: "tabsBar", attrs: { pages: e.config }, on: { "tab-opened": function(a) {
     e.currentPage = a;
   } }, scopedSlots: e._u([{ key: "tabs-start", fn: function() {
-    return [e.showToolbar ? r("pages-dropdown", { attrs: { data: e.config }, on: { addPage: function(a) {
+    return [e.showToolbar ? r("pages-dropdown", { attrs: { data: e.sortedPages }, on: { addPage: function(a) {
       return e.$bvModal.show("addPageModal");
     }, clickPage: e.onClick, seeAllPages: function(a) {
       return e.$bvModal.show("openSortable");
     } } }) : e._e()];
-  }, proxy: !0 }, { key: "default", fn: function() {
-    return [e.isCurrentPageEmpty(e.currentPage) ? r("div", { staticClass: "d-flex justify-content-center align-items-center drag-placeholder text-center position-absolute rounded mt-4 flex-column", attrs: { "data-cy": "screen-drop-zone" } }, [r("svg", { attrs: { width: "81", height: "107", viewBox: "0 0 81 107", fill: "none", xmlns: "http://www.w3.org/2000/svg" } }, [r("path", { attrs: { d: "M47.125 28.6562V0.5H5.71875C2.96523 0.5 0.75 2.71523 0.75 5.46875V101.531C0.75 104.285 2.96523 106.5 5.71875 106.5H75.2812C78.0348 106.5 80.25 104.285 80.25 101.531V33.625H52.0938C49.3609 33.625 47.125 31.3891 47.125 28.6562ZM60.375 77.5156C60.375 78.882 59.257 80 57.8906 80H23.1094C21.743 80 20.625 78.882 20.625 77.5156V75.8594C20.625 74.493 21.743 73.375 23.1094 73.375H57.8906C59.257 73.375 60.375 74.493 60.375 75.8594V77.5156ZM60.375 64.2656C60.375 65.632 59.257 66.75 57.8906 66.75H23.1094C21.743 66.75 20.625 65.632 20.625 64.2656V62.6094C20.625 61.243 21.743 60.125 23.1094 60.125H57.8906C59.257 60.125 60.375 61.243 60.375 62.6094V64.2656ZM60.375 49.3594V51.0156C60.375 52.382 59.257 53.5 57.8906 53.5H23.1094C21.743 53.5 20.625 52.382 20.625 51.0156V49.3594C20.625 47.993 21.743 46.875 23.1094 46.875H57.8906C59.257 46.875 60.375 47.993 60.375 49.3594ZM80.25 25.7371V27H53.75V0.5H55.0129C56.3379 0.5 57.6008 1.01758 58.5324 1.94922L78.8008 22.2383C79.7324 23.1699 80.25 24.4328 80.25 25.7371Z", fill: "#699CFF" } })]), r("h3", [e._v(e._s(e.$t("Place your controls here.")))]), r("p", [e._v(" " + e._s(e.$t("To begin creating a screen, drag and drop items from the Controls Menu on the left.")) + " ")])]) : e._e(), e.renderControls ? r("draggable", e._b({ key: e.editorContentKey, staticClass: "h-100", attrs: { "data-cy": "editor-content", "ghost-class": "form-control-ghost", value: e.config[e.currentPage].items }, on: { input: e.updateConfig } }, "draggable", {
+  }, proxy: !0 }, { key: "default", fn: function({ currentPage: a }) {
+    return [e.isCurrentPageEmpty(a) ? r("div", { staticClass: "d-flex justify-content-center align-items-center drag-placeholder text-center position-absolute rounded mt-4 flex-column", attrs: { "data-cy": "screen-drop-zone" } }, [r("svg", { attrs: { width: "81", height: "107", viewBox: "0 0 81 107", fill: "none", xmlns: "http://www.w3.org/2000/svg" } }, [r("path", { attrs: { d: "M47.125 28.6562V0.5H5.71875C2.96523 0.5 0.75 2.71523 0.75 5.46875V101.531C0.75 104.285 2.96523 106.5 5.71875 106.5H75.2812C78.0348 106.5 80.25 104.285 80.25 101.531V33.625H52.0938C49.3609 33.625 47.125 31.3891 47.125 28.6562ZM60.375 77.5156C60.375 78.882 59.257 80 57.8906 80H23.1094C21.743 80 20.625 78.882 20.625 77.5156V75.8594C20.625 74.493 21.743 73.375 23.1094 73.375H57.8906C59.257 73.375 60.375 74.493 60.375 75.8594V77.5156ZM60.375 64.2656C60.375 65.632 59.257 66.75 57.8906 66.75H23.1094C21.743 66.75 20.625 65.632 20.625 64.2656V62.6094C20.625 61.243 21.743 60.125 23.1094 60.125H57.8906C59.257 60.125 60.375 61.243 60.375 62.6094V64.2656ZM60.375 49.3594V51.0156C60.375 52.382 59.257 53.5 57.8906 53.5H23.1094C21.743 53.5 20.625 52.382 20.625 51.0156V49.3594C20.625 47.993 21.743 46.875 23.1094 46.875H57.8906C59.257 46.875 60.375 47.993 60.375 49.3594ZM80.25 25.7371V27H53.75V0.5H55.0129C56.3379 0.5 57.6008 1.01758 58.5324 1.94922L78.8008 22.2383C79.7324 23.1699 80.25 24.4328 80.25 25.7371Z", fill: "#699CFF" } })]), r("h3", [e._v(e._s(e.$t("Place your controls here.")))]), r("p", [e._v(" " + e._s(e.$t("To begin creating a screen, drag and drop items from the Controls Menu on the left.")) + " ")])]) : e._e(), e.renderControls ? r("draggable", e._b({ key: e.editorContentKey, staticClass: "h-100", attrs: { "data-cy": "editor-content", "ghost-class": "form-control-ghost", value: e.config[a].items }, on: { input: e.updateConfig } }, "draggable", {
       group: { name: "controls" },
       swapThreshold: 0.5
-    }, !1), e._l(e.config[e.currentPage].items, function(a, i) {
-      return r("div", { key: i, staticClass: "control-item mt-4 mb-4", class: {
-        selected: e.selected === a,
-        hasError: e.hasError(a)
-      }, attrs: { selector: a.config.customCssSelector }, on: { click: function(n) {
-        return e.inspect(a);
-      } } }, [a.container ? r("div", { staticClass: "card container-lement", class: { "ai-section-card": e.isAiSection(a) }, attrs: { "data-cy": "screen-element-container" }, on: { click: function(n) {
-        return e.inspect(a);
-      } } }, [e.selected === a ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center", class: { pulse: e.isAiSection(a) && e.aiPreview(a) } }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), a.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: a.config.icon }) : e._e(), e._v(" " + e._s(a.config.name || a.label || e.$t("Field Name")) + " "), r("div", { staticClass: "ml-auto" }, [e.isAiSection(a) && e.aiPreview(a) ? r("button", { staticClass: "btn btn-sm btn-primary mr-2", attrs: { "data-test": "apply-ai-btn", title: e.$t("Apply Changes") }, on: { click: function(n) {
-        return e.applyAiChanges(a);
-      } } }, [e._v(" " + e._s(e.$t("Apply Changes")) + " ")]) : e._e(), e.isAiSection(a) && e.aiPreview(a) ? e._e() : r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { "data-test": "copy-control-btn", title: e.$t("Copy Control") }, on: { click: function(n) {
-        return e.duplicateItem(i);
-      } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { "data-test": "delete-control-btn", title: e.$t("Delete Control") }, on: { click: function(n) {
-        return e.deleteItem(i);
-      } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])])]) : e._e(), r(a["editor-component"], { tag: "component", staticClass: "card-body", class: e.elementCssClass(a), attrs: { "validation-errors": e.validationErrors, selected: e.selected, config: a.config, "ai-element": a }, on: { inspect: e.inspect, "update-state": e.updateState }, model: { value: a.items, callback: function(n) {
-        e.$set(a, "items", n);
-      }, expression: "element.items" } })], 1) : r("div", { staticClass: "card", attrs: { "data-cy": "screen-element-container" } }, [e.selected === a ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center" }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), a.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: a.config.icon }) : e._e(), e._v(" " + e._s(a.config.name || e.$t("Variable Name")) + " "), r("div", { staticClass: "ml-auto" }, [r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(n) {
-        return e.duplicateItem(i);
-      } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { title: e.$t("Delete Control") }, on: { click: function(n) {
-        return e.deleteItem(i);
-      } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])])]) : e._e(), r(a["editor-component"], e._b({ tag: "component", staticClass: "card-body m-0 pb-4 pt-4", class: [
-        e.elementCssClass(a),
-        { "prevent-interaction": !a.config.interactive }
-      ], attrs: { tabindex: a.config.interactive ? 0 : -1 }, on: { input: function(n) {
-        a.config.interactive && (a.config.content = n);
-      } }, nativeOn: { focusout: function(n) {
+    }, !1), e._l(e.config[a].items, function(i, n) {
+      return r("div", { key: n, staticClass: "control-item mt-4 mb-4", class: {
+        selected: e.selected === i,
+        hasError: e.hasError(i)
+      }, attrs: { selector: i.config.customCssSelector }, on: { click: function(s) {
+        return e.inspect(i);
+      } } }, [i.container ? r("div", { staticClass: "card container-lement", class: { "ai-section-card": e.isAiSection(i) }, attrs: { "data-cy": "screen-element-container" }, on: { click: function(s) {
+        return e.inspect(i);
+      } } }, [e.selected === i ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center", class: { pulse: e.isAiSection(i) && e.aiPreview(i) } }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), i.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: i.config.icon }) : e._e(), e._v(" " + e._s(i.config.name || i.label || e.$t("Field Name")) + " "), r("div", { staticClass: "ml-auto" }, [e.isAiSection(i) && e.aiPreview(i) ? r("button", { staticClass: "btn btn-sm btn-primary mr-2", attrs: { "data-test": "apply-ai-btn", title: e.$t("Apply Changes") }, on: { click: function(s) {
+        return e.applyAiChanges(i);
+      } } }, [e._v(" " + e._s(e.$t("Apply Changes")) + " ")]) : e._e(), e.isAiSection(i) && e.aiPreview(i) ? e._e() : r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { "data-test": "copy-control-btn", title: e.$t("Copy Control") }, on: { click: function(s) {
+        return e.duplicateItem(n);
+      } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { "data-test": "delete-control-btn", title: e.$t("Delete Control") }, on: { click: function(s) {
+        return e.deleteItem(n);
+      } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])])]) : e._e(), r(i["editor-component"], { tag: "component", staticClass: "card-body", class: e.elementCssClass(i), attrs: { "validation-errors": e.validationErrors, selected: e.selected, config: i.config, "ai-element": i }, on: { inspect: e.inspect, "update-state": e.updateState }, model: { value: i.items, callback: function(s) {
+        e.$set(i, "items", s);
+      }, expression: "element.items" } })], 1) : r("div", { staticClass: "card", attrs: { "data-cy": "screen-element-container" } }, [e.selected === i ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center" }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), i.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: i.config.icon }) : e._e(), e._v(" " + e._s(i.config.name || e.$t("Variable Name")) + " "), r("div", { staticClass: "ml-auto" }, [r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(s) {
+        return e.duplicateItem(n);
+      } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { title: e.$t("Delete Control") }, on: { click: function(s) {
+        return e.deleteItem(n);
+      } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])])]) : e._e(), r(i["editor-component"], e._b({ tag: "component", staticClass: "card-body m-0 pb-4 pt-4", class: [
+        e.elementCssClass(i),
+        { "prevent-interaction": !i.config.interactive }
+      ], attrs: { tabindex: i.config.interactive ? 0 : -1 }, on: { input: function(s) {
+        i.config.interactive && (i.config.content = s);
+      } }, nativeOn: { focusout: function(s) {
         return e.updateState.apply(null, arguments);
-      } } }, "component", a.config, !1))], 1)]);
-    }), 0) : e._e(), e.isCurrentPageEmpty ? e._e() : r("div", { attrs: { "data-cy": "screen-drop-zone" } }, [e._v("   ")])];
-  }, proxy: !0 }]) })], 1), e.renderControls ? r("b-col", { staticClass: "overflow-hidden h-100 p-0 inspector-column" }, [r("b-card", { staticClass: "p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0", attrs: { "no-body": "" } }, [r("b-card-body", { staticClass: "p-0 h-100 overflow-auto" }, [e._l(e.accordions, function(a) {
+      } } }, "component", i.config, !1))], 1)]);
+    }), 0) : e._e(), e.isCurrentPageEmpty(a) ? e._e() : r("div", { attrs: { "data-cy": "screen-drop-zone" } }, [e._v("   ")])];
+  } }]) })], 1), e.renderControls ? r("b-col", { staticClass: "overflow-hidden h-100 p-0 inspector-column" }, [r("b-card", { staticClass: "p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0", attrs: { "no-body": "" } }, [r("b-card-body", { staticClass: "p-0 h-100 overflow-auto" }, [e._l(e.accordions, function(a) {
     return [e.getInspectorFields(a) && e.getInspectorFields(a).length > 0 ? r("b-button", { key: `${e.accordionName(a)}-button`, staticClass: "text-left card-header d-flex align-items-center w-100 outline-0 text-capitalize shadow-none", attrs: { variant: "outline", "data-cy": `accordion-${e.accordionName(a).replace(
       " ",
       ""
@@ -49455,7 +49469,7 @@ var dee = function() {
   pee,
   !1,
   null,
-  "0af66870",
+  "6dca9fa7",
   null,
   null
 );
@@ -52060,7 +52074,8 @@ var Ite = function() {
   null,
   null
 );
-const ure = jte.exports, cre = {
+const ure = jte.exports;
+const cre = {
   ...Os,
   FormMultiColumn: sl
 };