Commit 4e80d889 authored by Fawad Mirzad's avatar Fawad Mirzad
Browse files

Revert autocomplete component is removed

parent 51fb0e25

package.json

+1 −1
Original line number Diff line number Diff line 
{

  "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": [

src/components/autocomplete.vue

+79 −0
Original line number Diff line number Diff line 
<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>

src/components/autocompleteImpl.js

0 → 100644
+73 −0
Original line number Diff line number Diff line 
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,

  },

}

src/main.js

+3 −3
Original line number Diff line number Diff line
@@ -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)

  }

}