@processmaker/screen-builder 2.85.7 → 2.85.9

package/package.json

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

package/src/components/TabsBar.vue

@@ -43,6 +43,7 @@
           {{ pages[index]?.name }}
         </span>
         <span
+          v-if="isMultiPage"
           :data-test="`close-tab-${n}`"
           class="close-tab"
           role="link"
@@ -107,6 +108,13 @@ export default {
     buttonIcon: {
       type: String,
       default: () => "fa fa-file"
+    },
+    /**
+     * Is multi page mode enabled
+     */
+    isMultiPage: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/src/components/renderer/form-input-masked.vue

@@ -55,13 +55,16 @@ export default {
   },
   methods: {
     loadMasks() {
-      Inputmask('currency', {
+      const mask = (this.suffix).trim() === 'INR' ? 'indianns' : 'currency';
+
+      Inputmask(mask,  {
         digits: this.precision,
         prefix: this.prefix,
         suffix: this.suffix,
         radixPoint: this.decimal,
         groupSeparator: this.thousands,
       }).mask(this.currencyInput);
+
       if (this.value) {
         this.currencyInput.inputmask.setValue(this.value);
       }
@@ -81,4 +84,4 @@ export default {
 </script>
 
 <style>
-</style>
+</style>

package/src/components/renderer/form-list-table.vue

@@ -14,19 +14,27 @@
             {{ $t(title) }}
           </p>
           <template v-if="dataControl.dropdownShow === 'requests'">
-            <b-dropdown variant="outline-secondary" no-caret>
+            <b-dropdown
+              variant="outline-secondary"
+              right
+              no-caret
+            >
               <template #button-content>
                 <i class="fas fa-caret-down" />
               </template>
               <b-dropdown-item
                 @click="handleDropdownSelection('requests_filter', 'by_me')"
               >
-                {{ $t("As Requester") }}
+                <span class="item-text">
+                  {{ $t("As Requester") }}
+                </span>
               </b-dropdown-item>
               <b-dropdown-item
                 @click="handleDropdownSelection('requests_filter', 'as_participant')"
               >
-                {{ $t("As Participant") }}
+                <span class="item-text">
+                  {{ $t("As Participant") }}
+                </span>
               </b-dropdown-item>
             </b-dropdown>
           </template>
@@ -38,68 +46,92 @@
       <div class="ml-auto d-flex align-items-center">
         <template v-if="dataControl.dropdownShow === 'requests'">
           <div class="mr-4">
-            <b-dropdown variant="outline-secondary" size="sm">
+            <b-dropdown
+              variant="outline-secondary"
+              size="sm"
+            >
               <template #button-content>
                 <span class="text-capitalize">
                   <b-icon
                     v-if="showBadge"
                     icon="circle-fill"
+                    class="mr-2"
                     :variant="badgeVariant"
                   />
                   {{ $t(titleDropdown) }}
                 </span>
               </template>
               <b-dropdown-item
-                variant="success"
-                @click="
-                  handleDropdownSelection('requests_dropdown', 'In Progress')
-                "
+                @click="handleDropdownSelection('requests_dropdown', 'all')"
               >
-                <i class="fas fa-circle mr-2" />{{ $t("In Progress") }}
+                <span class="item-text">
+                  {{ $t("View All") }}
+                </span>
               </b-dropdown-item>
               <b-dropdown-item
-                variant="primary"
-                @click="
-                  handleDropdownSelection('requests_dropdown', 'Completed')
-                "
+                @click="handleDropdownSelection('requests_dropdown', 'Completed')"
               >
-                <i class="fas fa-circle mr-2" />{{ $t("Completed") }}
+                <span class="item-text">
+                  <i
+                    class="fas fa-circle mr-2 text-primary" 
+                  />
+                  {{ $t("Completed") }}
+                </span>
               </b-dropdown-item>
               <b-dropdown-item
-                @click="handleDropdownSelection('requests_dropdown', 'all')"
+                @click="handleDropdownSelection('requests_dropdown', 'In Progress')"
               >
-                {{ $t("View All") }}
+                <span class="item-text">
+                  <i
+                    class="fas fa-circle mr-2 text-success"
+                  />
+                  {{ $t("In Progress") }}
+                </span>
               </b-dropdown-item>
             </b-dropdown>
           </div>
         </template>
         <template v-if="dataControl.dropdownShow === 'tasks'">
           <div class="mr-4">
-            <b-dropdown variant="outline-secondary" size="sm">
+            <b-dropdown
+              variant="outline-secondary"
+              size="sm"
+            >
               <template #button-content>
                 <span class="text-capitalize">
                   <b-icon
                     v-if="showBadge"
                     icon="circle-fill"
+                    class="mr-2"
                     :variant="badgeVariant"
                   />
                   {{ $t(titleDropdown) }}
                 </span>
               </template>
-              <b-dropdown-item
-                variant="warning"
-                @click="handleDropdownSelection('tasks', 'In Progress')"
-              >
-                <i class="fas fa-circle mr-2" />{{ $t("In Progress") }}
+              <b-dropdown-item @click="handleDropdownSelection('tasks', 'all')">
+                <span class="item-text">
+                  {{ $t("View All") }}
+                </span>
               </b-dropdown-item>
               <b-dropdown-item
-                variant="danger"
                 @click="handleDropdownSelection('tasks', 'Overdue')"
               >
-                <i class="fas fa-circle mr-2" />{{ $t("Overdue") }}
+                <span class="item-text">
+                <i
+                  class="fas fa-circle mr-2 text-danger"
+                />
+                {{ $t("Overdue") }}
+                </span>
               </b-dropdown-item>
-              <b-dropdown-item @click="handleDropdownSelection('tasks', 'all')">
-                {{ $t("View All") }}
+              <b-dropdown-item
+                @click="handleDropdownSelection('tasks', 'In Progress')"
+              >
+                <span class="item-text">
+                  <i
+                    class="fas fa-circle mr-2 text-warning"
+                  />
+                  {{ $t("In Progress") }}
+                </span>
               </b-dropdown-item>
             </b-dropdown>
           </div>
@@ -249,7 +281,8 @@ export default {
     },
     clearSearch(listType) {
       this.searchCriteria = "";
-      this.toggleInput(listType);
+      this.performSearch(listType);
+      this.showInput = !this.showInput;
     },
     /**
      * Set the badge's color of the filter selected
@@ -327,4 +360,24 @@ export default {
 .btn-outline-secondary {
   border: none;
 }
+
+.item-text {
+  color: #42526E;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+
+.dropdown-menu {
+  padding: 10px;
+  width: 211px;
+  box-shadow: 0px 10px 20px 4px #00000021;
+}
+
+.dropdown-item {
+  padding: 10px 8px;
+}
 </style>

package/src/components/screen-renderer.vue

@@ -39,6 +39,7 @@
       :vdata="value"
       :_parent="_parent"
       :_initial-page="currentPage"
+      @after-submit="afterSubmit"
       @submit="submit"
       @asyncWatcherTriggered="onAsyncWatcherOn"
       @asyncWatcherCompleted="onAsyncWatcherOff"
@@ -108,6 +109,9 @@ export default {
     },
     setCurrentPage(page) {
       this.$refs.component.setCurrentPage(page);
+    },
+    afterSubmit() {
+      this.$emit('after-submit', ...arguments);
     }
   }
 };

package/src/components/task.vue

@@ -30,6 +30,7 @@
             :key="refreshScreen"
             :loop-context="loopContext"
             @update="onUpdate"
+            @after-submit="afterSubmit"
             @submit="submit"
           />
         </div>
@@ -46,6 +47,7 @@
             :watchers="screen.watchers"
             :data="requestData"
             :type="screen.type"
+            @after-submit="afterSubmit"
             @submit="submit"
           />
         </div>
@@ -446,6 +448,9 @@ export default {
       }
       return 'card-header text-capitalize text-white ' + header;
     },
+    afterSubmit() {
+      this.$emit('after-submit', ...arguments);
+    },
     submit(formData = null, loading = false, buttonInfo = null) {
       //single click
       if (this.disabled) {

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

@@ -104,6 +104,7 @@
       <tabs-bar
         ref="tabsBar"
         :pages="config"
+        :is-multi-page="showToolbar"
         @tab-opened="currentPage = $event"
       >
         <template #tabs-start>
@@ -1386,7 +1387,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .custom-popover {
   margin-right: -400px;
   padding: 16px;

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

@@ -18,6 +18,7 @@
       :test-screen-definition="testScreenDefinition || false"
       class="p-0"
       :loop-context="loopContext"
+      @after-submit="afterSubmit"
       @submit="submit"
     />
   </div>
@@ -246,6 +247,9 @@ export default {
         node.$children.forEach((child) => this.registerCustomFunctions(child));
       }
     },
+    afterSubmit() {
+      this.$emit('after-submit', ...arguments);
+    },
     submit(eventData, loading = false, buttonInfo = null) {
       this.$emit("submit", this.data, loading, buttonInfo);
     },

package/src/currency.json

@@ -368,7 +368,7 @@
    {
      "code": "INR",
      "name": "Indian Rupee",
-     "format": "#,##,###.##",
+     "format": "#,###.##",
      "symbol": "₹"
    },
    {

package/src/mixins/ScreenBase.js

@@ -146,6 +146,15 @@ export default {
       }
     },
     async submitForm(eventData, loading = false, buttonInfo = null) {
+      const event = {
+        name: 'after-submit',
+        validation: true
+      };
+      this.$emit('after-submit', event, ...arguments);
+      if (event.validation === false) {
+        this.$emit('submit', this.vdata, loading, buttonInfo);
+        return;
+      }
       await this.validateNow(findRootScreen(this));
       this.hasSubmitted(true);
       if (!this.valid__ || this.disableSubmit__) {