@processmaker/screen-builder 2.83.1 → 2.83.3

package/package.json

@@ -1,18 +1,14 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.83.1",
+  "version": "2.83.3",
   "scripts": {
-    "dev": "vite",
-    "serve": "vue-cli-service serve",
+    "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "build-bundle": "npm run build",
-    "lint-fix": "vue-cli-service lint",
-    "open-cypress": "NODE_ENV=test TZ=UTC nyc cypress open",
-    "run-cypress": "NODE_ENV=test TZ=UTC nyc cypress run",
-    "test": "vue-cli-service test:unit"
+    "open-cypress": "nyc cypress open",
+    "run-cypress": "TZ=UTC nyc cypress run"
   },
   "main": "./dist/vue-form-builder.umd.js",
   "module": "./dist/vue-form-builder.es.js",
@@ -46,10 +42,12 @@
     "vuelidate": "^0.7.5"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "~1.3.1",
+    "@4tw/cypress-drag-drop": "^2.2.5",
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
-    "@cypress/code-coverage": "^3.8.1",
+    "@cypress-audit/lighthouse": "^1.4.2",
+    "@cypress-audit/pa11y": "^1.4.2",
+    "@cypress/code-coverage": "^3.12.19",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
@@ -64,17 +62,18 @@
     "bootstrap-vue": "^2.19.0",
     "css-loader": "^5.2.7",
     "css-tree": "^1.0.0-alpha.29",
-    "cypress": "^3.8.0",
-    "cypress-audit": "^1.1.0",
-    "cypress-wait-until": "^1.7.1",
+    "cypress": "^13.6.3",
+    "cypress-wait-until": "^3.0.1",
     "eslint": "^8.21.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.3.0",
     "expr-eval": "^2.0.2",
+    "globby": "^11.1.0",
     "i18next": "^15.0.8",
     "identity-obj-proxy": "^3.0.0",
     "inputmask": "^5.0.7",
@@ -85,6 +84,7 @@
     "v-calendar": "^0.9.7",
     "validatorjs": "^3.14.2",
     "vite": "^4.0.4",
+    "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^2.6.12",
     "vue-deepset": "^0.6.3",

package/src/components/editor/loop.vue

@@ -1,129 +1,145 @@
 <template>
   <div class="column-draggable" :selector="config.customCssSelector">
-    <draggable
-    style="min-height: 80px;"
-    :list="items"
-    group="controls"
-    >
-    <div class="control-item"
-    :class="{selected: selected === element, hasError: hasError(element)}"
-    v-for="(element,index) in items"
-    :key="index"
-    @click.stop="inspect(element)"
-    >
-    <div v-if="element.container" @click.stop="inspect(element)">
-      <div class="m-2 card border-0" :class="{ 'ai-section-card': isAiSection(element) && selected === element }">
-        <div
-        v-if="selected === element"
-        class="card-header form-element-header d-flex align-items-center border rounded"
-        :class="{ 'pulse': isAiSection(element) }"
-        >
-        <i class="fas fa-arrows-alt-v mr-1 text-muted"/>
-        <i v-if="element.config.icon" :class="element.config.icon" class="mr-2 ml-1"/>
-        {{ element.config.name || $t('Variable Name') }}
-        <div class="ml-auto">
-          <button
-            v-if="isAiSection(element) && aiPreview(element)"
-            class="btn btn-sm btn-primary mr-2"
-            :title="$t('Apply Changes')"
-            @click="applyAiChanges(element)"
-          >
-            {{ $t("Apply Changes") }}
-          </button>
-          <button
-          v-if="!(isAiSection(element) && aiPreview(element))"
-          class="btn btn-sm btn-secondary mr-2"
-          :title="$t('Copy Control')"
-          @click="duplicateItem(index)"
+    <draggable style="min-height: 80px" :list="items" group="controls">
+      <div
+        v-for="(element, index) in items"
+        :key="index"
+        class="control-item"
+        :class="{ selected: selected === element, hasError: hasError(element) }"
+        @click.stop="inspect(element)"
+      >
+        <div v-if="element.container" @click.stop="inspect(element)">
+          <div
+            class="m-2 card border-0"
+            :class="{
+              'ai-section-card': isAiSection(element) && selected === element
+            }"
           >
