fix(v3): add type define-emit declarations

- Add new events to the component event list - Improve some jsdoc comments
diegoazh · Mar 31, 2024 · fb29c9c · fb29c9c
1 parent 9b52709
commit fb29c9c
Show file tree

Hide file tree

Showing 17 changed files with 228 additions and 123 deletions.
diff --git a/packages/v3/src/components/autocomplete-input.vue b/packages/v3/src/components/autocomplete-input.vue
@@ -12,12 +12,6 @@
   </div>
 </template>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
-
 <script lang="ts" setup>
 import {
   bindGoogleMapsEventsToVueEventsOnSetup,
@@ -78,7 +72,9 @@ const props = withDefaults(
  * TEMPLATE REF, ATTRIBUTES, EMITTERS AND SLOTS
  ******************************************************************************/
 const gmvAutoCompleteInput = ref<HTMLInputElement | null>(null);
-const emits = defineEmits(getComponentEventsConfig('GmvAutocomplete'));
+const emits = defineEmits<{
+  place_changed: [value: google.maps.places.PlaceResult];
+}>();
 
 /*******************************************************************************
  * INJECT
@@ -130,12 +126,6 @@ onMounted(() => {
         downArrowSimulator(scopedInput);
       }
 
-      if (typeof google.maps.places.Autocomplete !== 'function') {
-        throw new Error(
-          "google.maps.places.Autocomplete is undefined. Did you add 'places' to libraries when loading Google Maps?",
-        );
-      }
-
       const autocompleteOptions: IAutoCompleteInputVueComponentProps & {
         [key: string]: any;
       } = {
@@ -146,6 +136,13 @@ onMounted(() => {
       const { Autocomplete } = (await google.maps.importLibrary(
         'places',
       )) as google.maps.PlacesLibrary;
+
+      if (typeof Autocomplete !== 'function') {
+        throw new Error(
+          "google.maps.places.Autocomplete is undefined. Did you add 'places' to libraries when loading Google Maps?",
+        );
+      }
+
       autoCompleteInstance = new Autocomplete(scopedInput, autocompleteOptions);
 
       const autoCompletePropsConfig =
@@ -158,14 +155,14 @@ onMounted(() => {
       bindPropsWithGoogleMapsSettersAndGettersOnSetup(
         autoCompletePropsConfig,
         autoCompleteInstance,
-        emits,
+        emits as any,
         props,
       );
 
       bindGoogleMapsEventsToVueEventsOnSetup(
         autoCompleteEventsConfig,
         autoCompleteInstance,
-        emits,
+        emits as any,
         excludedEvents,
       );
 

diff --git a/packages/v3/src/components/circle-shape.vue b/packages/v3/src/components/circle-shape.vue
@@ -50,7 +50,21 @@ const props = withDefaults(
 /*******************************************************************************
  * TEMPLATE REF, ATTRIBUTES, EMITTERS AND SLOTS
  ******************************************************************************/
-const emits = defineEmits(getComponentEventsConfig('GmvCircle'));
+const emits = defineEmits<{
+  center_changed: [];
+  click: [value: google.maps.MapMouseEvent];
+  dblclick: [value: google.maps.MapMouseEvent];
+  drag: [value: google.maps.MapMouseEvent];
+  dragend: [value: google.maps.MapMouseEvent];
+  dragstart: [value: google.maps.MapMouseEvent];
+  mousedown: [value: google.maps.MapMouseEvent];
+  mousemove: [value: google.maps.MapMouseEvent];
+  mouseout: [value: google.maps.MapMouseEvent];
+  mouseover: [value: google.maps.MapMouseEvent];
+  mouseup: [value: google.maps.MapMouseEvent];
+  radius_changed: [value: void];
+  rightclick: [value: google.maps.MapMouseEvent];
+}>();
 
 /*******************************************************************************
  * INJECT
@@ -96,13 +110,13 @@ const promise = mapPromise
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       circleShapePropsConfig,
       circleShapeInstance,
-      emits,
+      emits as any,
       props,
     );
     bindGoogleMapsEventsToVueEventsOnSetup(
       circleShapeEventsConfig,
       circleShapeInstance,
-      emits,
+      emits as any,
       excludedEvents,
     );
 

diff --git a/packages/v3/src/components/cluster-icon.vue b/packages/v3/src/components/cluster-icon.vue
@@ -49,7 +49,20 @@ const props = withDefaults(
 /*******************************************************************************
  * TEMPLATE REF, ATTRIBUTES, EMITTERS AND SLOTS
  ******************************************************************************/
-const emits = defineEmits(getComponentEventsConfig('GmvCluster'));
+const emits = defineEmits<{
+  clusteringbegin: [];
+  clusteringend: [];
+  click: [value: google.maps.MapMouseEvent];
+  rightclick: [value: google.maps.MapMouseEvent];
+  dblclick: [value: google.maps.MapMouseEvent];
+  drag: [value: google.maps.MapMouseEvent];
+  dragend: [value: google.maps.MapMouseEvent];
+  dragstart: [value: google.maps.MapMouseEvent];
+  mousedown: [value: google.maps.MapMouseEvent];
+  mouseout: [value: google.maps.MapMouseEvent];
+  mouseover: [value: google.maps.MapMouseEvent];
+  mouseup: [value: google.maps.MapMouseEvent];
+}>();
 
 /*******************************************************************************
  * INJECT
@@ -105,14 +118,14 @@ const promise = mapPromise
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       clusterIconPropsConfig,
       clusterInstance,
-      emits,
+      emits as any,
       props,
     );
 
     bindGoogleMapsEventsToVueEventsOnSetup(
       clusterIconEventsConfig,
       clusterInstance,
-      emits,
+      emits as any,
       excludedEvents,
     );
 

diff --git a/packages/v3/src/components/drawing-manager.vue b/packages/v3/src/components/drawing-manager.vue
@@ -69,7 +69,17 @@ const props = withDefaults(
 /*******************************************************************************
  * TEMPLATE REF, ATTRIBUTES, EMITTERS AND SLOTS
  ******************************************************************************/
-const emits = defineEmits(getComponentEventsConfig('GmvDrawingManager'));
+const emits = defineEmits<{
+  circlecomplete: [value: google.maps.Circle];
+  markercomplete: [value: google.maps.Marker];
+  polygoncomplete: [value: google.maps.Polygon];
+  polylinecomplete: [value: google.maps.Polyline];
+  rectanglecomplete: [value: google.maps.Rectangle];
+  overlaycomplete: [value: google.maps.drawing.OverlayCompleteEvent];
+  'update:shapes': [value: google.maps.drawing.OverlayCompleteEvent[]];
+  'added:shape': [value: google.maps.drawing.OverlayCompleteEvent];
+  'removed:shape': [value: google.maps.drawing.OverlayCompleteEvent];
+}>();
 const $slots = useSlots();
 
 /*******************************************************************************
@@ -138,13 +148,13 @@ const promise = mapPromise
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       drawingManagerPropsConfig,
       drawingManagerInstance,
-      emits,
+      emits as any,
       props,
     );
     bindGoogleMapsEventsToVueEventsOnSetup(
       drawingManagerEventsConfig,
       drawingManagerInstance,
-      emits,
+      emits as any,
       excludedEvents,
     );
 

diff --git a/packages/v3/src/components/heatmap-layer.vue b/packages/v3/src/components/heatmap-layer.vue
@@ -16,6 +16,7 @@ import { inject, onUnmounted, provide, watch } from 'vue';
  * @displayName GmvHeatmapLayer
  * @see [source code](/guide/heatmap-layer.html#source-code)
  * @see [Official documentation](https://developers.google.com/maps/documentation/javascript/heatmaplayer)
+ * @see [Official reference](https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayer)
  */
 
 /*******************************************************************************
@@ -43,7 +44,15 @@ const props = withDefaults(
 /*******************************************************************************
  * TEMPLATE REF, ATTRIBUTES, EMITTERS AND SLOTS
  ******************************************************************************/
-const emits = defineEmits(getComponentEventsConfig('GmvHeatmapLayer'));
+const emits = defineEmits<{
+  data_changed: [
+    value:
+      | google.maps.MVCArray<
+          google.maps.LatLng | google.maps.visualization.WeightedLocation
+        >
+      | (google.maps.LatLng | google.maps.visualization.WeightedLocation)[],
+  ];
+}>();
 
 /*******************************************************************************
  * INJECT
@@ -89,14 +98,14 @@ const promise = mapPromise
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       heatmapLayerPropsConfig,
       heatMapLayerInstance,
-      emits,
+      emits as any,
       props,
     );
 
     bindGoogleMapsEventsToVueEventsOnSetup(
       heatmapLayerEventsConfig,
       heatMapLayerInstance,
-      emits,
+      emits as any,
       excludedEvents,
     );
 
@@ -124,6 +133,7 @@ watch(
     if (heatMapLayerInstance) {
       if (value && value !== oldValue) {
         heatMapLayerInstance.setData(value);
+        emits('data_changed', value);
       }
     }
   },

diff --git a/packages/v3/src/components/index.ts b/packages/v3/src/components/index.ts
@@ -1,16 +1,16 @@
-import Autocomplete from '../components/autocomplete-input.vue';
-import Circle from '../components/circle-shape.vue';
-import Cluster from '../components/cluster-icon.vue';
-import DrawingManager from '../components/drawing-manager.vue';
-import HeatmapLayer from '../components/heatmap-layer.vue';
-import InfoWindow from '../components/info-window.vue';
-import KmlLayer from '../components/kml-layer.vue';
-import MapLayer from '../components/map-layer.vue';
-import Marker from '../components/marker-icon.vue';
-import Polygon from '../components/polygon-shape.vue';
-import Polyline from '../components/polyline-shape.vue';
-import Rectangle from '../components/rectangle-shape.vue';
-import StreetViewPanorama from '../components/street-view-panorama.vue';
+import Autocomplete from '@/components/autocomplete-input.vue';
+import Circle from '@/components/circle-shape.vue';
+import Cluster from '@/components/cluster-icon.vue';
+import DrawingManager from '@/components/drawing-manager.vue';
+import HeatmapLayer from '@/components/heatmap-layer.vue';
+import InfoWindow from '@/components/info-window.vue';
+import KmlLayer from '@/components/kml-layer.vue';
+import MapLayer from '@/components/map-layer.vue';
+import Marker from '@/components/marker-icon.vue';
+import Polygon from '@/components/polygon-shape.vue';
+import Polyline from '@/components/polyline-shape.vue';
+import Rectangle from '@/components/rectangle-shape.vue';
+import StreetViewPanorama from '@/components/street-view-panorama.vue';
 
 export {
   Autocomplete,

diff --git a/packages/v3/src/components/info-window.vue b/packages/v3/src/components/info-window.vue
@@ -55,7 +55,15 @@ const props = withDefaults(
  * TEMPLATE REF, ATTRIBUTES, EMITTERS AND SLOTS
  ******************************************************************************/
 const gmvInfoWindow = ref<HTMLElement | null>(null);
-const emits = defineEmits(getComponentEventsConfig('GmvInfoWindow'));
+const emits = defineEmits<{
+  close: [];
+  closeclick: [];
+  content_changed: [];
+  domready: [];
+  position_changed: [];
+  visible: [];
+  zindex_changed: [];
+}>();
 
 /*******************************************************************************
  * INJECT
@@ -114,14 +122,14 @@ const promise = mapPromise
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       infoWindowPropsConfig,
       infoWindowInstance,
-      emits,
+      emits as any,
       props,
     );
 
     bindGoogleMapsEventsToVueEventsOnSetup(
       infoWindowEventsConfig,
       infoWindowInstance,
-      emits,
+      emits as any,
       excludedEvents,
     );
 

diff --git a/packages/v3/src/components/kml-layer.vue b/packages/v3/src/components/kml-layer.vue
@@ -42,7 +42,11 @@ const props = withDefaults(
 /*******************************************************************************
  * TEMPLATE REF, ATTRIBUTES, EMITTERS AND SLOTS
  ******************************************************************************/
-const emits = defineEmits(getComponentEventsConfig('GmvKmlLayer'));
+const emits = defineEmits<{
+  click: [value: google.maps.KmlMouseEvent];
+  defaultviewport_changed: [];
+  status_changed: [];
+}>();
 
 /*******************************************************************************
  * INJECT
@@ -84,13 +88,13 @@ const promise = mapPromise
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       kmlLayerPropsConfig,
       kmlLayerInstance,
-      emits,
+      emits as any,
       props,
     );
     bindGoogleMapsEventsToVueEventsOnSetup(
       kmlLayerEventsConig,
       kmlLayerInstance,
-      emits,
+      emits as any,
       excludedEvents,
     );
 

diff --git a/packages/v3/src/components/map-layer.vue b/packages/v3/src/components/map-layer.vue
@@ -66,6 +66,7 @@ const props = withDefaults(
     heading?: number;
     isFractionalZoomEnabled?: boolean;
     keyboardShortcuts?: boolean;
+    mapId?: string;
     mapTypeControl?: boolean;
     mapTypeControlOptions?: google.maps.MapTypeControlOptions;
     mapTypeId?: google.maps.MapTypeId;
@@ -109,7 +110,30 @@ const props = withDefaults(
  * TEMPLATE REF, ATTRIBUTES AND EMITTERS
  ******************************************************************************/
 const gmvMap = ref<HTMLElement | null>(null);
-const emits = defineEmits(getComponentEventsConfig('GmvMap'));
+const emits = defineEmits<{
+  bounds_changed: [value: google.maps.LatLngBounds | undefined];
+  center_changed: [value: google.maps.LatLng | undefined];
+  click: [value: google.maps.MapMouseEvent | google.maps.IconMouseEvent];
+  contextmenu: [value: google.maps.MapMouseEvent];
+  dblclick: [value: google.maps.MapMouseEvent];
+  drag: [];
+  dragend: [];
+  dragstart: [];
+  heading_changed: [];
+  idle: [];
+  isfractionalzoomenabled_changed: [];
+  mapcapabilities_changed: [];
+  maptypeid_changed: [];
+  mousemove: [value: google.maps.MapMouseEvent];
+  mouseout: [value: google.maps.MapMouseEvent];
+  mouseover: [value: google.maps.MapMouseEvent];
+  projection_changed: [];
+  renderingtype_changed: [];
+  tilesloaded: [];
+  tilt_changed: [];
+  zoom_changed: [value: number | undefined];
+  resize: [];
+}>();
 
 /*******************************************************************************
  * RECYCLE KEY
@@ -319,15 +343,15 @@ onMounted(() => {
       bindPropsWithGoogleMapsSettersAndGettersOnSetup(
         mapLayerPropsConfig,
         mapInstance,
-        emits,
+        emits as any,
         props,
       );
 
       // Auto bind all events by default
       bindGoogleMapsEventsToVueEventsOnSetup(
         mapLayerEventsConfig,
         mapInstance,
-        emits,
+        emits as any,
         excludedEvents,
       );