glib-web 4.1.0 → 4.1.2

package/.eslintrc.js

@@ -33,6 +33,9 @@ module.exports = {
         "GLib": "readonly",
         "Utils": "readonly",
         "google": "readonly",
-        "Stripe": "readonly"
+        "Stripe": "readonly",
+        "cy": "readonly",
+        "it": "readonly",
+        "describe": "readonly"
     }
 };

package/README.md

@@ -61,6 +61,7 @@ view.chipGroup styleClasses: ['custom']
 ## Prepare for publishing
 
 - Create a PR to the `master` branch
+- Make sure test pass `yarn run test`
 - After approval, merge the PR.
 
 ## Publish package to npm

package/action.js

@@ -228,7 +228,7 @@ export default class Action {
 
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        const dialog = dialogs.last();
+        const dialog = dialogs.value.last();
         const updateDialog = windowMode ? false : Utils.type.isObject(dialog);
         if (updateDialog) {
           dialog.updateContent(response);

package/actions/components/replace.js

@@ -5,7 +5,7 @@ export default class {
   execute(spec, component) {
     const target = GLib.component.findById(spec.targetId) || component;
     if (target) {
-      Object.assign(target.spec, spec.newView);
+      target.action_merge(spec.newView);
     }
 
     Action.execute(spec.onReplace, target);

package/actions/components/set.js

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

package/actions/dialogs/open.js

@@ -2,7 +2,7 @@ import { dialogs } from "../../store";
 
 export default class {
   execute(spec, component) {
-    const dialog = dialogs.last();
+    const dialog = dialogs.value.last();
     if (spec.updateExisting && dialog) {
       dialog.reload(spec);
 

package/actions/dialogs/show.js

@@ -2,7 +2,7 @@ import { dialogs } from "../../store";
 
 export default class {
   execute(spec, component) {
-    const dialog = dialogs.last();
+    const dialog = dialogs.value.last();
     if (spec.updateExisting && dialog) {
       dialog.updateContent(spec);
       return;

package/components/fields/_patternText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="classes()">
+  <div :style="$styles()" :class="classes()" v-if="!isInputIgnored">
     <!-- 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)"

package/components/fields/_select.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" :style="$styles()" :class="classes()">
+  <div ref="container" :style="$styles()" :class="classes()" v-if="!isInputIgnored">
     <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"
@@ -49,7 +49,7 @@ export default {
     return {
       options: null,
       append: {},
-      rules: [],
+      rules: this.$validation(),
       focused: false
     };
   },

package/components/fields/check.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$classes()" :style="$styles()">
+  <div :class="$classes()" :style="$styles()" v-if="!isInputIgnored">
     <!-- This hidden field should always be there to make sure the submitted param is not empty,
          which could cause "Not accessible" error on the server. -->
     <input v-model="uncheckValue" type="hidden" :name="fieldName" />

package/components/fields/checkGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <fields-check v-for="(childView, index) in childViews" :spec="childView" :key="index"
       @oncheck="updateFieldModel"></fields-check>
     <v-input ref="validator" :model-value="fieldModel" :rules="$validation()" :name="fieldName" validate-on="input"
@@ -31,7 +31,8 @@ export default defineComponent({
       return this.spec.childViews.map((childView) => {
         const { readOnly, disabled } = this.spec;
         const parentName = this.spec.name;
-        return Object.assign({}, { readOnly, disabled, parentName }, childView);
+        const value = [this.spec.value].flat().includes(childView.checkValue) ? childView.checkValue : null;
+        return Object.assign({}, { readOnly, disabled, parentName, value }, childView);
       });
     }
   },

package/components/fields/chipGroup.vue

@@ -1,9 +1,11 @@
 <template>
-  <div ref="container" :style="$styles()" :class="$classes()">
+  <div ref="container" :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <v-chip-group :color="gcolor" v-model="fieldModel" @update:modelValue="onChange()" :multiple="spec.multiple" column>
       <v-chip v-for="(option, index) in spec.options" :key="index" filter :variant="variant">{{
         option.text }}</v-chip>
     </v-chip-group>
+    <v-input ref="validator" :model-value="fieldModel" :rules="$validation()" :name="fieldName" validate-on="input"
+      :disabled="inputDisabled"></v-input>
     <input v-for="(item, index) in indexToValue(fieldModel)" :key="index" type="hidden" :disabled="inputDisabled"
       :name="fieldName" :value="item" />
   </div>
@@ -12,8 +14,7 @@
 <script>
 import { defineComponent } from "vue";
 import inputVariant from "../mixins/inputVariant";
-import { triggerOnInput } from "../composable/form";
-import { fieldModels } from "../composable/conditional";
+import { triggerOnChange, triggerOnInput } from "../composable/form";
 
 export default defineComponent({
   mixins: [inputVariant],
@@ -26,6 +27,7 @@ export default defineComponent({
       const containerEl = this.$refs.container;
       if (containerEl) {
         triggerOnInput(containerEl);
+        triggerOnChange(containerEl);
       }
     },
     indexToValue(value) {

package/components/fields/creditCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <div class="stretcher">
       <StripeIndividualFields v-if="$classes().includes('individual')" :spec="spec" ref="delegate"
         :on-complete="_retrieveToken" :on-error="_displayError" />

package/components/fields/dynamicGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <div v-for="(group, groupIndex) in groupSpecs" :key="`group${groupIndex}`">
       <input v-if="isDeleted(groupIndex)" type="hidden" :name="`${spec.name}[${groupIndex}][_destroy]`" value="1" />
       <div :style="{ display: isDeleted(groupIndex) ? 'none' : 'block' }">

package/components/fields/dynamicSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()">
+  <div :style="$styles()" v-if="!isInputIgnored">
     <v-autocomplete ref="autocomplete" v-model="model" :items="allItems" :loading="$isBusy"
       :v-model:search-input="search" :label="spec.label" hide-no-data hide-selected no-filter return-object
       :chips="true" :deletable-chips="true" :multiple="spec.multiple">

package/components/fields/file.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="fileUploadContainer" :style="$styles()" :class="$classes()">
+  <div ref="fileUploadContainer" :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <label v-if="spec.label" class="v-label v-label--active">{{ spec.label }}</label>
     <div class="preview-container" :class="[fileTitle ? 'uploaded' : '']">
       <v-avatar v-if="placeholder.type == 'avatar'" :style="$styles(placeholder)">

package/components/fields/googlePlace.vue

@@ -1,7 +1,7 @@
 <!-- TODO: This probably can be merged with latLong-v1 or map-v1, i.e. add infoWindow support to latLong or map -->
 
 <template>
-  <v-container fluid class="pa-0">
+  <v-container fluid class="pa-0" v-if="!isInputIgnored">
     <div class="v-input v-text-field theme--light">
       <div class="v-input__control">
         <div class="v-input__slot">

package/components/fields/hidden.vue

@@ -1,5 +1,5 @@
 <template>
-  <input type="hidden" :name="fieldName" :value="fieldModel" :disabled="inputDisabled" />
+  <input type="hidden" :name="fieldName" :value="fieldModel" :disabled="inputDisabled" v-if="!isInputIgnored" />
 </template>
 
 <script>

package/components/fields/location.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
 
     <fields-text ref="autocomplete" type="text" :spec="spec"></fields-text>
 

package/components/fields/multiUpload.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <div ref="container" @click="handleClick" @drop="handleDrop" @dragover="handleDragOver" @dragleave="handleDragLeave"
       class="gdrop-file border-[2px]">
       <input ref="fileSelect" type="file" multiple style="display: none">

package/components/fields/otpField.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="otp" :style="$styles()" :class="$classes()">
+  <div ref="otp" :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <v-otp-input ref="field" v-model="fieldModel" :name="fieldName" :disabled="inputDisabled" :rounded="4"
       :max-width="maxWidth" type="spec.type || 'number'" :length="length" :variant="variant"
       @change="$executeOnChange()" />

package/components/fields/phone.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <v-phone-input :guessCountry="guessCountry" displayFormat="e164" :defaultCountry="defaultCountry" :color="gcolor"
       v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint" :placeholder="spec.placeholder"
       :maxlength="spec.maxLength || 255" :readonly="spec.readOnly" :rules="$validation()"

package/components/fields/radio.vue

@@ -1,9 +1,20 @@
 <template>
-  <div :class="$classes()" :style="$styles()">
-    <v-radio :label="spec.label" :value="spec.value.presence() || vuetifyEmptyString" :readonly="spec.readOnly"
-      :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" :color="gcolor" />
+  <div :class="$classes()" :style="$styles()" v-if="!isInputIgnored">
+    <v-radio :label="spec.label" :value="(spec.value || '').presence() || vuetifyEmptyString" :readonly="spec.readOnly"
+      :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" :color="gcolor"
+      :class="spec.imageUrl || spec.icon ? 'custom-radio' : ''">
+      <template v-slot:label v-if="spec.imageUrl || spec.icon">
+        <div class="custom-radio-content">
+          <img v-if="spec.imageUrl" :src="spec.imageUrl" alt="icon" class="custom-radio-icon" />
+          <v-icon v-if="spec.icon" class="aligner" :color="spec.iconColor" :size="spec.iconSize">
+            {{ spec.icon }}
+          </v-icon>
+          <div class="custom-radio-label">{{ spec.label }}</div>
+        </div>
+      </template>
+    </v-radio>
     <div v-if="spec.childViews" class="radio-childviews">
-      <div v-for="(item, i) in spec.childViews" :key="i">
+      <div v-for="( item, i ) in spec.childViews " :key="i">
         <glib-component :spec="item" />
       </div>
     </div>
@@ -18,3 +29,99 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.custom-radio {
+  /* styles for custom-radio class */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 240px;
+  height: 254px;
+  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
+  text-align: center;
+  cursor: pointer;
+  padding: 16px;
+  position: relative;
+  border: 1px solid #E6E6E6;
+  border-radius: 24px;
+}
+
+.custom-radio:hover {
+  border: 2px solid;
+  border-radius: 24px;
+  border-color: #0A2A9E;
+}
+
+.custom-radio:hover .custom-radio-label {
+  font-size: 22px;
+  color: #0A2A9E;
+}
+
+.custom-radio .custom-radio-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin-right: 30px;
+}
+
+.custom-radio .custom-radio-icon {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 8px;
+}
+
+.custom-radio .custom-radio-label {
+  font-size: 22px;
+  color: inherit;
+  margin-top: 16px;
+}
+
+.custom-radio ::v-deep .v-selection-control__input {
+  width: 240px;
+  height: 254px;
+  background-color: transparent;
+  left: 50%;
+
+  >.v-icon {
+    opacity: 0;
+  }
+
+}
+
+.custom-radio ::v-deep .v-selection-control__input::before {
+  background-color: transparent
+}
+
+.custom-radio ::v-deep .v-ripple__container {
+  display: none;
+}
+
+
+.custom-radio .v-ripple__container {
+  display: none;
+}
+
+.radio--active .custom-radio {
+  border: 2px solid;
+  border-radius: 24px;
+  border-color: #0A2A9E;
+}
+
+.radio--active .custom-radio-label {
+  color: #0A2A9E;
+  font-weight: 700;
+  font-size: 22px;
+}
+
+.radio--active .v-icon {
+  color: #0A2A9E;
+}
+
+.radio-childviews {
+  margin-top: 16px;
+}
+</style>

package/components/fields/radioGroup.vue

@@ -5,7 +5,7 @@
     -->
   <v-radio-group v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly" :disabled="inputDisabled"
     :rules="$validation()" :inline="spec.row" validate-on="blur" @change="$executeOnChange()" :class="$classes()"
-    :style="$styles()">
+    :style="$styles()" v-if="!isInputIgnored">
     <div v-for="(childView, index) in spec.childViews" :key="index" style="width: 100%;">
       <glib-component :spec="childSpec(childView)" />
     </div>

package/components/fields/rating.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!isInputIgnored">
     <v-rating v-model="fieldModel" :name="fieldName" empty-icon="star_outline" full-icon="star" half-icon="star_half"
       :half-increments="spec.halfIncrements" hover length="5" :readonly="spec.readOnly" :disabled="inputDisabled"
       :color="spec.color" :bg-color="spec.color" :size="spec.size"></v-rating>

package/components/fields/richText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" :style="$styles()" :class="$classes()">
+  <div ref="container" :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <v-tabs v-model="mode" fixed-tabs>
       <v-tab @click="onRichTextClicked">Editor</v-tab>
       <v-tab @click="onRawTextClicked">Code</v-tab>

package/components/fields/sign.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$classes()" :style="$styles()">
+  <div :class="$classes()" :style="$styles()" v-if="!isInputIgnored">
     <div class="glib-canvas-container">
       <canvas style="width: 100%; height: 100%" @mousedown="handleDrawStart" @mousemove="handleDrawing"
         @mouseup="handleDrawEnd" @touchstart="handleDrawStart" @touchmove="handleDrawing" @touchend="handleDrawEnd"

package/components/fields/stripe/stripeFields.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div ref="container">
+    <div ref="container" v-if="!isInputIgnored">
       <!-- A Stripe Element will be inserted here. -->
     </div>
   </div>

package/components/fields/stripe/stripeIndividualFields.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!isInputIgnored">
     <div class="field">
       <div class="outlined">
         <div id="cardNumber" ref="cardNumber" class="input"></div>

package/components/fields/stripeExternalAccount.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <v-text-field v-model="accountNumber" label="Account Number" placeholder="000123456" :variant="variant"
       :rules="accountNumberRules" :error-messages="errorMessages" @keyup="$onTyping({ duration: 200 })" />
 

package/components/fields/stripeToken.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <StripeIndividualFields v-if="$classes().includes('individual')" :spec="spec" :on-complete="_retrieveToken"
       :on-error="_displayError" />
     <StripeFields v-else :spec="spec" :on-complete="_retrieveToken" :on-error="_displayError" />

package/components/fields/text.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()">
+  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
     <v-text-field :color="gcolor" ref="field" v-model="fieldModel" :label="spec.label" :name="fieldName"
       :placeholder="spec.placeholder" :density="density" :hint="spec.hint" :maxlength="spec.maxLength || 255"
       :readonly="spec.readOnly" :disabled="inputDisabled" :type="config.type" :rules="rules"

package/components/fields/textarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="styles()" :class="classes()">
+  <div :style="styles()" :class="classes()" v-if="!isInputIgnored">
     <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"

package/components/fields/timer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="classes()">
+  <div :style="$styles()" :class="classes()" v-if="!isInputIgnored">
     <div v-if="days_mode">
       <div align="center">
         <v-row align="center" justify="center">

package/components/mixins/generic.js

@@ -25,9 +25,15 @@ export default {
       var augmentedRules = rules || [];
       Utils.type.ifObject(this.spec.validation, val => {
         Utils.type.ifObject(val.required, spec => {
-          augmentedRules = augmentedRules.concat([
-            v => (v ? true : spec.message)
-          ]);
+          const validationFunc = (v) => {
+            if (!Utils.type.isNotNull(v)) return spec.message;
+            if (Array.isArray(v) && v.length <= 0) return spec.message;
+            if (Utils.type.isString(v) && v.length <= 0) return spec.message;
+
+
+            return true;
+          };
+          augmentedRules = augmentedRules.concat([validationFunc]);
         });
         Utils.type.ifObject(val.format, spec => {
           augmentedRules = augmentedRules.concat([

package/components/mixins/styles.js

@@ -3,6 +3,7 @@ import { fieldModels, watchFieldModels } from "../composable/conditional";
 import { dirtySpecs } from "../composable/dirtyState";
 import { determineColor } from "../../utils/constant";
 import Action from "../../action";
+import { vueApp } from "../../store";
 
 const NUMBER_PRECISION = 2;
 const isNeedToBeFixed = (val, component) => {
@@ -18,6 +19,7 @@ export default {
       _submitWhenNotDisplayed: !this.spec || !Utils.type.isNotNull(this.spec.submitWhenNotDisplayed) ? false : !!this.spec.submitWhenNotDisplayed,
       _watchers: [],
       _isValueChanged: false,
+      ignoredInputs: new Set(),
       // Some components do not support null or empty string value, so we need to use an intermediary value.
       // See https://github.com/vuetifyjs/vuetify/issues/8876
       vuetifyEmptyString: "<EMPTY_STRING>"
@@ -39,9 +41,25 @@ export default {
     gcolor() {
       if (!this.spec) return '';
       return determineColor(this.spec.styleClasses, this.spec.color || 'primary');
+    },
+    isInputIgnored() {
+      return vueApp.ignoredInputs.has(this.fieldName) && !this._submitWhenNotDisplayed;
     }
   },
   watch: {
+    _show: {
+      handler(val) {
+        this.ignoredInputs.forEach((input) => vueApp.ignoredInputs.delete(input));
+        this.ignoredInputs.clear();
+        if (!val && this.$el && this.$el instanceof HTMLElement && !this._submitWhenNotDisplayed) {
+          Array.from(this.$el.querySelectorAll('input,select,textarea')).forEach((el) => {
+            this.ignoredInputs.add(el.name);
+            vueApp.ignoredInputs.add(el.name);
+          });
+        }
+      },
+      // immediate: true
+    },
     fieldModel: function (val) {
       if (val === this.vuetifyEmptyString) {
         val = "";
@@ -114,7 +132,7 @@ export default {
       //   this._watchers.push(watcher1);
       // }
 
-      if (this.spec && (this.spec.showIf || this.spec.loadIf) && this.$jsonLogicEnabled()) {
+      if (this.spec && (this.spec.showIf || this.spec.loadIf)) {
         watcher2 = watchFieldModels(this.spec.showIf || this.spec.loadIf, (value) => {
           const oldValue = this._show;
 
@@ -124,6 +142,10 @@ export default {
             this._show = false;
           }
 
+          // if (this.spec.showIf) {
+          //   this._submitWhenNotDisplayed = true;
+          // }
+
           if (oldValue != value) {
             this.$nextTick(() => {
               // Call either onIfTrue or onIfFalse.
@@ -266,12 +288,14 @@ export default {
       if (Utils.type.isNotNull(newSpec.displayed)) vm._show = newSpec.displayed;
       vm._submitWhenNotDisplayed = newSpec.submitWhenNotDisplayed;
 
-      const els = vm.$el.querySelectorAll('input,textarea');
-      if (!vm.submitWhenNotDisplayed) {
-        els.forEach((el) => el.disabled = true);
-      } else {
-        els.forEach((el) => el.disabled = false);
-      }
+      // 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);
     },

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

@@ -0,0 +1,13 @@
+import { testPageUrl } from "../../helper"
+
+describe('dialog', () => {
+  it('updateExisting', () => {
+    cy.visit(testPageUrl())
+    cy.contains('Dialog updateExisting').click()
+    cy.get('.v-dialog h1').should('contain.text', 'Hello world')
+    cy.get('.v-dialog .v-icon').should('exist')
+    cy.get('.v-dialog').contains('change dialog content').click()
+    cy.get('.v-dialog h1').should('contain.text', 'Hello world (updated)')
+    cy.get('.v-dialog .v-icon').should('not.exist')
+  })
+})

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

@@ -0,0 +1,12 @@
+import { testPageUrl } from "../../helper"
+
+describe('display', () => {
+  it('form validity', () => {
+    cy.visit(testPageUrl())
+
+    cy.get('.fields-select .v-field__clearable').first().click()
+    cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+    cy.contains('hide select').click()
+    cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
+  })
+})

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

@@ -0,0 +1,48 @@
+import { testPageUrl } from "../../helper"
+
+
+describe('reactivity', () => {
+  it('logics/set, components/set, components/replace', () => {
+    cy.visit(testPageUrl())
+
+    // submit button should be clickabl e
+    cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
+
+    cy.contains('components/set').click()
+    cy.contains('logics/set').click()
+    cy.contains('components/replace').click()
+
+    // submit button should be disabled
+    cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+
+    cy.get('.fields-check input[type="checkbox"]').first().click()
+
+    cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+
+    cy.get('.fields-radio input[type="radio"]').first().click()
+
+    cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+
+    cy.get('.fields-chipGroup .v-chip').first().click()
+
+    cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
+
+    cy.get('button').contains('submit').first().click()
+
+    const result = `Method: POST
+Form Data:
+{
+  "date": "2024-07-27",
+  "select": [
+    "option99"
+  ],
+  "chip_group": "option99",
+  "text": "Doe John",
+  "textarea": "The quick brown fox jumps over the lazy dog"
+}`
+
+    cy.get('.unformatted').should('contain.text', result)
+  })
+
+
+})

package/cypress/helper.ts

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

package/nav/dialog.vue

@@ -49,7 +49,7 @@ import { ref } from "vue";
 import { usePasteable } from "../components/composable/pasteable";
 
 export default {
-  expose: ['isFormDirty', 'model'],
+  expose: ['isFormDirty', 'model', 'close'],
   setup(props) {
     const filePaster = ref(undefined);
     usePasteable(filePaster);
@@ -74,7 +74,6 @@ export default {
       model: null,
       url: null,
       urlLoaded: false,
-      disableCloseButton: false,
       isMobile: false,
       formSpec: null,
       isFormDirty: false
@@ -101,10 +100,13 @@ export default {
         return `height: ${this.mainHeight}px;`;
       }
       return null;
+    },
+    disableCloseButton() {
+      return this.spec.disableCloseButton || Utils.type.isString(this.url);
     }
   },
   mounted() {
-    dialogs.push(this);
+    dialogs.value.push(this);
   },
   created() {
     this.onResize();
@@ -135,7 +137,7 @@ export default {
     close() {
       if (!this.isDirty()) {
         this.filePaster = null;
-        dialogs.remove(this);
+        dialogs.value.remove(this);
         this.model = false;
       }
     },
@@ -160,7 +162,6 @@ export default {
     show(reload) {
       const spec = this.spec;
       this.url ||= spec.url;
-      this.disableCloseButton = this.spec.disableCloseButton || Utils.type.isString(this.url);
 
       if (Utils.type.isString(this.url)) {
         if (!this.urlLoaded) {
@@ -178,12 +179,10 @@ export default {
                 this.urlLoaded = true;
                 this.message = "";
                 this.formSpec = response.fullPageForm;
-                this.disableCloseButton = this.spec.disableCloseButton || false;
                 this.updateContent(response);
               });
             },
             (error, response) => {
-              this.disableCloseButton = false;
               Utils.launch.snackbar.error(error.toString(), this);
             }
           );
@@ -193,7 +192,6 @@ export default {
         // this.body = this.spec.body;
 
         this.message = this.spec.message;
-        this.disableCloseButton = this.spec.disableCloseButton || false;
 
         this.updateContent(this.spec);
       }
@@ -205,6 +203,7 @@ export default {
       this.header = response.header;
       this.body = response.body;
       this.footer = response.footer;
+      this.spec.disableCloseButton = response.disableCloseButton;
 
       // Make sure action only executes after the content has finished populating.
       this.$nextTick(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "",
   "main": "index.js",
   "scripts": {

package/store.js

@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { useDirtyState } from './components/composable/dirtyState';
 import Action from "./action";
 
@@ -18,6 +18,7 @@ export const vueApp = reactive({
     richTextValues: {},
     draggedComponent: null,
     lastNavigationCount: null,
+    ignoredInputs: new Set(),
     tooltipSpec: {},
     bottomBanners: {},
     uploader: {},
@@ -26,11 +27,14 @@ export const vueApp = reactive({
 
 export const jsonView = reactive({ page: window.__page });
 
-export const dialogs = reactive([]);
+export const dialogs = ref([]);
 
-export const closeAllDialog = () => dialogs.forEach((dialog) => dialog.model = false);
+export const closeAllDialog = () => {
+    dialogs.value.forEach((dialog) => dialog.model = false);
+    dialogs.value = [];
+};
 
-export const ctx = () => dialogs.slice(-1)[0] || vueApp;
+export const ctx = () => dialogs.value.slice(-1)[0] || vueApp;
 
 export const glibevent = reactive({
     onbeforewindowsopen: null,
@@ -39,12 +43,21 @@ export const glibevent = reactive({
 });
 
 function glibEventHandler(e) {
+    vueApp.ignoredInputs = new Set();
+
     const { onUnload } = jsonView.page;
     if (onUnload) {
         Action.execute(onUnload, {});
     }
 
-    return !isDirty();
+    if (e) {
+        if (ctx().isFormDirty && !ctx().isFormSubmitted) {
+            e.preventDefault();
+        }
+    } else {
+        return !isDirty();
+    }
+
 }
 export const watchGlibEvent = () => {
     window.onbeforeunload = glibEventHandler;

package/utils/http.js

@@ -81,7 +81,7 @@ export default class {
       const htmlUrl = Utils.url.htmlUrl(properties["url"]);
 
       Utils.http.execute(properties, "GET", component, (data, response) => {
-        const pushHistory = windowMode ? true : !Utils.type.isObject(dialogs.last());
+        const pushHistory = windowMode ? true : !Utils.type.isObject(dialogs.value.last());
         // TODO: Check if it is okay to remove this `if` statement so we always push even if it's the same URL.
         if (forcePushHistory || (htmlUrl !== currentUrl && pushHistory)) {
           const redirectUrl = Utils.url.htmlUrl(response.url);

package/utils/launch.js

@@ -93,7 +93,7 @@ class LaunchDialog {
 
 
   static topDialog() {
-    return dialogs.last();
+    return dialogs.value.last();
   }
 
   static open(properties, component) {
@@ -122,13 +122,13 @@ class LaunchDialog {
   }
 
   static reload(properties, component) {
-    Utils.type.ifObject(dialogs.last(), dialog => {
+    Utils.type.ifObject(dialogs.value.last(), dialog => {
       dialog.reload(properties);
     });
   }
 
   static close(properties, component) {
-    Utils.type.ifObject(dialogs.last(), dialog => {
+    Utils.type.ifObject(dialogs.value.last(), dialog => {
       dialog.close();
     });
 

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

@@ -1,8 +0,0 @@
-describe('components set', () => {
-  it('populate select options', () => {
-    cy.visit('http://localhost:3000/glib/json_ui_garage?path=views%2Fcomponents_set')
-    cy.get('.pages-body .v-btn').eq(0).click()
-    cy.get('.fields-select').eq(0).click()
-    cy.get('.v-overlay__content > .v-list').should('contain.text', 'Option1')
-  })
-})

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

@@ -1,9 +0,0 @@
-describe('pick country and region', () => {
-  it('autopopulate region', () => {
-    cy.visit('http://localhost:3000/glib/json_ui_garage?path=forms%2Fpickers')
-    cy.get('.fields-select').eq(0).click()
-    cy.get('.v-overlay__content > .v-list').contains('Australia').click()
-    cy.get('.fields-select').eq(1).click()
-    cy.get('.v-overlay__content > .v-list').should('contain.text', 'ACT')
-  })
-})

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

@@ -1,57 +0,0 @@
-describe('input select', () => {
-  it('produce value', () => {
-    const result = `Method: POST
-Form Data:
-{
-  "city": "canberra",
-  "cities": [
-    "melbourne",
-    "sydney"
-  ],
-  "language": "nl",
-  "languages": [
-    "ja",
-    "de"
-  ],
-  "empty_default": "",
-  "nil_default": "",
-  "mixed_default": [
-    "",
-    "specified",
-    ""
-  ],
-  "time_zone": "Asia/Jakarta"
-}`
-
-    cy.visit('http://localhost:3000/glib/json_ui_garage?path=forms%2Fselects')
-    cy.contains('Submit').click()
-    cy.get('.unformatted').should('contain.text', result)
-  })
-
-  it('produce value (empty)', () => {
-    const result = `Method: POST
-Form Data:
-{
-  "city": "",
-  "cities": [
-    ""
-  ],
-  "language": "",
-  "languages": [
-    ""
-  ],
-  "empty_default": "",
-  "nil_default": "",
-  "mixed_default": [
-    ""
-  ],
-  "time_zone": ""
-}`
-
-    cy.visit('http://localhost:3000/glib/json_ui_garage?path=forms%2Fselects')
-    cy.get('.v-field__clearable').click({ multiple: true })
-    cy.contains('Submit').click()
-
-    cy.get('.unformatted').should('contain.text', result)
-  })
-})