From 4bdd525801877fb49c68bbeaa2b059be857c61a4 Mon Sep 17 00:00:00 2001 From: Touch Date: Wed, 17 Mar 2021 22:29:04 +0700 Subject: [PATCH] chore(deps-dev): :fire: fix some bugs and add nuxt support --- .eslintignore | 1 + .eslintrc.js | 6 +- .github/FUNDING.yml | 1 + .github/dependabot.yml | 32 + .github/workflows/test.yml | 20 + README.md | 165 +- lib/components/Directions.js | 6 +- lib/components/HeatMap.js | 6 +- lib/components/InfoWindow.js | 1 + lib/components/Map.vue | 11 +- lib/components/Marker.js | 32 +- lib/components/PlaceDetails.js | 7 +- lib/components/Polygon.js | 9 +- lib/components/Polyline.js | 17 +- lib/components/Rectangle.js | 7 +- lib/components/UserPosition.js | 6 +- lib/index.js | 4 +- lib/lib-loader.js | 4 +- nuxt/index.js | 15 + nuxt/plugin.template.js | 12 + package-lock.json | 16834 ------------------------------- package.json | 34 +- src/components/SimpleMap.vue | 106 +- src/main.js | 4 +- tests/unit/Map.spec.js | 14 +- types/index.d.ts | 15 + types/vue.d.ts | 31 + vue.config.js | 5 + yarn.lock | 7010 +++++++------ 29 files changed, 4351 insertions(+), 20064 deletions(-) create mode 100644 .github/FUNDING.yml create mode 100644 .github/dependabot.yml create mode 100644 .github/workflows/test.yml create mode 100644 nuxt/index.js create mode 100644 nuxt/plugin.template.js delete mode 100644 package-lock.json create mode 100644 types/index.d.ts create mode 100644 types/vue.d.ts diff --git a/.eslintignore b/.eslintignore index c17f1b5..8a6c9b9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,3 +2,4 @@ node_modules /demo /src /dist +/nuxt diff --git a/.eslintrc.js b/.eslintrc.js index 73a34c0..f95f2cd 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,14 +1,16 @@ module.exports = { root: true, env: { - node: true + node: true, + es6: true, + browser: true }, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'no-console': 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' }, parserOptions: { diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..b43394b --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +patreon: chantouch diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..f1aa711 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,32 @@ +version: 2 +updates: +# Fetch and update latest `npm` packages +- package-ecosystem: npm + directory: '/' + schedule: + interval: daily + time: '00:00' + open-pull-requests-limit: 10 + reviewers: + - chantouch + assignees: + - chantouch + commit-message: + prefix: fix + prefix-development: chore + include: scope +# Fetch and update latest `github-actions` pkgs +- package-ecosystem: github-actions + directory: '/' + schedule: + interval: daily + time: '00:00' + open-pull-requests-limit: 10 + reviewers: + - chantouch + assignees: + - chantouch + commit-message: + prefix: fix + prefix-development: chore + include: scope diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..630dfb6 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,20 @@ +name: Test + +on: + pull_request: + branches: + - master + push: + branches: + - master + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2.3.4 + - uses: actions/setup-node@v2.1.5 + with: + node-version: 14 + - run: yarn + - run: yarn test diff --git a/README.md b/README.md index eea5605..1bd6ac5 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ [![npm](https://img.shields.io/npm/dt/vuejs-google-maps.svg?style=flat-square)](https://npmjs.com/package/vuejs-google-maps) This package is under active development, the documentation is not complete yet, so if is missing something open a - request or look at the [source code](https://github.com/chantouchsek/vuejs-google-map). +request or look at the [source code](https://github.com/chantouchsek/vuejs-google-map). ## Installation @@ -17,54 +17,48 @@ yarn add vuejs-google-maps ## Usage -Before starting you need a Google API key from the [developer console](http://console.developers.google.com/), once you obtained your key, import the module in your application and register it as plugin: +Before starting you need a Google API key from the [developer console](http://console.developers.google.com/), once you +obtained your key, import the module in your application and register it as plugin: ```js import Vue from 'vue' import VueGoogleMap from 'vuejs-google-maps' Vue.use(VueGoogleMap, { - load: { - apiKey: 'your-api-key', - libraries: ['...'] - } -}) -``` - -# Nuxt support - -- create a file inside plugins folder -``vuejs-google-maps.js`` - - -```js -import Vue from 'vue' -import VueGoogleMap from 'vuejs-google-maps' - -Vue.use(VueGoogleMap, { - load: { - apiKey: 'your-api-key', - libraries: ['...'] - } + load: { + apiKey: 'your-api-key', + libraries: [/* rest of libraries */] + } }) ``` -- inside nuxt.config.js +## ♻️ Usage with Nuxt.js -place it inside of plugins section +Add `vuejs-google-maps/nuxt` to modules section of `nuxt.config.js` ```js -plugins: [ - [...], - { src: '~/plugins/vuejs-google-maps.js', mode: 'all' } -] +export default { + modules: [ + // Simple usage + 'vuejs-google-maps/nuxt', + // Passing options in module configuration + ['vuejs-google-maps/nuxt', {api: 'xxxxxx', libraries: [/* rest of libraries */]}] + ], + // Passing options in module top level configuration + googleMaps: {api: 'xxxxxx', libraries: [/* rest of libraries */]} +} ``` -This module tries to map GoogleMap with Vue components as much as possible so any of the options available on the original GoogleMap class will be available as component props and all the events emitted will be mapped to component events. +This module tries to map GoogleMap with Vue components as much as possible so any of the options available on the +original GoogleMap class will be available as component props and all the events emitted will be mapped to component +events. ## Components -Here a list of the available components that you can use with this plugin, click on them to discover more about the usage and see examples. If you are interested to see a __real life use__ checkout the [example](https://github.com/chantouchsek/vuejs-google-maps/tree/master/demo) folder which contains the source code of the [website](http://vuejs-google-maps.bookingkh.com/#/). +Here a list of the available components that you can use with this plugin, click on them to discover more about the +usage and see examples. If you are interested to see a __real life use__ checkout +the [example](https://github.com/chantouchsek/vuejs-google-maps/tree/master/demo) folder which contains the source code +of the [website](http://vuejs-google-maps.bookingkh.com/#/). * [Marker](#marker) * [AutoComplete](#autocomplete) @@ -74,77 +68,88 @@ Here a list of the available components that you can use with this plugin, click * [Polygon](#polygon) * [Polyline](#polyline) - #### Marker The Google Map Marker element require to be inside a `` component., it support the __default slot__. -```html - +```vue + + ``` #### AutoComplete -The AutoComplete component does not require to be inside a `` component, it can be used anyway inside your app. It display an input and optionally the autocomplete controls, when a place is selected the __place-changed__ event is triggered with the result. +The AutoComplete component does not require to be inside a `` component, it can be used anyway inside your +app. It display an input and optionally the autocomplete controls, when a place is selected the __place-changed__ event +is triggered with the result. -```html - +```vue + + ``` ##### Update V 0.0.6 -````html -