From 4e80d8898a5d57e6f876c6d038bd243871b759f1 Mon Sep 17 00:00:00 2001
From: Fawad Mirzad <mirzad@arndtteunissen.de>
Date: Thu, 6 May 2021 09:36:15 +0200
Subject: [PATCH] Revert autocomplete component is removed

---
 package.json                       |  2 +-
 src/components/autocomplete.vue    | 79 ++++++++++++++++++++++++++++++
 src/components/autocompleteImpl.js | 73 +++++++++++++++++++++++++++
 src/main.js                        |  6 +--
 4 files changed, 156 insertions(+), 4 deletions(-)
 create mode 100644 src/components/autocompleteImpl.js

diff --git a/package.json b/package.json
index 3d3930f..bf3402b 100644
--- a/package.json
+++ b/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": [
diff --git a/src/components/autocomplete.vue b/src/components/autocomplete.vue
index e69de29..c5ab04f 100644
--- a/src/components/autocomplete.vue
+++ b/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>
diff --git a/src/components/autocompleteImpl.js b/src/components/autocompleteImpl.js
new file mode 100644
index 0000000..f79a641
--- /dev/null
+++ b/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,
+  },
+}
diff --git a/src/main.js b/src/main.js
index 08e4d4e..9bc71d0 100644
--- a/src/main.js
+++ b/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)
   }
 }