glib-web 4.1.2 → 4.2.0

package/actions/dialogs/show.js

@@ -4,6 +4,7 @@ export default class {
   execute(spec, component) {
     const dialog = dialogs.value.last();
     if (spec.updateExisting && dialog) {
+      Object.assign(dialog.spec, spec);
       dialog.updateContent(spec);
       return;
     }

package/actions/logics/set.js

@@ -27,7 +27,10 @@ export default class {
 
     if (spec.targetId) {
       targetComponent = GLib.component.findById(spec.targetId);
-    } else {
+    } else if (spec.targetIds) {
+      targetComponent = spec.targetIds.map((id) => GLib.component.findById(id));
+    }
+    else {
       console.error(`id not recognized=${spec.targetId}`);
     }
 
@@ -37,7 +40,7 @@ export default class {
         data[key] = jsonLogic.apply(properties[key], spec.variables || fieldModels);
       }
       Utils.type.ifObject(spec.data, (additionalData) => data = merge(data, additionalData));
-      targetComponent.action_merge(data);
+      Array.isArray(targetComponent) ? targetComponent.forEach((comp) => comp.action_merge(data)) : targetComponent.action_merge(data);
     });
 
     GLib.action.execute(spec.onSet, targetComponent);

package/components/button.vue

@@ -1,5 +1,5 @@
 <template>
-  <common-button :spec="spec" @[menter]="handleMouseEvent(spec.onMouseEnter)"
+  <common-button :style="$styles()" :class="$classes()" :spec="spec" @[menter]="handleMouseEvent(spec.onMouseEnter)"
     @[mleave]="handleMouseEvent(spec.onMouseLeave)" />
 </template>
 

package/components/composable/upload.js

@@ -55,7 +55,7 @@ function uploadOneFile({ files, key, spec, container, onAfterUploaded }) {
     files.value[key].progress,
     spec.storagePrefix,
     spec.metadata,
-    spec.tagging
+    spec.tagging || spec.tags
   );
 
   // track progress

package/components/fields/_patternText.vue

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

package/components/fields/_select.vue

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

package/components/fields/check.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$classes()" :style="$styles()" v-if="!isInputIgnored">
+  <div :class="$classes()" :style="$styles()" v-if="loadIf">
     <!-- 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()" v-if="!isInputIgnored">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <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"
@@ -8,7 +8,7 @@
     <template v-if="values.length > 0">
       <input type="hidden" v-for="(value, index) in values" :value="value" :key="index" :name="fieldName" />
     </template>
-    <input v-else type="hidden" :name="fieldName" :value="null" />
+    <input v-else type="hidden" :name="fieldName" :value="spec.uncheckValue" />
   </div>
 </template>
 

package/components/fields/chipGroup.vue

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

package/components/fields/creditCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <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()" v-if="!isInputIgnored">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <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()" v-if="!isInputIgnored">
+  <div :style="$styles()" v-if="loadIf">
     <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()" v-if="!isInputIgnored">
+  <div ref="fileUploadContainer" :style="$styles()" :class="$classes()" v-if="loadIf">
     <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-if="!isInputIgnored">
+  <v-container fluid class="pa-0" v-if="loadIf">
     <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" v-if="!isInputIgnored" />
+  <input type="hidden" :name="fieldName" :value="fieldModel" :disabled="inputDisabled" v-if="loadIf" />
 </template>
 
 <script>

package/components/fields/location.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
 
     <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()" v-if="!isInputIgnored">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <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">
@@ -217,23 +217,31 @@ export default defineComponent({
     const uploadTitle = props.spec.uploadTitle || 'File added';
 
     const files = ref({});
-    if (props.spec.files && props.spec.files.length > 0) {
-      files.value = props.spec.files.reduce((prev, curr) => {
-        const key = makeKey();
-
-        prev[key] = new Item({
-          status: null, // pending, completed, failed
-          url: curr.url,
-          name: curr.name,
-          signedId: curr.signed_id,
-          type: curr.type,
-          el: null
-        });
-
-        return prev;
-      }, {});
+
+    function initFiles(fls) {
+      if (fls) {
+        files.value = fls.reduce((prev, curr) => {
+          const key = makeKey();
+
+          prev[key] = new Item({
+            status: null, // pending, completed, failed
+            url: curr.url,
+            name: curr.name,
+            signedId: curr.signed_id,
+            type: curr.type,
+            el: null
+          });
+
+          return prev;
+        }, {});
+      }
     }
 
+    initFiles(props.spec.files);
+    watch(props.spec, (value) => {
+      initFiles(value.files);
+    });
+
     if (props.spec.onFinishUpload) {
       const { uploaded } = useFilesState(files);
       watch(uploaded, (val) => {

package/components/fields/otpField.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="otp" :style="$styles()" :class="$classes()" v-if="!isInputIgnored">
+  <div ref="otp" :style="$styles()" :class="$classes()" v-if="loadIf">
     <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()" v-if="!isInputIgnored">
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <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()" v-if="!isInputIgnored">
+  <div :class="$classes()" :style="$styles()" v-if="loadIf">
     <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()" v-if="!isInputIgnored">
+    :style="$styles()" v-if="loadIf">
     <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 v-if="!isInputIgnored">
+  <div v-if="loadIf">
     <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()" v-if="!isInputIgnored">
+  <div ref="container" :style="$styles()" :class="$classes()" v-if="loadIf">
     <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()" v-if="!isInputIgnored">
+  <div :class="$classes()" :style="$styles()" v-if="loadIf">
     <div class="glib-canvas-container">
       <canvas style="width: 100%; height: 100%" @mousedown="handleDrawStart" @mousemove="handleDrawing"
         @mouseup="handleDrawEnd" @touchstart="handleDrawStart" @touchmove="handleDrawing" @touchend="handleDrawEnd"
@@ -44,7 +44,7 @@
 </style>
 
 <script setup>
-import { ref, computed, defineProps } from "vue";
+import { ref, computed } from "vue";
 import * as uploader from "../composable/upload";
 import { useFileUtils } from "../composable/file";
 

package/components/fields/stripe/stripeFields.vue

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

package/components/fields/stripe/stripeIndividualFields.vue

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

package/components/fields/timer.vue

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

package/components/mixins/generic.js

@@ -1,4 +1,5 @@
 import { vueApp } from "../../store";
+import { ValidationFactory } from "../validation";
 
 export default {
   methods: {
@@ -24,26 +25,9 @@ export default {
     $validation(rules) {
       var augmentedRules = rules || [];
       Utils.type.ifObject(this.spec.validation, val => {
-        Utils.type.ifObject(val.required, spec => {
-          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([
-            v => {
-              if (v && !v.toString().match(spec.regex)) {
-                return spec.message;
-              }
-              return true;
-            }
-          ]);
+        Object.keys(val).forEach((key) => {
+          const validator = ValidationFactory.getValidator(key, val[key]);
+          augmentedRules = augmentedRules.concat([validator.build.bind(validator)]);
         });
       });
       return augmentedRules;

package/components/mixins/styles.js

@@ -3,7 +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";
+import { inject, provide } from "vue";
 
 const NUMBER_PRECISION = 2;
 const isNeedToBeFixed = (val, component) => {
@@ -19,12 +19,25 @@ 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>"
     };
   },
+  provide() {
+    const obj = {};
+
+    if (!this.spec) return obj;
+
+    if (this.spec.id) {
+      obj['panelContext'] = this;
+    }
+
+    return obj;
+  },
+  inject: {
+    panelContext: { default: null }
+  },
   computed: {
     fieldName() {
       if (this.spec && this.spec.name) return this.spec.name;
@@ -32,34 +45,19 @@ export default {
     inputDisabled() {
       return this.spec.disabled;
     },
-    submitWhenNotDisplayed() {
-      if (!this.spec) return true;
-      if (this._show) return true;
-
-      return this._submitWhenNotDisplayed;
-    },
     gcolor() {
       if (!this.spec) return '';
       return determineColor(this.spec.styleClasses, this.spec.color || 'primary');
     },
-    isInputIgnored() {
-      return vueApp.ignoredInputs.has(this.fieldName) && !this._submitWhenNotDisplayed;
+    loadIf() {
+      if (this._submitWhenNotDisplayed) return true;
+      if (this.panelContext) {
+        return this.panelContext._show && this._show;
+      }
+      return this._show;
     }
   },
   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 = "";

package/components/popover.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script>
+import { popovers } from "../store";
 import bus from "../utils/eventBus";
 
 export default {
@@ -30,6 +31,9 @@ export default {
             floatingSpec: {}
         };
     },
+    mounted() {
+        popovers.value.push(this);
+    },
     methods: {
         $mounted() {
             bus.$once(`popover/close-${this.spec.key}`, (options) => {
@@ -37,7 +41,7 @@ export default {
                 this.toggle = false;
             });
             document.addEventListener('click', this.handleClose);
-            window.addEventListener('resize', () => this.toggle = false);
+            window.addEventListener('resize', () => this.close());
         },
         handleClose(event) {
             let element = null;
@@ -49,8 +53,12 @@ export default {
             const isClickInside = element.contains(event.target);
 
             if (!isClickInside) {
-                this.toggle = false;
+                this.close();
             }
+        },
+        close() {
+            this.toggle = false;
+            popovers.value.remove(this);
         }
     }
 };

package/components/validation.js

@@ -0,0 +1,179 @@
+class AbstractValidator {
+  constructor(validationOptions) {
+    this.validationOptions = validationOptions;
+  }
+
+  build(model) {
+    return true;
+  }
+
+  isAllowBlank() {
+    return !!this.validationOptions.allow_blank || !!this.validationOptions.allow_nil;
+  }
+}
+
+function isPresent(value) {
+  if (value == undefined) return false;
+  if (value == null) return false;
+  if (Array.isArray(value) && value.length <= 0) return false;
+  if (typeof value == 'string' && value.length <= 0) return false;
+  if (typeof value == 'object' && Object.keys(value).length <= 0) return false;
+
+  return true;
+}
+
+class PresenceValidator extends AbstractValidator {
+  build(model) {
+    return isPresent(model) ? true : this.validationOptions.message;
+  }
+}
+class RequiredValidator extends PresenceValidator { }
+
+class AbsenceValidator extends AbstractValidator {
+  build(model) {
+    return !isPresent(model) ? true : this.validationOptions.message;
+  }
+}
+
+class AcceptanceValidator extends AbstractValidator {
+  build(model) {
+    if (this.isAllowBlank() && !isPresent(model)) return true;
+
+    const { accept } = this.validationOptions;
+    return accept.includes(model) ? true : this.validationOptions.message;
+  }
+}
+
+class NumericalityValidator extends AbstractValidator {
+  build(model) {
+    if (this.isAllowBlank() && !isPresent(model)) return true;
+
+    let result = true;
+    ['greater_than', 'greater_than_or_equal_to', 'equal_to', 'less_than', 'less_than_or_equal_to', 'other_than', 'odd', 'even'].forEach((key) => {
+      let count = this.validationOptions[key];
+      if (!isPresent(count)) return;
+      if (this.validate(key, count, model)) return;
+
+      result = this.errorMessage(key, count);
+    });
+
+    return result;
+  }
+
+  validate(key, count, value) {
+    const obj = {
+      'greater_than': () => count < value,
+      'greater_than_or_equal_to': () => count <= value,
+      'equal_to': () => count == value,
+      'less_than': () => count > value,
+      'less_than_or_equal_to': () => count >= value,
+      'other_than': () => count != value,
+      'in': () => count.includes(value),
+      'odd': () => value % 2 == 1,
+      'even': () => value % 2 == 0
+    };
+
+    return obj[key]();
+  }
+
+  errorMessage(key, count) {
+    const message = this.validationOptions.message;
+    if (typeof message == 'string') return message;
+
+    return message[key].replace('%{count}', count);
+  }
+}
+
+class FormatValidator extends AbstractValidator {
+  build(model) {
+    if (this.isAllowBlank() && !isPresent(model)) return true;
+
+    const regex = this.validationOptions.with || this.validationOptions.without || this.validationOptions.regex;
+    let match = !!(model || '').match(regex);
+    match = this.isInverse() ? !match : match;
+
+    return match ? true : this.validationOptions.message;
+  }
+
+  isInverse() {
+    return !!this.validationOptions.without;
+  }
+}
+
+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;
+  }
+}
+
+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;
+  }
+}
+
+class LengthValidator extends AbsenceValidator {
+  build(model) {
+    model ||= '';
+    if (this.isAllowBlank() && !isPresent(model)) return true;
+
+    const { minimum, maximum } = this.validationOptions;
+    let result;
+    if (isPresent(minimum)) {
+      result = model.length > minimum ? true : this.errorMessage('too_short', minimum);
+    }
+    if (result !== true) return result;
+    if (isPresent(maximum)) {
+      result = model.length < maximum ? true : this.errorMessage('too_long', maximum);
+    }
+    if (result !== true) return result;
+    if (isPresent(this.validationOptions.is)) {
+      result = model.length === this.validationOptions.is ? true : this.errorMessage('wrong_length', this.validationOptions.is);
+    }
+    if (result !== true) return result;
+    if (isPresent(this.validationOptions.in)) {
+      result = (model.length >= this.validationOptions.is || model.length <= this.validatorOptions.is) ? true : this.errorMessage('wrong_length', this.validationOptions.in);
+    }
+
+    return result;
+  }
+
+  errorMessage(key, count) {
+    const message = this.validationOptions.message;
+    const singular = count <= 1;
+    if (typeof message == 'string') {
+      return message.replace('%{count}', count);
+    }
+
+    return message[key][singular ? 'one' : 'other'].replace('%{count}', count);
+  }
+}
+
+const clsMap = {
+  'absence': AbsenceValidator,
+  'presence': PresenceValidator,
+  'required': RequiredValidator,
+  'acceptance': AcceptanceValidator,
+  'numericality': NumericalityValidator,
+  'format': FormatValidator,
+  'inclusion': InclusionValidator,
+  'exclusion': ExclusionValidator,
+  'length': LengthValidator
+};
+
+class ValidationFactory {
+  static getValidator(validatorName, validatorOptions) {
+    return new clsMap[validatorName](validatorOptions);
+  }
+}
+
+export { ValidationFactory }
+

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

@@ -8,5 +8,21 @@ describe('display', () => {
     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')
+    cy.contains('submit').click()
+
+    const result = `Method: POST
+Form Data:
+{
+  "date": "2024-07-24",
+  "chip_group": "option2",
+  "radio_group": "option3",
+  "check_group": "option1",
+  "text": "John Doe",
+  "textarea": "Lorem ipsum et dumet bla bla bla..."
+}`
+
+    cy.get('.unformatted').should('contain.text', result)
   })
+
+
 })

package/nav/dialog.vue

@@ -102,7 +102,7 @@ export default {
       return null;
     },
     disableCloseButton() {
-      return this.spec.disableCloseButton || Utils.type.isString(this.url);
+      return this.spec.disableCloseButton;
     }
   },
   mounted() {
@@ -203,7 +203,6 @@ 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.2",
+  "version": "4.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/store.js

@@ -18,7 +18,6 @@ export const vueApp = reactive({
     richTextValues: {},
     draggedComponent: null,
     lastNavigationCount: null,
-    ignoredInputs: new Set(),
     tooltipSpec: {},
     bottomBanners: {},
     uploader: {},
@@ -28,12 +27,18 @@ export const vueApp = reactive({
 export const jsonView = reactive({ page: window.__page });
 
 export const dialogs = ref([]);
+export const popovers = ref([]);
 
 export const closeAllDialog = () => {
     dialogs.value.forEach((dialog) => dialog.model = false);
     dialogs.value = [];
 };
 
+export const closeAllPopover = () => {
+    popovers.value.forEach((popover) => popover.toggle = false);
+    popovers.value = [];
+};
+
 export const ctx = () => dialogs.value.slice(-1)[0] || vueApp;
 
 export const glibevent = reactive({
@@ -43,7 +48,9 @@ export const glibevent = reactive({
 });
 
 function glibEventHandler(e) {
-    vueApp.ignoredInputs = new Set();
+
+    closeAllDialog();
+    closeAllPopover();
 
     const { onUnload } = jsonView.page;
     if (onUnload) {

package/utils/glibDirectUpload.js

@@ -27,7 +27,9 @@ class GlibDirectUpload extends DirectUpload {
     super(file, url, delegate, customHeaders);
     this.prefix = prefix;
     this.metadata = { custom: metadata };
-    this.tagging = tagging;
+
+    if (tagging && typeof tagging == 'string') this.tagging = tagging;
+    else if (tagging && typeof tagging == 'object') this.tagging = new URLSearchParams(tagging).toString();
   }
 
   create(callback) {

package/utils/history.js

@@ -1,5 +1,5 @@
 import { nextTick } from "vue";
-import { closeAllDialog, jsonView, vueApp } from "../store";
+import { closeAllDialog, closeAllPopover, jsonView, vueApp } from "../store";
 import { useDirtyState } from "../components/composable/dirtyState";
 
 const { isDirty, clearDirtyState, updateDirtyState } = useDirtyState();
@@ -70,6 +70,7 @@ export default class {
       }
 
       closeAllDialog();
+      closeAllPopover();
 
       // Save scroll position of the current page when navigating through back/forward button
       this.bodyScrollTops[this.navigationCount] = this._pageBody.scrollTop;

package/utils/launch/dialog.js

@@ -0,0 +1,79 @@
+import { createApp, h, nextTick } from "vue";
+import { dialogs } from "../../store";
+import Dialog from "../../nav/dialog.vue";
+import { Vue } from "../..";
+import Action from "../../action";
+
+export default class LaunchDialog {
+  static closestBody(component) {
+    const element = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling;
+    const dialog = element.closest(".v-dialog");
+    if (dialog) {
+      return dialog.querySelector(".dialogs-body");
+    }
+    return null;
+  }
+
+
+  static topDialog() {
+    return dialogs.value.last();
+  }
+
+  static open(properties, component) {
+
+    // https://css-tricks.com/creating-vue-js-component-instances-programmatically/
+    const props = {
+      spec: properties
+    };
+
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Dialog, props);
+        }
+      }
+    );
+    Object.assign(instance._context, Vue._context);
+
+    if (component) {
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
+      instance.mount(placeholder);
+    } else {
+      console.error("A dialog has to be displayed in a component");
+    }
+  }
+
+  static reload(properties, component) {
+    Utils.type.ifObject(dialogs.value.last(), dialog => {
+      dialog.reload(properties);
+    });
+  }
+
+  static close(properties, component) {
+    Utils.type.ifObject(dialogs.value.last(), dialog => {
+      dialog.close();
+    });
+
+    nextTick(() => {
+      Action.execute(properties.onClose, component);
+    });
+  }
+
+  // This is only meant to be used internally
+  static alert(message, component) {
+    const properties = {
+      message: message
+    };
+    const spec = Object.assign({}, properties, {
+      disableCloseButton: true,
+      buttons: [
+        {
+          text: "OK",
+          onClick: properties.onClose
+        }
+      ]
+    });
+    this.open(spec, component);
+  }
+}

package/utils/launch/popover.js

@@ -0,0 +1,62 @@
+import { createApp, h } from "vue";
+import Popover from "../../components/popover.vue";
+import { Vue } from "../..";
+import { autoUpdate, computePosition, flip, shift, offset } from "@floating-ui/dom";
+
+import bus from "../eventBus";
+
+export default class LaunchPopover {
+  static open(properties, component) {
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Popover, { spec: properties });
+        }
+      }
+    );
+    Object.assign(instance._context, Vue._context);
+
+    if (component) {
+      const placeholder = document.createElement('div');
+
+      // const pageBody = Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
+      const dialogBody = Utils.launch.dialog.closestBody(component);
+      if (dialogBody) {
+        // Put the popover on the dialog so that clicking it doesn't close a non-persistent dialog.
+        dialogBody.appendChild(placeholder);
+      } else {
+        // Attach the popover to the document body to prevent clipping caused by the parent's `overflow` property.
+        // See https://stackoverflow.com/questions/51393427/z-index-to-ignore-max-height-and-always-come-on-top
+        document.body.appendChild(placeholder);
+      }
+
+      instance.mount(placeholder);
+
+      const reference = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling;
+
+      const floating = placeholder;
+      const placement = properties.placement || 'right';
+      const offsetSize = properties.offset || 8;
+
+      // These properties need to be set to get an accurate calculation. See https://floating-ui.com/docs/computeposition
+      Object.assign(placeholder.style, { position: 'absolute', display: 'block', top: 0, left: 0 });
+
+      autoUpdate(reference, floating, () => {
+        computePosition(reference, floating, { placement: placement, middleware: [flip(), shift({ padding: 4 }), offset(offsetSize)] })
+          .then(({ x, y }) => {
+            // zIndex should be larger than dialog's, which is 2400.
+            Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, zIndex: 2500 });
+          });
+      });
+
+    } else {
+      console.error("A popover has to be displayed in a component");
+    }
+
+    return instance;
+  }
+
+  static close(properties) {
+    bus.$emit(`popover/close-${properties.key}`, properties);
+  }
+}

package/utils/launch/sheet.js

@@ -0,0 +1,43 @@
+import { createApp, h } from "vue";
+import Sheet from "../../nav/sheet.vue";
+import { Vue } from "../..";
+
+export default class LaunchSheet {
+  static open(properties, component) {
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Sheet, { spec: properties });
+        }
+      }
+    );
+    Object.assign(instance._context, Vue._context);
+
+    if (component) {
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
+      instance.mount(placeholder);
+    } else {
+      console.error("A sheet has to be displayed in a component");
+    }
+
+    return instance;
+  }
+
+  static confirm(properties, onConfirm, component) {
+    const spec = Object.assign({}, properties, {
+      buttons: [
+        {
+          text: "Confirm",
+          onClickFunction: onConfirm
+        }
+      ]
+    });
+    this.open(spec, component);
+  }
+
+  static alert(message, buttons, component) {
+    const spec = { message: message, buttons: buttons };
+    this.open(spec, component);
+  }
+}

package/utils/launch/snackbar.js

@@ -0,0 +1,36 @@
+import { createApp, h } from "vue";
+import Snackbar from "../../nav/snackbar.vue";
+import { Vue } from "../..";
+
+export default class LaunchSnackbar {
+  static open(properties, component) {
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Snackbar, { spec: properties });
+        }
+      }
+    );
+    Object.assign(instance._context, Vue._context);
+
+    if (component) {
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
+      instance.mount(placeholder);
+      instance.show = true;
+    } else {
+      console.error("A Snackbar has to be displayed in a component");
+    }
+
+    return instance;
+  }
+
+  static error(message, component) {
+    this.open({ message: message, styleClasses: ["error"] }, component);
+  }
+
+  static indicator(message, component) {
+    const instance = this.open({ message: message, timeout: -1 }, component);
+    instance.indicator = true;
+  }
+}

package/utils/launch.js

@@ -1,14 +1,7 @@
-import { Vue } from "../index";
-import Dialog from "../nav/dialog.vue";
-import Sheet from "../nav/sheet.vue";
-import Snackbar from "../nav/snackbar.vue";
-import Popover from "../components/popover.vue";
-import { computePosition, flip, offset } from '@floating-ui/dom';
-import bus from "./eventBus";
-import { nextTick } from "vue";
-
-import { createApp, h } from "vue";
-import { dialogs } from "../store";
+import LaunchDialog from "./launch/dialog";
+import LaunchPopover from "./launch/popover";
+import LaunchSheet from "./launch/sheet";
+import LaunchSnackbar from "./launch/snackbar";
 
 export default class {
   static get dialog() {
@@ -27,203 +20,3 @@ export default class {
     return LaunchPopover;
   }
 }
-
-class LaunchPopover {
-  static open(properties, component) {
-    const instance = createApp(
-      {
-        render: function () {
-          return h(Popover, { spec: properties });
-        }
-      }
-    );
-    Object.assign(instance._context, Vue._context);
-
-    if (component) {
-      const placeholder = document.createElement('div');
-
-      // const pageBody = Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
-      const dialogBody = Utils.launch.dialog.closestBody(component);
-      if (dialogBody) {
-        // Put the popover on the dialog so that clicking it doesn't close a non-persistent dialog.
-        dialogBody.appendChild(placeholder);
-      } else {
-        // Attach the popover to the document body to prevent clipping caused by the parent's `overflow` property.
-        // See https://stackoverflow.com/questions/51393427/z-index-to-ignore-max-height-and-always-come-on-top
-        document.body.appendChild(placeholder);
-      }
-
-      instance.mount(placeholder);
-
-      const reference = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling;
-
-      const floating = placeholder;
-      const placement = properties.placement || 'right';
-      const offsetSize = properties.offset || 8;
-
-      // These properties need to be set to get an accurate calculation. See https://floating-ui.com/docs/computeposition
-      Object.assign(placeholder.style, { position: 'absolute', display: 'block', top: 0, left: 0 });
-
-      computePosition(reference, floating, { placement: placement, middleware: [flip(), offset(offsetSize)] })
-        .then(({ x, y }) => {
-          // zIndex should be larger than dialog's, which is 2400.
-          Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, zIndex: 2500 });
-        });
-    } else {
-      console.error("A popover has to be displayed in a component");
-    }
-
-    return instance;
-  }
-
-  static close(properties) {
-    bus.$emit(`popover/close-${properties.key}`, properties);
-  }
-}
-
-class LaunchDialog {
-  static closestBody(component) {
-    const element = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling;
-    const dialog = element.closest(".v-dialog");
-    if (dialog) {
-      return dialog.querySelector(".dialogs-body");
-    }
-    return null;
-  }
-
-
-  static topDialog() {
-    return dialogs.value.last();
-  }
-
-  static open(properties, component) {
-
-    // https://css-tricks.com/creating-vue-js-component-instances-programmatically/
-    const props = {
-      spec: properties
-    };
-
-    const instance = createApp(
-      {
-        render: function () {
-          return h(Dialog, props);
-        }
-      }
-    );
-    Object.assign(instance._context, Vue._context);
-
-    if (component) {
-      const placeholder = document.createElement('div');
-      document.body.appendChild(placeholder);
-      instance.mount(placeholder);
-    } else {
-      console.error("A dialog has to be displayed in a component");
-    }
-  }
-
-  static reload(properties, component) {
-    Utils.type.ifObject(dialogs.value.last(), dialog => {
-      dialog.reload(properties);
-    });
-  }
-
-  static close(properties, component) {
-    Utils.type.ifObject(dialogs.value.last(), dialog => {
-      dialog.close();
-    });
-
-    nextTick(() => {
-      Action.execute(properties.onClose, component);
-    });
-  }
-
-  // This is only meant to be used internally
-  static alert(message, component) {
-    const properties = {
-      message: message
-    };
-    const spec = Object.assign({}, properties, {
-      disableCloseButton: true,
-      buttons: [
-        {
-          text: "OK",
-          onClick: properties.onClose
-        }
-      ]
-    });
-    this.open(spec, component);
-  }
-}
-
-class LaunchSheet {
-  static open(properties, component) {
-    const instance = createApp(
-      {
-        render: function () {
-          return h(Sheet, { spec: properties });
-        }
-      }
-    );
-    Object.assign(instance._context, Vue._context);
-
-    if (component) {
-      const placeholder = document.createElement('div');
-      document.body.appendChild(placeholder);
-      instance.mount(placeholder);
-    } else {
-      console.error("A sheet has to be displayed in a component");
-    }
-
-    return instance;
-  }
-
-  static confirm(properties, onConfirm, component) {
-    const spec = Object.assign({}, properties, {
-      buttons: [
-        {
-          text: "Confirm",
-          onClickFunction: onConfirm
-        }
-      ]
-    });
-    this.open(spec, component);
-  }
-
-  static alert(message, buttons, component) {
-    const spec = { message: message, buttons: buttons };
-    this.open(spec, component);
-  }
-}
-
-class LaunchSnackbar {
-  static open(properties, component) {
-    const instance = createApp(
-      {
-        render: function () {
-          return h(Snackbar, { spec: properties });
-        }
-      }
-    );
-    Object.assign(instance._context, Vue._context);
-
-    if (component) {
-      const placeholder = document.createElement('div');
-      document.body.appendChild(placeholder);
-      instance.mount(placeholder);
-      instance.show = true;
-    } else {
-      console.error("A Snackbar has to be displayed in a component");
-    }
-
-    return instance;
-  }
-
-  static error(message, component) {
-    this.open({ message: message, styleClasses: ["error"] }, component);
-  }
-
-  static indicator(message, component) {
-    const instance = this.open({ message: message, timeout: -1 }, component);
-    instance.indicator = true;
-  }
-}