glib-web 2.4.1 → 3.0.0-beta1

package/components/map.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <div ref="map" :style="genericStyles()"></div> -->
   <gmap-map
     ref="map"
     :center="center"
@@ -43,19 +42,48 @@
       </gmap-marker>
     </gmap-cluster>
     <template v-else>
-      <gmap-custom-marker
-        v-for="(marker, index) in markers"
-        :key="index"
-        :marker="{ lat: marker.latitude, lng: marker.longitude }"
-        @click.native="onMarkerClick(marker, index)"
-      >
-        <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
-        <common-icon
-          v-else
-          class="marker"
-          :spec="{ material: { name: 'place', size: 40 }, color: '#c92b2a' }"
-        />
-      </gmap-custom-marker>
+      <template v-if="spec.direction">
+        <gmap-custom-marker
+          v-for="(marker, index) in markers"
+          :key="index"
+          :marker="{ lat: marker.latitude, lng: marker.longitude }"
+          @click.native="onMarkerClick(marker, index)"
+        >
+          <div class="marker-wrapper">
+            <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
+            <common-icon
+              v-else
+              class="marker"
+              :spec="{
+                material: { name: 'circle', size: 40 },
+                color: marker.markerColor
+              }"
+            />
+            <p class="marker-number">{{ marker.markerNumber }}</p>
+          </div>
+        </gmap-custom-marker>
+      </template>
+      <template v-else>
+        <gmap-custom-marker
+          v-for="(marker, index) in markers"
+          :key="index"
+          :marker="{ lat: marker.latitude, lng: marker.longitude }"
+          @click.native="onMarkerClick(marker, index)"
+        >
+          <div class="marker-wrapper">
+            <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
+            <common-icon
+              v-else
+              class="marker"
+              :spec="{
+                material: { name: 'place', size: 40 },
+                color: '#c92b2a'
+              }"
+            />
+            <p class="marker-number">{{ marker.markerNumber }}</p>
+          </div>
+        </gmap-custom-marker>
+      </template>
     </template>
   </gmap-map>
 </template>
@@ -85,9 +113,35 @@ export default {
       selectedMarker: null,
       center: { lat: 0, lng: 0 },
       zoom: 11,
-      markers: []
+      markers: [],
+      locations: this.spec.locations
     };
   },
+  // mounted: function() {
+  //   // switch (this.spec.provider) {
+  //   // case 'baidu':
+  //   //   this.renderBaiduMap()
+  //   //   break
+  //   // default:
+  //   //   this.renderGoogleMap()
+  //   // }
+  //   const { latitude, longitude, zoom } = this.spec
+  //   this.updateMapCenter(latitude, longitude)
+  //   this.zoom = zoom
+
+  //   this.fetchMarkers()
+  // }
+  mounted: function() {
+    // use $nextTick instead setTimeout
+    // https://stackoverflow.com/questions/57847474/react-and-vue-google-map-api-remove-rendered-direction-before-setting-a-new-one
+    this.$nextTick(function() {
+      this.$gmapApiPromiseLazy().then(() => {
+        if (this.spec.direction === true) {
+          this.drawLineBetweenPoint();
+        }
+      });
+    });
+  },
   methods: {
     // See https://stackoverflow.com/questions/37597324/markercluster-one-marker-for-a-group for calculator example
     _calculator(markers, numStyles) {
@@ -195,26 +249,58 @@ export default {
       const { center } = this.$refs.map.$mapObject;
       this.updateMapCenter(center.lat(), center.lng());
       this.fetchMarkers();
+    },
+    drawLineBetweenPoint() {
+      let directionService = new window.google.maps.DirectionsService();
+      let directionDisplay = new window.google.maps.DirectionsRenderer();
+
+      for (let l = 0; l < this.locations.length; l++) {
+        for (let i = 0; i < this.locations[l].length; i++) {
+          let travel = {
+            origin: this.locations[l][i],
+            destination: this.locations[l][i + 1],
+            travelMode: "DRIVING"
+          };
+
+          directionService.route(travel, (response, status) => {
+            if (status === "OK") {
+              let map = this.$refs.map;
+              directionDisplay = new window.google.maps.DirectionsRenderer({
+                suppressMarkers: true,
+                polylineOptions: {
+                  strokeColor: "#2ab3a6",
+                  stropeOpacity: 0.8,
+                  strokeWeight: 5
+                }
+              });
+              directionDisplay.setMap(map.$mapObject);
+              directionDisplay.setDirections(response);
+            }
+          });
+        }
+      }
     }
   }
-  // mounted: function() {
-  //   // switch (this.spec.provider) {
-  //   // case 'baidu':
-  //   //   this.renderBaiduMap()
-  //   //   break
-  //   // default:
-  //   //   this.renderGoogleMap()
-  //   // }
-  //   const { latitude, longitude, zoom } = this.spec
-  //   this.updateMapCenter(latitude, longitude)
-  //   this.zoom = zoom
-
-  //   this.fetchMarkers()
-  // }
 };
 </script>
 
 <style lang="scss" scoped>