-          <i class="fas fa-copy text-light"/>
-        </button>
-        <button
-        class="btn btn-sm btn-danger"
-        @click="deleteItem(index)"
-        :aria-label="$t('Delete')"
-        >
-        <i class="far fa-trash-alt text-light"/>
-      </button>
-    </div>
-  </div>
-  
-  <component :class="elementCssClass(element)"
-  :validationErrors="validationErrors"
-  class="mb-3 mr-3 ml-3"
-  :selected="selected"
-  :ai-element="element"
-  @inspect="inspect"
-  @update-state="$emit('update-state')"
-  v-model="element.items"
-  :config="element.config"
-  :is="element['editor-component']"
-  />
-</div>
-</div>
+            <div
+              v-if="selected === element"
+              class="card-header form-element-header d-flex align-items-center border rounded"
+              :class="{ pulse: isAiSection(element) }"
+            >
+              <i class="fas fa-arrows-alt-v mr-1 text-muted" />
+              <i
+                v-if="element.config.icon"
+                :class="element.config.icon"
+                class="mr-2 ml-1"
+              />
+              {{ element.config.name || $t("Variable Name") }}
+              <div class="ml-auto">
+                <button
+                  v-if="isAiSection(element) && aiPreview(element)"
+                  class="btn btn-sm btn-primary mr-2"
+                  :title="$t('Apply Changes')"
+                  @click="applyAiChanges(element)"
+                >
+                  {{ $t("Apply Changes") }}
+                </button>
+                <button
+                  v-if="!(isAiSection(element) && aiPreview(element))"
+                  class="btn btn-sm btn-secondary mr-2"
+                  :title="$t('Copy Control')"
+                  @click="duplicateItem(index)"
+                >
+                  <i class="fas fa-copy text-light" />
+                </button>
+                <button
+                  class="btn btn-sm btn-danger"
+                  :aria-label="$t('Delete')"
+                  @click="deleteItem(index)"
+                >
+                  <i class="far fa-trash-alt text-light" />
+                </button>
+              </div>
+            </div>
 
-<div v-else :id="element.config.name ? element.config.name : undefined">
-  <div class="m-2" :class="{ 'card' : selected === element }">
-    <div
-    v-if="selected === element"
-    class="card-header form-element-header d-flex align-items-center"
-    >
-    <i class="fas fa-arrows-alt-v mr-1 text-muted"/>
-    <i v-if="element.config.icon" :class="element.config.icon" class="mr-2 ml-1"/>
-    {{ element.config.name || $t('Variable Name') }}
-    <div class="ml-auto">
-      <button
-      class="btn btn-sm btn-secondary mr-2"
-      :title="$t('Copy Control')"
-      @click="duplicateItem(index)"
-      >
-      <i class="fas fa-copy text-light"/>
-    </button>
-    <button
-    class="btn btn-sm btn-danger"
-    @click="deleteItem(index)"
-    :aria-label="$t('Delete')"
-    >
-    <i class="far fa-trash-alt text-light"/>
-  </button>
-</div>
-</div>
+            <component
+              v-model="element.items"
+              :is="element['editor-component']"
+              :class="elementCssClass(element)"
+              :validation-errors="validationErrors"
+              class="mb-3 mr-3 ml-3"
+              :selected="selected"
+              :ai-element="element"
+              :config="element.config"
+              @inspect="inspect"
+              @update-state="$emit('update-state')"
+            />
+          </div>
+        </div>
+
+        <div v-else :id="element.config.name ? element.config.name : undefined">
+          <div class="m-2" :class="{ card: selected === element }">
+            <div
+              v-if="selected === element"
+              class="card-header form-element-header d-flex align-items-center"
+            >
+              <i class="fas fa-arrows-alt-v mr-1 text-muted" />
+              <i
+                v-if="element.config.icon"
+                :class="element.config.icon"
+                class="mr-2 ml-1"
+              />
+              {{ element.config.name || $t("Variable Name") }}
+              <div class="ml-auto">
+                <button
+                  class="btn btn-sm btn-secondary mr-2"
+                  :title="$t('Copy Control')"
+                  @click="duplicateItem(index)"
+                >
+                  <i class="fas fa-copy text-light" />
+                </button>
+                <button
+                  class="btn btn-sm btn-danger"
+                  :aria-label="$t('Delete')"
+                  @click="deleteItem(index)"
+                >
+                  <i class="far fa-trash-alt text-light" />
+                </button>
+              </div>
+            </div>
 
