chore: merge dev

README.md

@@ -3,13 +3,23 @@
 [![npm](https://img.shields.io/npm/v/vue-googlemaps.svg) ![npm](https://img.shields.io/npm/dm/vue-googlemaps.svg)](https://www.npmjs.com/package/vue-googlemaps)
 [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
 
-Integrate Google Maps in your Vue application
+Integrate Google Maps in your Vue application in a "Vue-way".
 
 > This library is Work In Progress.
 > More components will be available in the 1.0 release.
 
 [Live demo](https://akryum.github.io/vue-googlemaps/)
 
+The main objective of the library is to use Google Maps using Vue components in a way that feels natural to Vue developpers (with props, events, slots...).
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Builtin components](#builtin-components)
+- [Create you own components](#create-you-own-components)
+- [Quick Examples](#quick-examples)
+
 ## Installation
 
 ```
@@ -22,18 +32,89 @@ yarn add vue-googlemaps
 
 ## Usage
 
+You need a Google API key from the [devlopper console](http://console.developers.google.com/).
+
 ```js
 import 'vue-googlemaps/dist/vue-googlemaps.css'
 import VueGoogleMaps from 'vue-googlemaps'
 
 Vue.use(VueGoogleMaps, {
   load: {
+    // Google API key
     apiKey: 'your-google-api-key',
+    // Enable more Google Maps libraries here
     libraries: ['places'],
   },
 })
 ```
 
+## Builtin components
+
+(Documentation is work-in-progress)
+
+- Circle
+- Geocoder
+- Map
+- Marker
+- NearbyPlaces
+- PlaceDetails
+- UserPosition
+- *More to come!*
+
+## Create you own components
+
+Here is an example of what a `Marker` component would look like:
+
+```js
+import { MapElement } from 'vue-googlemaps'
+
+// Those Vue props will update automatically
+// (Two-way binding with .sync modifier)
+const boundProps = [
+	'animation',
+	'clickable',
+	'cursor',
+	'draggable',
+	// ...
+]
+
+// Events from Google Maps emitted as Vue events
+const redirectedEvents = [
+	'click',
+	'rightclick',
+	'dblclick',
+	'drag',
+	// ...
+]
+
+export default {
+  mixins: [
+    // You need to use this mixin
+    MapElement,
+  ],
+
+  // When Google Maps is ready
+  googleMapsReady () {
+		const options = Object.assign({}, this.$props)
+		options.map = this.$_map
+
+    // Create Google Maps objects
+    this.$_marker = new window.google.maps.Marker(options)
+    // Bind the Vue props
+    this.bindProps(this.$_marker, boundProps)
+    // Emit the events from Google Maps
+		this.redirectEvents(this.$_marker, redirectedEvents)
+	},
+
+	beforeDestroy () {
+    // Teardown
+		if (this.$_marker) {
+			this.$_marker.setMap(null)
+		}
+	},
+}
+```
+
 ## Quick Examples
 
 ### Map with markers
@@ -107,7 +188,7 @@ Vue.use(VueGoogleMaps, {
 
 <googlemaps-nearby-places
   :request="{
-    bounds: mapBounds	
+    bounds: mapBounds
   }"
   :filter="result => !result.types.includes('locality')"
   @results="results => ..."

dist/vue-googlemaps.esm.js

@@ -4,13 +4,10 @@ function createCommonjsModule(fn, module) {
 
 var runtime = createCommonjsModule(function (module) {
 /**
- * Copyright (c) 2014, Facebook, Inc.
- * All rights reserved.
+ * Copyright (c) 2014-present, Facebook, Inc.
  *
- * This source code is licensed under the BSD-style license found in the
- * https://raw.github.com/facebook/regenerator/master/LICENSE file. An
- * additional grant of patent rights can be found in the PATENTS file in
- * the same directory.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 !(function(global) {
@@ -1128,7 +1125,10 @@ function bindProp(_ref) {
 	vm.$watch(function () {
 		return watcher(vm[name]);
 	}, function (value, oldValue) {
-		return applier(value, oldValue, setter);
+		if (!identity(value, setValue)) {
+			applier(value, oldValue, setter);
+		}
+		setValue = value;
 	});
 
 	var listener = target.addListener(changeEvent, function () {
@@ -1677,6 +1677,8 @@ var ResizeObserver = { render: function render() {
 		var object = document.createElement('object');
 		this._resizeObject = object;
 		object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+		object.setAttribute('aria-hidden', 'true');
+		object.setAttribute('tabindex', -1);
 		object.onload = this.addResizeHandlers;
 		object.type = 'text/html';
 		if (isIE) {
@@ -1704,7 +1706,7 @@ function install(Vue) {
 // Plugin
 var plugin$2 = {
 	// eslint-disable-next-line no-undef
-	version: "0.4.2",
+	version: "0.4.4",
 	install: install
 };
 
@@ -2240,7 +2242,7 @@ function registerComponents(Vue, prefix) {
 
 var plugin = {
 	// eslint-disable-next-line no-undef
-	version: "0.0.6",
+	version: "0.1.0",
 	install: function install(Vue, options) {
 		var finalOptions = Object.assign({}, {
 			installComponents: true,
@@ -2271,5 +2273,5 @@ if (GlobalVue) {
 	GlobalVue.use(plugin);
 }
 
-export { Circle, Geocoder, Map, Marker, NearbyPlaces, PlaceDetails, UserPosition };
+export { Circle, Geocoder, Map, Marker, NearbyPlaces, PlaceDetails, UserPosition, MapElement };
 export default plugin;

dist/vue-googlemaps.umd.js

@@ -10,13 +10,10 @@ function createCommonjsModule(fn, module) {
 
 var runtime = createCommonjsModule(function (module) {
 /**
- * Copyright (c) 2014, Facebook, Inc.
- * All rights reserved.
+ * Copyright (c) 2014-present, Facebook, Inc.
  *
- * This source code is licensed under the BSD-style license found in the
- * https://raw.github.com/facebook/regenerator/master/LICENSE file. An
- * additional grant of patent rights can be found in the PATENTS file in
- * the same directory.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 !(function(global) {
@@ -1134,7 +1131,10 @@ function bindProp(_ref) {
 	vm.$watch(function () {
 		return watcher(vm[name]);
 	}, function (value, oldValue) {
-		return applier(value, oldValue, setter);
+		if (!identity(value, setValue)) {
+			applier(value, oldValue, setter);
+		}
+		setValue = value;
 	});
 
 	var listener = target.addListener(changeEvent, function () {
@@ -1683,6 +1683,8 @@ var ResizeObserver = { render: function render() {
 		var object = document.createElement('object');
 		this._resizeObject = object;
 		object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+		object.setAttribute('aria-hidden', 'true');
+		object.setAttribute('tabindex', -1);
 		object.onload = this.addResizeHandlers;
 		object.type = 'text/html';
 		if (isIE) {
@@ -1710,7 +1712,7 @@ function install(Vue) {
 // Plugin
 var plugin$2 = {
 	// eslint-disable-next-line no-undef
-	version: "0.4.2",
+	version: "0.4.4",
 	install: install
 };
 
@@ -2246,7 +2248,7 @@ function registerComponents(Vue, prefix) {
 
 var plugin = {
 	// eslint-disable-next-line no-undef
-	version: "0.0.6",
+	version: "0.1.0",
 	install: function install(Vue, options) {
 		var finalOptions = Object.assign({}, {
 			installComponents: true,
@@ -2284,6 +2286,7 @@ exports.Marker = Marker;
 exports.NearbyPlaces = NearbyPlaces;
 exports.PlaceDetails = PlaceDetails;
 exports.UserPosition = UserPosition;
+exports.MapElement = MapElement;
 exports['default'] = plugin;
 
 Object.defineProperty(exports, '__esModule', { value: true });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-googlemaps",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Embed Google Maps in Vue apps",
   "main": "dist/vue-googlemaps.umd.js",
   "module": "dist/vue-googlemaps.esm.js",

src/index.js

@@ -11,6 +11,8 @@ import NearbyPlaces from './components/NearbyPlaces'
 import PlaceDetails from './components/PlaceDetails'
 import UserPosition from './components/UserPosition'
 
+import MapElement from './mixins/MapElement'
+
 export {
 	Circle,
 	Geocoder,
@@ -19,6 +21,7 @@ export {
 	NearbyPlaces,
 	PlaceDetails,
 	UserPosition,
+	MapElement,
 }
 
 function registerComponents (Vue, prefix) {

src/utils/bind-prop.js

@@ -50,7 +50,12 @@ export function bindProp ({
 
 	vm.$watch(
 		() => watcher(vm[name]),
-		(value, oldValue) => applier(value, oldValue, setter)
+		(value, oldValue) => {
+			if (!identity(value, setValue)) {
+				applier(value, oldValue, setter)
+			}
+			setValue = value
+		}
 	)
 
 	const listener = target.addListener(changeEvent, () => {