glib-web 3.2.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/charts/area.vue

@@ -1,5 +1,7 @@
 <template>
-    <area-chart :style="genericStyles()" :class="$classes()" :data="series"></area-chart>
+    <div>
+        <area-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color">></area-chart>
+    </div>
 </template>
 
 <script setup>
@@ -7,6 +9,6 @@ import { computed } from 'vue';
 import { singleDataSeries } from './series';
 
 const { spec } = defineProps({ spec: Object })
-
+const color = spec.colors == null ? '' : [spec.colors]
 const series = computed(() => singleDataSeries(spec.dataSeries))
 </script>

package/components/charts/column.vue

@@ -1,5 +1,5 @@
 <template>
-  <column-chart :data="series" :stacked="spec.stacked"></column-chart>
+  <column-chart :data="series" :stacked="spec.stacked" :colors="color"></column-chart>
 </template>
 
 <script setup>
@@ -8,6 +8,7 @@ import { computed } from 'vue';
 import { multipleDataSeries } from './series';
 
 const { spec } = defineProps({ spec: Object })
+const color = spec.colors == null ? '' : spec.colors
 const series = computed(() => multipleDataSeries(spec.dataGroups))
 
 </script>

package/components/charts/line.vue

@@ -1,5 +1,5 @@
 <template>
-    <line-chart :style="genericStyles()" :class="$classes()" :data="series"></line-chart>
+    <line-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color"></line-chart>
 </template>
 
 <script setup>
@@ -7,6 +7,7 @@ import { computed } from 'vue';
 import { multipleDataSeries } from './series';
 
 const { spec } = defineProps({ spec: Object })
+const color = spec.colors == null ? '' : spec.colors
 
 const series = computed(() => multipleDataSeries(spec.dataSeries))
 </script>

package/components/charts/pie.vue

@@ -1,5 +1,5 @@
 <template>
-  <pie-chart :style="genericStyles()" :class="$classes()" :data="series"></pie-chart>
+  <pie-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color"></pie-chart>
 </template>
 
 <script setup>
@@ -7,6 +7,7 @@ import { computed } from 'vue';
 import { singleDataSeries } from './series';
 
 const { spec } = defineProps({ spec: Object })
+const color = spec.colors == null ? '' : spec.colors
 const series = computed(() => singleDataSeries(spec.dataSeries))
 
 </script>

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

