Merge branch 'feature/typescript-type-definitions'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fawmi/vue-google-maps",
   "description": "Google Map components for Vue.js 3",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "private": false,
   "main": "src/main.js",
   "keywords": [

src/components/autocomplete.vue

@@ -0,0 +1,79 @@
+<template>
+  <input ref="input" v-bind="$attrs" v-on="$attrs" />
+</template>
+
+<script>
+import { bindProps, getPropsValues } from '../utils/bindProps.js'
+import downArrowSimulator from '../utils/simulateArrowDown.js'
+import { mappedPropsToVueProps } from './build-component'
+
+const mappedProps = {
+  bounds: {
+    type: Object,
+  },
+  componentRestrictions: {
+    type: Object,
+    // Do not bind -- must check for undefined
+    // in the property
+    noBind: true,
+  },
+  types: {
+    type: Array,
+    default: function () {
+      return []
+    },
+  },
+}
+
+const props = {
+  selectFirstOnEnter: {
+    required: false,
+    type: Boolean,
+    default: false,
+  },
+  options: {
+    type: Object,
+  },
+}
+
+export default {
+  mounted() {
+    this.$gmapApiPromiseLazy().then(() => {
+      if (this.selectFirstOnEnter) {
+        downArrowSimulator(this.$refs.input)
+      }
+
+      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?"
+        )
+      }
+
+      /* eslint-disable no-unused-vars */
+      const finalOptions = {
+        ...getPropsValues(this, mappedProps),
+        ...this.options,
+      }
+
+      this.$autocomplete = new google.maps.places.Autocomplete(this.$refs.input, finalOptions)
+      bindProps(this, this.$autocomplete, mappedProps)
+
+      this.$watch('componentRestrictions', (v) => {
+        if (v !== undefined) {
+          this.$autocomplete.setComponentRestrictions(v)
+        }
+      })
+
+      // Not using `bindEvents` because we also want
+      // to return the result of `getPlace()`
+      this.$autocomplete.addListener('place_changed', () => {
+        this.$emit('place_changed', this.$autocomplete.getPlace())
+      })
+    })
+  },
+  props: {
+    ...mappedPropsToVueProps(mappedProps),
+    ...props,
+  },
+}
+</script>

src/components/autocompleteImpl.js

@@ -0,0 +1,73 @@
+import { bindProps, getPropsValues } from '../utils/bindProps.js'
+import downArrowSimulator from '../utils/simulateArrowDown.js'
+import { mappedPropsToVueProps } from './build-component'
+
+const mappedProps = {
+  bounds: {
+    type: Object,
+  },
+  componentRestrictions: {
+    type: Object,
+    // Do not bind -- must check for undefined
+    // in the property
+    noBind: true,
+  },
+  types: {
+    type: Array,
+    default: function () {
+      return []
+    },
+  },
+}
+
+const props = {
+  selectFirstOnEnter: {
+    required: false,
+    type: Boolean,
+    default: false,
+  },
+  options: {
+    type: Object,
+  },
+}
+
+export default {
+  mounted() {
+    this.$gmapApiPromiseLazy().then(() => {
+      if (this.selectFirstOnEnter) {
+        downArrowSimulator(this.$refs.input)
+      }
+
+      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?"
+        )
+      }
+
+      /* eslint-disable no-unused-vars */
+      const finalOptions = {
+        ...getPropsValues(this, mappedProps),
+        ...this.options,
+      }
+
+      this.$autocomplete = new google.maps.places.Autocomplete(this.$refs.input, finalOptions)
+      bindProps(this, this.$autocomplete, mappedProps)
+
+      this.$watch('componentRestrictions', (v) => {
+        if (v !== undefined) {
+          this.$autocomplete.setComponentRestrictions(v)
+        }
+      })
+
+      // Not using `bindEvents` because we also want
+      // to return the result of `getPlace()`
+      this.$autocomplete.addListener('place_changed', () => {
+        this.$emit('place_changed', this.$autocomplete.getPlace())
+      })
+    })
+  },
+  props: {
+    ...mappedPropsToVueProps(mappedProps),
+    ...props,
+  },
+}

src/main.js

@@ -8,8 +8,8 @@ import Rectangle from './components/rectangle'
 import Marker from './components/marker.vue'
 import GMapCluster from './components/cluster.vue'
 import InfoWindow from './components/infoWindow.vue'
-import GMapAutocomplete from './components/autocomplete.vue'
 import Map from './components/map.vue'
+import Autocomplete from './components/autocomplete.vue'
 
 import MapElementMixin from './components/mapElementMixin'
 import buildComponent from './components/build-component'
@@ -26,10 +26,10 @@ export {
   GMapCluster,
   Rectangle,
   InfoWindow,
-  GMapAutocomplete,
   Map,
   MapElementMixin,
   buildComponent,
+  Autocomplete,
   MountableMixin,
 }
 
@@ -71,7 +71,7 @@ export default function install(Vue, options) {
     Vue.component('GMapPolygon', Polygon)
     Vue.component('GMapCircle', Circle)
     Vue.component('GMapRectangle', Rectangle)
-    Vue.component('GMapAutocomplete ', GMapAutocomplete )
+    Vue.component('GMapAutocomplete', Autocomplete)
   }
 }