glib-web 3.5.4 → 3.6.0

package/app.vue

@@ -256,6 +256,11 @@ body,
   opacity: 1;
 }
 
+.glib-input-disabled {
+  opacity: 0.38;
+  pointer-events: none;
+}
+
 /******/
 </style>
 
@@ -275,5 +280,6 @@ body,
   overflow-y: overlay;
 }
 
+
 /******/
 </style>

package/components/avatar.vue

@@ -4,7 +4,7 @@
       <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
       <!-- <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" /> -->
 
-      <v-img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()"></v-img>
+      <v-img :style="$styles()" :class="$classes()" :src="spec.url || spec.base64Data" @click="$onClick()"></v-img>
     </v-avatar>
   </common-badge>
 </template>

package/components/charts/area.vue

@@ -1,7 +1,5 @@
 <template>
-    <div>
-        <area-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color">></area-chart>
-    </div>
+    <area-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color">></area-chart>
 </template>
 
 <script setup>

package/components/component.vue

@@ -1,10 +1,10 @@
 <template>
   <Suspense>
-    <fields-text v-if="name == 'fields-text'" :spec="spec" type="text" />
-    <fields-text v-else-if="name == 'fields-number'" :spec="spec" type="number" />
-    <fields-text v-else-if="name == 'fields-email'" :spec="spec" type="email" />
-    <fields-text v-else-if="name == 'fields-url'" :spec="spec" type="url" />
-    <fields-text v-else-if="name == 'fields-password'" :spec="spec" type="password" />
+    <fields-text ref="delegate" v-if="name == 'fields-text'" :spec="spec" type="text" />
+    <fields-text ref="delegate" v-else-if="name == 'fields-number'" :spec="spec" type="number" />
+    <fields-text ref="delegate" v-else-if="name == 'fields-email'" :spec="spec" type="email" />
+    <fields-text ref="delegate" v-else-if="name == 'fields-url'" :spec="spec" type="url" />
+    <fields-text ref="delegate" v-else-if="name == 'fields-password'" :spec="spec" type="password" />
     <!-- <fields-textarea v-else-if="spec.view == 'fields/textarea-v1'" :spec="spec" />
   <fields-richText v-else-if="spec.view == 'fields/richText-v1'" :spec="spec" /> -->
     <!-- <fields-file v-else-if="spec.view == 'fields/file-v1'" :spec="spec" />
@@ -16,14 +16,14 @@
     <!-- <fields-country v-else-if="spec.view == 'fields/country-v1'" :spec="spec" /> -->
 
     <!-- <fields-latLong v-else-if="spec.view == 'fields/latLong-v1'" :spec="spec" /> -->
-    <fields-googlePlace v-else-if="spec.view == 'fields/googlePlace-v1'" :spec="spec" />
+    <fields-googlePlace ref="delegate" v-else-if="spec.view == 'fields/googlePlace-v1'" :spec="spec" />
 
     <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
     <!-- This component manages its own mouse events, so don't auto-initialize it. -->
-    <button v-else-if="name == 'button'" :spec="spec" />
+    <button ref="delegate" v-else-if="name == 'button'" :spec="spec" />
 
-    <component v-else-if="name" :is="name" :id="spec.id" ref="delegate" :spec="spec"
+    <component ref="delegate" v-else-if="name" :is="name" :id="spec.id" :spec="spec"
       @[menter]="handlePopover(spec.onMouseEnter)" @[mleave]="handlePopover(spec.onMouseLeave)" />
     <div v-else>Unsupported view: {{ spec.view }}</div>
   </Suspense>

package/components/fields/_patternText.vue

@@ -2,11 +2,9 @@
   <div :style="$styles()" :class="classes()">
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
     <v-text-field v-model="fieldModel" :name="fieldName" :label="spec.label" :hint="spec.hint" :type="type"
-      :readonly="spec.readOnly || false" :disabled="spec.readOnly" :min="$sanitizeValue(spec.min)"
-      :max="$sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
-      :density="$classes().includes('compact') ? 'compact' : 'default'"
-      clearable @change="onChange" :variant="variant" validate-on="blur"
-      persistent-placeholder />
+      :readonly="spec.readOnly" :min="$sanitizeValue(spec.min)" :max="$sanitizeValue(spec.max)" :pattern="pattern"
+      :rules="$validation()" :style="$styles()" :density="$classes().includes('compact') ? 'compact' : 'default'"
+      clearable @change="onChange" :variant="variant" validate-on="blur" persistent-placeholder />
   </div>
 </template>
 

