Merge pull request #2 from websitevirtuoso/main

Ability to customize input in autocomplete

docs/src/components/autocomplete.md

@@ -41,11 +41,44 @@ You can add an Autocomplete to your `template` using `GMapAutocomplete` componen
 </script>
 ```
 
+## Adding a custom input for autocomplete
+
+You can customize input for autocomplete.
+
+```html
+<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>
+```
+
 ## Adding custom options
 
 You can pass Google Maps Autocomplete options using the prop `options`:
 
-```vue{9}
+```html
 <template>
     <GMapAutocomplete
         placeholder="This is a placeholder"

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