@processmaker/screen-builder 2.16.1 → 2.16.5

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.16.1",
+  "version": "2.16.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1738,9 +1738,9 @@
       }
     },
     "@processmaker/vue-form-elements": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.25.0.tgz",
-      "integrity": "sha512-yf0EBslncJTDrpjbquvIBBYMjyrg8wRcjRF5W506jV9GR4UHrRBQ9QBITGDj951zTbLIX9jebAEjPCXPb676qg==",
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.25.3.tgz",
+      "integrity": "sha512-KMXcd97nrrAOx8SXoMH4ZElUKVAJumYOdbbPVvkzrcZjKfevHHQjNblOvBHz8VfJDeAWWMIP2whmyYM6aoMw0w==",
       "dev": true,
       "requires": {
         "@tinymce/tinymce-vue": "2.0.0",
@@ -1750,7 +1750,7 @@
         "moment": "^2.29.1",
         "moment-timezone": "^0.5.26",
         "popper.js": "^1.14.4",
-        "tinymce": "5.2.2",
+        "tinymce": "5.7.1",
         "v-calendar": "^0.9.7",
         "validatorjs": "^3.14.2",
         "vue": "^2.6.12",
@@ -17414,9 +17414,9 @@
       "dev": true
     },
     "tinymce": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.2.2.tgz",