package/components/fields/_select.vue

@@ -1,7 +1,7 @@
 <template>
   <div :style="$styles()" :class="classes()">
     <v-autocomplete v-model="fieldModel" :label="spec.label" :items="options || []" :chips="spec.multiple"
-      :multiple="spec.multiple" :disabled="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint"
+      :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint"
       :placeholder="spec.placeholder" :rules="rules" persistent-hint :append-icon="append.icon" validate-on="blur"
       item-title='text' :variant="variant" :closable-chips="spec.multiple" :density="density" persistent-placeholder
       @update:modelValue="onChange">

package/components/fields/autocomplete.vue

@@ -1,12 +1,10 @@
 <!-- TODO: Remove (deprecated) -->
 <template>
   <div :style="genericStyles()">
-    <v-combobox v-model="fieldModel" :label="spec.label" :items="options || []" :chips="spec.multiple"
-      :deletable-chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :disabled="spec.readOnly"
-      :hint="spec.hint" :placeholder="spec.placeholder" :outlined="$classes().includes('outlined') || null"
-      :append-icon="append.icon" validate-on="blur" :variant="variant" persistent-placeholder />
-
-    <input v-for="(item, index) in values" :key="index" type="hidden" :name="fieldName" :value="item" />
+    <v-combobox v-model="fieldModel" :name="fieldName" :label="spec.label" :items="options || []" :chips="spec.multiple"
+      :deletable-chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :hint="spec.hint"
+      :placeholder="spec.placeholder" :outlined="$classes().includes('outlined') || null" :append-icon="append.icon"
+      validate-on="blur" :variant="variant" persistent-placeholder />
   </div>
 </template>
 

package/components/fields/check.vue

@@ -3,7 +3,7 @@
     <!-- 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" />
-    <v-checkbox v-model="fieldModel" :name="fieldName" :disabled="spec.readOnly"
+    <v-checkbox v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly"
       :label="fieldModel ? spec.onLabel || spec.label : spec.label" :true-icon="spec.onIcon" :false-icon="spec.offIcon"
       :value="spec.checkValue" hide-details @change="changed" color="primary"></v-checkbox>
   </div>

package/components/fields/country/field.vue

@@ -20,7 +20,7 @@
     />-->
 
     <v-autocomplete v-model="country" :label="spec.label" :name="spec.name" :items="countryOptions"
-      :readonly="spec.readOnly" :disabled="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint" persistent-hint
+      :readonly="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint" persistent-hint
       :outlined="$classes().includes('outlined') || null" />
 
     <v-autocomplete v-if="regionField && regionOptions" :label="regionField.label" :name="regionField.name"

package/components/fields/file.vue

@@ -1,20 +1,20 @@
 <template>
-  <div ref="fileUploadContainer" :style="$styles()">
-    <label class="v-label v-label--active">{{ spec.label }}</label>
+  <div ref="fileUploadContainer" :style="$styles()" :class="$classes()">
+    <label v-if="spec.label" class="v-label v-label--active">{{ spec.label }}</label>
     <div class="preview-container">
-      <v-avatar v-if="placeholder.type == 'avatar'" :style="genericStyles(placeholder)" class="mr-4">
+      <v-avatar v-if="placeholder.type == 'avatar'" :style="genericStyles(placeholder)">
         <img :src="fileImage || placeholder.url" />
       </v-avatar>
-      <img v-else-if="placeholder.type == 'image'" class="square-image mr-4" :style="genericStyles(placeholder)"
+      <img v-else-if="placeholder.type == 'image'" class="square-image" :style="genericStyles(placeholder)"
         :src="fileImage || placeholder.url" />
 
       <v-text-field v-else-if="placeholder.type == 'input'" :value="fileTitle" variant="outlined"
         placholder="Upload your file" disabled />
 
-      <span v-else class="mr-4">{{ fileTitle }}</span>
+      <span v-else>{{ fileTitle }}</span>
 
       <span v-if="spec.uploadText">
