glib-web 4.1.1 → 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/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"

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,7 +14,7 @@
 <script>
 import { defineComponent } from "vue";
 import inputVariant from "../mixins/inputVariant";
-import { triggerOnInput } from "../composable/form";
+import { triggerOnChange, triggerOnInput } from "../composable/form";
 
 export default defineComponent({
   mixins: [inputVariant],
@@ -25,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,5 +1,5 @@
 <template>
-  <div :class="$classes()" :style="$styles()">
+  <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' : ''">

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,14 +288,14 @@ export default {
       if (Utils.type.isNotNull(newSpec.displayed)) vm._show = newSpec.displayed;
       vm._submitWhenNotDisplayed = newSpec.submitWhenNotDisplayed;
 
-      if (vm.$el && vm.$el == typeof HTMLElement) {
-        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/{test_page.cy.ts → reactivity.cy.ts}

@@ -1,8 +1,9 @@
-const TEST_PAGE = 'http://localhost:3000/glib/json_ui_garage?path=test_page%2Findex'
+import { testPageUrl } from "../../helper"
+
 
 describe('reactivity', () => {
   it('logics/set, components/set, components/replace', () => {
-    cy.visit(TEST_PAGE)
+    cy.visit(testPageUrl())
 
     // submit button should be clickabl e
     cy.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
@@ -16,15 +17,15 @@ describe('reactivity', () => {
 
     cy.get('.fields-check input[type="checkbox"]').first().click()
 
-    // cy.contains('submit (if form valid)').should('have.class', 'v-btn--disabled')
+    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.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.contains('submit (if form valid)').should('not.have.class', 'v-btn--disabled')
 
     cy.get('button').contains('submit').first().click()
 
@@ -32,7 +33,9 @@ describe('reactivity', () => {
 Form Data:
 {
   "date": "2024-07-27",
-  "select": "option99",
+  "select": [
+    "option99"
+  ],
   "chip_group": "option99",
   "text": "Doe John",
   "textarea": "The quick brown fox jumps over the lazy dog"
@@ -41,13 +44,5 @@ Form Data:
     cy.get('.unformatted').should('contain.text', result)
   })
 
-  it('dialog', () => {
-    cy.visit(TEST_PAGE)
-    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/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/package.json

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

package/store.js

@@ -18,6 +18,7 @@ export const vueApp = reactive({
     richTextValues: {},
     draggedComponent: null,
     lastNavigationCount: null,
+    ignoredInputs: new Set(),
     tooltipSpec: {},
     bottomBanners: {},
     uploader: {},
@@ -42,6 +43,8 @@ export const glibevent = reactive({
 });
 
 function glibEventHandler(e) {
+    vueApp.ignoredInputs = new Set();
+
     const { onUnload } = jsonView.page;
     if (onUnload) {
         Action.execute(onUnload, {});