+.marker-wrapper {
+  position: relative;
+  width: 40px;
+  height: 40px;
+}
+
+.marker-number {
+  font-weight: 800;
+  font-size: 16px;
+  position: absolute;
+  top: 6px;
+  width: 40px;
+  text-align: center;
+  color: white;
+}
+
 .marker {
   width: 40px;
   height: 40px;

package/components/markdown.vue

@@ -2,12 +2,9 @@
   <div :style="genericStyles()" :class="$classes()">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <span v-html="compiledText"></span>
-    <div
-      v-if="youtubeId"
-      :style="`width: 320px; overflow: hidden; max-height: 180px;`"
-    >
+    <!-- <div v-if="youtubeId" :style="`width: 320px; overflow: hidden; max-height: 180px;`">
       <youtube :video-id="youtubeId" fit-parent></youtube>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -23,7 +20,7 @@ export default {
   },
   computed: {
     compiledText() {
-      return Utils.format.markdown(this.spec.text);
+      return Utils.format.markdown(this.spec.text || '');
     }
   },
   methods: {
@@ -58,45 +55,55 @@ export default {
 
 <style lang="scss">
 .views-markdown {
-  & > span > :last-child {
+  &>span> :last-child {
     margin-bottom: 0;
   }
+
   pre {
     background-color: #f0f0f0;
     padding: 8px 10px;
 
-    & > code {
+    &>code {
       background-color: transparent;
       padding: 0;
     }
   }
 }
+
 .line-clamp {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
 .line-clamp-1 {
   -webkit-line-clamp: 1;
 }
+
 .line-clamp-2 {
   -webkit-line-clamp: 2;
 }
+
 .line-clamp-3 {
   -webkit-line-clamp: 3;
 }
+
 .line-clamp-4 {
   -webkit-line-clamp: 4;
 }
+
 .line-clamp-5 {
   -webkit-line-clamp: 5;
 }
+
 .line-clamp-6 {
   -webkit-line-clamp: 6;
 }
+
 .line-clamp-7 {
   -webkit-line-clamp: 7;
 }
+
 .line-clamp-8 {
   -webkit-line-clamp: 8;
 }

package/components/mixins/events.js

@@ -36,12 +36,12 @@ export default {
     this._executeIfReady(true);
     this.$updated();
   },
-  destroyed() {
+  unmounted() {
     this.$tearDown();
   },
   watch: {
     // See Utils.http
-    "$root.vueApp.isStale": function(val, oldVal) {
+    "$root.vueApp.isStale": function (val, oldVal) {
       // Make sure $ready() will be called in the next update
       this._mountedUrl = null;
     }
@@ -60,7 +60,7 @@ export default {
       }
       return null;
     },
-    $onClick: function(explicitEvent, spec) {
+    $onClick: function (explicitEvent, spec) {
       const properties = spec || this.spec;
       const e = explicitEvent || event;
 
@@ -75,7 +75,7 @@ export default {
         Action.execute(properties.onClick, this);
       }
     },
-    $rel: function(spec) {
+    $rel: function (spec) {
       const properties = spec || this.spec;
       const onClick = properties.onClick;
       if (TypeUtils.isObject(onClick)) {
@@ -92,12 +92,12 @@ export default {
     $onLongPress() {
       GLib.action.execute(this.spec.onLongPress, this);
     },
-    $addViewportChangeListeners: function(handler) {
+    $addViewportChangeListeners: function (handler) {
       window.addEventListener("load", handler);
       window.addEventListener("resize", handler);
       this._pageBody.addEventListener("scroll", handler);
     },
-    $removeViewportChangeListeners: function(handler) {
+    $removeViewportChangeListeners: function (handler) {
       window.removeEventListener("load", handler);
       window.removeEventListener("resize", handler);
       this._pageBody.removeEventListener("scroll", handler);
@@ -152,6 +152,17 @@ export default {
     $updated() {
       // To be overridden
     },
+    $recursiveUpdate() {
+      this.$ready();
+      this.$forceUpdate();
+
+      // Execute on next tick to ensure that the child has received the updated spec.
+      this.$nextTick(() => {
+        this.$children.find(child => {
+          child.$recursiveUpdate();
+        });
+      });
+    },
     $dispatchEvent(name, data) {
       const event = new Event(name, { bubbles: true });
 

package/components/mixins/styles.js

@@ -1,8 +1,8 @@
 import Hash from "../../utils/hash";
-import Vue from "vue";
+import { Vue } from "../../index"
 import launch from "../../utils/launch";
 
-var jsonLogic = require("json-logic-js");
+import jsonLogic from 'json-logic-js';
 
 // jsonLogic.add_operation("add_ms", function(a, b) {
 //   if (Utils.type.isString(a)) {
@@ -12,7 +12,7 @@ var jsonLogic = require("json-logic-js");
 //   return null;
 // });
 export default {
-  data: function() {
+  data: function () {
     return {
       _fieldModels: {},
       fieldName: null,
@@ -36,17 +36,13 @@ export default {
     }
   },
   watch: {
-    fieldModel: function(val, oldVal) {
+    fieldModel: function (val, oldVal) {
       if (val === this.vuetifyEmptyString) {
         val = "";
       }
 
       // Make the field property observable for dynamic showing/hiding
-      Vue.set(
-        this.$data._fieldModels,
-        this.fieldName,
-        this.$internalizeValue(val)
-      );
+      Object.assign(this.$data._fieldModels, { [this.fieldName]: this.$internalizeValue })
 
       this._checkDirtyState(val, oldVal);
     }
@@ -125,17 +121,17 @@ export default {
         val => (styles["height"] = val)
       );
 
-      Utils.type.ifObject(
-        properties.onClick,
-        () => (styles["cursor"] = "pointer")
-      );
+      // 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);
 
       return new Hash(styles);
     },
-    $length: function(length) {
+    $length: function (length) {
       if (Utils.type.isString(length) || Utils.type.isNumber(length)) {
         switch (length) {
           case "wrapContent":
@@ -191,7 +187,8 @@ export default {
     },
     _linkFieldModels() {
       const hasCondition = this.spec && this.spec.showIf;
-      const name = GLib.component.vueName(this);
+      // const name = GLib.component.vueName(this);
+      const name = (this.spec?.view || '').replace('/', '-')
       const isField = name && name.startsWith("fields-");
       if (hasCondition || isField) {
         const form = this.$closest("panels-form");
@@ -213,6 +210,11 @@ export default {
       const componentName = Utils.app.componentName(properties.view);
       const classes = (properties.styleClasses || []).concat(componentName);
 
+      Utils.type.ifObject(properties.onClick, () =>
+        classes.push("glib-clickable")
+      );
+
+      // This could appear not as before after migration to vuetify 3
       Utils.type.ifArray(properties.styleClasses, val => {
         if (val.includes("card")) {
           classes.push("v-card");
@@ -224,6 +226,7 @@ export default {
           }
         }
       });
+
       return classes;
     }
   }

package/components/panels/column.vue

@@ -22,7 +22,7 @@ import Hash from "../../utils/hash";
 
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
@@ -30,7 +30,7 @@ export default {
       lg: {},
       md: {},
       sm: {},
-      xs: {}
+      xs: {},
     };
   },
   methods: {
@@ -47,7 +47,7 @@ export default {
     },
     cssStyles() {
       const styles = Object.assign({}, this.$styles());
-      switch (this.$vuetify.breakpoint.name) {
+      switch ("xl") {
         case "xl":
           this.applyStyles(styles, this.xs);
           this.applyStyles(styles, this.sm);
@@ -101,8 +101,8 @@ export default {
       Utils.type.ifBoolean(spec.hide, () => {
         styles["display"] = "none";
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/panels/custom.vue

@@ -11,52 +11,52 @@
       This should not be needed if a component (custom or not) uses $styles() or other mixin
       methods because those methods use `spec` attributes, which will force $ready() to be called.
     -->
-    <component
-      :is="template"
-      v-if="customData"
-      :name="spec.template"
-      :spec="customData"
-    />
+    <component :is="template" v-if="customData" :name="spec.template" :spec="customData" />
   </div>
 </template>
 
 <script>
-import UnsupportedTemplate from "../../templates/unsupported";
-import ThumbnailTemplate from "../../templates/thumbnail";
-import FeaturedTemplate from "../../templates/featured";
+import UnsupportedTemplate from "../../templates/unsupported.vue";
+import ThumbnailTemplate from "../../templates/thumbnail.vue";
+import FeaturedTemplate from "../../templates/featured.vue";
+import { getCurrentInstance } from 'vue';
 
 export default {
   components: {
     "template-thumbnail": ThumbnailTemplate,
     "template-featured": FeaturedTemplate,
-    "template-unsupported": UnsupportedTemplate
+    "template-unsupported": UnsupportedTemplate,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
-      customData: null
+      customData: null,
     };
   },
   computed: {
     template() {
+
       const name = `template-${this.spec.template.replace("/", "-")}`;
-      const strict = false;
+      const strict = true;
       if (strict) {
         return name;
       } else {
-        if (this.$options.components[name]) {
+        if (getCurrentInstance().appContext.components[name]) {
           return name;
         }
         return "template-unsupported";
       }
-    }
+    },
   },
   methods: {
     $ready() {
       const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};
       this.customData = Object.assign(onClick, this.spec.data);
+    },
+    $registryEnabled() {
+      return false;
     }
   }
 };

package/components/panels/flow.vue

@@ -1,11 +1,17 @@
 <template>
-  <div :class="cssClasses" :style="cssStyles">
-    <template v-for="(item, index) in spec.childViews">
+  <div
+    :class="cssClasses"
+    :style="cssStyles"
+  >
+    <template
+      v-for="(item, index) in spec.childViews"
+      :key="index"
+    >
       <!--
         The wrapper prevents its content (e.g. image component) from getting stretched to fill
         remaining space on the new line.
       -->
-      <div :key="index" :style="innerStyles">
+      <div :style="innerStyles">
         <glib-component :spec="item" />
       </div>
     </template>
@@ -15,10 +21,10 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   computed: {
-    cssClasses: function() {
+    cssClasses: function () {
       const classes = this.$classes().concat("layouts-flow");
       // switch(this.spec.distribution) {
       //   case 'fillEqually':
@@ -30,7 +36,7 @@ export default {
       // }
       return classes;
     },
-    cssStyles: function() {
+    cssStyles: function () {
       const styles = this.$styles();
       // switch(this.spec.align) {
       //   case 'middle':
@@ -46,27 +52,27 @@ export default {
     },
     innerStyles() {
       const styles = {};
-      Utils.type.ifObject(this.spec.innerPadding, padding => {
+      Utils.type.ifObject(this.spec.innerPadding, (padding) => {
         Utils.type.ifNumber(
           padding.top,
-          top => (styles["padding-top"] = `${top}px`)
+          (top) => (styles["padding-top"] = `${top}px`)
         );
         Utils.type.ifNumber(
           padding.bottom,
-          bottom => (styles["padding-bottom"] = `${bottom}px`)
+          (bottom) => (styles["padding-bottom"] = `${bottom}px`)
         );
         Utils.type.ifNumber(
           padding.left,
-          left => (styles["padding-left"] = `${left}px`)
+          (left) => (styles["padding-left"] = `${left}px`)
         );
         Utils.type.ifNumber(
           padding.right,
-          right => (styles["padding-right"] = `${right}px`)
+          (right) => (styles["padding-right"] = `${right}px`)
         );
       });
       return styles;
-    }
-  }
+    },
+  },
 };
 </script>