-        <v-btn :class="$classes()" @click="triggerUpload">
+        <v-btn @click="triggerUpload">
           <v-icon> {{ spec.uploadIcon || "upload" }} </v-icon>
           {{ spec.uploadText }}
         </v-btn>
@@ -23,20 +23,24 @@
           <v-icon>close</v-icon>
         </v-btn>
       </span>
-      <span v-else class="action-container">
-        <v-btn variant="flat" icon @click="triggerUpload">
-          <v-icon>edit</v-icon>
+      <div v-else class="action-container">
+        <v-btn @click="triggerUpload" class="upload-btn">
+          {{ fileImage ? 'Change' : 'Upload' }}
         </v-btn>
 
-        <v-btn variant="flat" v-if="fileImage" icon @click="removeImage">
-          <v-icon>close</v-icon>
+        <v-btn variant="flat" v-if="fileImage" @click="removeImage" class="remove-btn">
+          Delete
         </v-btn>
-      </span>
+
+
+        <glib-component v-if="spec.infoSpec" :spec="spec.infoSpec"></glib-component>
+
+      </div>
     </div>
     <input ref="directUploadFile" style="display: none" type="file" @change="uploadFiles" />
 
     <!-- <input type="file" :name="spec.name" ref='directUploadFile' @change='uploadFiles' v-show='!uploaded'/> -->
-    <v-progress-linear v-if="showProgress" v-model="progress.value" />
+    <v-progress-linear class="mt-1" v-if="showProgress" v-model="progress.value" />
     <!-- <div v-show='uploaded'>
       <v-layout align-center justify-space-between row>
         <v-chip @click='removeImage' class='mr-2' color='red' text-color="white">X</v-chip>
