From 0ec4c2a1f6de9cea42a93f2ca4c9e760edc799fa Mon Sep 17 00:00:00 2001 From: Julien Cappiello Date: Wed, 18 Oct 2017 21:34:10 +0200 Subject: [PATCH 1/2] Migrate to VueJS 2 --- package.json | 5 +++-- src/LocationPicker.vue | 14 +++++++------- src/init.js | 20 ++++++++++++++------ 3 files changed, 24 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index fa647e5..3c0d489 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { - "vue": "^1.0.0", + "vue": "^2.2.6", "babel-runtime": "^5.8.0" }, "devDependencies": { @@ -35,8 +35,9 @@ "css-loader": "^0.23.0", "vue-hot-reload-api": "^1.2.0", "vue-html-loader": "^1.0.0", - "vue-loader": "^8.2.1", + "vue-loader": "^11.3.3", "vue-style-loader": "^1.0.0", + "vue-template-compiler": "^2.2.6", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.0" } diff --git a/src/LocationPicker.vue b/src/LocationPicker.vue index 110ee5f..3d634f7 100644 --- a/src/LocationPicker.vue +++ b/src/LocationPicker.vue @@ -1,8 +1,8 @@ @@ -34,7 +34,7 @@ 'location-picker-init' (options) { this.geocoder = new google.maps.Geocoder() - this.map = new google.maps.Map(this.$els.map, Object.assign({ + this.map = new google.maps.Map(this.$refs.map, Object.assign({ center: { lat: 0, lng: 0 }, zoom: 3, disableDefaultUI: true @@ -50,10 +50,10 @@ content: this.$refs.info.$el }, options.infoWindow)) - this.autocomplete = new google.maps.places.Autocomplete(this.$els.input, Object.assign({ + this.autocomplete = new google.maps.places.Autocomplete(this.$refs.input, Object.assign({ types: ['geocode'] }, options.autocomplete)) - this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.$els.input) + this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.$refs.input) // events google.maps.event.addListenerOnce(this.map, 'idle', this.openInfoWindow) @@ -74,7 +74,7 @@ geocodeLocation (e) { this.map.panTo(e.latLng) - this.$els.input.value = '' + this.$refs.input.value = '' this.geocoder.geocode({'latLng': e.latLng}, (response) => { if (response && response.length > 0) { diff --git a/src/init.js b/src/init.js index a982924..77a1089 100644 --- a/src/init.js +++ b/src/init.js @@ -1,20 +1,26 @@ -module.exports = (app, config, options) => { - if (!config.key) { +import Vue from 'vue' +import LocationPicker from './LocationPicker.vue' + +export function install (app, options) { + if (! options.config || !options.config.key) { console.error('[Vue Location Picker warn]: You should give a Google Maps API key') return } - config.libraries = 'places' - config.callback = 'initLocationPicker' + options.libraries = 'places' + options.callback = 'initLocationPicker' + + // set the global event bus + global.vueLocationPickerEventBus = new Vue() // set the callback function global.initLocationPicker = () => { - app.$broadcast('location-picker-init', options || {}) + global.vueLocationPickerEventBus.$emit('location-picker-init') } // construct the url var apiUrl = 'https://maps.googleapis.com/maps/api/js' - var params = Object.keys(config).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(config[key])}`) + var params = Object.keys(options).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(options[key])}`) var url = `${apiUrl}?${params.join('&')}` // create and append the script to body @@ -23,4 +29,6 @@ module.exports = (app, config, options) => { script.async = true script.defer = true document.body.appendChild(script) + + app.component('location-picker', LocationPicker) } From 153d3ff15f29241a78a6244410e6edd53f01bab0 Mon Sep 17 00:00:00 2001 From: Julien Cappiello Date: Sat, 21 Oct 2017 12:02:03 +0200 Subject: [PATCH 2/2] trying to upgrade to VueJS 2 --- package.json | 4 ++-- src/init.js | 51 ++++++++++++++++++++++++++------------------------- 2 files changed, 28 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index 3c0d489..aabb058 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "vue-location-picker", - "version": "1.0.1", + "name": "vue-location-picker2", + "version": "2.0.0", "author": "Pantelis Peslis ", "license": "MIT", "description": "Location Picker component for Vue.js", diff --git a/src/init.js b/src/init.js index 77a1089..81085df 100644 --- a/src/init.js +++ b/src/init.js @@ -1,34 +1,35 @@ import Vue from 'vue' import LocationPicker from './LocationPicker.vue' -export function install (app, options) { - if (! options.config || !options.config.key) { - console.error('[Vue Location Picker warn]: You should give a Google Maps API key') - return - } +LocationPicker.install = function (Vue, options) { + console.log(options); + if (! options || !options.key) { + console.error('[Vue Location Picker warn]: You should give a Google Maps API key') + return + } - options.libraries = 'places' - options.callback = 'initLocationPicker' + options.libraries = 'places'; + options.callback = 'initLocationPicker'; - // set the global event bus - global.vueLocationPickerEventBus = new Vue() + // set the global event bus + global.vueLocationPickerEventBus = new Vue(); - // set the callback function - global.initLocationPicker = () => { - global.vueLocationPickerEventBus.$emit('location-picker-init') - } + // set the callback function + global.initLocationPicker = () => { + global.vueLocationPickerEventBus.$emit('location-picker-init') + }; - // construct the url - var apiUrl = 'https://maps.googleapis.com/maps/api/js' - var params = Object.keys(options).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(options[key])}`) - var url = `${apiUrl}?${params.join('&')}` + // construct the url + var apiUrl = 'https://maps.googleapis.com/maps/api/js'; + var params = Object.keys(options).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(options[key])}`); + var url = `${apiUrl}?${params.join('&')}`; - // create and append the script to body - var script = document.createElement('script') - script.src = url - script.async = true - script.defer = true - document.body.appendChild(script) - - app.component('location-picker', LocationPicker) + // create and append the script to body + var script = document.createElement('script'); + script.src = url; + script.async = true; + script.defer = true; + document.body.appendChild(script); } +export default LocationPicker; +