glib-web 3.3.0 → 3.4.0

package/actions/dialogs/alert.js

@@ -3,6 +3,7 @@
 export default class {
   execute(properties, component) {
     const spec = Object.assign({}, properties, {
+      disableCloseButton: true,
       buttons: [
         {
           text: "OK",

package/actions/http/get.js

@@ -22,7 +22,7 @@ export default class {
     Utils.type.ifString(spec.historyUrl, historyUrl => {
       const cleanUrl = Utils.url.htmlUrl(historyUrl);
       if (cleanUrl !== currentUrl) {
-        const data = Object.assign({}, window.vueApp.page, {
+        const data = Object.assign({}, page, {
           replayGetResponse: page.onResponse
         });
 

package/components/component.vue

@@ -148,7 +148,7 @@ export default {
     "views-hr": Hr,
     "views-spacer": Spacer,
 
-    "views-map": Map,
+    // "views-map": Map,
     "views-tabBar": TabBar,
     "views-calendar": Calendar,
     "views-shareButton": ShareButton,
@@ -221,10 +221,10 @@ export default {
   },
   computed: {
     menter() {
-      return this.spec.onMouseEnter ? 'mouseenter' : null
+      return this.spec.onMouseEnter ? 'mouseenter' : null;
     },
     mleave() {
-      return this.spec.onMouseLeave ? 'mouseleave' : null
+      return this.spec.onMouseLeave ? 'mouseleave' : null;
     }
   },
   watch: {
@@ -275,7 +275,7 @@ export default {
       return false;
     },
     handlePopover(spec) {
-      GLib.action.execute(spec, this)
+      GLib.action.execute(spec, this);
     }
   },
 };

package/components/composable/conditional.js

@@ -0,0 +1,11 @@
+import { reactive, watchEffect } from "vue";
+import jsonLogic from 'json-logic-js';
+
+const fieldModels = reactive({});
+
+const watchFieldModels = (logic, cb) => watchEffect(() => {
+  const value = jsonLogic.apply(logic, fieldModels);
+  cb(value);
+});
+
+export { fieldModels, watchFieldModels };

package/components/fields/_otp.vue

@@ -8,7 +8,7 @@
       <label class="hint">{{ spec.hint }}</label>
     </div>
     <div v-else>
-      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="val[index]" type="number"
+      <input v-for="(digit, index) in digits" :key="index" ref="input" :value="val[index]" type="number"
         oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
         maxlength="1" class="otp-input" @input="handleInput($event, index)" @keydown="handleKeydown($event, index)"
         @paste="handlePaste($event, index)" @focus="handleFocus($event, index)" @blur="handleBlur($event, index)"
@@ -76,6 +76,7 @@ export default {
       if (event.target.value.length === 1) {
         this.focusNext(index);
       }
+      this.val[index] = event.target.value;
       this.fieldModel = this.otp.join("");
     },
     handleKeydown(event, index) {

package/components/fields/location.vue

@@ -4,62 +4,29 @@
       It's safer to manually implement styling than adding another dependency such as vuetify-google-autocomplete,
       which behaves differently and needs to be actively maintained.
     -->
-    <div
-      class="v-input theme--light v-text-field v-text-field--enclosed v-text-field--outlined"
-    >
+    <div class="v-input theme--light v-text-field v-text-field--enclosed v-text-field--outlined">
       <div class="v-input__control">
         <div class="v-input__slot">
           <fieldset aria-hidden="true">
             <legend :style="`width: ${labelWidth}px;`"><span>​</span></legend>
           </fieldset>
           <div class="v-text-field__slot">
-            <label
-              ref="label"
-              class="v-label v-label--active theme--light"
-              style="left: 0px; right: auto; position: absolute; font-size: 16px;"
-              >{{ spec.label }}</label
-            >
+            <label ref="label" class="v-label v-label--active theme--light"
+              style="left: 0px; right: auto; position: absolute; font-size: 16px;">{{ spec.label }}</label>
             <!-- See https://developers.google.com/places/web-service/autocomplete#place_types for autocompleteOptions -->
-            <gmap-autocomplete
-              :name="spec.name"
-              :placeholder="spec.placeholder"
-              :value="address"
-              :options="spec.autocompleteOptions"
-              @input="onAddressChanged"
-              @place_changed="onPlaceChanged"
-            />
+            <gmap-autocomplete :name="spec.name" :placeholder="spec.placeholder" :value="address"
+              :options="spec.autocompleteOptions" @input="onAddressChanged" @place_changed="onPlaceChanged" />
           </div>
         </div>
       </div>
     </div>
 
-    <gmap-map
-      ref="map"
-      :center="{ lat: 0, lng: 0 }"
-      :zoom="13"
-      class="mt-3 mb-3 map"
-      map-type-id="roadmap"
-      :style="mapStyles"
-      @idle="onActionCompleted"
-    >
-      <gmap-marker
-        :position="markerPos"
-        :clickable="true"
-        :draggable="true"
-        @drag="onDrag"
-        @dragend="onDrag"
-      />
+    <gmap-map ref="map" :center="{ lat: 0, lng: 0 }" :zoom="13" class="mt-3 mb-3 map" map-type-id="roadmap"
+      :style="mapStyles" @idle="onActionCompleted">
+      <gmap-marker :position="markerPos" :clickable="true" :draggable="true" @drag="onDrag" @dragend="onDrag" />
     </gmap-map>
-    <glib-component
-      v-if="latitudeField"
-      ref="latitudeView"
-      :spec="latitudeField"
-    />
-    <glib-component
-      v-if="longitudeField"
-      ref="longitudeView"
-      :spec="longitudeField"
-    />
+    <glib-component v-if="latitudeField" ref="latitudeView" :spec="latitudeField" />
+    <glib-component v-if="longitudeField" ref="longitudeView" :spec="longitudeField" />
     <glib-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
   </v-container>
 </template>
@@ -97,8 +64,8 @@ export default {
     mapStyles() {
       return this.longitude != null && this.latitude != null
         ? {
-            display: "block"
-          }
+          display: "block"
+        }
         : { display: "none" };
     }
   },
@@ -112,11 +79,11 @@ export default {
       this.centerInitial();
 
       setTimeout(() => {
-        this.latitudeView = this.$refs.latitudeView.$children[0];
-        this.longitudeView = this.$refs.longitudeView.$children[0];
+        this.latitudeView = this.$refs.latitudeView;
+        this.longitudeView = this.$refs.longitudeView;
 
         if (this.$refs.zoomView) {
-          this.zoomView = this.$refs.zoomView.$children[0];
+          this.zoomView = this.$refs.zoomView;
         }
 
         const labelView = this.$refs.label;
@@ -139,10 +106,10 @@ export default {
       }
     },
     setLocation(latitudeValue, longitudeValue, dropPin) {
-      this.$refs.map.$gmapApiPromiseLazy().then(() => {
+      this.$gmapApiPromiseLazy().then(() => {
         // eslint-disable-next-line no-undef
         const location = new google.maps.LatLng(latitudeValue, longitudeValue);
-        this.$refs.map.$mapObject.setCenter(location);
+        this.$refs.map.mapInstance.setCenter(location);
 
         if (dropPin) {
           this.setMarkerPosition(location);
@@ -161,14 +128,15 @@ export default {
 
       const location = place.geometry.location;
       this.setMarkerPosition(location);
-      this.$refs.map.$mapObject.setCenter(location);
+
+      this.$refs.map.mapInstance.setCenter(location);
     },
     onDrag(e) {
       this.setMarkerPosition(e.latLng);
     },
     onActionCompleted() {
       if (this.zoomView) {
-        this.zoomView.fieldModel = this.$refs.map.$mapObject.zoom;
+        this.zoomView.fieldModel = this.$refs.map.mapInstance.zoom;
       }
     },
     onAddressChanged(e) {

package/components/mixins/events.js

@@ -28,6 +28,14 @@ export default {
     }
   },
   created() {
+    // watch components/update
+    if (this.spec) {
+      this.$watch(
+        () => Object.keys(this.spec).map((specKey) => this.spec[specKey]),
+        () => this._ready()
+      );
+    }
+
     this.$created();
   },
   mounted() {
@@ -37,7 +45,7 @@ export default {
   },
   beforeUpdate() {
     if (vueApp.isStale) {
-      this._mountedUrl = null
+      this._mountedUrl = null;
     }
 
     if (!this._renderingTheSamePage()) {
@@ -69,7 +77,7 @@ export default {
             return UrlUtils.htmlUrl(onClick.url);
         }
       }
-      return null;
+      return '';
     },
     $onClick: function (explicitEvent, spec) {
       const properties = spec || this.spec;

package/components/mixins/styles.js

@@ -1,56 +1,34 @@
 import { vueApp } from "../../store";
 import Hash from "../../utils/hash";
+import { fieldModels, watchFieldModels } from "../composable/conditional";
 
-import jsonLogic from 'json-logic-js';
-
-// jsonLogic.add_operation("add_ms", function(a, b) {
-//   if (Utils.type.isString(a)) {
-//     const newValue = new Date(new Date(a).getTime() + b * 1000);
-//     return newValue.toISOString();
-//   }
-//   return null;
-// });
 export default {
   data: function () {
     return {
-      _fieldModels: {},
       fieldName: null,
       fieldModel: null,
-
+      _show: true,
       // 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>"
     };
   },
-  computed: {
-    display() {
-      const conditions = this.spec.showIf;
-      if (conditions) {
-        return jsonLogic.apply(conditions, this.$data._fieldModels)
-          ? this.$displayValue()
-          : "none";
-      } else {
-        return this.$displayValue();
-      }
-    }
-  },
   watch: {
     fieldModel: function (val, oldVal) {
       if (val === this.vuetifyEmptyString) {
         val = "";
       }
 
-      // Make the field property observable for dynamic showing/hiding
-      Object.assign(this.$data._fieldModels, { [this.fieldName]: this.$internalizeValue(val) })
+      Object.assign(fieldModels, { [this.fieldName]: this.$internalizeValue(val) });
 
       this._checkDirtyState(val, oldVal);
     },
     spec: {
       handler(spec, oldSpec) {
         if (spec) {
-          let valueChanged = true
+          let valueChanged = true;
           if (oldSpec && oldSpec.value === spec.value) {
-            valueChanged = false
+            valueChanged = false;
           }
           this._linkFieldModels(valueChanged);
         }
@@ -58,6 +36,22 @@ export default {
       immediate: true
     }
   },
+  // watch showIf and valueIf
+  mounted() {
+    if (this.spec && this.spec.valueIf) {
+      watchFieldModels(this.spec.valueIf, (value) => this.fieldModel = this.$sanitizeValue(this.$externalizeValue(value)));
+    }
+
+    if (this.spec && this.spec.showIf) {
+      watchFieldModels(this.spec.showIf, (value) => {
+        if (value) {
+          this._show = true;
+        } else {
+          this._show = false;
+        }
+      });
+    }
+  },
   methods: {
     // TODO: Deprecated
     genericStyles(spec) {
@@ -132,13 +126,11 @@ export default {
         val => (styles["height"] = val)
       );
 
-      // Utils.type.ifObject(
-      //   properties.onClick,
-      //   () => (styles["cursor"] = "pointer")
-      // );
-
-      // This is the main reason styles have to be used in a dynamic way.
-      this._updateDisplay(styles, properties);
+      if (this._show) {
+        styles['display'] = this.$displayValue();
+      } else {
+        styles['display'] = 'none';
+      }
 
       return new Hash(styles);
     },
@@ -166,18 +158,6 @@ export default {
     //   });
     //   return color;
     // },
-    _updateDisplay(styles, properties) {
-      Utils.type.ifObject(
-        properties.showIf,
-        () => {
-          styles["display"] = this.display
-        }
-      );
-      Utils.type.ifObject(properties.valueIf, logic => {
-        const newValue = jsonLogic.apply(logic, this.$data._fieldModels);
-        this.fieldModel = this._sanitizeValue(this.$externalizeValue(newValue));
-      });
-    },
     $displayValue() {
       // return "block"; Deprecated because it causes problems for multiple rows components
       // return "inherit"; // To be overridden
@@ -204,11 +184,6 @@ export default {
 
       const isField = name && name.startsWith("fields-");
       if (hasCondition || isField) {
-        const form = this.$closest("panels-form");
-        if (form != null) {
-          this.$data._fieldModels = form.$data._fieldModels;
-        }
-
         // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
         // may be used without a form.
         this.fieldName = this.spec.name;

package/index.js

@@ -7,42 +7,49 @@ import { useTheme } from "vuetify";
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
 
 // lib for deep merge
-import merge from 'lodash.merge'
+import merge from 'lodash.merge';
 
 const Vue = createApp({
   data() {
     return {
       vueApp,
       themeConfig: useTheme()
-    }
+    };
   },
   created() {
-    this.themeConfig.themes = merge(this.themeConfig.themes, settings.themes)
+    this.themeConfig.themes = merge(this.themeConfig.themes, settings.themes);
   },
   render: function () {
     return h(App, { page: this.$data.vueApp.page });
   }
-})
+});
+
+
+Vue.use(vuetify);
+
+import { GmapVuePlugin, components } from "@gmap-vue/v3";
+Vue.use(GmapVuePlugin, {
+  load: {
+    key: import.meta.env.GMAPS_API_KEY,
+    libraries: "places"
+  }
+});
 
+const { MapLayer, Autocomplete, Marker } = components;
+Vue.component('gmap-map', MapLayer);
+Vue.component('gmap-marker', Marker);
+Vue.component('gmap-autocomplete', Autocomplete);
 
-Vue.use(vuetify)
 
-// import * as VueGoogleMaps from "vue2-google-maps";
-// Vue.use(VueGoogleMaps, {
-//   load: {
-//     key: process.env.GMAPS_API_KEY,
-//     libraries: "places"
-//   }
-// });
 
 import "./styles/test.scss";
 import "./styles/test.sass";
 
 
-import VueChartkick from 'vue-chartkick'
-import 'chartkick/chart.js'
+import VueChartkick from 'vue-chartkick';
+import 'chartkick/chart.js';
 
-Vue.use(VueChartkick)
+Vue.use(VueChartkick);
 
 // import VueAnalytics from 'vue-analytics'
 // // TODO: Avoid hardcoding
@@ -153,10 +160,10 @@ Vue.use(updatableComponent);
 import { vueApp } from "./store";
 
 document.addEventListener("DOMContentLoaded", () => {
-  Vue.mount("#app")
+  Vue.mount("#app");
 });
 
-export { Vue, settings, vueApp }
+export { Vue, settings, vueApp };
 
 // The above code uses Vue without the compiler, which means you cannot
 // use Vue to target elements in your existing html templates. You would