@processmaker/screen-builder 2.84.0 → 2.84.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.84.0",
+  "version": "2.84.2",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",

package/src/App.vue

@@ -332,6 +332,7 @@ import controlConfig from "./form-builder-controls";
 import globalProperties from "./global-properties";
 
 import "bootstrap";
+import "./assets/css/tabs.css";
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;

package/src/assets/css/tabs.css

@@ -0,0 +1,118 @@
+/* Setup some colors */
+:root {
+    --tabs-blue: #1572c2;
+    --tabs-light: #c3c9cf;
+    --tabs-grey: #6a7888;
+    --tabs-border: #cdddee;
+    --tabs-scroll-bg: #ebeef2;
+    --tabs-white: #ffffff;
+  }
+  /* Override Bootstrap default tab styles */
+  .nav-tabs {
+    border-bottom: 1px solid var(--tabs-border) !important;
+    flex-wrap: nowrap !important;
+    overflow: hidden !important;
+  }
+  
+  .nav-tabs .nav-item .nav-link {
+    display: flex;
+    align-items: center;
+  }
+  
+  /* Style for individual tabs */
+  .nav-tabs .nav-item.show .nav-link,
+  .nav-tabs .nav-link.active {
+    border: none;
+    box-shadow: inset 0 -3px 0 0 var(--tabs-blue) !important; /* This sets the blue bottom border for the active tab */
+    background-color: var(
+      --tabs-white
+    ); /* This sets the background color for the active tab */
+    border-radius: 0 !important; /* This removes the border-radius */
+    color: var(--tabs-blue) !important;
+    position: relative;
+  }
+  
+  /* Style for non-active tabs */
+  .nav-tabs .nav-link {
+    border: 1px solid var(--tabs-border) !important;
+    color: var(--tabs-grey); /* This sets the text color for the inactive tabs */
+    border-radius: 0 !important; /* This ensures no border radius for a flat design */
+    padding: 0.5rem 1rem;
+    margin-right: -1px;
+    text-wrap: nowrap !important;
+    flex-wrap: nowrap !important;
+  }
+  
+  .nav-tabs .nav-item .nav-link:not(.active) {
+    .badge {
+      background-color: #6A7888 !important;
+    }
+  
+    span:not(.badge, .close-tab) {
+      color: #556271 !important;
+    }
+  }
+  
+  /* Style for the hover effect */
+  .nav-tabs .nav-link:hover {
+    border: none;
+    background-color: var(
+      --tabs-white
+    ); /* This changes the background color when hovering */
+  }
+  
+  /* Adding the 'x' button to the tab */
+  .nav-tabs .nav-link .close-tab {
+    font-size: 0.8rem;
+    color: var(--tabs-light);
+    margin-left: 0.5rem;
+    display: inline !important;
+  }
+  
+  /* Style adjustments for the 'x' button */
+  .nav-tabs .nav-link .close-tab:hover {
+    color: var(--tabs-grey);
+    cursor: pointer;
+  }
+  .nav-tabs .nav-scroll {
+    position: absolute;
+    top: calc(50% - 0.75rem);
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--tabs-scroll-bg);
+    color: var(--tabs-grey);
+    cursor: pointer;
+    border: 1px solid var(--tabs-border);
+    border-radius: 100%;
+    z-index: 1;
+  }
+  .nav-tabs .nav-scroll-right {
+    right: 5px;
+  }
+  .nav-tabs .nav-scroll-left {
+    margin-left: 5px;
+  }
+  .nav-tabs .tabs-sticky {
+    position: sticky;
+    -webkit-position: sticky;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+  .nav-tabs .tabs-start {
+    background-color: var(--tabs-white);
+  }
+  /* add margin right to the last li element to hide safely the right scroll button */
+  .nav-tabs li.nav-item:last-of-type {
+    margin-right: 2rem;
+  }
+  .flat-tabs .h-tab {
+    height: calc(100% - 42px) !important;
+  }
+  .dd-ml {
+    margin-left: 2rem;
+  }

package/src/components/TabsBar.vue

@@ -231,124 +231,3 @@ export default {
   }
 };
 </script>
