@processmaker/modeler 1.22.2 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.22.2",
+  "version": "1.24.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",

package/src/components/crown/crownButtons/addLaneAboveButton.vue

@@ -2,10 +2,14 @@
   <crown-button
     id="lane-above-button"
     aria-label="Add lane above icon"
-    :src="laneAboveIcon"
     v-on="$listeners"
     :width="25"
-  />
+  >
+    <img
+      :src="laneAboveIcon"
+      aria-hidden="true"
+    >
+  </crown-button>
 </template>
 
 <script>

package/src/components/crown/crownButtons/addLaneBelowButton.vue

@@ -2,10 +2,14 @@
   <crown-button
     id="lane-below-button"
     aria-label="Add lane below icon"
-    :src="laneBelowIcon"
     v-on="$listeners"
     :width="25"
-  />
+  >
+    <img
+      :src="laneBelowIcon"
+      aria-hidden="true"
+    >
+  </crown-button>
 </template>
 
 <script>
@@ -20,4 +24,4 @@ export default {
     };
   },
 };
-</script>
+</script>

package/src/components/crown/crownButtons/associationFlowButton.vue

@@ -5,10 +5,14 @@
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
     id="association-flow-button"
     aria-label="Add association flow"
-    :src="connectIcon"
     role="menuitem"
     @click="addAssociation"
-  />
+  >
+    <img
+      :src="connectIcon"
+      aria-hidden="true"
+    >
+  </crown-button>
 </template>
 
 <script>
@@ -42,4 +46,4 @@ export default {
     },
   },
 };
-</script>
+</script>

package/src/components/crown/crownButtons/copyButton.vue

@@ -6,9 +6,14 @@
     aria-label="Copy Element"
     data-test="copy-button"
     role="menuitem"
-    :src="copyIcon"
     @click="copyElement"
-  />
+  >
+    <img
+      :src="copyIcon"
+      aria-hidden="true"
+    >
+  </crown-button>
+  
 </template>
 
 <script>

package/src/components/crown/crownButtons/crownButton.vue

@@ -8,7 +8,6 @@
     <slot>
       <img
         :src="src"
-        alt=""
         width="width"
         height="height"
       >
@@ -41,8 +40,12 @@ export default {
   margin-top: 0;
   display: flex;
 }
-img, i {
-  margin: 5px 10px;
-  width: 15px;
+img {
+  margin: 0px 10px;
+  height: 15px;
+}
+i {
+  margin: 0px 10px;
+  font-size: 15px;
 }
 </style>

package/src/components/crown/crownButtons/crownDropdown.scss

@@ -13,6 +13,7 @@ $crown-left-chevron: 0.3rem;
     background: none;
     border: none;
     color: $primary-white;
+    height: 15px;
   }
 }
 

package/src/components/crown/crownButtons/dataAssociationFlowButton.vue

@@ -5,10 +5,14 @@
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
     id="association-flow-button"
     aria-label="Add association flow"
-    :src="connectIcon"
     role="menuitem"
     @click="addDataAssociation"
-  />
+  >
+    <img
+      :src="connectIcon"
+      aria-hidden="true"
+    >
+  </crown-button>
 </template>
 
 <script>

package/src/components/crown/crownButtons/defaultFlowButton.vue

@@ -6,9 +6,13 @@
     aria-label="Default Flow"
     data-test="default-flow"
     role="menuitem"
-    :src="icon"
     @click="click"
-  />
+  >
+    <img
+      :src="icon"
+      aria-hidden="true"
+    >
+  </crown-button>
 </template>
 
 <script>

package/src/components/crown/crownButtons/deleteButton.vue

@@ -13,7 +13,6 @@
       data-prefix="fas"
       data-icon="trash-alt"
       class="fa-trash-alt trash-icon"
-      alt=""
     >
   </crown-button>
 </template>
@@ -65,9 +64,4 @@ export default {
     },
   },
 };
-</script>
-<style>
-  .trash-icon {
-    height: 13.25px;
-  }
-</style>
+</script>

package/src/components/crown/crownButtons/genericFlowButton.vue

@@ -5,10 +5,14 @@
     :title="$t('Flow')"
     id="generic-flow-button"
     aria-label="Create a flow"
-    :src="sequenceFlow"
     role="menuitem"
     @click="addSequence"
-  />
+  >
+    <img
+      :src="sequenceFlow"
+      aria-hidden="true"
+    >
+  </crown-button>
 </template>
 <script>
 import Flow from '@/assets/connect-elements.svg';
@@ -71,4 +75,4 @@ export default {
     this.$t = this.$t.bind(this);
   },
 };
-</script>
+</script>

package/src/components/crown/crownConfig/crownConfig.scss

@@ -6,6 +6,7 @@ $crown-left-chevron: 0.3rem;
   position: absolute;
   z-index: 0;
   display: flex;
+  align-items: center;
   justify-content: center;
   width: auto;
   height: 1.85rem;

package/src/components/nodes/subProcess/SubProcessFormSelect.vue

@@ -6,16 +6,16 @@
       :helper="$t('Select which Process this element calls')"
       v-model="selectedProcess"
       :showLabels="false"
-      :allow-empty="false"
-      :disabled="processList.length === 0"
+      :allow-empty="true"
       :options="processList"
+      :loading="loading"
       optionContent="name"
       class="p-0 mb-2"
       validation="required"
       @search-change="searchChange"
       :searchable="true"
       :internal-search="false"
-      :preserve-search="true"
+      :preserve-search="false"
       :clear-on-select="false"
     />
 
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import debounce from 'lodash/debounce';
 import uniqBy from 'lodash/uniqBy';
 
 export default {
@@ -107,7 +108,7 @@ export default {
   },
   methods: {
     searchChange(filter) {
-      this.loadProcesses(filter);
+      this.loadProcessesDebounced(filter);
     },
     filterValidProcesses(processes) {
       return processes.filter(process => {
@@ -205,6 +206,9 @@ export default {
     },
   },
   created() {
+    this.loadProcessesDebounced = debounce((filter) => {
+      this.loadProcesses(filter);
+    }, 500);
     if (this.processList.length === 0) {
       this.loadProcesses();
     } else {