glib-web 3.4.8 → 3.5.1

package/action.js

@@ -53,13 +53,14 @@ import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 import ActionCommandsCopy from "./actions/commands/copy";
 import ActionCommandsCustom from "./actions/commands/custom";
 
-import ActionToursStart from "./actions/tours/start";
-import ActionToursStop from "./actions/tours/stop";
+// TODO: handle promise action
+const ActionToursStart = import("./actions/tours/start");
+const ActionToursStop = import("./actions/tours/stop");
 
 import ActionComponentsUpdate from "./actions/components/update";
 
-import ActionPopoversOpen from "./actions/popovers/open"
-import ActionPopoversClose from "./actions/popovers/close"
+import ActionPopoversOpen from "./actions/popovers/open";
+import ActionPopoversClose from "./actions/popovers/close";
 
 import { vueApp } from "./store";
 
@@ -182,7 +183,7 @@ export default class Action {
     // TODO: The execution should be in the following order: onResponse, page render, onLoad
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        vueApp.page = response
+        vueApp.page = response;
       });
     }
 

package/actions/windows/close.js

@@ -1,11 +1,14 @@
+import { vueApp } from "../../store";
+
 export default class {
   execute(properties, component) {
+    vueApp.richTextValues = {};
     Utils.history.back();
 
     Utils.type.ifObject(properties["onClose"], it => {
       // Allow time for history.back() to complete, which is important for actions that need
       // to use window.location.href such as windows/reload
-      setTimeout(function() {
+      setTimeout(function () {
         GLib.action.execute(it, component);
       }, 100);
     });

package/actions/windows/closeAll.js

@@ -1,14 +1,16 @@
+import { vueApp } from "../../store";
 import Type from "../../utils/type";
 
 export default class {
   execute(properties, component) {
+    vueApp.richTextValues = {};
     // TODO
     // window.history.deleteAll()
 
     Type.ifObject(properties["onClose"], it => {
       // Allow time for history.back() to complete, which is important for actions that need
       // to use window.location.href such as windows/reload
-      setTimeout(function() {
+      setTimeout(function () {
         GLib.action.execute(it, component);
       }, 100);
     });

package/actions/windows/open.js

@@ -1,5 +1,8 @@
+import { vueApp } from "../../store";
+
 export default class {
   execute(properties, component) {
+    vueApp.richTextValues = {};
     Utils.http.load(properties, component);
   }
 }

package/actions/windows/reload.js

@@ -1,5 +1,9 @@
+import { vueApp } from "../../store";
+
 export default class {
   execute(properties, component) {
+    vueApp.richTextValues = {};
+
     if (Utils.settings.reactive) {
       Utils.http.reload(properties, component);
     } else {

package/app.vue

@@ -29,8 +29,8 @@
 <script>
 import NavAppBar from "./nav/appbar.vue";
 import Utils from "./utils/helper";
-import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
-import actionCableMixin from "./components/mixins/ws/actionCable.js";
+// import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
+// import actionCableMixin from "./components/mixins/ws/actionCable.js";
 import FormPanel from "./components/panels/form.vue";
 import { vueApp } from "./store";
 
@@ -39,7 +39,7 @@ export default {
     "nav-appbar": NavAppBar,
     "panels-form": FormPanel,
   },
-  mixins: [phoenixSocketMixin, actionCableMixin],
+  // mixins: [phoenixSocketMixin, actionCableMixin],
   props: {
     page: { type: Object, required: true },
   },
@@ -103,8 +103,8 @@ export default {
     $ready() {
       document.title = this.page.title;
 
-      this.$wsInitPhoenixSocket(this.page.phoenixSocket);
-      this.$wsInitActionCable(this.page.actionCable);
+      // this.$wsInitPhoenixSocket(this.page.phoenixSocket);
+      // this.$wsInitActionCable(this.page.actionCable);
 
       // TODO: Remove gtag dependency
       // if (this.$gtag) {

package/components/_badge.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-badge :color="badge.backgroundColor || 'red'" :offset-x="badge.offsetX" :offset-y="badge.offsetY" :model-value="badgeExists()" :style="styles()">
+  <v-badge :color="badge.backgroundColor || 'red'" overlap :model-value="badgeExists()" :style="styles()">
     <template v-slot:badge>{{ badge.text }}</template>
     <slot />
   </v-badge>
@@ -12,7 +12,7 @@ export default {
   },
   data() {
     return {
-      badge: {},
+      badge: {}
     };
   },
   methods: {

package/components/_dropdownMenu.vue

@@ -34,7 +34,7 @@ export default {
       return determineSize(this.spec.styleClasses)
     },
     variant() {
-      return determineVariant(this.spec.styleClasses, 'text')
+      return determineVariant(this.spec.styleClasses, 'elevated')
     }
   },
   methods: {

package/components/charts/area.vue

@@ -5,9 +5,8 @@
 </template>
 
 <script setup>
-import 'chartkick/chart.js';
 import { computed } from 'vue';
-import { singleDataSeries } from './series';
+const { singleDataSeries } = await import('./series');
 
 const { spec } = defineProps({ spec: Object });
 const color = spec.colors == null ? '' : [spec.colors];

package/components/charts/column.vue

@@ -3,9 +3,8 @@
 </template>
 
 <script setup>
-import 'chartkick/chart.js';
 import { computed } from 'vue';
-import { multipleDataSeries } from './series';
+const { multipleDataSeries } = await import('./series');
 
 const { spec } = defineProps({ spec: Object });
 const color = spec.colors == null ? '' : spec.colors;

package/components/charts/line.vue

@@ -3,9 +3,8 @@
 </template>
 
 <script setup>
-import 'chartkick/chart.js';
 import { computed } from 'vue';
-import { multipleDataSeries } from './series';
+const { multipleDataSeries } = await import('./series');
 
 const { spec } = defineProps({ spec: Object });
 const color = spec.colors == null ? '' : spec.colors;

package/components/charts/pie.vue

@@ -3,9 +3,8 @@
 </template>
 
 <script setup>
-import 'chartkick/chart.js';
 import { computed } from 'vue';
-import { singleDataSeries } from './series';
+const { singleDataSeries } = await import('./series');
 
 const { spec } = defineProps({ spec: Object });
 const color = spec.colors == null ? '' : spec.colors;

package/components/charts/series.js

@@ -1,18 +1,26 @@
+import { Vue } from "../..";
+
+import 'chartkick/chart.js';
+
+import VueChartkick from 'vue-chartkick';
+Vue.use(VueChartkick);
+
+
 const multipleDataSeries = (dataSeries) => {
     return dataSeries.map((value) => {
-        let points = null
+        let points = null;
         if (Array.isArray(value.points)) {
             points = value.points.reduce((prev, curr) => {
-                return Object.assign(prev, { [curr.x]: curr.y })
-            }, {})
+                return Object.assign(prev, { [curr.x]: curr.y });
+            }, {});
         } else {
-            points = value.points
+            points = value.points;
         }
-        return { name: value.title, data: points }
-    })
-}
+        return { name: value.title, data: points };
+    });
+};
 
-const singleDataSeries = (dataSeries) => dataSeries.reduce((prev, curr) => Object.assign(prev, { [curr.title]: curr.value }), {})
+const singleDataSeries = (dataSeries) => dataSeries.reduce((prev, curr) => Object.assign(prev, { [curr.title]: curr.value }), {});
 
 
-export { multipleDataSeries, singleDataSeries }
+export { multipleDataSeries, singleDataSeries };

package/components/component.vue

@@ -1,33 +1,38 @@
 <template>
-  <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-textarea v-else-if="spec.view == 'fields/textarea-v1'" :spec="spec" />
+  <Suspense>
+    <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" />
+    <!-- <fields-file v-else-if="spec.view == 'fields/file-v1'" :spec="spec" />
   <fields-select v-else-if="spec.view == 'fields/select-v1'" :spec="spec" />
   <fields-dynamicSelect
     v-else-if="spec.view == 'fields/dynamicSelect-v1'"
     :spec="spec"
   /> -->
-  <!-- <fields-country v-else-if="spec.view == 'fields/country-v1'" :spec="spec" /> -->
+    <!-- <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-latLong v-else-if="spec.view == 'fields/latLong-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" /> -->
+    <!-- <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" />
+    <!-- This component manages its own mouse events, so don't auto-initialize it. -->
+    <button ref="delegate" v-else-if="name == 'button'" :spec="spec" />
 
-  <component v-else-if="name" :is="name" :id="spec.id" ref="delegate" :spec="spec"
-    @[menter]="handlePopover(spec.onMouseEnter)" @[mleave]="handlePopover(spec.onMouseLeave)" />
-  <div v-else>Unsupported view: {{ spec.view }}</div>
+    <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>
 </template>
 
 <script>
+import { getCurrentInstance } from 'vue';
+import { defineAsyncComponent } from "vue";
+
 import H1 from "./h1.vue";
 import H2 from "./h2.vue";
 import H3 from "./h3.vue";
@@ -39,7 +44,7 @@ import P from "./p.vue";
 import Markdown from "./markdown.vue";
 import Html from "./html.vue";
 import Chip from "./chip.vue";
-import Datetime from "./datetime.vue";
+const Datetime = defineAsyncComponent(() => import("./datetime.vue"));
 
 import ProgressBar from "./progressbar.vue";
 import ProgressCircle from "./progressCircle.vue";
@@ -55,7 +60,7 @@ import Switch from "./switch.vue";
 import Hr from "./hr.vue";
 import Spacer from "./spacer.vue";
 
-// import Map from "./map.vue";
+const Map = defineAsyncComponent(() => import("./map.vue"));
 import TabBar from "./tabBar.vue";
 import Calendar from "./calendar.vue";
 
@@ -65,7 +70,7 @@ import SubmitField from "./fields/submit.vue";
 import TextAreaField from "./fields/textarea.vue";
 const RichTextField = defineAsyncComponent(() => import("./fields/richText.vue"));
 // import NewRichTextField from "./fields/newRichText.vue";
-import FileField from "./fields/file.vue";
+const FileField = defineAsyncComponent(() => import("./fields/file.vue"));
 import AutocompleteField from "./fields/autocomplete.vue";
 import SelectField from "./fields/select.vue";
 import TimeZoneField from "./fields/timeZone.vue";
@@ -77,14 +82,14 @@ import CheckGroupField from "./fields/checkGroup.vue";
 import CheckField from "./fields/check.vue";
 import DateField from "./fields/date.vue";
 import DateTimeField from "./fields/datetime.vue";
-import LocationField from "./fields/location.vue";
+const LocationField = defineAsyncComponent(() => import("./fields/location.vue"));
 import GooglePlaceField from "./fields/googlePlace.vue";
 import DynamicGroupField from "./fields/dynamicGroup.vue";
 import StripeTokenField from "./fields/stripeToken.vue";
 import StripeExternalAccount from "./fields/stripeExternalAccount.vue";
 import CreditCardField from "./fields/creditCard.vue";
 import RatingField from "./fields/rating.vue";
-import PhoneField from "./fields/phone/field.vue";
+const PhoneField = defineAsyncComponent(() => import("./fields/phone/field.vue"));
 import TimerField from "./fields/timer.vue";
 import OtpField from "./fields/otpField.vue";
 
@@ -110,16 +115,12 @@ import MultimediaVideo from "./multimedia/video.vue";
 import AlertBanner from "./banners/alert.vue";
 import SelectBanner from "./banners/select.vue";
 
-const LineChart = defineAsyncComponent(() => import("./charts/line.vue"));
-const ColumnChart = defineAsyncComponent(() => import("./charts/column.vue"));
-const PieChart = defineAsyncComponent(() => import("./charts/pie.vue"));
-const AreaChart = defineAsyncComponent(() => import("./charts/area.vue"));
+import LineChart from "./charts/line.vue";
+import ColumnChart from "./charts/column.vue";
+import PieChart from "./charts/pie.vue";
+import AreaChart from "./charts/area.vue";
 
-import ShareButton from "./shareButton.vue";
-import Action from "../action";
-
-import { getCurrentInstance } from 'vue';
-import { defineAsyncComponent } from "vue";
+const ShareButton = defineAsyncComponent(() => import("./shareButton.vue"));
 
 export default {
   components: {
@@ -149,7 +150,7 @@ export default {
     "views-hr": Hr,
     "views-spacer": Spacer,
 
-    // "views-map": Map,
+    "views-map": Map,
     "views-tabBar": TabBar,
     "views-calendar": Calendar,
     "views-shareButton": ShareButton,
@@ -232,14 +233,7 @@ export default {
     spec: {
       handler(spec) {
         const name = Utils.app.componentName(spec.view);
-        const strict = true;
-        if (strict) {
-          this.name = name;
-        } else {
-          if (getCurrentInstance().appContext.app.components[name]) {
-            this.name = name;
-          }
-        }
+        this.name = name;
       },
       immediate: true
     }

package/components/composable/gmap.js

@@ -0,0 +1,153 @@
+import { onMounted, ref, nextTick } from "vue";
+import { MarkerClusterer } from "@googlemaps/markerclusterer";
+
+function waitForGmapLoaded() {
+  return new Promise((resolve) => {
+    let intervalId = setInterval(() => {
+      if (window._gmapLoaded && window.google) {
+        clearInterval(intervalId);
+        resolve(true);
+      }
+    }, 150);
+  });
+}
+
+export function useAutocomplete({ inputRef, options, onPlaceChanged }) {
+  let autocompleteInstance = null;
+  onMounted(() => {
+    let inputElement = null;
+    if (inputRef.value instanceof HTMLElement) {
+      inputElement = inputRef.value;
+    } else {
+      inputElement = inputRef.value.$el.querySelector("input[type='text']");
+    }
+
+    autocompleteInstance = new google.maps.places.Autocomplete(inputElement, options);
+
+    if (onPlaceChanged) {
+      autocompleteInstance.addListener('place_changed', () => onPlaceChanged(autocompleteInstance));
+    }
+  });
+
+  return { autocompleteInstance };
+}
+
+export function useGmap({ mapRef, infoWindowRef, options, locations, showCluster = false, showDirection = false }) {
+  let mapInstance = null;
+  const markers = ref([]);
+  const cluster = ref({});
+  const selectedMarker = ref({});
+
+  let infoWindow = null;
+
+  const drawDirection = () => {
+    let directionService = new google.maps.DirectionsService();
+    let directionDisplay = new google.maps.DirectionsRenderer();
+
+    for (let l = 0; l < locations.length; l++) {
+      for (let i = 0; i < locations[l].length; i++) {
+        let travel = {
+          origin: locations[l][i],
+          destination: locations[l][i + 1],
+          travelMode: "DRIVING"
+        };
+
+        if (!travel.destination) {
+          break;
+        }
+
+        directionService.route(travel, (response, status) => {
+          if (status === "OK") {
+            directionDisplay = new google.maps.DirectionsRenderer({
+              suppressMarkers: true,
+              polylineOptions: {
+                strokeColor: "#2ab3a6",
+                stropeOpacity: 0.8,
+                strokeWeight: 5
+              }
+            });
+            directionDisplay.setMap(mapInstance);
+            directionDisplay.setDirections(response);
+          }
+        });
+      }
+    }
+  };
+
+  const updateMarkers = (locations) => {
+    // remove old markers
+    if (showCluster && cluster.value.length >= 1) {
+      cluster.value.clearMarkers();
+    }
+
+    if (markers.value && markers.value.length >= 1) {
+      markers.value.forEach((marker) => marker.setMap(null));
+    }
+
+    // show the new one
+    if (locations && locations.length >= 1) {
+      markers.value = locations.map((value) => {
+        const marker = new google.maps.Marker({
+          position: value,
+          map: mapInstance
+        });
+
+        if (value.infoWindow) {
+          marker.addListener('click', () => {
+            selectedMarker.value = value;
+
+            nextTick(() => {
+              infoWindow.setContent(infoWindowRef.value);
+
+              infoWindow.open({
+                map: mapInstance,
+                anchor: marker
+              });
+            });
+
+          });
+        }
+
+        return marker;
+      });
+    }
+
+    if (showCluster) {
+      cluster.value = new MarkerClusterer({ map: mapInstance, markers: markers.value });
+    }
+  };
+
+  const mapPromise = () => {
+    return new Promise((resolve) => {
+      let intervalId = setInterval(() => {
+        if (mapInstance) {
+          clearInterval(intervalId);
+          resolve(mapInstance);
+        }
+      }, 50);
+    });
+  };
+
+  onMounted(async () => {
+    await waitForGmapLoaded();
+    // initialize static info window (only one info window per one map)
+    infoWindow = new google.maps.InfoWindow;
+
+    const defaultOptions = {
+      zoom: 4,
+      center: { lat: -42.162376, lng: 172.671437 },
+      mapId: Math.random().toString(36).slice(2, 7)
+    };
+
+    mapInstance = new google.maps.Map(mapRef.value, { ...defaultOptions, ...options });
+
+    if (locations) {
+      updateMarkers([locations].flat());
+    }
+  });
+
+  return { updateMarkers, mapPromise, mapInstance, selectedMarker, drawDirection };
+}
+
+
+