Merge branch 'feature/typescript-type-definitions' (7d59382e) · Commits · school / Capstone Design / 02 / Vue Google Maps

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)
		}
		}