@@ -0,0 +1,161 @@
+<template>
+  <div :style="$styles()" :class="$classes()">
+    <div v-if="spec.type === 'text'">
+      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="val[index]" type="text" 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)"
+        @click="handleClick($event)" />
+      <label class="hint">{{ spec.hint }}</label>
+    </div>
+    <div v-else>
+      <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)"
+        @click="handleClick($event)" />
+      <label class="hint">{{ spec.hint }}</label>
+    </div>
+    <input type="hidden" :name="fieldName" v-model="fieldModel" />
+  </div>
+</template>
+
+<script>
+import bus from '../../utils/eventBus'
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      otp: (this.spec.value || '').toString().split(""),
+      alignment: this.spec.align === null ? 'left' : this.spec.align
+    }
+  },
+  computed: {
+    otpValue() {
+      if (!this.otp) return ''
+
+      // concatenate the digits into a single string
+      return this.otp.join("");
+    },
+    digits() {
+      return this.spec.length
+    },
+    val() {
+      const field = this.fieldModel == null ? [] : this.fieldModel.toString().split("")
+
+      if (this.alignment === 'right') {
+        if (this.spec.valueIf == null) {
+          if (this.digits > this.otp.length && this.otp.length != 0) {
+            const results = []
+            for (let i = 0; i < (this.digits - this.otp.length); i++) {
+              results.push('')
+            }
+            return Reflect.apply(Array.prototype.concat, results, this.otp)
+          } else {
+            return field
+          }
+        } else {
+          return field
+        }
+      } else {
+        if (this.spec.valueIf == null) {
+          return this.otp
+        } else {
+          return field
+        }
+      }
+    },
+  },
+  methods: {
+    created() {
+      this.fieldModel = this.otpValue;
+    },
+    handleInput(event, index) {
+      if (event.target.value.length === 1) {
+        this.focusNext(index);
+      }
+      this.val[index] = event.target.value;
+      this.fieldModel = this.otp.join("");
+    },
+    handleKeydown(event, index) {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        if (this.otp[index] !== "") {
+          this.otp[index] = ""
+        } else {
+          this.focusPrevious(index);
+          this.otp[index - 1] = ""
+        }
+      }
+    },
+    handlePaste(event, index) {
+      event.preventDefault();
+      const pasted = event.clipboardData
+        .getData("text")
+        .slice(0, this.digits - index);
+      for (let i = 0; i < pasted.length; i++) {
+        this.$set(this.otp, index + i, pasted[i]);
+      }
+      this.focusNext(index + pasted.length - 1);
+    },
+    handleFocus(event, index) {
+      if (index > 0 && this.otp[index - 1] === "") {
+        this.focusPrevious(index);
+      }
+    },
+    handleBlur(event, index) {
+      if (this.otp.filter(digit => digit === "").length === 0) {
+        bus.$emit("complete", this.otp.join(""));
+      }
+    },
+    focusNext(index) {
+      if (index < this.digits - 1) {
+        this.$refs.input[index + 1].focus();
+      }
+    },
+    focusPrevious(index) {
+      if (index > 0) {
+        this.$refs.input[index - 1].focus();
+      }
+    },
+    handleClick(event) {
+      event.target.select();
+    }
+  }
+};
+</script>
+<style scoped>
+.otp-input {
+  border: 1px solid #47495f;
+  text-align: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  font-size: 24px;
+  margin: 8px;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.hint {
+  display: none;
+}
+
+input:focus~.hint,
+input:focus-visible~.hint {
+  display: block;
+  padding: 8px 16px;
+}
+</style>

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/fields/otpField.vue

@@ -1,130 +1,24 @@
 <template>
-  <div>
-    <div v-if="spec.type === 'text'">
-      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="otp[index]" type="text" 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)"
-        @click="handleClick($event)" />
-      <label class="hint">{{ spec.hint }}</label>
-    </div>
-    <div v-else>
-      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="otp[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)"
-        @click="handleClick($event)" />
-      <label class="hint">{{ spec.hint }}</label>
-    </div>
-    <input type="hidden" :name="spec.name" :value="otpValue" />
-  </div>
+  <fields-otp :spec="spec" />
 </template>
 
 <script>
-import bus from '../../utils/eventBus'
+import OtpField from "./_otp.vue";
 
 export default {
+  components: {
+    // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
+    "fields-otp": OtpField,
+  },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
-      otp: (this.spec.value || '').toString().split("")
-    }
-  },
-  computed: {
-    otpValue() {
-      if (!this.otp) return ''
-
-      // concatenate the digits into a single string
-      return this.otp.join("");
-    },
-    digits() {
-      return this.spec.length
-    },
+      value: null,
+    };
   },
-  methods: {
-    handleInput(event, index) {
-      if (event.target.value.length === 1) {
-        this.focusNext(index);
-      }
-    },
-    handleKeydown(event, index) {
-      if (event.key === "Backspace") {
-        event.preventDefault();
-        if (this.otp[index] !== "") {
-          this.otp[index] = ""
-        } else {
-          this.focusPrevious(index);
-          this.otp[index - 1] = ""
-        }
-      }
-    },
-    handlePaste(event, index) {
-      event.preventDefault();
-      const pasted = event.clipboardData
-        .getData("text")
-        .slice(0, this.digits - index);
-      for (let i = 0; i < pasted.length; i++) {
-        this.$set(this.otp, index + i, pasted[i]);
-      }
-      this.focusNext(index + pasted.length - 1);
-    },
-    handleFocus(event, index) {
-      if (index > 0 && this.otp[index - 1] === "") {
-        this.focusPrevious(index);
-      }
-    },
-    handleBlur(event, index) {
-      if (this.otp.filter(digit => digit === "").length === 0) {
-        bus.$emit("complete", this.otp.join(""));
-      }
-    },
-    focusNext(index) {
-      if (index < this.digits - 1) {
-        this.$refs.input[index + 1].focus();
-      }
-    },
-    focusPrevious(index) {
-      if (index > 0) {
-        this.$refs.input[index - 1].focus();
-      }
-    },
-    handleClick(event) {
-      event.target.select();
-    }
-  }
 };
 </script>
