glib-web 2.4.0 → 2.5.0

package/components/_button.vue

@@ -16,7 +16,9 @@
       :tile="$classes().includes('tile')"
       :rounded="$classes().includes('rounded')"
       :depressed="$classes().includes('depressed')"
-      @click.prevent="type == 'submit' ? null : $onClick()"
+      @click.prevent="
+        type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
+      "
       v-on="eventHandlers"
     >
       <span><common-icon :spec="spec.icon || {}"/></span>

package/components/component.vue

@@ -90,6 +90,7 @@ import CreditCardField from "./fields/creditCard";
 import RatingField from "./fields/rating";
 import PhoneField from "./fields/phone/field";
 import TimerField from "./fields/timer";
+import OtpField from "./fields/otpField";
 
 import ScrollPanel from "./panels/scroll";
 import VerticalPanel from "./panels/vertical";
@@ -179,6 +180,7 @@ export default {
     "fields-rating": RatingField,
     "fields-phone": PhoneField,
     "fields-timer": TimerField,
+    "fields-otp": OtpField,
 
     "panels-scroll": ScrollPanel,
     "panels-vertical": VerticalPanel,

package/components/fields/otpField.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <input
+      v-for="(digit, index) in digits"
+      ref="input"
+      :key="index"
+      v-model="otp[index]"
+      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)"
+    />
+    <input type="hidden" :name="spec.name" :value="otpValue" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      digits: 0,
+      otp: []
+    };
+  },
+
+  computed: {
+    otpValue() {
+      // concatenate the digits into a single string
+      return this.otp.join("");
+    }
+  },
+  methods: {
+    $ready() {
+      this.digits = this.spec.lengths;
+      this.otp = Array(this.spec.lengths).fill("");
+    },
+    handleInput(event, index) {
+      if (event.target.value.length === 1) {
+        this.focusNext(index);
+      }
+    },
+    handleKeydown(event, index) {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        this.focusPrevious(index);
+        this.$set(this.otp, index, "");
+      }
+    },
+    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) {
+        this.$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();
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.otp-input {
+  border: 1px solid #47495f;
+  text-align: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  font-size: 24px;
+  margin: 8px;
+}
+</style>

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/panels/horizontal.vue

@@ -6,7 +6,7 @@
     :href="$href()"
     @click="$onClick()"
   >
-    <template v-for="(item, index) in childViews">
+    <template v-for="(item, index) in spec.childViews">
       <glib-component :key="index" :spec="item" />
     </template>
   </component>
@@ -17,11 +17,6 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
-  data() {
-    return {
-      childViews: null
-    };
-  },
   computed: {
     cssClasses: function() {
       const classes = this.$classes().concat("layouts-horizontal");
@@ -63,19 +58,8 @@ export default {
     }
   },
   methods: {
-    $ready() {
-      this.childViews = this.spec.childViews;
-      console.log("C1", this.childViews);
-    },
     $displayValue() {
       return "flex";
-    },
-    action_merge(mergedSpec) {
-      console.log("mergedSpec1", this.spec, this.spec.childViews);
-      Object.assign(this.spec, mergedSpec);
-      console.log("mergedSpec2", this.spec, this.spec.childViews);
-      // this.$refs.delegate.updateData();
-      this.$ready();
     }
   }
 };

package/package.json

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