glib-web 4.3.0 → 4.4.0

package/README.md

@@ -46,18 +46,19 @@ view.chipGroup styleClasses: ['custom']
 
 ## Clean up to fix strange errors (e.g. tiny-emitter error) when running vite dev
 
-- Stop vite server
+- Stop vite server.
+- Load the page without vite server, let the compilation finish.
+- Then start vite server.
 
+# Below doesn't work
 - On your glib-web-npm's directory:
   - `rm -rf node_modules`
   - `yarn install`
 
 - On your project's directory:
-  - `yarn unlink glib-web`
   - `rm -rf node_modules`
-  - `bin/vite clobber`
-  - `yarn link glib-web`
   - `yarn install`
+  - `bin/vite clobber`
   - `bin/vite dev`
 
 ## Prepare for publishing

package/action.js

@@ -64,6 +64,7 @@ import ActionsFormsSubmit from "./actions/forms/submit";
 import ActionsFieldsReset from "./actions/fields/reset";
 import ActionsFieldsFocus from "./actions/fields/focus";
 import ActionsFieldsBlur from "./actions/fields/blur";
+import ActionsFieldsGetDynamicGroupEntryValues from "./actions/fields/getDynamicGroupEntryValues";
 
 import ActionComponentsUpdate from "./actions/components/update";
 import ActionComponentsFind from "./actions/components/find";
@@ -73,6 +74,7 @@ import ActionComponentsReplaceChildren from "./actions/components/replaceChildre
 import ActionComponentsSet from "./actions/components/set";
 
 import ActionLogicsSet from "./actions/logics/set";
+import ActionLogicsRun from "./actions/logics/run";
 
 import ActionListsAppend from "./actions/lists/append";
 