-<component
-class="p-3"
-:class="[elementCssClass(element), { 'prevent-interaction': !element.config.interactive }]"
-:tabindex="element.config.interactive ? 0 : -1"
-v-bind="element.config"
-:config="element.config"
-@input="element.config.interactive ? element.config.content = $event : null"
-:is="element['editor-component']"
-/>
-</div>
-</div>
-</div>
-</draggable>
-</div>
+            <component
+              v-bind="element.config"
+              :is="element['editor-component']"
+              class="p-3"
+              :class="[
+                elementCssClass(element),
+                { 'prevent-interaction': !element.config.interactive }
+              ]"
+              :tabindex="element.config.interactive ? 0 : -1"
+              :config="element.config"
+              @input="
+                element.config.interactive
+                  ? (element.config.content = $event)
+                  : null
+              "
+            />
+          </div>
+        </div>
+      </div>
+    </draggable>
+  </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable';
-import { HasColorProperty } from '@/mixins';
-import * as renderer from '@/components/renderer';
-import _ from 'lodash';
+import draggable from "vuedraggable";
+import _ from "lodash";
 import {
-  FormInput,
-  FormSelectList,
-  FormTextArea,
   FormCheckbox,
   FormDatePicker,
   FormHtmlEditor,
   FormHtmlViewer,
-} from '@processmaker/vue-form-elements';
+  FormInput,
+  FormSelectList,
+  FormTextArea
+} from "@processmaker/vue-form-elements";
+import { HasColorProperty } from "@/mixins";
+import * as renderer from "@/components/renderer";
 
 export default {
-  name: 'Loop',
-  mixins: [HasColorProperty],
-  props: ['value', 'name', 'config', 'selected', 'validationErrors'],
+  name: "Loop",
   components: {
     draggable,
     FormInput,
@@ -133,14 +149,27 @@ export default {
     FormDatePicker,
     FormHtmlEditor,
     FormHtmlViewer,
-    ...renderer,
+    ...renderer
   },
+  mixins: [HasColorProperty],
+  props: ["value", "name", "config", "selected", "validationErrors"],
   data() {
     return {
       items: [],
       cancelledJobs: []
     };
   },
+  watch: {
+    value: {
+      handler() {
+        this.items = this.value;
+      },
+      immediate: true
+    },
+    items() {
+      this.$emit("input", this.items);
+    }
+  },
   mounted() {
     if (
       !localStorage.getItem("cancelledJobs") ||
@@ -157,34 +186,25 @@ export default {
       this.updateProgress(progress, nonce);
     });
   },
-  watch: {
-    value: {
-      handler() {
-        this.items = this.value;
-      },
-      immediate: true,
-    },
-    items() {
-      this.$emit('input', this.items);
-    },
-  },
   methods: {
     hasError(element) {
-      if (!this.validationErrors) { return false; }
+      if (!this.validationErrors) {
+        return false;
+      }
       return this.validationErrors.some(({ item }) => item === element);
     },
     inspect(element) {
-      this.$emit('inspect', element);
+      this.$emit("inspect", element);
     },
     deleteItem(index) {
       // Remove the item from the array in currentPage
       this.items.splice(index, 1);
-      this.$emit('update-state');
+      this.$emit("update-state");
     },
     duplicateItem(index) {
       const duplicate = _.cloneDeep(this.items[index]);
       this.items.push(duplicate);
-      this.$emit('update-state');
+      this.$emit("update-state");
     },
     isAiSection(element) {
       return element.component === "AiSection";
@@ -226,7 +246,7 @@ export default {
 .hasError {
   border: 1px solid red;
   border-radius: 0.25rem;
-  
+
   .form-element-header {
     border-bottom: 1px solid red;
     color: red;
@@ -245,25 +265,25 @@ export default {
 
 .control-item {
   position: relative;
-  
+
   .delete {
     position: absolute;
     top: 0px;
     right: 0px;
     display: none;
   }
-  
+
   &.selected,
   &:hover {
     .mask {
       border: 1px solid red;
     }
-    
+
     .delete {
       display: inline-block;
     }
   }
-  
+
   .mask {
     position: absolute;
     top: 0px;