Merge branch 'release/2.4.0'

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 20
           cache: npm
           registry-url: https://registry.npmjs.org/
 

.github/workflows/tests.yml

@@ -14,7 +14,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: 16
+        node-version: 20
         cache: npm
     - name: Install modules
       run: npm install
@@ -27,7 +27,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: 16
+        node-version: 20
         cache: npm
     - name: Install modules
       run: npm install

.nvmrc

@@ -1 +1 @@
-16
+20

CHANGELOG.md

@@ -4,9 +4,20 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [v2.4.0](https://github.com/studiometa/vue-mapbox-gl/compare/2.3.4...2.4.0) (2024-02-23)
+
+### Added
+
+- Add support for mapbox-gl ^3.0.0 ([f8a9b21](https://github.com/studiometa/vue-mapbox-gl/commit/f8a9b21))
+
+### Fixed
+
+- Fix a warning when using MapboxGeocoder outside MapboxMap ([e4202ea](https://github.com/studiometa/vue-mapbox-gl/commit/e4202ea))
+
 ## [v2.3.4](https://github.com/studiometa/vue-mapbox-gl/compare/2.3.3...2.3.4) (2024-01-30)
 
 ### Fixed
+
 - Fix Geocoder proximity props default ([#133](https://github.com/studiometa/vue-mapbox-gl/pull/133))
 
 ## [v2.3.3](https://github.com/studiometa/vue-mapbox-gl/compare/2.3.2...2.3.3) (2024-01-12)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studiometa/vue-mapbox-gl-workspace",
   "private": true,
-  "version": "2.3.4",
+  "version": "2.4.0",
   "workspaces": [
     "packages/*"
   ],
@@ -10,7 +10,7 @@
     "docs:build": "npm run build -w @studiometa/vue-mapbox-gl-docs",
     "demo:dev": "npm run dev -w @studiometa/vue-mapbox-gl-demo",
     "demo:build": "npm run build -w @studiometa/vue-mapbox-gl-demo",
-    "lint": "eslint packages/vue-mapbox-gl --ext=.js,.vue",
+    "lint": "eslint packages/{vue-mapbox-gl,demo} --ext=.js,.vue",
     "fix": "npm run lint -- --fix",
     "build": "rm -rf dist && npm run build:esbuild && npm run build:cp",
     "build:esbuild": "node scripts/build.mjs",

packages/demo/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@studiometa/vue-mapbox-gl-demo",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "scripts": {
     "dev": "nuxt dev",
     "build": "nuxt build"
   },
   "dependencies": {
-    "@studiometa/vue-mapbox-gl": "file:../vue-mapbox-gl",
-    "mapbox-gl": "^2.14.1",
-    "nuxt": "^3.5.1",
-    "vue": "^3.3.4"
+    "@mapbox/mapbox-gl-geocoder": "^5.0.2",
+    "@studiometa/vue-mapbox-gl": "*",
+    "mapbox-gl": "^3.1.2",
+    "nuxt": "^3.10.3",
+    "vue": "^3.4.19"
   }
 }

packages/demo/pages/index.vue

@@ -77,21 +77,19 @@
   <div>
     <ClientOnly>
       <MapboxMap
-        @mb-created="createdHandler"
-        @mb-click="eventHandler"
         style="height: 400px"
         :access-token="accessToken"
         map-style="mapbox://styles/mapbox/streets-v11"
         :center="mapCenter"
         :zoom="zoom"
-      >
+        @mb-created="createdHandler"
+        @mb-click="eventHandler">
         <MapboxImages :sources="iconSources">
           <MapboxLayer id="pois" :options="layerOptions" />
         </MapboxImages>
         <MapboxImage
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png"
           id="cat"
-        >
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png">
           <MapboxCluster
             data="/earthquakes.json"
             unclustered-point-layer-type="symbol"
@@ -123,13 +121,12 @@
                 'icon-image': 'cat',
                 'icon-size': 0.25,
               },
-            }"
-          />
+            }" />
         </MapboxImage>
         <MapboxGeolocateControl position="top-left" />
         <MapboxNavigationControl position="bottom-right" />
         <MapboxGeocoder @mb-result="eventHandler" />
-        <MapboxMarker @mb-click="eventHandler" :lng-lat="[lng - 30, lat]" />
+        <MapboxMarker :lng-lat="[lng - 30, lat]" @mb-click="eventHandler" />
         <MapboxPopup :lng-lat="[lng, lat]">
           <p>Hello world !</p>
         </MapboxPopup>
@@ -140,17 +137,17 @@
       <fieldset class="controls__group">
         <legend>Longitude</legend>
         <input type="text" readonly="readonly" :value="lng" />
-        <input type="range" step="1"  min="-100" max="100" v-model="lng" />
+        <input v-model="lng" type="range" step="1" min="-100" max="100" />
       </fieldset>
       <fieldset class="controls__group">
         <legend>Latitude</legend>
         <input type="text" readonly="readonly" :value="lat" />
-        <input type="range" step="1" min="-90" max="90" v-model="lat" />
+        <input v-model="lat" type="range" step="1" min="-90" max="90" />
       </fieldset>
       <fieldset class="controls__group">
         <legend>Zoom</legend>
         <input type="text" readonly="readonly" :value="zoom" />
-        <input type="range" step="0.1" min="0" max="15" v-model.number="zoom" />
+        <input v-model.number="zoom" type="range" step="0.1" min="0" max="15" />
       </fieldset>
     </div>
   </div>

packages/demo/plugins/errorHandler.js

@@ -1,3 +1,6 @@
+// eslint-disable-next-line import/no-unresolved
+import { defineNuxtPlugin } from '#imports';
+
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.config.errorHandler = console.error;
   nuxtApp.vueApp.config.warnHandler = console.warn;

packages/docs/components/MapboxMap/index.md

@@ -316,6 +316,10 @@ A map style definition, can be a JSON object following the [Mapbox Style specifi
 - Type: `Boolean`
 - Default: `true`
 
+::: warning
+The `optimizeForTerrain` prop will only work with `mapbox-gl@2`, as it has been removed in v3.0.0 of the package (see [release notes](https://github.com/mapbox/mapbox-gl-js/releases/tag/v3.0.0)).
+:::
+
 ### `performanceMetricsCollection`
 
 - Type: `Boolean`

packages/docs/components/MapboxMarker/index.md

@@ -82,7 +82,7 @@ Display a marker on the map.
 ### `anchor`
 
 - Type `String`
-- Default: `center'`
+- Default: `'center'`
 
 ### `color`
 

packages/docs/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@studiometa/vue-mapbox-gl-docs",
   "private": true,
-  "version": "2.3.4",
+  "type": "module",
+  "version": "2.4.0",
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build"
   },
   "devDependencies": {
-    "sass": "^1.62.0",
-    "tailwindcss": "^3.3.1",
-    "vitepress": "^1.0.0-alpha.71"
+    "sass": "^1.71.1",
+    "tailwindcss": "^3.4.1",
+    "vitepress": "^1.0.0-rc.44"
   }
 }

packages/docs/postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss')],
+};

packages/docs/tailwind.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   content: [
     './.vitepress/**/*.js',
     './.vitepress/**/*.vue',

packages/vue-mapbox-gl/composables/useMap.js

@@ -9,7 +9,7 @@ import { inject } from 'vue';
  * @returns {{ map: Ref<any> }}
  */
 export function useMap() {
-  const map = inject('mapbox-map');
+  const map = inject('mapbox-map', null);
 
   return {
     map,

packages/vue-mapbox-gl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/vue-mapbox-gl",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "A small components library to use Mapbox GL in Vue 3.",
   "homepage": "https://github.com/studiometa/vue-mapbox-gl#readme",
   "bugs": {
@@ -46,7 +46,7 @@
   },
   "peerDependencies": {
     "@mapbox/mapbox-gl-geocoder": "^5.0.1",
-    "mapbox-gl": "^2.8.2",
+    "mapbox-gl": "^2.8.2 || ^3.0.0",
     "vue": "^3.2.37"
   }
 }