-      "integrity": "sha512-G1KZOxHIrokeP/rhJuvwctmeAuHDAeH8AI1ubnVcdMZtmC6mUh3SfESqFJrFWoiF143OUMC61GkVhi920pIP0A==",
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.7.1.tgz",
+      "integrity": "sha512-1gY8RClc734srSlkYwY0MQzmkS1j73PuPC+nYtNtrrQVPY9VNcZ4bOiRwzTbdjPPD8GOtv6BAk8Ww/H2RiqKpA==",
       "dev": true
     },
     "tmp": {
@@ -17959,9 +17959,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
-      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
       "dev": true,
       "requires": {
         "querystringify": "^2.1.1",

package/package.json

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

package/src/App.vue

@@ -204,6 +204,7 @@ import VueJsonPretty from 'vue-json-pretty';
 import MonacoEditor from 'vue-monaco';
 import canOpenJsonFile from './mixins/canOpenJsonFile';
 import { cloneDeep, debounce } from 'lodash';
+import 'vue-json-pretty/lib/styles.css';
 
 // Bring in our initial set of controls
 import controlConfig from './form-builder-controls';

package/src/DataProvider.js

@@ -51,9 +51,9 @@ export default {
   baseURL() {
     return localStorage.getItem('baseURL');
   },
-  
+
   // Methods below are used in the components
-  
+
   getTasks(params) {
     const endpoint = _.get(window, 'PM4ConfigOverrides.getTasksEndpoint', '/tasks');
     return this.get(endpoint + params).then(response => {
@@ -83,7 +83,8 @@ export default {
       const cache = this.screensCache.find(screen => screen.id == id);
       if (cache) {
         resolve({data: cache});
-      } else {
+      }
+      if (!cache && id != undefined) {
         const request = this.get(endpoint + `/${id}${query}`);
         request.then(response => {
           if (response.data.nested) {
@@ -94,7 +95,7 @@ export default {
       }
     });
   },
-  
+
   postScript(id, params, options = {}) {
     let endpoint = _.get(
       window,

package/src/ValidationsFactory.js

@@ -1,6 +1,7 @@
 import { validators } from './mixins/ValidationRules';
 import DataProvider from './DataProvider';
 import { get, set } from 'lodash';
+import { Parser } from 'expr-eval';
 
 let globalObject = typeof window === 'undefined'
   ? global
@@ -8,6 +9,7 @@ let globalObject = typeof window === 'undefined'
 class Validations {
   screen = null;
   firstPage = 0;
+  data = {};
   constructor(element, options) {
     this.element = element;
     Object.assign(this, options);
@@ -33,7 +35,7 @@ class Validations {
 class ArrayOfFieldsValidations extends Validations {
   async addValidations(validations) {
     for (const item of this.element) {
-      await ValidationsFactory(item, { screen: this.screen }).addValidations(validations);
+      await ValidationsFactory(item, { screen: this.screen, data: this.data }).addValidations(validations);
     }
   }
 }
@@ -46,7 +48,7 @@ class ScreenValidations extends Validations {
     // add validations for page 1
     if (this.element.config[this.firstPage]) {
       this.element.pagesValidated = [this.firstPage];
-      const screenValidations = ValidationsFactory(this.element.config[this.firstPage].items, { screen: this.element });
+      const screenValidations = ValidationsFactory(this.element.config[this.firstPage].items, { screen: this.element, data: this.data });
       await screenValidations.addValidations(validations);
       delete this.element.pagesValidated;
     }
@@ -60,7 +62,7 @@ class FormNestedScreenValidations extends Validations {
   async addValidations(validations) {
     const definition = await this.loadScreen(this.element.config.screen);
     if (definition && definition[0] && definition[0].items) {
-      await ValidationsFactory(definition[0].items, { screen: this.screen }).addValidations(validations);
+      await ValidationsFactory(definition[0].items, { screen: this.screen, data: this.data }).addValidations(validations);
     }
   }
 
@@ -86,7 +88,8 @@ class FormLoopValidations extends Validations {
     set(validations, this.element.config.name, {});
     const loopField = get(validations, this.element.config.name);
     loopField['$each'] = [];
-    await ValidationsFactory(this.element.items, { screen: this.screen }).addValidations(loopField['$each']);
+    const firstRow = this.data[0] || {};
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, ...firstRow } }).addValidations(loopField['$each']);
   }
 }
 
@@ -95,7 +98,7 @@ class FormLoopValidations extends Validations {
  */
 class FormMultiColumnValidations extends Validations {
   async addValidations(validations) {
-    await ValidationsFactory(this.element.items, { screen: this.screen }).addValidations(validations);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);
   }
 }
 
@@ -107,7 +110,7 @@ class PageNavigateValidations extends Validations {
     if (!this.screen.pagesValidated.includes(parseInt(this.element.config.eventData))) {
       this.screen.pagesValidated.push(parseInt(this.element.config.eventData));
       if (this.screen.config[this.element.config.eventData] && this.screen.config[this.element.config.eventData].items) {
-        await ValidationsFactory(this.screen.config[this.element.config.eventData].items, { screen: this.screen }).addValidations(validations);
+        await ValidationsFactory(this.screen.config[this.element.config.eventData].items, { screen: this.screen, data: this.data }).addValidations(validations);
       }
     }
   }
@@ -133,6 +136,19 @@ class FormElementValidations extends Validations {
     const fieldName = this.element.config.name;
     const validationConfig = this.element.config.validation;
 
+    // Disable validations if field is hidden
+    if (this.element.config.conditionalHide) {
+      let visible = true;
+      try {
+        visible = !!Parser.evaluate(this.element.config.conditionalHide, this.data);
+      } catch (error) {
+        visible = false;
+      }
+      if (!visible) {
+        return;
+      }
+    }
+
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
     if (validationConfig instanceof Array) {
@@ -166,7 +182,7 @@ class FormElementValidations extends Validations {
       fieldValidation[validationConfig] = validationFn;
     }
     if (this.element.items) {
-      ValidationsFactory(this.element.items, { screen: this.screen }).addValidations(validations);
+      ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);
     }
   }
   camelCase(name) {

package/src/components/inspector/loop.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="form-group border-bottom pb-3">
+    <div v-if="screenType == 'form'" class="form-group border-bottom pb-3">
       <label for="type">{{ $t('Data Source') }}</label>
       <b-form-select id="type" v-model="settings.type" :options="options" data-cy="inspector-source"/>
     </div>
@@ -17,7 +17,7 @@
     </div>
 
 
-    <div v-if="settings.type === 'new'" class="form-group border-bottom">
+    <div v-if="screenType == 'form' && settings.type === 'new'" class="form-group border-bottom">
       <FormInput
         v-model="settings.times"
         :label="$t('Default Loop Count')"
@@ -28,7 +28,7 @@
       />
     </div>
 
-    <form-checkbox name="add"
+    <form-checkbox v-if="screenType == 'form'" name="add"
       :label="$t('Allow additional loops')"
       v-model="settings.add"
       :helper="$t('Check this box to allow task assignee to add additional loops')"
@@ -41,7 +41,7 @@
 import { FormInput, FormCheckbox } from '@processmaker/vue-form-elements';
 
 export default {
-  props: ['value'],
+  props: ['value', 'screenType'],
   inheritAttrs: false,
   components: { FormInput, FormCheckbox },
   data() {

package/src/components/inspector/options-list.vue

@@ -444,10 +444,7 @@ export default {
   },
   methods: {
     monacoMounted(editor) {
-      editor.updateOptions({ readOnly:  false });
-      editor.getAction('editor.action.formatDocument').run().then(() => {
-        editor.updateOptions({ readOnly: true });
-      });
+      editor.getAction('editor.action.formatDocument').run();
     },
     getDataSourceList() {
       this.$dataProvider

package/src/components/renderer/file-upload.vue

@@ -20,7 +20,16 @@
 
       <uploader-drop class="form-control-file">
         <p>{{ $t('Drop a file here to upload or') }}</p>
-        <uploader-btn tabindex="0" v-on:keyup.native="browse" :aria-label="$attrs['aria-label']" class="btn btn-secondary text-white">{{ $t('select file') }}</uploader-btn>
+        <uploader-btn
+          :attrs="nativeButtonAttrs"
+          :class="{disabled: disabled}"
+          tabindex="0"
+          v-on:keyup.native="browse"
+          :aria-label="$attrs['aria-label']"
+          class="btn btn-secondary text-white"
+        >
+          {{ $t('select file') }}
+        </uploader-btn>
         <span v-if="validation === 'required' && !value" class="required">{{ $t('Required') }}</span>
       </uploader-drop>
       <uploader-list>
@@ -92,6 +101,8 @@ export default {
     if (this.$refs['uploader']) {
       this.$refs['uploader'].$forceUpdate();
     }
+
+    this.disabled = _.get(window, 'ProcessMaker.isSelfService', false);
   },
   errorCaptured(err) {
     if (ignoreErrors.includes(err.message)) {
@@ -99,6 +110,13 @@ export default {
     }
   },
   computed: {
+    nativeButtonAttrs() {
+      const attrs = { 'data-cy':'file-upload-button' };
+      if (this.disabled) {
+        attrs.disabled = true;
+      }
+      return attrs;
+    },
     required() {
       if (this.config && this.config.validation) {
         return this.config.validation === 'required';
@@ -205,6 +223,7 @@ export default {
       attrs: {
         accept: this.accept,
       },
+      disabled: false,
     };
   },
   methods: {
@@ -286,6 +305,11 @@ export default {
       });
     },
     addFile(file) {
+      if (this.disabled) {
+        file.ignored = true;
+        return false;
+      }
+
       if (this.filesAccept) {
         file.ignored = true;
         if (this.filesAccept.indexOf(file.fileType) !== -1) {
@@ -322,7 +346,7 @@ export default {
     },
     fileUploaded(rootFile, file, message) {
       if (this.fileType == 'request') {
-        let id = '';
+        let id = file.name;
         if (message) {
           const msg = JSON.parse(message);
           if (!_.has(window, 'PM4ConfigOverrides')) {

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

@@ -435,10 +435,10 @@ export default {
       return this;
     },
     canUndo() {
-      return this.$store.getters[`page-${this.currentPage}/canUndo`];
+      return this.$store.getters['undoRedoModule/canUndo'];
     },
     canRedo() {
-      return this.$store.getters[`page-${this.currentPage}/canRedo`];
+      return this.$store.getters['undoRedoModule/canRedo'];
     },
     displayDelete() {
       return this.config.length > 1;
@@ -662,18 +662,19 @@ export default {
       });
     },
     updateState() {
-      const items = this.config[this.currentPage].items;
-      this.$store.dispatch(`page-${this.currentPage}/pushState`, JSON.stringify(items));
+      this.$store.dispatch('undoRedoModule/pushState', {'config': JSON.stringify(this.config), 'currentPage': this.currentPage});
     },
     undo() {
       this.inspect();
-      this.$store.dispatch(`page-${this.currentPage}/undo`);
-      this.config[this.currentPage].items = JSON.parse(this.$store.getters[`page-${this.currentPage}/currentState`]);
+      this.$store.dispatch('undoRedoModule/undo');
+      this.config = JSON.parse(this.$store.getters['undoRedoModule/currentState'].config);
+      this.currentPage = JSON.parse(this.$store.getters['undoRedoModule/currentState'].currentPage);
     },
     redo() {
       this.inspect();
-      this.$store.dispatch(`page-${this.currentPage}/redo`);
-      this.config[this.currentPage].items = JSON.parse(this.$store.getters[`page-${this.currentPage}/currentState`]);
+      this.$store.dispatch('undoRedoModule/redo');
+      this.config = JSON.parse(this.$store.getters['undoRedoModule/currentState'].config);
+      this.currentPage = JSON.parse(this.$store.getters['undoRedoModule/currentState'].currentPage);
     },
     updateConfig(items) {
       this.config[this.currentPage].items = items;
@@ -738,12 +739,12 @@ export default {
       this.config.push({ name: this.addPageName, items: [] });
       this.currentPage = this.config.length - 1;
       this.addPageName = '';
-      this.$store.registerModule(`page-${this.currentPage}`, undoRedoModule);
       this.updateState();
     },
     deletePage() {
-      this.currentPage = 0;
       this.config.splice(this.pageDelete, 1);
+      this.currentPage = (this.pageDelete - 1 >= 0 ? this.pageDelete - 1 : 0);
+      this.$store.dispatch('undoRedoModule/pushState', {'config': JSON.stringify(this.config), 'currentPage': this.currentPage, 'deletedPage': true});
     },
     inspect(element = {}) {
       this.inspection = element;
@@ -813,11 +814,8 @@ export default {
       },
       this.$t('Must be unique')
     );
-
-    this.config.forEach((config, index) => {
-      this.$store.registerModule(`page-${index}`, undoRedoModule);
-      this.$store.dispatch(`page-${index}/pushState`, JSON.stringify(config.items));
-    });
+    this.$store.registerModule('undoRedoModule', undoRedoModule);
+    this.$store.dispatch('undoRedoModule/pushState', {'config': JSON.stringify(this.config), 'currentPage': this.currentPage});
     this.initiateLanguageSupport();
   },
   mounted() {

package/src/form-builder-controls.js

@@ -216,6 +216,7 @@ export default [
         colorProperty,
         bgcolorProperty,
         defaultValueProperty,
+        readonlyProperty,
       ],
     },
   },

package/src/mixins/Json2Vue.js

@@ -335,8 +335,11 @@ export default {
       component.methods.loadValidationRules = function() {
         // Asynchronous loading of validations
         const validations = {};
-        ValidationsFactory(definition, { screen: definition, firstPage }).addValidations(validations).then(() => {
+        ValidationsFactory(definition, { screen: definition, firstPage, data: this.vdata }).addValidations(validations).then(() => {
           this.ValidationRules__ = validations;
+          this.$nextTick(() => {
+            this.$v.$touch();
+          });
         });
       };
       component.mounted.push('this.loadValidationRules()');

package/src/mixins/ScreenBase.js

@@ -8,6 +8,7 @@ export default {
   data() {
     return {
       ValidationRules__: {},
+      hiddenFields__: [],
     };
   },
   props: {
@@ -116,6 +117,7 @@ export default {
             setValue
           );
           object = get(object, attr);
+          defaults = get(defaults, attr);
         });
       }
     },

package/src/mixins/ValidationRules.js

@@ -67,9 +67,9 @@ export const custom_date = (date) => {
   return checkDate.isValid();
 };
   
-export const after = (after) => helpers.withParams({after}, function(date, data) {
+export const after = (after) => helpers.withParams({after}, function(date) {
   // Get check date
-  const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data};
+  const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata};
   const checkDate = moment(get(dataWithParent, after, after));
   if (!checkDate.isValid()) {
     return false;
@@ -81,9 +81,9 @@ export const after = (after) => helpers.withParams({after}, function(date, data)
   return inputDate > afterDate;
 });
 
-export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_equal}, function(date, data) {
+export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_equal}, function(date) {
   // Get check date
-  const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data};
+  const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata};
   const checkDate = moment(get(dataWithParent, after_or_equal, after_or_equal));
   if (!checkDate.isValid()) {
     return false;
@@ -94,9 +94,9 @@ export const after_or_equal = (after_or_equal) => helpers.withParams({after_or_e
   return inputDate >= equalOrAfterDate;
 });
 
-export const before = (before) => helpers.withParams({before}, function(date, data) {
+export const before = (before) => helpers.withParams({before}, function(date) {
   // Get check date
-  const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data};
+  const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata};
   const checkDate = moment(get(dataWithParent, before, before));
   if (!checkDate.isValid()) {
     return false;
@@ -107,9 +107,9 @@ export const before = (before) => helpers.withParams({before}, function(date, da
   return inputDate < beforeDate;
 });
 
-export const before_or_equal = (before_or_equal) => helpers.withParams({before_or_equal}, function(date, data) {
+export const before_or_equal = (before_or_equal) => helpers.withParams({before_or_equal}, function(date) {
   // Get check date
-  const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...data};
+  const dataWithParent = {today: moment().format('YYYY-MM-DD'), _parent: this._parent, ...this.vdata};
   const checkDate = moment(get(dataWithParent, before_or_equal, before_or_equal));
   if (!checkDate.isValid()) {
     return false;
@@ -150,20 +150,32 @@ export const required = (value) => {
   return value instanceof Array ? value.length > 0 : !!value;
 };
 
-export const requiredIf = (variable, expected) => helpers.withParams({variable, expected}, function(value, data) {
-  const dataWithParent = {_parent: this._parent, ...data};
-  if (get(dataWithParent, variable) != expected) return true;
+export const requiredIf = (variable, expected) => helpers.withParams({variable, expected}, function(value) {
+  const dataWithParent = {_parent: this._parent, ...this.vdata};
+  const variableValue = get(dataWithParent, variable);
+  const isBoolean = (variableValue === true || variableValue === false);
+  let expectedValue = expected;
+  if (isBoolean) {
+    expectedValue = expected === 'true' || expected === '1';
+  }
+  if (variableValue != expectedValue) return true;
   return value instanceof Array ? value.length > 0 : !!value;
 });
 
-export const requiredUnless = (variable, expected) => helpers.withParams({variable, expected}, function(value, data) {
-  const dataWithParent = {_parent: this._parent, ...data};
-  if (get(dataWithParent, variable) == expected) return true;
+export const requiredUnless = (variable, expected) => helpers.withParams({variable, expected}, function(value) {
+  const dataWithParent = {_parent: this._parent, ...this.vdata};
+  const variableValue = get(dataWithParent, variable);
+  const isBoolean = (variableValue === true || variableValue === false);
+  let expectedValue = expected;
+  if (isBoolean) {
+    expectedValue = expected === 'true' || expected === '1';
+  }
+  if (variableValue == expectedValue) return true;
   return value instanceof Array ? value.length > 0 : !!value;
 });
   
-export const sameAs = (field) => helpers.withParams({field}, function(value, data) {
-  const dataWithParent = {_parent: this._parent, ...data};
+export const sameAs = (field) => helpers.withParams({field}, function(value) {
+  const dataWithParent = {_parent: this._parent, ...this.vdata};
   const valueSameAs = get(dataWithParent, field);
   return value == valueSameAs;
 });

package/src/mixins/VisibilityRule.js

@@ -1,10 +1,28 @@
 import { Parser } from 'expr-eval';
 
 export default {
+  mounted() {
+    this.$root.$on('refresh-validation-rules', () => {
+      this.loadValidationRules();
+    });
+  },
   methods: {
-    visibilityRuleIsVisible(rule) {
+    visibilityRuleIsVisible(rule, fieldName) {
       try {
-        return !!Parser.evaluate(rule, Object.assign({}, this, this.vdata));
+        const data = Object.assign({ _parent: this._parent }, this.vdata);
+        const isVisible = !!Parser.evaluate(rule, Object.assign({}, this, data));
+
+        // Update the array of hidden fields
+        const fieldExists = this.hiddenFields__.indexOf(fieldName) !== -1;
+        if (isVisible && fieldExists) {
+          this.hiddenFields__ = this.hiddenFields__.filter((f) => f !== fieldName);
+          this.$root.$emit('refresh-validation-rules');
+        } else if (!isVisible && !fieldExists) {
+          this.hiddenFields__.push(fieldName);
+          this.$root.$emit('refresh-validation-rules');
+        }
+
+        return isVisible;
       } catch (e) {
         return false;
       }

package/src/mixins/extensions/VisibilityRule.js

@@ -5,7 +5,11 @@ export default {
     this.extensions.push({
       onloaditems({ element, wrapper }) {
         if (element.config.conditionalHide) {
-          wrapper.setAttribute('v-show', `visibilityRuleIsVisible(${JSON.stringify(element.config.conditionalHide)})`);
+          wrapper.setAttribute(
+            'v-show',
+            `visibilityRuleIsVisible(${JSON.stringify(element.config.conditionalHide)}, 
+            ${JSON.stringify(element.config.name)})`
+          );
         }
       },
       onbuild({ screen }) {

package/src/undoRedoModule.js

@@ -13,8 +13,21 @@ const undoRedoModule = {
     canRedo(state) {
       return state.position < state.stack.length - 1;
     },
-    currentState(state) {
-      return state.stack[state.position];
+    currentState(state, getters) {
+      let currentState = state.stack[state.position];
+
+      if (getters.nextState && getters.nextState.deletedPage) {
+        currentState.currentPage = getters.nextState.currentPage;
+      }
+
+      return currentState;
+    },
+    nextState(state, getters) {
+      if (getters.canRedo) {
+        return state.stack[state.position + 1];
+      }
+
+      return false;
     },
   },
   mutations: {
@@ -22,13 +35,12 @@ const undoRedoModule = {
       state.position = position;
     },
     setState(state, newState) {
-      state.stack = state.stack.slice(0, state.position + 1);
       state.stack.push(newState);
     },
   },
   actions: {
     pushState({ state, getters, commit }, newState) {
-      if (newState === getters.currentState) {
+      if (newState.config === getters.currentState) {
         return;
       }