-
-<style>
-/* Setup some colors */
-:root {
-  --tabs-blue: #1572c2;
-  --tabs-light: #c3c9cf;
-  --tabs-grey: #6a7888;
-  --tabs-border: #cdddee;
-  --tabs-scroll-bg: #ebeef2;
-  --tabs-white: #ffffff;
-}
-/* Override Bootstrap default tab styles */
-.nav-tabs {
-  border-bottom: 1px solid var(--tabs-border) !important;
-  flex-wrap: nowrap !important;
-  overflow: hidden !important;
-}
-
-.nav-tabs .nav-item .nav-link {
-  display: flex;
-  align-items: center;
-}
-
-/* Style for individual tabs */
-.nav-tabs .nav-item.show .nav-link,
-.nav-tabs .nav-link.active {
-  border: none;
-  box-shadow: inset 0 -3px 0 0 var(--tabs-blue) !important; /* This sets the blue bottom border for the active tab */
-  background-color: var(
-    --tabs-white
-  ); /* This sets the background color for the active tab */
-  border-radius: 0 !important; /* This removes the border-radius */
-  color: var(--tabs-blue) !important;
-  position: relative;
-}
-
-/* Style for non-active tabs */
-.nav-tabs .nav-link {
-  border: 1px solid var(--tabs-border) !important;
-  color: var(--tabs-grey); /* This sets the text color for the inactive tabs */
-  border-radius: 0 !important; /* This ensures no border radius for a flat design */
-  padding: 0.5rem 1rem;
-  margin-right: -1px;
-  text-wrap: nowrap !important;
-  flex-wrap: nowrap !important;
-}
-
-.nav-tabs .nav-item .nav-link:not(.active) {
-  .badge {
-    background-color: #6A7888 !important;
-  }
-
-  span:not(.badge, .close-tab) {
-    color: #556271 !important;
-  }
-}
-
-/* Style for the hover effect */
-.nav-tabs .nav-link:hover {
-  border: none;
-  background-color: var(
-    --tabs-white
-  ); /* This changes the background color when hovering */
-}
-
-/* Adding the 'x' button to the tab */
-.nav-tabs .nav-link .close-tab {
-  font-size: 0.8rem;
-  color: var(--tabs-light);
-  margin-left: 0.5rem;
-  display: inline !important;
-}
-
-/* Style adjustments for the 'x' button */
-.nav-tabs .nav-link .close-tab:hover {
-  color: var(--tabs-grey);
-  cursor: pointer;
-}
-.nav-tabs .nav-scroll {
-  position: absolute;
-  top: calc(50% - 0.75rem);
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--tabs-scroll-bg);
-  color: var(--tabs-grey);
-  cursor: pointer;
-  border: 1px solid var(--tabs-border);
-  border-radius: 100%;
-  z-index: 1;
-}
-.nav-tabs .nav-scroll-right {
-  right: 5px;
-}
-.nav-tabs .nav-scroll-left {
-  margin-left: 5px;
-}
-.nav-tabs .tabs-sticky {
-  position: sticky;
-  -webkit-position: sticky;
-  left: 0;
-  right: 0;
-  z-index: 2;
-}
-.nav-tabs .tabs-start {
-  background-color: var(--tabs-white);
-}
-/* add margin right to the last li element to hide safely the right scroll button */
-.nav-tabs .nav-item:last-of-type {
-  margin-right: 2rem;
-}
-.flat-tabs .h-tab {
-  height: calc(100% - 42px) !important;
-}
-.dd-ml {
-  margin-left: 2rem;
-}
-</style>

package/src/components/editor/pagesDropdown.vue

@@ -106,7 +106,7 @@ export default {
      * @param {PageItem} page - The selected page item.
      */
     onClickPage(page) {
-      this.$emit("clickPage", page);
+      this.$emit("clickPage", this.data[page]);
     }
   }
 };

package/src/components/index.js

@@ -47,6 +47,7 @@ import FormListTable from "./renderer/form-list-table.vue";
 import FormAnalyticsChart from "./renderer/form-analytics-chart.vue";
 import accordions from "@/components/accordions";
 import VariableNameGenerator from "@/components/VariableNameGenerator";
