From da0e0a17d206458bc0c3b3635ec3767bd0dd9dd9 Mon Sep 17 00:00:00 2001
From: Touch <s.chantouch@mango-byte.com>
Date: Sat, 26 Jun 2021 21:18:54 +0700
Subject: [PATCH] chore: :tada: added before slot to autocomplet component

---
 lib/components/Autocomplete.vue | 25 ++++++++++++++-----------
 lib/components/Map.vue          |  1 +
 package.json                    |  2 +-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/lib/components/Autocomplete.vue b/lib/components/Autocomplete.vue
index f604791..825b046 100644
--- a/lib/components/Autocomplete.vue
+++ b/lib/components/Autocomplete.vue
@@ -16,11 +16,10 @@
         </div>
       </slot>
     </div>
-
     <div class="pac-input-container">
-      <slot name="before-input"></slot>
-      <input ref="input" type="text" :value="model" @input="onInputChange" :placeholder="placeholder">
-      <slot name="after-input"></slot>
+      <slot name="before-input" />
+      <input ref="input" type="text" v-model="autocompleteModel" @input="onInputChange" :placeholder="placeholder">
+      <slot name="after-input" />
     </div>
   </div>
 </template>
@@ -47,8 +46,8 @@ export default {
     FindElement,
     Ready
   ],
-
   props: {
+    value: null,
     model: String,
     placeholder: {
       type: String,
@@ -67,13 +66,21 @@ export default {
       default: true
     }
   },
-
+  computed: {
+    autocompleteModel: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.$emit('input', value)
+      }
+    }
+  },
   data () {
     return {
       localTypes: this.$props.types
     }
   },
-
   methods: {
     ...redirectMethods({
       target () {
@@ -85,12 +92,10 @@ export default {
       this.$emit('update:model', event.target.value)
     }
   },
-
   watch: {
     localTypes: 'setTypes',
     types: 'setTypes'
   },
-
   created () {
     const mapAncestor = this.$_findAncestor(
       a => a.$options.name === 'GoogleMap'
@@ -100,12 +105,10 @@ export default {
     }
     this.$_mapAncestor = mapAncestor
   },
-
   async googleMapsPrepare () {
     const mapComp = this.$_mapAncestor
     this.$_map = mapComp ? await mapComp.$_getMap() : null
   },
-
   googleMapsReady () {
     this.$_autocomplete = new window.google.maps.places.Autocomplete(this.$refs.input)
     this.$_autocomplete.setTypes(this.$props.types)
diff --git a/lib/components/Map.vue b/lib/components/Map.vue
index 7337b8b..ef7ba3f 100644
--- a/lib/components/Map.vue
+++ b/lib/components/Map.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="vue-google-map">
+      <slot name="before" />
         <div ref="map" class="map-view" />
         <div class="hidden-content">
             <slot />
diff --git a/package.json b/package.json
index 03f7066..6f1d824 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuejs-google-maps",
   "description": "A set of Google Map components for VueJs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "main": "./dist/vuejs-google-maps.umd.js",
   "types": "types/index.d.ts",