Add a MapboxFullscreenControl component

packages/demo/pages/index.vue

@@ -11,6 +11,7 @@
     MapboxNavigationControl,
     MapboxPopup,
     MapboxCluster,
+    MapboxFullscreenControl,
   } from '@studiometa/vue-mapbox-gl';
   import 'mapbox-gl/dist/mapbox-gl.css';
   import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
@@ -84,6 +85,7 @@
         :zoom="zoom"
         @mb-created="createdHandler"
         @mb-click="eventHandler">
+        <MapboxFullscreenControl position="bottom-left" />
         <MapboxImages :sources="iconSources">
           <MapboxLayer id="pois" :options="layerOptions" />
         </MapboxImages>

packages/vue-mapbox-gl/components/MapboxFullscreenControl.vue

@@ -0,0 +1,38 @@
+<template>
+  <div />
+</template>
+
+<script>
+  import mapboxgl from 'mapbox-gl';
+
+  if (!mapboxgl) {
+    throw new Error('mapboxgl is not installed.');
+  }
+
+  /**
+   * Component's props definition, we need to declare it outside the component
+   * to be able to test the default values and the types.
+   * @see https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol
+   * @type {object}
+   */
+  const propsConfig = {
+    // eslint-disable-next-line vue/require-default-prop
+    container: typeof HTMLElement !== 'undefined' ? HTMLElement : Object,
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+  };
+</script>
+
+<script setup>
+  import { useControl } from '../composables/index.js';
+
+  const props = defineProps(propsConfig);
+  const { control, map } = useControl(mapboxgl.FullscreenControl, {
+    propsConfig,
+    props,
+  });
+
+  defineExpose({ control });
+</script>

packages/vue-mapbox-gl/components/MapboxGeocoder.vue

@@ -15,7 +15,7 @@
   }
 
   /**
-   *Component's props definition, we need to declare it outside the component
+   * Component's props definition, we need to declare it outside the component
    * to be able to test the default values and the types.
    * @see https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#parameters
    * @type {object}

packages/vue-mapbox-gl/components/index.js

@@ -10,3 +10,4 @@ export { default as MapboxMarker } from './MapboxMarker.vue';
 export { default as MapboxNavigationControl } from './MapboxNavigationControl.vue';
 export { default as MapboxPopup } from './MapboxPopup.vue';
 export { default as MapboxSource } from './MapboxSource.vue';
+export { default as MapboxFullscreenControl } from './MapboxFullscreenControl.vue';