Added Directions Component

.babelrc

@@ -1,11 +1,13 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
       {
         "modules": false
       }
-    ],
-    "stage-0"
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-function-bind" 
   ]
-}
+}

build/rollup.config.base.js

@@ -1,33 +1,35 @@
 import babel from 'rollup-plugin-babel'
-import resolve from 'rollup-plugin-node-resolve'
+import resolve from '@rollup/plugin-node-resolve'
 import vue from 'rollup-plugin-vue'
-import cjs from 'rollup-plugin-commonjs'
-import replace from 'rollup-plugin-replace'
+import cjs from '@rollup/plugin-commonjs'
+import replace from '@rollup/plugin-replace'
 import fs from 'fs'
 import CleanCSS from 'clean-css'
 
 const config = require('../package.json')
 
 export default {
 	input: 'src/index.js',
-	name: 'vue-googlemaps',
 	plugins: [
 		resolve({
-			jsnext: true,
-			main: true,
-			browser: true,
+			mainFields: ['jsnext', 'main', 'browser'],
+		}),
+		cjs({
+			namedExports: {
+				'vue-resize': ['ResizeObserver'],
+				'vue-observe-visibility': ['ObserveVisibility'],
+			},
 		}),
-		cjs(),
 		vue({
 			css (style) {
 				fs.writeFileSync('dist/vue-googlemaps.css', new CleanCSS().minify(style).styles)
 			},
 		}),
 		babel({
 			exclude: 'node_modules/**',
-			'plugins': [
-				'external-helpers',
-			],
+			// 'plugins': [
+			// 	'@babel/plugin-external-helpers',
+			// ],
 		}),
 		replace({
 			VERSION: JSON.stringify(config.version),

build/rollup.config.browser.js

@@ -1,16 +1,16 @@
 import base from './rollup.config.base'
-import uglify from 'rollup-plugin-uglify'
-import { minify } from 'uglify-es'
+import { terser } from 'rollup-plugin-terser'
+import { minify } from 'terser'
 
 const config = Object.assign({}, base, {
-	exports: 'named',
 	output: {
+		name: 'VueGoogleMaps',
+		exports: 'named', // TODO: move to base
 		file: 'dist/vue-googlemaps.min.js',
 		format: 'iife',
 	},
-	name: 'VueGoogleMaps',
 })
 
-config.plugins.push(uglify({}, minify))
+config.plugins.push(terser({}, minify))
 
 export default config

build/rollup.config.es.js

@@ -2,6 +2,7 @@ import base from './rollup.config.base'
 
 const config = Object.assign({}, base, {
 	output: {
+		name: 'vue-googlemaps', // TODO: move to base
 		file: 'dist/vue-googlemaps.esm.js',
 		format: 'es',
 	},

build/rollup.config.umd.js

@@ -1,8 +1,9 @@
 import base from './rollup.config.base'
 
 const config = Object.assign({}, base, {
-	exports: 'name',
 	output: {
+		name: 'vue-googlemaps', // TODO: move to base
+		exports: 'named', // TODO: move to base
 		file: 'dist/vue-googlemaps.umd.js',
 		format: 'umd',
 	},

demo-src/.babelrc

@@ -1,7 +1,39 @@
 {
   "presets": [
-    ["env", { "modules": false }],
-    "stage-0",
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
     "vue"
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "@babel/plugin-proposal-optional-chaining",
+    [
+      "@babel/plugin-proposal-pipeline-operator",
+      {
+        "proposal": "minimal"
+      }
+    ],
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-do-expressions",
+    "@babel/plugin-proposal-function-bind"
   ]
 }

demo-src/package.json

@@ -15,11 +15,26 @@
     "vuex": "^2.4.1"
   },
   "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-preset-env": "^1.5.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-preset-vue": "^1.2.1",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "babel-preset-vue": "^2.0.2",
     "cross-env": "^3.0.0",
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",

demo-src/src/components/App.vue

@@ -27,6 +27,9 @@
 				<md-list-item>
 					<router-link :to="{ name: 'place-details' }">Place details</router-link>
 				</md-list-item>
+				<md-list-item>
+					<router-link :to="{ name: 'directions' }">Directions</router-link>
+				</md-list-item>
 			</md-list>
 		</md-sidenav>
 	</div>

demo-src/src/components/Directions.vue

@@ -0,0 +1,121 @@
+<template>
+	<div class="directions demo">
+		<md-toolbar>
+			<md-button
+				class="md-icon-button"
+				@click="toggleSideNav"
+			>
+				<md-icon>menu</md-icon>
+			</md-button>
+
+			<h2 class="md-title" style="flex: 1;">Directions</h2>
+		</md-toolbar>
+
+		<div class="panes">
+			<!-- Map -->
+			<googlemaps-map
+				class="map"
+				:center.sync="center"
+				:options="mapOptions"
+				:zoom="12"
+			>
+                <googlemaps-directions :origin="origin" :destination="destination" :waypoints="waypoints" />
+			</googlemaps-map>
+            <div>
+                <md-toolbar md-theme="white">
+                    <md-button class="md-icon-button" @click="addDestination">
+                        <md-icon>add</md-icon>
+                    </md-button>
+                </md-toolbar>
+                <md-list>
+                    <md-list-item v-for="(node, index) in nodes" v-bind:key="index">
+                        {{ node }}
+                    </md-list-item>
+                </md-list>
+            </div> 
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+	data () {
+		return {
+			center: {
+				lat: 48.853,
+				lng: 2.298,
+			},
+			nodes: [
+                "Eibergsestraat 207, Haaksbergen, Netherlands",
+                "Kallenbroekerweg 153, Barneveld, Netherlands",
+                "Hollandsekade 165, Nieuwkoop, Netherlands"
+            ],
+		}
+	},
+
+	computed: {
+		origin() {
+            if (this.nodes && this.nodes.length > 1) {
+                return this.nodes[0];
+            } else {
+                return null;
+            }
+        },
+        waypoints() {
+            if (this.nodes && this.nodes.length > 2) {
+                return this.nodes.slice(1, -1).map(x => {
+                    return {
+                        location: x
+                    }
+                });
+            } else {
+                return null;
+            }
+        },
+        destination() {
+            if (this.nodes && this.nodes.length > 1) {
+                return this.nodes[this.nodes.length - 1];
+            } else {
+                return null;
+            }
+        },
+
+
+		mapOptions () {
+			return {
+				clickableIcons: false,
+			}
+        }
+	},
+
+	methods: {
+		...mapActions('layout', [
+			'toggleSideNav',
+        ]),
+        addDestination() {
+            this.nodes.push(prompt("Enter address"));
+        }
+	},
+}
+</script>
+
+<style lang="stylus" scoped>
+.demo {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.panes {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: stretch;
+}
+
+.map {
+	flex: 1;
+}
+</style>

demo-src/src/router.js

@@ -5,6 +5,7 @@ import SimpleMap from './components/SimpleMap.vue'
 import NearbyPlaces from './components/NearbyPlaces.vue'
 import LocationGeocoder from './components/LocationGeocoder.vue'
 import PlaceDetails from './components/PlaceDetails.vue'
+import Directions from './components/Directions.vue'
 
 const router = new VueRouter({
 	mode: 'hash',
@@ -13,6 +14,7 @@ const router = new VueRouter({
 		{ path: '/nearby', name: 'nearby', component: NearbyPlaces },
 		{ path: '/geocoder', name: 'geocoder', component: LocationGeocoder },
 		{ path: '/place-details', name: 'place-details', component: PlaceDetails },
+		{ path: '/directions', name: 'directions', component: Directions },
 	],
 })