@processmaker/screen-builder 2.83.2 → 2.83.4

package/src/components/editor/multi-column.vue

@@ -3,139 +3,165 @@
     <div :selector="config.customCssSelector">
       <div class="row">
         <template v-for="(item, index) in items">
-          <draggable :class="classColumn(index)"
-          class="column-draggable"
-          v-model="items[index]"
-          :value="items[index]"
-          @input="updateContainerConfig($event, index)"
-          group="controls"
-          :key="index"
+          <draggable
+            :key="index"
+            v-model="items[index]"
+            :class="classColumn(index)"
+            class="column-draggable"
+            :value="items[index]"
+            group="controls"
+            @input="updateContainerConfig($event, index)"
           >
-          <div class="control-item"
-          :class="{selected: selected === element, hasError: hasError(element)}"
-          v-for="(element,row) in item"
-          :key="row"
-          @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) }"
+              v-for="(element, row) in item"
+              :key="row"
+              class="control-item"
+              :class="{
+                selected: selected === element,
+                hasError: hasError(element)
+              }"
+              @click.stop="inspect(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"
-              @click="duplicateItem(index, row)"
-              :aria-label="$t('Duplicate')"
+              <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"
+                        :aria-label="$t('Duplicate')"
+                        @click="duplicateItem(index, row)"
+                      >
+                        <i class="fas fa-copy text-light" />
+                      </button>
+                      <button
+                        class="btn btn-sm btn-danger"
+                        :aria-label="$t('Delete')"
+                        @click="deleteItem(index, row)"
+                      >
+                        <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"
               >
-              <i class="fas fa-copy text-light"/>
-            </button>
-            <button
-            class="btn btn-sm btn-danger"
-            @click="deleteItem(index, row)"
-            :aria-label="$t('Delete')"
-            >
-            <i class="far fa-trash-alt text-light"/>
-          </button>
-        </div>
+                <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, row)"
+                      >
+                        <i class="fas fa-copy text-light" />
+                      </button>
+                      <button
+                        class="btn btn-sm btn-danger"
+                        :aria-label="$t('Delete')"
+                        @click="deleteItem(index, row)"
+                      >
+                        <i class="far fa-trash-alt text-light" />
+                      </button>
+                    </div>
+                  </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>
+        </template>
       </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-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, row)"
