From a396938c52e62873f0de38c678ed9dd2e135c050 Mon Sep 17 00:00:00 2001
From: Viktor Denisov <websitevirtuoso@gmail.com>
Date: Sun, 16 Oct 2022 00:44:34 -0700
Subject: [PATCH] Ability to customize input in autocomplete

---
 docs/src/components/autocomplete.md | 37 ++++++++++++++++++++++++++---
 package-lock.json                   |  4 ++--
 src/components/autocomplete.vue     | 27 ++++++++++++++++++---
 3 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/docs/src/components/autocomplete.md b/docs/src/components/autocomplete.md
index aaa9c1e..dae581c 100644
--- a/docs/src/components/autocomplete.md
+++ b/docs/src/components/autocomplete.md
@@ -3,8 +3,8 @@
 [[toc]]
 
 
-## Load Google maps places 
-Before using Autocomplete, you should load the places library. 
+## Load Google maps places
+Before using Autocomplete, you should load the places library.
 
 ```vue{5}
 createApp(App)
@@ -20,7 +20,7 @@ createApp(App)
 
 
 ## Add autocomplete to your components
-You can add autocomplete to your maps using GMapAutocomplete component. 
+You can add autocomplete to your maps using GMapAutocomplete component.
 ```vue
 <template>
   <GMapAutocomplete
@@ -45,6 +45,37 @@ export default {
 
 ```
 
+## Custom input for autocomplete
+You can customize input for autocomplete.
+```vue
+<template>
+  <GMapAutocomplete @place_changed="setPlace">
+    <template #input="slotProps">
+      <v-text-field
+        v-bind="slotProps"
+        ref="input"
+        prepend-inner-icon="mdi-map-marker"
+        hide-details
+      />
+    </template>
+  </GMapAutocomplete>
+</template>
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+    }
+  },
+  methods: {
+    setPlace() {
+    }
+  }
+}
+</script>
+
+```
+
 ## Custom options
 You can pass google maps auto complete options using options prop
 
diff --git a/package-lock.json b/package-lock.json
index 7a9d487..65a2be2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-google-maps-community-fork",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-google-maps-community-fork",
-      "version": "0.1.0",
+      "version": "0.1.2",
       "license": "MIT",
       "dependencies": {
         "@googlemaps/markerclusterer": "^2.0.3"
diff --git a/src/components/autocomplete.vue b/src/components/autocomplete.vue
index c5ab04f..7ee1279 100644
--- a/src/components/autocomplete.vue
+++ b/src/components/autocomplete.vue
@@ -1,5 +1,16 @@
 <template>
-  <input ref="input" v-bind="$attrs" v-on="$attrs" />
+  <template v-if="$slots['input']">
+    <slot
+      name="input"
+      v-bind="$attrs"
+    ></slot>
+  </template>
+  <input
+    v-else-if="!$slots['input']"
+    ref="input"
+    v-bind="$attrs"
+    v-on="$attrs"
+  />
 </template>
 
 <script>
@@ -38,9 +49,19 @@ const props = {
 
 export default {
   mounted() {
+    const _this = this;
     this.$gmapApiPromiseLazy().then(() => {
+      // get correct input from fallback or slot
+      let refInput = _this.$refs.input
+      if (_this.$slots.input) {
+        const refName = _this.$slots.input()[0].props.ref;
+        const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName];
+        if (scopedInput) {
+          refInput = scopedInput.$el.getElementsByTagName('input')[0];
+        }
+      }
       if (this.selectFirstOnEnter) {
-        downArrowSimulator(this.$refs.input)
+        downArrowSimulator(refInput)
       }
 
       if (typeof google.maps.places.Autocomplete !== 'function') {
@@ -55,7 +76,7 @@ export default {
         ...this.options,
       }
 
-      this.$autocomplete = new google.maps.places.Autocomplete(this.$refs.input, finalOptions)
+      this.$autocomplete = new google.maps.places.Autocomplete(refInput, finalOptions)
       bindProps(this, this.$autocomplete, mappedProps)
 
       this.$watch('componentRestrictions', (v) => {