@processmaker/screen-builder 2.84.1 → 2.84.3

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

@@ -48596,7 +48596,8 @@ const UX = WX.exports, av = 200, GX = {
       });
     },
     closeTab(t) {
-      this.localOpenedPages.splice(this.localOpenedPages.indexOf(t), 1), this.$emit("tab-closed", this.pages[t], this.localOpenedPages);
+      const e = this.localOpenedPages[t];
+      this.localOpenedPages.splice(t, 1), this.$emit("tab-closed", this.pages[e], this.localOpenedPages);
     },
     updateTabsReferences(t) {
       this.localOpenedPages = this.localOpenedPages.map(
@@ -48621,7 +48622,7 @@ const UX = WX.exports, av = 200, GX = {
 };
 var HX = function() {
   var e = this, r = e._self._c;
-  return r("b-tabs", { ref: "tabs", staticClass: "h-100 w-100 flat-tabs", attrs: { "content-class": "h-tab", lazy: "" }, on: { changed: e.tabsUpdated, input: e.tabOpened }, scopedSlots: e._u([{ key: "tabs-start", fn: function() {
+  return r("b-tabs", { ref: "tabs", staticClass: "h-100 w-100 flat-tabs", attrs: { "content-class": "h-tab", "nav-class": "nav-tabs-nowrap", lazy: "" }, on: { changed: e.tabsUpdated, input: e.tabOpened }, scopedSlots: e._u([{ key: "tabs-start", fn: function() {
     return [r("div", { staticClass: "tabs-sticky d-flex flex-row tabs-start" }, [r("div", { directives: [{ name: "show", rawName: "v-show", value: e.tabsListOverflow, expression: "tabsListOverflow" }], staticClass: "position-relative overflow-visible" }, [r("div", { staticClass: "nav-scroll nav-scroll-left", attrs: { role: "link", "data-test": "scroll-left" }, on: { click: e.scrollTabsLeft } }, [r("i", { staticClass: "fas fa-chevron-left" })])])]), r("div", { class: { "dd-ml": e.tabsListOverflow } }, [e._t("tabs-start")], 2)];
   }, proxy: !0 }, { key: "tabs-end", fn: function() {
     return [e.tabsListOverflow ? r("div", { staticClass: "tabs-sticky overflow-visible" }, [r("div", { staticClass: "nav-scroll nav-scroll-right", attrs: { role: "link", "data-test": "scroll-right" }, on: { click: e.scrollTabsRight } }, [r("i", { staticClass: "fas fa-chevron-right" })])]) : e._e()];
@@ -48658,6 +48659,7 @@ const JX = {
   },
   data() {
     return {
+      newName: "",
       draggedItem: 0,
       draggedOverItem: 0,
       editRowIndex: null
@@ -48671,14 +48673,25 @@ const JX = {
     }
   },
   methods: {
-    onBlur() {
-      this.editRowIndex = -1;
+    validateState(t, e) {
+      const r = !(t != null && t.trim()), 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 != null && t.trim() ? 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) {
+      this.newName = t.name;
+    },
+    async onBlur(t, e) {
+      this.validateState(t, e) === !1 ? this.newName = e.name : e.name = t, await this.$nextTick(), setTimeout(() => {
         this.editRowIndex = null;
-        return;
-      }
+      }, 250);
+    },
+    async onCancel(t) {
+      this.newName = t.name, this.editRowIndex = null;
+    },
+    onClick(t, e) {
       this.editRowIndex = e, this.$emit("item-edit", t);
     },
     dragStart(t, e) {
@@ -48699,18 +48712,22 @@ const JX = {
       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;
+          for (let o = r + 1; o <= a; o++) {
+            const u = e[o].order;
+            e[o].order = u + 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;
+          for (let o = a; o <= r - 1; o++) {
+            const u = e[o].order;
+            e[o].order = u + n;
           }
           e[r].order = i;
         }
+        const s = [...e];
+        s.sort((o, u) => o.order - u.order), s.forEach((o, u) => {
+          o.order = u + 1;
+        });
       }
       this.$emit("ordered", e);
     },
@@ -48722,11 +48739,17 @@ 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();
-    } }, 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) {
+    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(e.newName, a), error: e.validateError(e.newName, a) }, on: { blur: function(n) {
+      return n.stopPropagation(), e.onBlur(e.newName, a);
+    }, keydown: [function(n) {
+      return !n.type.indexOf("key") && e._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : (n.stopPropagation(), e.onBlur(e.newName, a));
+    }, function(n) {
+      return !n.type.indexOf("key") && e._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : (n.stopPropagation(), e.onCancel(a));
+    }], focus: function(n) {
+      return e.onFocus(a);
+    } }, model: { value: e.newName, callback: function(n) {
+      e.newName = n;
+    }, expression: "newName" } }) : 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);
@@ -48744,7 +48767,7 @@ var ZX = function() {
   XX,
   !1,
   null,
-  "79fd3284",
+  "783e3808",
   null,
   null
 );
@@ -49063,12 +49086,21 @@ const oee = [
       }), t.open = !0;
     },
     migrateConfig(t = this.config) {
-      t.forEach((e) => this.replaceFormText(e.items)), t.forEach((e) => this.migrateFormSubmit(e.items)), t.forEach((e) => this.updateFieldNameValidation(e.items)), t.forEach(
+      t.forEach((e) => this.replaceFormText(e.items)), t.forEach((e) => this.migrateFormSubmit(e.items)), t.forEach((e) => this.updateFieldNameValidation(e.items)), this.updatePageOrder(t), t.forEach(
         (e) => this.removeDataVariableFromNestedScreens(e.items)
       ), t.forEach((e, r) => {
         e.order = e.order || r + 1;
       });
     },
+    updatePageOrder(t) {
+      const e = [...t];
+      e.sort((r, a) => {
+        const i = r.order || t.indexOf(r) + 1, n = a.order || t.indexOf(a) + 1;
+        return i - n;
+      }), e.forEach((r, a) => {
+        r.order = a + 1;
+      });
+    },
     updateFieldNameValidation(t) {
       t.forEach((e) => {
         e.inspector && e.inspector.forEach((r) => {
@@ -49204,8 +49236,8 @@ const oee = [
       this.config[this.editPageIndex].name = this.editPageName, this.updateState();
     },
     addPage(t) {
-      if (this.showAddPageValidations = !0, this.checkPageName(this.addPageName, !0)) {
-        t.preventDefault();
+      if (this.checkPageName(this.addPageName, !0)) {
+        this.showAddPageValidations = !0, t.preventDefault();
         return;
       }
       const r = this.config.reduce((a, i) => i.order > a ? i.order : a, 0);
@@ -49255,7 +49287,7 @@ const oee = [
         this.config = t, ja.ProcessMaker.alert(e.message, "danger");
         return;
       }
-      this.$store.dispatch("undoRedoModule/pushState", {
+      this.updatePageOrder(this.config), this.$store.dispatch("undoRedoModule/pushState", {
         config: JSON.stringify(this.config),
         currentPage: this.currentPage,
         deletedPage: !0
@@ -49456,7 +49488,7 @@ var dee = function() {
   pee,
   !1,
   null,
-  "6dca9fa7",
+  "fdf4961e",
   null,
   null
 );