-        >
-        <i class="fas fa-copy text-light"/>
-      </button>
-      <button
-      class="btn btn-sm btn-danger"
-      @click="deleteItem(index, row)"
-      :aria-label="$t('Delete')"
-      >
-      <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>
-</template>
-</div>
-</div>
-</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";
+
 const defaultColumnWidth = 1;
 
 export default {
-  name: 'MultiColumn',
-  mixins: [HasColorProperty],
-  props: ['value', 'name', 'config', 'selected', 'validationErrors'],
+  name: "MultiColumn",
   components: {
     draggable,
     FormInput,
@@ -145,14 +171,37 @@ export default {
     FormDatePicker,
     FormHtmlEditor,
     FormHtmlViewer,
-    ...renderer,
+    ...renderer
   },
+  mixins: [HasColorProperty],
+  props: ["value", "name", "config", "selected", "validationErrors"],
   data() {
     return {
       items: [],
       cancelledJobs: []
     };
   },
+  computed: {
+    classContainer() {
+      return this.items.length > 0 ? "form-group" : "column-draggable";
+    }
+  },
+  watch: {
+    value: {
+      handler() {
+        this.items = this.value;
+      },
+      immediate: true
+    },
+    items() {
+      this.$emit("input", this.items);
+    },
+    "config.options": function (options) {
+      this.items = options.map((option, index) => {
+        return this.items[index] ? this.items[index] : [];
+      });
+    }
+  },
   mounted() {
     if (
       !localStorage.getItem("cancelledJobs") ||
@@ -170,58 +219,35 @@ export default {
       this.updateProgress(progress, nonce);
     });
   },
-  watch: {
-    value: {
-      handler() {
-        this.items = this.value;
-      },
-      immediate: true,
-    },
-    items() {
-      this.$emit('input', this.items);
-    },
-    'config.options'(options) {
-      this.items = options.map((option, index) => {
-        return this.items[index]
-        ? this.items[index]
-        : [];
-      });
-    },
-  },
-  computed: {
-    classContainer() {
-      return this.items.length > 0 ? 'form-group' : 'column-draggable';
-    },
-  },
   methods: {
     hasError(element) {
       return this.validationErrors.some(({ item }) => item === element);
     },
     updateContainerConfig(config, index) {
       this.items[index] = config;
-      this.$emit('update-state');
+      this.$emit("update-state");
     },
     classColumn(index) {
       let column = defaultColumnWidth;
-      
+
       if (this.config.options[index] && this.config.options[index].content) {
         column = this.config.options[index].content;
       }
-      
-      return 'col-sm-' + column;
+
+      return `col-sm-${column}`;
     },
     inspect(element) {
-      this.$emit('inspect', element);
+      this.$emit("inspect", element);
     },
     deleteItem(col, index) {
       // Remove the item from the array in currentPage
       this.items[col].splice(index, 1);
-      this.$emit('update-state');
+      this.$emit("update-state");
     },
-    duplicateItem(col,index) {
+    duplicateItem(col, index) {
       const duplicate = _.cloneDeep(this.items[col][index]);
       this.items[col].push(duplicate);
-      this.$emit('update-state');
+      this.$emit("update-state");
     },
     isAiSection(element) {
       return element.component === "AiSection";
@@ -267,7 +293,7 @@ export default {
 .hasError {
   border: 1px solid red;
   border-radius: 0.25rem;
-  
+
   .form-element-header {
     border-bottom: 1px solid red;
     color: red;
@@ -282,25 +308,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;

package/src/components/inspector/collection-select-list.vue

@@ -5,13 +5,13 @@
       <b-form-select
         id="collection"
         v-model="collectionId"
-        @change="resetFields"
         :options="collections"
         data-cy="inspector-collection"
+        @change="resetFields"
       />
     </div>
 
-    <div class="mt-3" v-if="fields.length > 1">
+    <div v-if="fields.length > 1" class="mt-3">
       <label for="label">{{ $t("Label") }}</label>
       <b-form-select
         id="label"
@@ -21,7 +21,7 @@
       />
     </div>
 
-    <div class="mt-3" v-if="fields.length > 1">
+    <div v-if="fields.length > 1" class="mt-3">
       <label for="value">{{ $t("Value") }}</label>
       <b-form-select
         id="value"
@@ -31,52 +31,57 @@
       />
     </div>
 
-    <div class="mt-3" v-if="fields.length > 1">
+    <div v-if="fields.length > 1" class="mt-3">
       <pmql-input
-          :search-type="'collections_w_mustaches'"
-          class="mb-1"
-          data-cy="inspector-collection-pmql"
-          :input-label="'PMQL'"
-          v-model="pmql"
-          :condensed="true"
-          :ai-enabled="true"
-          :placeholder="$t('PMQL')">
-        </pmql-input>
-        <small class="form-text text-muted">{{ $t('Advanced data search') }}</small>
+        v-model="pmql"
+        :search-type="'collections_w_mustaches'"
+        class="mb-1"
+        data-cy="inspector-collection-pmql"
+        :input-label="'PMQL'"
+        :condensed="true"
+        :ai-enabled="true"
+        :placeholder="$t('PMQL')"
+      >
+      </pmql-input>
+      <small class="form-text text-muted">{{
+        $t("Advanced data search")
+      }}</small>
     </div>
 
-    <div class="mt-3" v-if="fields.length > 1">
+    <div v-if="fields.length > 1" class="mt-3">
       <form-checkbox
-        :label="$t('Ignore duplicates in list')"
         v-model="unique"
-        :helper="$t('Select to show only distinct list entries if labels are repeated. Only the first value will be used if duplicate labels have different values.')"
+        :label="$t('Ignore duplicates in list')"
+        :helper="
+          $t(
+            'Select to show only distinct list entries if labels are repeated. Only the first value will be used if duplicate labels have different values.'
+          )
+        "
         data-cy="inspector-collection-isDependent"
       />
     </div>
-
   </div>
 </template>
 
 <script>
 import { debounce } from "lodash";
-import _ from "lodash";
-import MustacheHelper from "./mustache-helper";
-import ScreenVariableSelector from '../screen-variable-selector.vue';
+import MustacheHelper from "./mustache-helper.vue";
+import ScreenVariableSelector from "../screen-variable-selector.vue";
 
 const CONFIG_FIELDS = [
   "collectionId",
   "labelField",
   "valueField",
   "pmql",
-  "unique",
+  "unique"
 ];
 
 export default {
-  props: ["value"],
   components: {
     MustacheHelper,
-    ScreenVariableSelector,
+    ScreenVariableSelector
   },
+  props: ["value"],
   data() {
     return {
       collections: [],
@@ -85,16 +90,23 @@ export default {
       labelField: null,
       valueField: null,
       pmql: "",
-      unique: false,
+      unique: false
     };
   },
+  computed: {
+    options() {
+      return Object.fromEntries(
+        CONFIG_FIELDS.map((field) => [field, this[field]])
+      );
+    }
+  },
   watch: {
     value: {
       handler(value) {
         if (!value) {
           return;
         }
-        CONFIG_FIELDS.forEach(field => this[field] = value[field]);
+        CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
       },
       immediate: true
     },
@@ -115,9 +127,10 @@ export default {
       this.onPmqlChange(pmql);
     }, 1000);
   },
-  computed: {
-    options() {
-      return Object.fromEntries(CONFIG_FIELDS.map(field => [field, this[field]]));
+  mounted() {
+    this.getCollections();
+    if (this.collectionId) {
+      this.getFields();
     }
   },
   methods: {
@@ -164,12 +177,6 @@ export default {
     onPmqlChange(pmql) {
       this.pmql = pmql;
     }
-  },
-  mounted() {
-    this.getCollections();
-    if (this.collectionId) {
-      this.getFields();
-    }
   }
 };
-</script>
+</script>

package/src/components/inspector/label-submit-button.vue

@@ -12,7 +12,12 @@
 </template>
 
 <script>
+import { FormInput } from '@processmaker/vue-form-elements';
+
 export default {
+  components: {
+    FormInput
+  },
   props: ['value', 'selectedControl'],
   data() {
     return {

package/src/components/inspector/loading-submit-button.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="event === 'submit'" style="border-style: none !important;">
+  <div v-if="event === 'submit'" style="border-style: none !important">
     <div>
       <form-checkbox
-        :label="$t('Loading Submit Button')"
         v-model="loading"
+        :label="$t('Loading Submit Button')"
         :toggle="false"
         :helper="$t('Loading Submit Button')"
       />
@@ -12,8 +12,11 @@
 </template>
 
 <script>
+import { FormCheckbox } from "@processmaker/vue-form-elements";
+
 export default {
-  props: ['value', 'selectedControl'],
+  components: { FormCheckbox },
+  props: ["value", "selectedControl"],
   data() {
     return {
       event: "",
@@ -23,11 +26,11 @@ export default {
   computed: {
     mode() {
       return this.$root.$children[0].mode;
-    },
+    }
   },
   watch: {
     loading() {
-      this.$emit('input', this.loading);
+      this.$emit("input", this.loading);
     },
     value() {
       this.loading = this.value;