-<style scoped>
-.otp-input {
-  border: 1px solid #47495f;
-  text-align: center;
-  width: 50px;
-  height: 50px;
-  border-radius: 4px;
-  font-size: 24px;
-  margin: 8px;
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-.hint {
-  display: none;
-}
 
-input:focus~.hint,
-input:focus-visible~.hint {
-  display: block;
-  padding: 8px 16px;
-}
-</style>
+<style scoped></style>

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

package/nav/dialog.vue

@@ -4,17 +4,18 @@
     <v-card :style="hamburgerStyles" class="hamburger">
 
       <panels-responsive v-if="header" :spec="header" />
-      <div class="dialog-title flex flex-wrap justify-between" v-if="title">
-        <div class="theme--light v-subheader">
+      <div class="dialog-title d-flex flex-wrap justify-space-between align-center" style="width: 100%; height: 100%;">
+        <h3 v-if="title">
           {{ title }}
-        </div>
-      </div>
+        </h3>
 
-      <div class="dialogs-body relative">
-        <v-btn size="small" v-if="!disableCloseButton" text icon @click="close" class="mr-3 mt-2 close-btn"
+        <v-btn size="small" v-if="!disableCloseButton" text icon @click="close" class="mr-4 mt-4 close-btn"
           style="z-index: 999;" variant="flat">
           <v-icon>close</v-icon>
         </v-btn>
+      </div>
+
+      <div class="dialogs-body relative">
         <component :is="containerComponent" :spec="formSpec">
           <div v-if="message" class="dialog-message">
             <common-message :spec="{ message: message }" />
@@ -94,14 +95,13 @@ export default {
       return null;
     }
   },