+import "../assets/css/tabs.css";
 
 const rendererComponents = {
   ...renderer,

package/src/components/sortable/sortableList/SortableList.vue

@@ -27,12 +27,20 @@
               v-model="item.name"
               type="text"
               autofocus
-              @blur.stop="onBlur()"
+              required
+              :state="validateState(item.name, item)"
+              :error="validateError(item.name, item)"
+              @blur.stop="onBlur(item.name, item)"
+              @keydown.enter.stop="onBlur(item.name, item)"
+              @focus="onFocus(item.name, item)"
             />
             <span v-else>{{ item.name }}</span>
           </div>
           <div class="border rounded-lg sortable-item-action">
-            <button class="btn" @click.stop="onClick(item, index)">
+            <button v-if="editRowIndex === index" class="btn">
+              <i class="fas fa-check"></i>
+            </button>
+            <button v-else class="btn" @click.stop="onClick(item, index)">
               <i class="fas fa-edit"></i>
             </button>
             <div class="sortable-item-vr"></div>
@@ -55,34 +63,55 @@ export default {
   },
   data() {
     return {
+      originalName: '',
       draggedItem: 0,
       draggedOverItem: 0,
-      itemsClone: [],
       editRowIndex: null,
     };
   },
   computed: {
     sortedItems() {
-      return this.filteredItems.sort((a, b) => a.order - b.order);
+      const sortedItems = [...this.filteredItems].sort(
+        (a, b) => a.order - b.order
+      );
+      return sortedItems;
     }
   },
-  watch: {
-    items: {
-      handler(newVal) {
-        this.itemsClone = [...newVal];
-      },
-      immediate: true,
-    },
-  },
   methods: {
-    onBlur() {
-      this.editRowIndex = -1;
+    validateState(name, item) {
+      const isEmpty = !name;
+      const isDuplicated = this.items
+        .filter((i) => i !== item)
+        .find((i) => i.name === name);
+      return isEmpty || isDuplicated ? false : null;
     },
-    onClick(item, index) {
-      if (this.editRowIndex === -1 || this.editRowIndex === index) {
-        this.editRowIndex = null;
-        return;
+    validateError(name, item) {
+      const isEmpty = !name;
+      if (!isEmpty) {
+        return this.$t("The Page Name field is required.");
+      }
+      const isDuplicated = this.items
+        .filter((i) => i !== item)
+        .find((i) => i.name === name);
+      if (isDuplicated) {
+        return this.$t('Must be unique.');
       }
+      return '';
+    },
+    onFocus(name, item) {
+      this.originalName = name;
+    },
+    async onBlur(name, item) {
+      if (this.validateState(name, item) === false) {
+        // eslint-disable-next-line no-param-reassign
+        item.name = this.originalName;
+      }
+      await this.$nextTick();
+      setTimeout(() => {
+        this.editRowIndex = null;
+      }, 250);
+    },
+    onClick(item, index) {
       this.editRowIndex = index;
       this.$emit("item-edit", item);
     },
@@ -101,34 +130,41 @@ export default {
       event.target.classList.remove('dragging');
 
       // get the index of the dragged item and the dragged over item
-      const draggedItemIndex = this.itemsClone.findIndex(item => item.order === this.draggedItem);
-      const draggedOverItemIndex = this.itemsClone.findIndex(item => item.order === this.draggedOverItem);
+      const itemsSortedClone = [...this.items].sort(
+        (a, b) => a.order - b.order
+      );
+      const draggedItemIndex = itemsSortedClone.findIndex(
+        (item) => item.order === this.draggedItem
+      );
+      const draggedOverItemIndex = itemsSortedClone.findIndex(
+        (item) => item.order === this.draggedOverItem
+      );
 
       if (draggedItemIndex !== draggedOverItemIndex) {
         // get the order of the dragged over item
-        const tempOrder = this.itemsClone[draggedOverItemIndex].order;
+        const tempOrder = itemsSortedClone[draggedOverItemIndex].order;
         // set the increment
         const increment = this.draggedItem > this.draggedOverItem ? 1 : -1;
 
         // update the order of the items between the dragged item and the dragged over item
         if (draggedItemIndex < draggedOverItemIndex) {
           for (let i = draggedItemIndex + 1; i <= draggedOverItemIndex; i++) {
-            const orderAux = this.itemsClone[i].order;
-            this.itemsClone[i].order = orderAux + increment;
+            const orderAux = itemsSortedClone[i].order;
+            itemsSortedClone[i].order = orderAux + increment;
           }
 
-          this.itemsClone[draggedItemIndex].order = tempOrder;
+          itemsSortedClone[draggedItemIndex].order = tempOrder;
         } else if (draggedItemIndex > draggedOverItemIndex) {
           for (let i = draggedOverItemIndex; i <= draggedItemIndex - 1; i++) {
-            const orderAux = this.itemsClone[i].order;
-            this.itemsClone[i].order = orderAux + increment;
+            const orderAux = itemsSortedClone[i].order;
+            itemsSortedClone[i].order = orderAux + increment;
           }
 
-          this.itemsClone[draggedItemIndex].order = tempOrder;
+          itemsSortedClone[draggedItemIndex].order = tempOrder;
         }
       }
 
-      this.$emit('ordered', this.itemsClone);
+      this.$emit('ordered', itemsSortedClone);
     },
     dragOver(event) {
       event.preventDefault();

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

@@ -109,15 +109,15 @@
         <template #tabs-start>
           <pages-dropdown
             v-if="showToolbar"
-            :data="config"
+            :data="sortedPages"
             @addPage="$bvModal.show('addPageModal')"
             @clickPage="onClick"
             @seeAllPages="$bvModal.show('openSortable')"
           />
         </template>
-        <template #default>
+        <template #default="{ currentPage: tabPage }">
           <div
-            v-if="isCurrentPageEmpty(currentPage)"
+            v-if="isCurrentPageEmpty(tabPage)"
             data-cy="screen-drop-zone"
             class="d-flex justify-content-center align-items-center drag-placeholder text-center position-absolute rounded mt-4 flex-column"
           >
@@ -150,7 +150,7 @@
             data-cy="editor-content"
             class="h-100"
             ghost-class="form-control-ghost"
-            :value="config[currentPage].items"
+            :value="config[tabPage].items"
             v-bind="{
               group: { name: 'controls' },
               swapThreshold: 0.5
@@ -158,7 +158,7 @@
             @input="updateConfig"
           >
             <div
-              v-for="(element, index) in config[currentPage].items"
+              v-for="(element, index) in config[tabPage].items"
               :key="index"
               class="control-item mt-4 mb-4"
               :class="{
@@ -279,7 +279,7 @@
             </div>
           </draggable>
 
-          <div v-if="!isCurrentPageEmpty" data-cy="screen-drop-zone">
+          <div v-if="!isCurrentPageEmpty(tabPage)" data-cy="screen-drop-zone">
             &nbsp;
           </div>
         </template>
@@ -624,6 +624,9 @@ export default {
     };
   },
   computed: {
+    sortedPages() {
+      return [...this.config].sort((a, b) => a.order - b.order);
+    },
     builder() {
       return this;
     },
@@ -764,7 +767,7 @@ export default {
       return this.config[currentPage]?.items?.length === 0;
     },
     onClick(page) {
-      this.$refs.tabsBar.openPageByIndex(page);
+      this.$refs.tabsBar.openPageByIndex(this.config.indexOf(page));
     },
     checkPageName(value, force = false) {
       if (!force && !this.showAddPageValidations) {

package/src/stories/DropdownAndPages.stories.js

@@ -37,7 +37,8 @@ export default {
       onSeeAllPages() {
         console.log("See all pages clicked");
       },
-      onClick(index) {
+      onClick(page) {
+        const index = this.pages.indexOf(page);
         this.$refs.tabsBar.openPageByIndex(index);
       }
     }

package/src/stories/Sortable.stories.js

@@ -221,5 +221,16 @@ export const UserCanSortWithFilterByText = {
     expect(items[2]).toHaveTextContent("Hephaïstus");
     expect(items[3]).toHaveTextContent("Athena");
     expect(items[4]).toHaveTextContent("Hera");
+
+    // Drag "Athena" to "Hera" position
+    await dragAndDrop(canvas.getByTitle("Athena"), canvas.getByTitle("Hera"));
+
+    // Check the new order
+    const itemsOrder = canvas.getAllByTestId(/item-\d+/);
+    expect(itemsOrder[0]).toHaveAttribute("data-order", "1");
+    expect(itemsOrder[1]).toHaveAttribute("data-order", "2");
+    expect(itemsOrder[2]).toHaveAttribute("data-order", "3");
+    expect(itemsOrder[3]).toHaveAttribute("data-order", "4");
+    expect(itemsOrder[4]).toHaveAttribute("data-order", "5");
   }
 };