@@ -148,6 +150,7 @@ const actions = {
   "fields/reset": ActionsFieldsReset,
   "fields/focus": ActionsFieldsFocus,
   "fields/blur": ActionsFieldsBlur,
+  "fields/getDynamicGroupEntryValues": ActionsFieldsGetDynamicGroupEntryValues,
 
   "components/update": ActionComponentsUpdate,
   "components/find": ActionComponentsFind,
@@ -157,6 +160,7 @@ const actions = {
   "components/set": ActionComponentsSet,
 
   "logics/set": ActionLogicsSet,
+  "logics/run": ActionLogicsRun,
 
   "lists/append": ActionListsAppend,
 

package/actions/components/replace.js

@@ -4,16 +4,13 @@ import Action from "../../action";
 export default class {
   execute(spec, component) {
     var target = component;
-    const targetId = spec.targetId
+    const targetId = spec.targetId;
     if (targetId) {
       target = GLib.component.findById(targetId);
     }
 
-    if (target) {
-      target.action_merge(spec.newView);
-      Action.execute(spec.onReplace, target);
-    } else {
-      console.warning("Component ID not found", targetId)
-    }
+    target.action_merge(spec.newView);
+    Action.execute(spec.onReplace, target);
+
   }
 }

package/actions/components/replaceChildren.js

@@ -1,4 +1,5 @@
 import { nextTick } from "vue";
+import Action from "../../action";
 
 // Experimental
 export default class {

package/actions/components/set.js

@@ -1,7 +1,3 @@
-// const setFileModel = (component, value) => {
-//   component.fieldModel = component.$sanitizeValue(component.$externalizeValue(value));
-// };
-
 
 export default class {
   execute(spec, component) {
@@ -13,7 +9,7 @@ export default class {
 
     Utils.type.ifObject(spec.data, (data) => {
       targetComponent.action_merge(data);
-      // if (data.value) setFileModel(targetComponent, data.value);
+
     });
 
     GLib.action.execute(spec.onSet, targetComponent);

package/actions/dialogs/close.js

@@ -1,3 +1,5 @@
+import { dialogs } from "../../store";
+
 export default class {
   execute(spec, component) {
     Utils.launch.dialog.close(spec, component);

package/actions/fields/getDynamicGroupEntryValues.js

@@ -0,0 +1,23 @@
+export default class {
+  execute(spec, component) {
+    const dynamicGroupEntry = component.$closest("fields/internalDynamicGroupEntry");
+    if (dynamicGroupEntry) {
+      const values = dynamicGroupEntry.$values(spec.paramNameForFieldName || 'entry');
+      this.executeOnGet(spec, values)
+    } else {
+      console.error('Action invoked outside of dynamicGroup')
+    }
+  }
+
+  executeOnGet(spec, formData) {
+    Utils.type.ifObject(spec.onGet, onGet => {
+      const params = {
+        // Make sure to pass along the formData from the spec.
+        [spec.paramNameForFormData || 'formData']: Object.assign({}, spec.formData, formData)
+      };
+
+      const data = Object.assign({}, onGet, params);
+      GLib.action.execute(data, this);
+    });
+  }
+}

package/actions/fields/reset.js

@@ -2,7 +2,7 @@ import { nextTick } from "vue";
 
 export default class {
   execute(properties, component) {
-    const target = GLib.component.findById(properties.targetId);
+    const target = GLib.component.findById(properties.targetId) || component;
     target.action_resetValue();
 
     nextTick(() => {

package/actions/logics/run.js

@@ -0,0 +1,35 @@
+import jsonLogic from 'json-logic-js';
+import { fieldModels } from "../../components/composable/conditional";
+
+export default class {
+  execute(spec, component) {
+    let condition = spec.condition
+
+    const dynamicGroupEntry = component.$closest("fields/internalDynamicGroupEntry");
+    if (dynamicGroupEntry) {
+      condition = dynamicGroupEntry.$populateIndexes(condition);
+    }
+
+    const result = jsonLogic.apply(condition, Object.assign({}, fieldModels, spec.variables));
+    if (result) {
+      this.executeWithPassthroughParams(spec.onTrue, spec, component);
+    } else {
+      this.executeWithPassthroughParams(spec.onFalse, spec, component);
+    }
+  }
+
+  executeWithPassthroughParams(actionSpec, originalSpec, component) {
+    if (!Utils.type.isObject(actionSpec)) {
+      return;
+    }
+
+    const params = {
+      // Make sure to pass along the formData from the spec.
+      formData: originalSpec.formData
+    }
+    const data = Object.assign({}, actionSpec, params);
+
+    console.log("executeWithPassthroughParams1", data)
+    GLib.action.execute(data, component);
+  }
+}

package/actions/logics/set.js

@@ -45,7 +45,18 @@ export default class {
     });
 
     if (Object.keys(data).length > 0) {
-      Array.isArray(targetComponent) ? targetComponent.forEach((comp) => comp.action_merge(data)) : targetComponent.action_merge(data);
+      // Array.isArray(targetComponent) ? targetComponent.forEach((comp) => comp.action_merge(data)) : targetComponent.action_merge(data);
+
+      const targetComponents = Array.isArray(targetComponent) ? targetComponent : [targetComponent]
+      targetComponents.forEach((comp) => {
+        comp.action_merge(data)
+
+        if (spec.cacheData) {
+          Utils.type.ifString(comp.viewId, (viewId) => {
+            GLib.component.registerData(viewId, data);
+          })
+        }
+      })
     }
 
     GLib.action.execute(spec.onSet, targetComponent);

package/app.vue

@@ -331,6 +331,15 @@ body,
   pointer-events: none;
 }
 
+.v-input .v-input__details {
+  min-height: fit-content;
+  padding-top: 0px;
+
+  .v-messages__message {
+    padding-top: 6px;
+  }
+}
+
 /******/
 </style>
 

package/components/composable/file.js

@@ -57,10 +57,23 @@ function useFileUtils() {
 
 function useFilesState(files) {
   const uploading = computed(() => {
-    return Object.values(files.value).length > 0 ? Object.values(files.value).reduce((prev, curr) => prev || curr.status == 'pending', false) : false;
+    if (Object.values(files.value).filter((v) => v.status != null).length > 0) {
+      Object.values(files.value).reduce((prev, curr) => {
+        if (curr.status == null) return prev;
+        return prev || curr.status == 'pending';
+      }, false);
+    }
+
+    return false;
   });
   const uploaded = computed(() => {
-    return Object.values(files.value).length > 0 ? Object.values(files.value).reduce((prev, curr) => prev && !!curr.signedId, true) : false;
+    if (Object.values(files.value).filter((v) => v.status != null).length > 0) {
+      return Object.values(files.value).reduce((prev, curr) => {
+        return prev && !!curr.signedId;
+      }, true);
+    }
+
+    return false;
   });
   const uploadingFileLength = computed(() => Object.values(files.value).reduce((prev, curr) => {
     if (curr.status == 'pending') prev = prev + 1;

package/components/fields/_dynamicGroupEntry.vue

@@ -35,6 +35,12 @@ export default {
     }
   },
   methods: {
+    $values(namePrefix) {
+      return this.$parent.valuesInIndex(this.entryIndex, namePrefix);
+    },
+    $populateIndexes(object) {
+      return this.$parent.populateIndexes(object, this.entryIndex);
+    },
     $prefixFieldName(fieldName) {
       return this.$parent.prefixFieldName(this.entryIndex, fieldName);
     },

package/components/fields/_patternText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="classes()" v-if="loadIf">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
     <v-text-field :color="gcolor" v-model="fieldModel" :name="fieldName" :label="spec.label" :hint="spec.hint"
       :type="type" :readonly="spec.readOnly" :disabled="inputDisabled" :min="$sanitizeValue(spec.min)"
@@ -47,9 +47,6 @@ export default {
         }
       }
     },
-    classes() {
-      return this.$classes().concat("g-text-field--hintless");
-    },
     onChange() {
       this.$executeOnChange();
     },

package/components/fields/_select.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" :style="$styles()" :class="classes()" v-if="loadIf">
+  <div ref="container" :style="$styles()" :class="$classes()" v-if="loadIf">
     <v-autocomplete :color="gcolor" v-model="fieldModel" :label="label" :items="normalizedOptions"
       :chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="!spec.readOnly"
       :placeholder="spec.placeholder" :rules="rules" persistent-hint :append-icon="append.icon" validate-on="blur"
@@ -103,9 +103,6 @@ export default {
     $ready() {
       this.updateData(false);
     },
-    classes() {
-      return this.$classes().concat("g-text-field--hintless");
-    },
     updateData(reinitValue) {
       // this.options = this.normalizedOptions();
       this.append = this.spec.append || {};

package/components/fields/dynamicGroup.vue

@@ -19,6 +19,7 @@
 
 <script>
 import DynamicGroupEntryField from "./_dynamicGroupEntry.vue";
+import { fieldModels } from "../composable/conditional";
 
 export default {
   components: {
@@ -91,10 +92,10 @@ export default {
       });
       return fieldProperties;
     },
-    // Replace every occurrence of `{{index}}` within any string.
+    // Replace every occurrence of `{{entry_index}}` within any string.
     populateIndexes(object, groupIndex) {
       if (this.$type.isString(object)) {
-        return object.replace('{{index}}', groupIndex);
+        return object.replace('{{entry_index}}', groupIndex);
       }
       if (this.$type.isArray(object)) {
         return object.map((o) => this.populateIndexes(o, groupIndex));
@@ -120,6 +121,17 @@ export default {
         return `${this.spec.name}[${groupIndex}][${fieldName}]`;
       }
     },
+    valuesInIndex(groupIndex, namePrefix) {
+      const result = { [`${namePrefix}[_index]`]: groupIndex }
+      const groupPrefix = `${this.spec.name}[${groupIndex}]`;
+      for (const key in fieldModels) {
+        if (key.startsWith(groupPrefix)) {
+          const name = namePrefix + key.slice(groupPrefix.length);
+          result[name] = fieldModels[key] || "" // Avoid sending `undefined` or `null` to server as String
+        }
+      }
+      return result
+    },
     processField(viewSpec, name, groupIndex, properties) {
       const fullName = this.prefixFieldName(groupIndex, name);
       // const fullName = name;

package/components/fields/phone/field.vue

@@ -1,10 +1,10 @@
 <template>
-  <div :style="$styles()" :class="classes()">
+  <div :style="$styles()" :class="$classes()">
     <div class="country-code">
       <v-select v-model="countryCode" :items="sortedCountries" :readonly="spec.readOnly"
         :outlined="$classes().includes('outlined') || null" :rounded="$classes().includes('rounded')"
-        :density="$classes().includes('compact') ? 'compact' : 'default'" item-text="name" item-value="iso2" return-object
-        @change="onChangeCountryCode">
+        :density="$classes().includes('compact') ? 'compact' : 'default'" item-text="name" item-value="iso2"
+        return-object @change="onChangeCountryCode">
         <!-- <template v-slot:selection> -->
         <div :class="activeCountry.iso2.toLowerCase()" class="country_flag" />
         <!-- </template> -->
@@ -166,9 +166,6 @@ export default {
     hiddenDisplay() {
       return this.$styles()["display"] == "none";
     },
-    classes() {
-      return this.$classes().concat(["g-text-field--hintless", "fields-phone"]);
-    },
     initializeCountry() {
       return new Promise((resolve) => {
         // 1. If the phone included prefix (+12), try to get the country and set it
@@ -277,20 +274,6 @@ export default {
 
 <style src="./sprite.css"></style>
 <style lang="scss">
-.g-text-field--hintless {
-  .v-text-field {
-    .v-text-field__details {
-      min-height: 0;
-      margin-bottom: 0;
-
-      .v-messages__message {
-        min-height: 0;
-        line-height: 14px;
-      }
-    }
-  }
-}
-
 .country_flag {
   margin-right: 8px;
 }

package/components/fields/richText.vue

@@ -22,7 +22,7 @@
         :outlined="$classes().includes('outlined') || null" type="text" :name="imageUploader.name"
         :value="images[imageKey]" />
     </div>
-    <input type="hidden" :name="spec.name" :value="producedValue" :disabled="inputDisabled" />
+    <input type="hidden" :name="fieldName" :value="producedValue" :disabled="inputDisabled" />
   </div>
 </template>
 

package/components/fields/text.vue

@@ -134,10 +134,6 @@ export default {
         passwordField.appendIcon = "visibility";
       }
     },
-    classes() {
-      // return this.$classes().concat("g-text-field--hintless");
-      return this.$classes();
-    },
     action_focus() {
       this.$refs.field.focus();
     },

package/components/fields/textarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="styles()" :class="classes()" v-if="loadIf">
+  <div :style="styles()" :class="$classes()" v-if="loadIf">
     <v-textarea :color="gcolor" v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
       :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :readonly="spec.readOnly" :height="height"
       :rules="$validation()" counter :outlined="$classes().includes('outlined')" :disabled="inputDisabled"
@@ -38,9 +38,6 @@ export default {
       this.height = styles.remove("height");
       return styles;
     },
-    classes() {
-      return this.$classes().concat("g-text-field--hintless");
-    },
     onChange: eventFiltering.debounce(function () {
       this.$executeOnChange();
     }, 300)

package/components/fields/timer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="classes()" v-if="loadIf">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <div v-if="days_mode">
       <div align="center">
         <v-row align="center" justify="center">
@@ -106,9 +106,6 @@ export default {
         this.fieldModel = value;
       });
     },
-    classes() {
-      return this.$classes().concat("g-text-field--hintless");
-    },
     // days_mode methods
     formatNum: num => (num < 10 ? "0" + num : num),
     startCountdownTimer() {

package/components/mixins/generic.js

@@ -16,9 +16,8 @@ export default {
           parent.$componentName() == name &&
           parent.$registryEnabled()
         ) {
-          return parent;
+          return parent.$refs.delegate ? parent.$refs.delegate : parent;
         }
-
         parent = parent.$parent;
       }
     },

package/components/mixins/styles.js

@@ -3,8 +3,6 @@ import { fieldModels, watchFieldModels } from "../composable/conditional";
 import { dirtySpecs } from "../composable/dirtyState";
 import { determineColor } from "../../utils/constant";
 import Action from "../../action";
-import { inject, provide } from "vue";
-
 const NUMBER_PRECISION = 2;
 const isNeedToBeFixed = (val, component) => {
   return component.type == 'number' && !Number.isInteger(val) && Number.isFinite(val);
@@ -294,17 +292,7 @@ export default {
       vm.fieldModel = newSpec.value;
       if (Utils.type.isNotNull(newSpec.displayed)) vm._show = newSpec.displayed;
       vm._submitWhenNotDisplayed = newSpec.submitWhenNotDisplayed;
-
-      // if (vm.$el) {
-      //   const els = vm.$el.querySelectorAll('input,textarea');
-      //   if (!vm.submitWhenNotDisplayed) {
-      //     els.forEach((el) => el.disabled = true);
-      //   } else {
-      //     els.forEach((el) => el.disabled = false);
-      //   }
-      // }
-
-      Object.assign(this.spec, newSpec);
+      Object.assign(vm.spec, newSpec);
     },
     $classes(spec, defaultViewName) {
       const properties = Object.assign(

package/components/panels/vertical.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="componentName" :class="cssClasses" :style="cssStyles" :href="$href()" @click="$onClick()">
-    <template v-for="(item, index) in spec.childViews" :key="viewKey(item, index)">
+    <template v-for="(item, index) in latestSpec.childViews" :key="viewKey(item, index)">
       <!-- Use view name for key to avoid component reuse issue -->
       <glib-component :spec="item" />
     </template>
@@ -13,6 +13,16 @@ export default {
     spec: { type: Object, required: true }
   },
   computed: {
+    latestSpec() {
+      const spec = this.spec;
+      const data = GLib.component.findDataById(this.viewId);
+      if (data) {
+        Object.assign(spec, data);
+      }
+
+      return spec;
+      // return this.spec;
+    },
     cssClasses: function () {
       // TODO: Remove this after migrating to `panels/responsive`
       // Vertical panels are nameless when used in predefined layout (e.g. page.body, list.header, etc.)

package/components/validation.js

@@ -104,9 +104,9 @@ class InclusionValidator extends AbstractValidator {
   build(model) {
     if (this.isAllowBlank() && !isPresent(model)) return true;
 
-    const within = this.validationOptions.in || this.validationOptions.within;
-
-    return within.includes(model) ? true : this.validationOptions.message;
+    const value = new Set([model].flat());
+    const within = new Set(this.validationOptions.in || this.validationOptions.within);
+    return value.isSubsetOf(within) ? true : this.validationOptions.message;
   }
 }
 
@@ -114,9 +114,9 @@ class ExclusionValidator extends AbstractValidator {
   build(model) {
     if (this.isAllowBlank() && !isPresent(model)) return true;
 
-    const within = this.validationOptions.in || this.validationOptions.within;
-
-    return !within.includes(model) ? true : this.validationOptions.message;
+    const value = new Set([model].flat());
+    const within = new Set(this.validationOptions.in || this.validationOptions.within);
+    return !value.isSubsetOf(within) ? true : this.validationOptions.message;
   }
 }
 

package/cypress/e2e/glib-web/autoValidate.cy.ts

@@ -0,0 +1,23 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('auto_validate')
+
+describe('autoValidate', () => {
+  it('generate validate from model', () => {
+    cy.visit(url)
+
+    cy.contains('submit').click()
+
+    cy.get('.v-dialog').contains('OK').click()
+
+    cy.contains('This job is for person end with Doe').should('exist')
+    cy.contains('Say hello!').should('exist')
+    cy.contains('must be greater than or equal to 18').should('exist')
+    cy.contains('Too short').should('exist')
+    cy.contains('is too short (minimum is 1 character)').should('exist')
+    cy.contains('Min 1 word').should('exist')
+    cy.contains('We dont accept that kind of animal!').should('exist')
+    cy.contains('dont choose me').should('exist')
+    cy.contains('is not included in the list').should('exist')
+    cy.get('.fields-check .v-input--error').should('exist')
+  })
+})

package/cypress/e2e/glib-web/dialog.cy.ts

@@ -1,8 +1,9 @@
 import { testPageUrl } from "../../helper"
+const url = testPageUrl('dialog')
 
 describe('dialog', () => {
   it('updateExisting', () => {
-    cy.visit(testPageUrl())
+    cy.visit(url)
     cy.contains('Dialog updateExisting').click()
     cy.get('.v-dialog h1').should('contain.text', 'Hello world')
     cy.get('.v-dialog .v-icon').should('exist')
@@ -10,4 +11,15 @@ describe('dialog', () => {
     cy.get('.v-dialog h1').should('contain.text', 'Hello world (updated)')
     cy.get('.v-dialog .v-icon').should('not.exist')
   })
+
+  it('open dialog', () => {
+    cy.visit(url)
+    cy.contains('Dialog open').click()
+    cy.get('.dialog-title > .v-btn').click()
+
+    cy.contains('Dialog open').click()
+    cy.get('.v-dialog').contains('close').click()
+
+    cy.get('.v-dialog').should('not.exist')
+  })
 })

package/cypress/e2e/glib-web/display.cy.ts

@@ -1,8 +1,9 @@
 import { testPageUrl } from "../../helper"
+const url = testPageUrl('form')
 
 describe('display', () => {
   it('form validity', () => {
-    cy.visit(testPageUrl())
+    cy.visit(url)
 
     cy.get('.fields-select .v-field__clearable').first().click()
     cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
@@ -24,5 +25,31 @@ Form Data:
     cy.get('.unformatted').should('contain.text', result)
   })
 
+  it('form validity with same field name', () => {
+    cy.visit(url)
 
+    cy.contains('show jack').click()
+
+    // TODO: currently having form with 2 or more field the same name broke vuetify form validation
+    // cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
+
+    cy.contains('submit').click()
+
+    const result = `Method: POST
+Form Data:
+{
+  "date": "2024-07-24",
+  "select": [
+    "option1",
+    "option2"
+  ],
+  "chip_group": "option2",
+  "radio_group": "option3",
+  "check_group": "option1",
+  "text": "Jack Doe",
+  "textarea": "Lorem ipsum et dumet bla bla bla..."
+}`
+
+    cy.get('.unformatted').should('contain.text', result)
+  })
 })

package/cypress/e2e/glib-web/{reactivity.cy.ts → form.cy.ts}

@@ -1,9 +1,9 @@
 import { testPageUrl } from "../../helper"
+const url = testPageUrl('form')
 
-
-describe('reactivity', () => {
+describe('form', () => {
   it('logics/set, components/set, components/replace', () => {
-    cy.visit(testPageUrl())
+    cy.visit(url)
 
     // submit button should be clickabl e
     cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
@@ -37,12 +37,10 @@ Form Data:
     "option99"
   ],
   "chip_group": "option99",
-  "text": "Doe John",
+  "text": "John Doe",
   "textarea": "The quick brown fox jumps over the lazy dog"
 }`
 
     cy.get('.unformatted').should('contain.text', result)
   })
-
-
 })

package/cypress/e2e/glib-web/formDynamic.cy.ts

@@ -0,0 +1,55 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('form_dynamic')
+
+describe('form', () => {
+  it('dynamic group', () => {
+    cy.visit(url)
+
+    cy.get('.text-success').click()
+
+    cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+
+    cy.get('#input-23').type('Rate your breakfast')
+    cy.get('#input-25').click()
+    cy.get('.v-overlay-container').contains('Rating').click()
+
+    cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
+
+    cy.get(':nth-child(3) > [style="display: block;"] > .group-wrapper > .text-error').click()
+
+    cy.contains('Confirm').click()
+
+    cy.contains('submit').click()
+
+
+    const result = `Method: POST
+Form Data:
+{
+  "evaluation": {
+    "0": {
+      "question": "Punctuality",
+      "type": "rating",
+      "enabled": ""
+    },
+    "1": {
+      "question": "Quality of work",
+      "type": "rating",
+      "enabled": "1"
+    },
+    "2": {
+      "_destroy": "1",
+      "question": "Satisfied?",
+      "type": "yes_no"
+    },
+    "3": {
+      "question": "Rate your breakfast",
+      "type": "rating",
+      "enabled": ""
+    }
+  }
+}`
+
+    cy.get('.unformatted').should('contain.text', result)
+
+  })
+})

package/cypress/e2e/glib-web/multiupload.cy.ts

@@ -0,0 +1,23 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('multiupload')
+
+describe('multiUpload', () => {
+  it('can change files', () => {
+    cy.visit(url)
+
+    cy.contains('clear files').click()
+    cy.contains('populate files').click()
+
+    cy.contains('submit').click()
+
+    const result = `Method: POST
+Form Data:
+{
+  "multi2": [
+    "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--29513eb922c80b9cfb11d387b885f70b03fead1b"
+  ]
+}`
+
+    cy.get('.unformatted').should('contain.text', result)
+  })
+})

package/cypress/helper.ts

@@ -1,7 +1,7 @@
-const DEV_TEST_PAGE = 'http://localhost:3000/glib/json_ui_garage?path=test_page%2Findex'
+const DEV_TEST_PAGE = 'http://localhost:3000/glib/json_ui_garage?path=test_page%2F{{testPage}}'
 
-function testPageUrl() {
-  return DEV_TEST_PAGE;
+function testPageUrl(testPage) {
+  return DEV_TEST_PAGE.replace('{{testPage}}', testPage);
 }
 
 export { testPageUrl }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "glib-web",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "cypress run"
+    "test": "cypress run --browser chrome"
   },
   "author": "",
   "license": "ISC",

package/plugins/updatableComponent.js

@@ -1,33 +1,58 @@
 export default {
   install: (Vue, options) => {
     Vue.mixin({
+      computed: {
+        viewId() {
+          if (this.spec && this.spec.id) {
+            const id = this.spec.id;
+
+            if (id.includes('{{entry_index}}')) {
+              const dynamicGroupEntry = this.$closest("fields/internalDynamicGroupEntry");
+              if (dynamicGroupEntry) {
+                return dynamicGroupEntry.$populateIndexes(id);
+              }
+            }
+
+            return id;
+          }
+        }
+      },
       methods: {
         $ready() {
           let spec = this.spec;
           if (spec && spec.id && this.$registryEnabled()) {
-            const id = spec.id;
-            const existingComponent = GLib.component.findById(id);
+
+            const id = this.viewId;
+
+            // const id = spec.id;
+            // const existingComponent = GLib.component.findById(id, false);
             // A component with the same ID in a different page shouldn't be considered a
             // duplicate. See `utils/components#deregister` for more details.
-            if (existingComponent) {
-              console.warn(
-                "Duplicate component ID:",
-                id,
-                "Existing:",
-                GLib.component.vueName(existingComponent),
-                "New:",
-                GLib.component.vueName(this)
-              );
-            }
+            // if (existingComponent) {
+            //   console.warn(
+            //     "Duplicate component ID:",
+            //     id,
+            //     "Existing:",
+            //     GLib.component.vueName(existingComponent),
+            //     "New:",
+            //     GLib.component.vueName(this)
+            //   );
+            // }
             const newComponent = this.$refs.delegate || this;
             GLib.component.register(id, newComponent);
           }
         },
         $tearDown() {
           let spec = this.spec;
+
           if (spec && spec.id && this.$registryEnabled()) {
             GLib.component.deregister(spec.id, this);
           }
+
+          // Utils.type.ifString(this.viewId, (viewId) => {
+          //   console.log("DEREGISTER DATA1", viewId)
+          //   GLib.component.deregisterData(viewId);
+          // })
         },
         $registryEnabled() {
           // Common classes such as `_select` need to return false so that it doesn't override its parent (e.g. `select`).

package/store.js

@@ -13,7 +13,8 @@ export const vueApp = reactive({
     isBusy: false,
     webSocket: { channels: {}, header: {} },
     actionCable: null,
-    registeredComponents: [],
+    registeredComponents: {},
+    registeredComponentData: {},
     temp: {},
     richTextValues: {},
     draggedComponent: null,
@@ -52,20 +53,26 @@ function glibEventHandler(e) {
     closeAllDialog();
     closeAllPopover();
 
-    const { onUnload } = jsonView.page;
-    if (onUnload) {
-        Action.execute(onUnload, {});
-    }
-
     if (e) {
         if (ctx().isFormDirty && !ctx().isFormSubmitted) {
             e.preventDefault();
         }
     } else {
-        return !isDirty();
+        const confirmUnload = !isDirty();
+        if (confirmUnload) {
+            // Clear after we go past dirty prompt.
+            GLib.component.clearData();
+
+            const { onUnload } = jsonView.page;
+            if (onUnload) {
+                Action.execute(onUnload, {});
+            }
+        }
+        return confirmUnload;
     }
 
 }
+
 export const watchGlibEvent = () => {
     window.onbeforeunload = glibEventHandler;
     glibevent.onbeforewindowsopen = glibEventHandler;

package/utils/component.js

@@ -7,25 +7,27 @@ export default class {
     return vueApp.registeredComponents;
   }
 
-  static findById(id) {
+  static get _dataRegistry() {
+    return vueApp.registeredComponentData;
+  }
+
+  static findById(id, warn = true) {
+    if (!vueApp.registeredComponents[id] && warn) console.warn("Component ID not found", id);
     return vueApp.registeredComponents[id];
   }
 
-  static register(id, component) {
-    // if (this._registry[id]) {
-    //   console.warn(
-    //     "Duplicate component ID:",
-    //     id,
-    //     "Existing:",
-    //     this.vueName(this._registry[id]),
-    //     "New:",
-    //     this.vueName(component)
-    //   );
-    // }
+  static findDataById(id) {
+    return this._dataRegistry[id];
+  }
 
+  static register(id, component) {
     this._registry[id] = component;
   }
 
+  static registerData(id, data) {
+    this._dataRegistry[id] = data;
+  }
+
   static deregister(id, component) {
     // As the user navigates to a new page, there may be a component with the same ID in the next page,
     // that is not reused from the component in the previous page. When this happens, the new
@@ -37,6 +39,17 @@ export default class {
     }
   }
 
+  static deregisterData(id) {
+    delete this._dataRegistry[id];
+  }
+
+  static clearData() {
+    console.debug("Clearing components' dynamic data");
+    for (const key in this._dataRegistry) {
+      this.deregisterData(key)
+    }
+  }
+
   static vueName(component) {
     // _componentTag not found
     // return component.$options._componentTag;