-  // watch: {
-  //   model: function (val, oldVal) {
-  //     if (!val) {
-  //       // this.$destroy();
-  //       this.$.appContext.app.unmount()
-  //     }
-  //   },
-  // },
+  watch: {
+    model: function (val, oldVal) {
+      if (!val) {
+        this.stack.remove(this);
+      }
+    },
+  },
   methods: {
     $mounted() {
       window.addEventListener(
@@ -122,10 +122,10 @@ export default {
       });
     },
     // TODO: This doesn't get called anymore after Vue3 upgrade.
-    $tearDown() {
-      console.debug("Dialog destroyed");
-      this.stack.remove(this);
-    },
+    // $tearDown() {
+    //   console.debug("Dialog destroyed");
+    //   this.stack.remove(this);
+    // },
     close() {
       if (Utils.http.proceedEvenWhenDirty()) {
         this.model = false;

package/nav/drawer.vue

@@ -4,8 +4,8 @@
 
   <div :class="cssClasses" :style="style">
     <v-navigation-drawer v-model="state" app :dark="cssClasses.includes('dark') || null"
-      :permanent="cssClasses.includes('permanent')" :expand-on-hover="expandOnHover()" v-model:mini-variant="shrunk"
-      @input="updateState">
+      :permanent="mdAndUp || cssClasses.includes('permanent')" :expand-on-hover="expandOnHover()"
+      v-model:mini-variant="shrunk" @input="updateState">
 
       <template v-if="spec.header">
         <panels-responsive :spec="spec.header" />
@@ -39,6 +39,7 @@
 import NavDrawerButton from "./drawerButton.vue";
 import NavDrawerLabel from "./drawerLabel.vue";
 import bus from "../utils/eventBus";
+import { useDisplay } from "vuetify";
 
 export default {
   components: {
@@ -51,6 +52,11 @@ export default {
     trigger: { type: [Object, Date], default: null },
     permanent: { type: Boolean, required: true },
   },
+  setup() {
+    const { mdAndUp } = useDisplay();
+
+    return { mdAndUp };
+  },
   data: function () {
     return {
       // Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.

package/nav/snackbar.vue

@@ -1,22 +1,20 @@
 <template>
-  <v-snackbar v-model="show" :location="spec.location" :color="color" :timeout="spec.timeout">
+  <v-snackbar :vertical="vertical" v-model="show" :location="spec.location" :color="color" :timeout="spec.timeout"
+    :variant="variant">
     <common-message :spec="spec" />
 
-    <v-btn v-for="(button, index) in spec.buttons" variant="text" @click="click(button, $event)">
-      <span style="color: whitesmoke">{{ button.text }}</span>
-    </v-btn>
+    <template v-slot:actions v-if="spec.buttons">
+      <v-btn v-for="(button, index) in spec.buttons" :key="index" :color="color" :variant="variant"
+        @click="click(button, $event)">
+        <span :class="`text-${color}`">{{ button.text }}</span>
+      </v-btn>
+    </template>
 
-    <!-- <v-btn
-      flat
-      @click="close"
-    >
-      Close
-    </v-btn> -->
   </v-snackbar>
 </template>
 
 <script>
-import { colors } from '../utils/constant';
+import { determineColor, determineVariant } from '../utils/constant';
 
 export default {
   props: {
@@ -25,28 +23,17 @@ export default {
   data: function () {
     return {
       show: true,
-      color: null,
-      indicator: false
+      color: 'primary',
+      variant: 'outlined',
+      indicator: false,
+      vertical: false
     };
   },
-  // watch: {
-  //   model: function (val, oldVal) {
-  //     if (!val) {
-  //       // this.$destroy();
-  //       this.$.appContext.app.unmount()
-  //     }
-  //   },
-  // },
   methods: {
     $ready() {
-      const vm = this;
-      this.$type.ifArray(this.spec.styleClasses, val => {
-        colors.forEach(color => {
-          if (val.includes(color)) {
-            vm.color = color;
-          }
-        });
-      });
+      this.variant = determineVariant(this.spec.styleClasses, 'outlined');
+      this.color = determineColor(this.spec.styleClasses, 'primary');
+      this.vertical = [this.spec.styleClasses].flat().includes('vertical');
     },
     click: function (spec) {
       const onClick = spec["onClick"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "@floating-ui/dom": "^1.2.8",
+    "@gmap-vue/v3": "^1.0.3",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0-alpha",
     "@vueup/vue-quill": "^1.2.0",
@@ -30,8 +31,6 @@
     "vue": "3.2.47",
     "vue-chartkick": "^1.1.0",
     "vue-social-sharing": "^4.0.0-alpha4",
-    "vue2-gmap-custom-marker": "^6.1.1",
-    "vue2-google-maps": "^0.10.6",
     "vuedraggable": "^4.1.0",
     "vuetify": "^3.3.2"
   },
@@ -42,4 +41,4 @@
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}

package/utils/http.js

@@ -1,6 +1,6 @@
 import Type from "./type";
 import Action from "../action";
-import { nextTick } from 'vue'
+import { nextTick } from 'vue';
 import { vueApp } from "../store";
 
 let loading = false;
@@ -89,7 +89,7 @@ export default class {
         this.forceComponentUpdate(() => {
           Utils.history.resetScroll();
 
-          vueApp.page = data
+          vueApp.page = data;
 
           Action.execute(properties["onOpen"], component);
         });
@@ -143,7 +143,7 @@ export default class {
 
     Utils.http.execute(data, "GET", component, (page, response) => {
       Utils.http.forceComponentUpdate(() => {
-        vueApp.page = page
+        vueApp.page = page;
         const redirectUrl = Utils.url.htmlUrl(response.url);
         Utils.history.updatePage(vueApp.page, redirectUrl);
 
@@ -244,27 +244,27 @@ export default class {
     setTimeout(() => {
       if (loading) {
         loading = false;
-        vueApp.indicator = true
+        vueApp.indicator = true;
       }
     }, 200);
   }
 
   static _hideIndicator() {
     loading = false;
-    vueApp.indicator = false
+    vueApp.indicator = false;
   }
 
   // See generic.js
   static forceComponentUpdate(handler) {
     // GLib.component.clearRegistry();
-    vueApp.isStale = true
-    vueApp.isFormSubmitted = false
-    vueApp.isFormDirty = false
+    vueApp.isStale = true;
+    vueApp.isFormSubmitted = false;
+    vueApp.isFormDirty = false;
     handler();
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
     nextTick(() => {
-      vueApp.isStale = false
+      vueApp.isStale = false;
     });
   }
 
@@ -275,16 +275,16 @@ export default class {
   }
 
   static clearDirtyState() {
-    vueApp.isFormDirty = false
+    vueApp.isFormDirty = false;
   }
 
   static notifyFormSubmitted() {
-    vueApp.isFormSubmitted = true
+    vueApp.isFormSubmitted = true;
   }
 
   // `context` can be either window or dialog.
   static proceedEvenWhenDirty() {
-    const dirtyContext = vueApp
+    const dirtyContext = vueApp;
     // Don't prompt if this is a result of form submission
     if (
       dirtyContext.isFormDirty &&

package/utils/launch.js

@@ -3,7 +3,7 @@ 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 { computePosition, flip, offset } from '@floating-ui/dom';
 import bus from "./eventBus";
 
 import { createApp, h } from "vue";
@@ -31,17 +31,17 @@ class LaunchPopover {
     const instance = createApp(
       {
         render: function () {
-          return h(Popover, { spec: properties })
+          return h(Popover, { spec: properties });
         }
       }
-    )
-    Object.assign(instance._context, Vue._context)
+    );
+    Object.assign(instance._context, Vue._context);
 
     if (component) {
-      const placeholder = document.createElement('div')
+      const placeholder = document.createElement('div');
 
       // const pageBody = Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
-      const dialogBody = Utils.launch.dialog.closestBody(component)
+      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);
@@ -53,11 +53,11 @@ class LaunchPopover {
 
       instance.mount(placeholder);
 
-      const reference = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling
+      const reference = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling;
 
-      const floating = placeholder
-      const placement = properties.placement || 'right'
-      const offsetSize = properties.offset || 8
+      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 });
@@ -65,7 +65,7 @@ class LaunchPopover {
       computePosition(reference, floating, { placement: placement, middleware: [flip(), offset(offsetSize)] })
         .then(({ x, y }) => {
           Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, zIndex: 1200 });
-        })
+        });
     } else {
       console.error("A popover has to be displayed in a component");
     }
@@ -74,13 +74,13 @@ class LaunchPopover {
   }
 
   static close(properties) {
-    bus.$emit(`popover/close-${properties.key}`, 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 element = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling;
     const dialog = element.closest(".v-dialog");
     if (dialog) {
       return dialog.querySelector(".dialogs-body");
@@ -110,20 +110,20 @@ class LaunchDialog {
     const props = {
       spec: properties,
       stack: this.stack
-    }
+    };
 
     const instance = createApp(
       {
         render: function () {
-          return h(Dialog, props)
+          return h(Dialog, props);
         }
       }
-    )
-    Object.assign(instance._context, Vue._context)
+    );
+    Object.assign(instance._context, Vue._context);
 
     if (component) {
-      const placeholder = document.createElement('div')
-      document.body.appendChild(placeholder)
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
       instance.mount(placeholder);
     } else {
       console.error("A dialog has to be displayed in a component");
@@ -160,6 +160,7 @@ class LaunchDialog {
       message: message
     };
     const spec = Object.assign({}, properties, {
+      disableCloseButton: true,
       buttons: [
         {
           text: "OK",
@@ -176,15 +177,15 @@ class LaunchSheet {
     const instance = createApp(
       {
         render: function () {
-          return h(Sheet, { spec: properties })
+          return h(Sheet, { spec: properties });
         }
       }
-    )
-    Object.assign(instance._context, Vue._context)
+    );
+    Object.assign(instance._context, Vue._context);
 
     if (component) {
-      const placeholder = document.createElement('div')
-      document.body.appendChild(placeholder)
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
       instance.mount(placeholder);
     } else {
       console.error("A sheet has to be displayed in a component");
@@ -216,15 +217,15 @@ class LaunchSnackbar {
     const instance = createApp(
       {
         render: function () {
-          return h(Snackbar, { spec: properties })
+          return h(Snackbar, { spec: properties });
         }
       }
-    )
-    Object.assign(instance._context, Vue._context)
+    );
+    Object.assign(instance._context, Vue._context);
 
     if (component) {
-      const placeholder = document.createElement('div')
-      document.body.appendChild(placeholder)
+      const placeholder = document.createElement('div');
+      document.body.appendChild(placeholder);
       instance.mount(placeholder);
       instance.show = true;
     } else {