From e304661b60000c5ef9e5d2087e0b71d501416fd6 Mon Sep 17 00:00:00 2001 From: Jonas Brenig <jonas.brenig@reviveinterior.de> Date: Fri, 21 Aug 2020 14:48:19 +0200 Subject: [PATCH 1/2] Add ability to define short or long names --- README.md | 32 +++++++++++++++ example/src/index.html | 10 +++++ src/VueGoogleAutocomplete.vue | 73 ++++++++++++++++++++++++++++------- 3 files changed, 102 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 573acb9..0d88323 100644 --- a/README.md +++ b/README.md @@ -247,3 +247,35 @@ The example below shows the correct usage of the `types` parameter, when limitin > </vue-google-autocomplete> ``` + +#### Manually setting short_name / long_name + +Sometimes you want to use the `short_name` instead of the `long_name` or vice-versa. +For example in the case of `country` it is helpful to get the iso code (`short_name`) to store it in your database. + +You can do so by passing an object to the component. + +**Note:** At this moment it is only possible to pass a complete object to the component. So it's not possible to override just specific address-components. + +```html +<vue-google-autocomplete + id="map" + ref="address" + classname="input" + placeholder="Start typing" + v-on:placechanged="getAddressData" + v-on:error="handleError" + country="sg" + v-bind:address-components="{ + subpremise: 'short_name', + street_number: 'short_name', + route: 'long_name', + locality: 'long_name', + administrative_area_level_1: 'short_name', + administrative_area_level_2: 'long_name', + country: 'short_name', + postal_code: 'short_name', + }" +> +</vue-google-autocomplete> +``` diff --git a/example/src/index.html b/example/src/index.html index 1d9544c..6447aa4 100644 --- a/example/src/index.html +++ b/example/src/index.html @@ -30,6 +30,16 @@ <h3 class="title is-4">Start typing an address and below you will see found resu v-on:placechanged="getAddressData" v-on:error="handleError" country="sg" + v-bind:address-components="{ + subpremise: 'short_name', + street_number: 'short_name', + route: 'long_name', + locality: 'long_name', + administrative_area_level_1: 'short_name', + administrative_area_level_2: 'long_name', + country: 'short_name', + postal_code: 'short_name', + }" > </vue-google-autocomplete> </p> diff --git a/src/VueGoogleAutocomplete.vue b/src/VueGoogleAutocomplete.vue index bd4dde8..d2bb8fa 100644 --- a/src/VueGoogleAutocomplete.vue +++ b/src/VueGoogleAutocomplete.vue @@ -15,17 +15,6 @@ </template> <script> - const ADDRESS_COMPONENTS = { - subpremise : 'short_name', - street_number: 'short_name', - route: 'long_name', - locality: 'long_name', - administrative_area_level_1: 'short_name', - administrative_area_level_2: 'long_name', - country: 'long_name', - postal_code: 'short_name' - }; - const CITIES_TYPE = ['locality', 'administrative_area_level_3']; const REGIONS_TYPE = ['locality', 'sublocality', 'postal_code', 'country', 'administrative_area_level_1', 'administrative_area_level_2']; @@ -39,9 +28,67 @@ required: true }, + addressComponents: { + type: Object, + default: function () { + return { + subpremise: 'short_name', + street_number: 'short_name', + route: 'long_name', + locality: 'long_name', + administrative_area_level_1: 'short_name', + administrative_area_level_2: 'long_name', + country: 'long_name', + postal_code: 'short_name', + }; + }, + + subpremise: { + type: String, + requried: true + }, + + street_number: { + type: String, + requried: true + }, + + route: { + type: String, + requried: true + }, + + locality: { + type: String, + requried: true + }, + + administrative_area_level_1: { + type: String, + requried: true + }, + + administrative_area_level_2: { + type: String, + requried: true + }, + + country: { + type: String, + requried: true + }, + + postal_code: { + type: String, + requried: true + }, + + }, + classname: String, placeholder: { + value: "placeholder-default", type: String, default: 'Start typing' }, @@ -310,8 +357,8 @@ for (let i = 0; i < place.address_components.length; i++) { let addressType = place.address_components[i].types[0]; - if (ADDRESS_COMPONENTS[addressType]) { - let val = place.address_components[i][ADDRESS_COMPONENTS[addressType]]; + if (this.addressComponents[addressType]) { + let val = place.address_components[i][this.addressComponents[addressType]]; returnData[addressType] = val; } } From 89771d8969e86cb59006ef3441e5559e0ff0e69e Mon Sep 17 00:00:00 2001 From: Jonas Brenig <jonas.brenig@reviveinterior.de> Date: Fri, 21 Aug 2020 15:08:42 +0200 Subject: [PATCH 2/2] Remove testing data --- src/VueGoogleAutocomplete.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/VueGoogleAutocomplete.vue b/src/VueGoogleAutocomplete.vue index d2bb8fa..adada14 100644 --- a/src/VueGoogleAutocomplete.vue +++ b/src/VueGoogleAutocomplete.vue @@ -88,7 +88,6 @@ classname: String, placeholder: { - value: "placeholder-default", type: String, default: 'Start typing' },