@processmaker/screen-builder 2.74.0 → 2.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.74.0",
+  "version": "2.75.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -39,7 +39,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.49.0",
+    "@processmaker/vue-form-elements": "0.49.1",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -88,7 +88,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.49.0",
+    "@processmaker/vue-form-elements": "0.49.1",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

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

@@ -537,15 +537,25 @@ export default {
       return this.config.length > 1;
     },
     filteredControls() {
-      return this.controls
-        .filter((control) => {
-          return control.label
-            .toLowerCase()
-            .includes(this.filterQuery.toLowerCase());
-        })
-        .sort((a, b) => {
-          return this.collator.compare(a.label, b.label);
-        });
+      const excludedLabels = ["Bootstrap Wrapper", "Bootstrap Component"];
+
+      const filtered = this.controls.filter((control) => {
+        return control.label.toLowerCase().includes(this.filterQuery.toLowerCase());
+      });
+
+      const excluded = filtered.filter((control) => {
+        return excludedLabels.includes(control.label);
+      });
+
+      const included = filtered.filter((control) => {
+        return !excludedLabels.includes(control.label);
+      });
+
+      const sorted = included.sort((a, b) => {
+        return this.collator.compare(a.label, b.label);
+      });
+
+      return [...sorted, ...excluded];
     },
     isCurrentPageEmpty() {
       return this.config[this.currentPage].items.length === 0;

package/src/form-builder-controls.js

@@ -16,6 +16,8 @@ import {
   FormCheckbox,
   FormDatePicker,
   FormHtmlEditor,
+  BFormComponent,
+  BWrapperComponent,
 } from '@processmaker/vue-form-elements';
 import { dataSourceValues } from '@/components/inspector/data-source-types';
 
@@ -710,4 +712,113 @@ export default [
       ],
     },
   },
+  {
+    rendererComponent: BFormComponent,
+    rendererBinding: 'BFormComponent',
+    builderComponent: BFormComponent,
+    builderBinding: 'BFormComponent',
+    control: {
+      label: 'Bootstrap Component',
+      component: 'BFormComponent',
+      'editor-component': 'BFormComponent',
+      'editor-control': 'BFormComponent',
+      config: {
+        bootstrapComponent: 'b-form-tags',
+        bootstrapConfig: '{}',
+        label: 'New Bootstrap Component',
+        icon: 'fab fa-bootstrap',
+      },
+      inspector: [
+        keyNameProperty,
+        labelProperty,
+        {
+          type: 'FormMultiselect',
+          field: 'bootstrapComponent',
+          config: {
+            icon: 'fas',
+            label: 'Bootstrap vue component',
+            validation: 'required',
+            options: [
+              { value: 'b-embed', content: 'Embed' },
+              { value: 'b-img', content: 'Image' },
+              { value: 'b-form-rating', content: 'Form Rating' },
+              { value: 'b-form-spinbutton', content: 'Form Spinbutton' },
+              { value: 'b-form-tags', content: 'Form Tags' },
+              { value: 'b-form-timepicker', content: 'Form Timepicker' },
+              { value: 'b-table', content: 'Table' },
+            ],
+          },
+        },
+        {
+          type: 'FormTextArea',
+          field: 'bootstrapConfig',
+          config: {
+            rows: 5,
+            label: 'Config',
+            helper: 'Properties in JSON format. See https://bootstrap-vue.org/docs/components',
+            value: '{}',
+          },
+        },
+        validationRulesProperty,
+      ],
+    },
+  },
+  {
+    rendererComponent: BWrapperComponent,
+    rendererBinding: 'BWrapperComponent',
+    builderComponent: BWrapperComponent,
+    builderBinding: 'BWrapperComponent',
+    control: {
+      label: 'Bootstrap Wrapper',
+      component: 'BWrapperComponent',
+      'editor-component': 'BWrapperComponent',
+      'editor-control': 'BWrapperComponent',
+      config: {
+        bootstrapComponent: 'b-modal',
+        bootstrapConfig: '{}',
+        label: 'New Bootstrap Wrapper',
+        icon: 'fab fa-bootstrap',
+        name: '',
+        form: '',
+      },
+      inspector: [
+        keyNameProperty,
+        labelProperty,
+        {
+          type: 'FormMultiselect',
+          field: 'bootstrapComponent',
+          config: {
+            icon: 'fas',
+            label: 'Bootstrap vue component',
+            validation: 'required',
+            options: [
+              { value: 'b-alert', content: 'Alert' },
+              { value: 'b-card', content: 'Card' },
+              { value: 'b-collapse', content: 'Collapse' },
+              { value: 'b-jumbotron', content: 'Jumbotron' },
+              { value: 'b-modal', content: 'Modal' },
+            ],
+          },
+        },
+        {
+          type: 'PageSelect',
+          field: 'form',
+          config: {
+            label: 'Page',
+            helper: 'The page to use inside the component',
+          },
+        },
+        {
+          type: 'FormTextArea',
+          field: 'bootstrapConfig',
+          config: {
+            rows: 5,
+            label: 'Config',
+            helper: 'Properties in JSON format. See https://bootstrap-vue.org/docs/components',
+            value: '{}',
+          },
+        },
+      ],
+    },
+  },
 ];

package/src/main.js

@@ -10,13 +10,14 @@ import ScreenBuilder from '@/components';
 import axios from 'axios';
 import { cacheAdapterEnhancer } from 'axios-extensions';
 import TestComponents from '../tests/components';
-import BootstrapVue from 'bootstrap-vue';
+import {BootstrapVue, IconsPlugin} from 'bootstrap-vue';
 import Multiselect from '@processmaker/vue-multiselect/src/Multiselect';
 import LRUCache from 'lru-cache';
 import globalErrorsModule from "@/store/modules/globalErrorsModule";
 import undoRedoModule from "@/store/modules/undoRedoModule";
 
 Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
 Vue.config.productionTip = false;
 
 // Allow strings to be wrapped in $t(...) for translating