@@ -164,9 +168,13 @@ export default {
 .preview-container {
   display: flex;
   align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
 
   .action-container {
-    padding-left: 10px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
   }
 
   .square-image {

package/components/fields/location.vue

@@ -6,9 +6,9 @@
     <div ref="map" class="map"></div>
 
     <div style="padding-top: 8px">
-      <fields-text ref="latField" v-if="spec.latitudeField" :spec="spec.latitudeField" type="text"></fields-text>
-      <fields-text ref="lngField" v-if="spec.longitudeField" :spec="spec.longitudeField" type="text"></fields-text>
-      <fields-text ref="zoomField" v-if="spec.zoomField" :spec="spec.zoomField" type="number"></fields-text>
+      <glib-component ref="latField" v-if="spec.latitudeField" :spec="spec.latitudeField" />
+      <glib-component ref="lngField" v-if="spec.longitudeField" :spec="spec.longitudeField" />
+      <glib-component ref="zoomField" v-if="spec.zoomField" :spec="spec.zoomField" />
     </div>
 
   </div>
@@ -34,21 +34,29 @@ export default {
     const marker = new google.maps.Marker({ draggable: true });
 
     mapPromise().then((map) => {
-      const zoomInput = zoomField.value.$el.querySelector('input');
-      if (zoomInput) {
-        zoomInput.addEventListener('input', () => {
-          const zoom = parseInt(zoomInput.value);
-
-          if (!Number.isNaN(zoom)) {
-            map.setZoom(zoom);
-          }
-        });
+      const zoomRef = zoomField.value
+      if (zoomRef) {
+        const zoomInput = zoomRef.$el.querySelector('input');
+        if (zoomInput) {
+          zoomInput.addEventListener('input', () => {
+            const zoom = parseInt(zoomInput.value);
+
+            if (!Number.isNaN(zoom)) {
+              map.setZoom(zoom);
+            }
+          });
+        }
       }
 
       marker.addListener('position_changed', () => {
         const position = marker.getPosition();
-        latField.value.fieldModel = position.lat();
-        lngField.value.fieldModel = position.lng();
+
+        if (latField.value && lngField.value) {
+          const latComponent = latField.value.$refs.delegate
+          const lngComponent = lngField.value.$refs.delegate
+          latComponent.fieldModel = position.lat();
+          lngComponent.fieldModel = position.lng();
+        }
       });
     });
 

package/components/fields/phone/field.vue

@@ -1,11 +1,9 @@
 <template>
   <div :style="$styles()" :class="classes()">
     <div class="country-code">
-      <v-select v-model="countryCode" :items="sortedCountries" :disabled="spec.readOnly"
-        :outlined="$classes().includes('outlined') || null"
-        :rounded="$classes().includes('rounded')"
-        :density="$classes().includes('compact') ? 'compact' : 'default'"
-        item-text="name" item-value="iso2" return-object
+      <v-select v-model="countryCode" :items="sortedCountries" :readonly="spec.readOnly"
+        :outlined="$classes().includes('outlined') || null" :rounded="$classes().includes('rounded')"
+        :density="$classes().includes('compact') ? 'compact' : 'default'" item-text="name" item-value="iso2" return-object
         @change="onChangeCountryCode">
         <!-- <template v-slot:selection> -->
         <div :class="activeCountry.iso2.toLowerCase()" class="country_flag" />
@@ -17,13 +15,12 @@
       </v-select>
     </div>
     <v-text-field :id="inputId" ref="input" v-model="phone" class="tel" :label="spec.label" :name="fieldName"
-      :hint="spec.hint" :placeholder="spec.placeholder" :maxlength="spec.maxLength || 25" :disabled="spec.readOnly"
+      :hint="spec.hint" :placeholder="spec.placeholder" :maxlength="spec.maxLength || 25" :readonly="spec.readOnly"
       type="tel" :rules="hiddenDisplay() ? [] : rules" :prefix="spec.leftText" :suffix="spec.rightText"
       :outlined="$classes().includes('outlined') || null"
-      :density="$classes().includes('compact') ? 'compact' : 'default'"
-      :rounded="$classes().includes('rounded')" :autofocus="spec.autoFocus || false" validate-on="blur">
+      :density="$classes().includes('compact') ? 'compact' : 'default'" :rounded="$classes().includes('rounded')"
+      :autofocus="spec.autoFocus || false" validate-on="blur">
     </v-text-field>
-    <input v-if="spec.readOnly" type="hidden" :name="fieldName" v-model="phone" />
   </div>
 </template>
 

package/components/fields/radio.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="$classes()" :style="$styles()">
-    <v-radio :label="spec.label" :value="spec.value.presence() || vuetifyEmptyString" :disabled="spec.readOnly"
+    <v-radio :label="spec.label" :value="spec.value.presence() || vuetifyEmptyString" :readonly="spec.readOnly"
       :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" color="primary" />
     <div v-if="spec.childViews" class="radio-childviews">
       <div v-for="(item, i) in spec.childViews" :key="i">

package/components/fields/radioGroup.vue

@@ -3,7 +3,7 @@
        the error can only be removed by submitting the form. But this is better than the alternative, which is radioGroup showing
        validation error on page load.
     -->
-  <v-radio-group v-model="fieldModel" :name="fieldName" :disabled="spec.readOnly" :rules="$validation()" :row="spec.row"
+  <v-radio-group v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly" :rules="$validation()" :row="spec.row"
     validate-on="blur" @change="onChange" :class="$classes()" :style="$styles()">
     <div v-for="(childView, index) in spec.childViews" :key="index" style="width: 100%;">
       <glib-component :spec="childSpec(childView)" @click="updateValue(childView)" />

package/components/fields/stripeExternalAccount.vue

@@ -1,9 +1,7 @@
 <template>
   <div :style="genericStyles()" :class="$classes()">
     <v-text-field v-model="accountNumber" label="Account Number" placeholder="000123456"
-      :outlined="$classes().includes('outlined') || null"
-      :rounded="$classes().includes('rounded')"
-      :density="$classes().includes('compact') ? 'compact' : 'default'"
+      :variant="variant"
       :rules="accountNumberRules" :error-messages="errorMessages"
       @keyup="$onTyping({ duration: 200 })" />
 
@@ -20,7 +18,10 @@
     <input ref="token" type="hidden" :name="spec.name" />
   </div>
 </template>
+
 <script>
+import { determineColor, determineDensity, determineVariant } from "../../utils/constant";
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -31,9 +32,14 @@ export default {
       accountNumber: null,
       inputs: {},
       accountNumberRules: [value => !!value || "Account number required"],
-      errorMessages: null
+      errorMessages: []
     };
   },
+  computed: {
+    variant() {
+      return determineVariant(this.spec.styleClasses, 'outlined')
+    }
+  },
   created() {
     this.country = this.spec.country.toLowerCase();
     this.stripe = Stripe(this.spec.publicKey);
@@ -79,7 +85,7 @@ export default {
   methods: {
     action_createToken() {
       const token = this.$refs.token;
-      this.errorMessages = null;
+      this.errorMessages = [];
       this.routingNumber = this.inputs[this.country].makeRoutingNumber();
       if (this.accountNumber) {
         this.$dispatchEvent("forms/setBusy", { value: true });

package/components/fields/text.vue

@@ -1,12 +1,11 @@
 <template>
   <div :style="$styles()" :class="$classes()">
     <v-text-field ref="field" v-model="fieldModel" :label="spec.label" :name="fieldName" :placeholder="spec.placeholder"
-      :density="density" :hint="spec.hint" :maxlength="spec.maxLength || 255" :disabled="spec.readOnly"
+      :density="density" :hint="spec.hint" :maxlength="spec.maxLength || 255" :readonly="spec.readOnly"
       :type="config.type" :rules="rules" :prepend-inner-icon="leftIconName" :append-inner-icon="config.appendIcon"
       :prefix="spec.leftText" :suffix="spec.rightText" :min="spec.min" :max="spec.max"
       :autofocus="spec.autoFocus || false" validate-on="blur" @click:appendInner="onRightIconClick" @input="onChange"
       :variant="variant" persistent-placeholder />
-    <input v-if="spec.readOnly" type="hidden" :name="fieldName" />
   </div>
 </template>
 

package/components/fields/textarea.vue

@@ -1,11 +1,10 @@
 <template>
   <div :style="styles()" :class="classes()">
     <v-textarea v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
-      :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :disabled="spec.readOnly" :height="height"
+      :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :readonly="spec.readOnly" :height="height"
       :rules="$validation()" counter :outlined="$classes().includes('outlined')"
       :no-resize="$classes().includes('no-resize')" validate-on="blur" :variant="variant" :density="density"
       @update:modelValue="onChange()" persistent-placeholder></v-textarea>
-    <input v-if="spec.readOnly" type="hidden" :name="fieldName" :value="fieldModel" />
   </div>
 </template>
 

package/components/mixins/styles.js

@@ -215,6 +215,10 @@ export default {
         classes.push("glib-clickable")
       );
 
+      if (properties.readOnly) {
+        classes.push("glib-input-disabled")
+      }
+
       // This could appear not as before after migration to vuetify 3
       Utils.type.ifArray(properties.styleClasses, val => {
         if (val.includes("card")) {

package/nav/appbar.vue

@@ -77,7 +77,9 @@ export default {
     },
     mobileMenu() {
       return {
-        icon: { material: { name: "mdi-dots-vertical" } },
+        // icon: { material: { name: "mdi-dots-vertical" } },
+        icon: { material: { name: "more_vert" } },
+        styleClasses: ["text"],
         childButtons: this.rightButtons
       };
     }
@@ -92,7 +94,7 @@ export default {
         item.text ? ["text"] : ["icon"]
       );
       return Object.assign({}, item, {
-        view: "button-v1",
+        view: "button",
         styleClasses: styleClasses
       });
     },
@@ -106,7 +108,7 @@ export default {
     },
     avatarSpec(spec) {
       return {
-        view: "avatar-v1",
+        view: "avatar",
         url: spec["imageUrl"],
         onClick: spec["onCLick"]
       };

package/package.json

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

package/templates/_menu.vue

@@ -16,7 +16,7 @@ export default {
     editMenu() {
       if (this.editButtons.length > 0) {
         return {
-          view: "button-v1",
+          view: "button",
           styleClasses: ["text", "small"],
           icon: { material: { name: "more_vert" } },
           childButtons: this.editButtons
@@ -26,14 +26,6 @@ export default {
       }
     }
   },
-  // methods: {
-  //   buttonSpec(item) {
-  //     return Object.assign({}, item, {
-  //       view: "button-v1",
-  //       styleClasses: ["text"]
-  //     });
-  //   }
-  // }
 };
 </script>