Ability to customize input in autocomplete

docs/src/components/autocomplete.md

@@ -3,8 +3,8 @@
 [[toc]]
 
 
-## Load Google maps places 
+## Load Google maps places
-Before using Autocomplete, you should load the places library. 
+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
 

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"

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) => {