feat: add default controls 🎉

src/constants/events/geolocate.ts

@@ -0,0 +1,7 @@
+export const geolocateControlEvents: string[] = [
+  'geolocate',
+  'error',
+  'outofmaxbounds',
+  'trackuserlocationstart',
+  'trackuserlocationend',
+];

src/controls/VControlAttribution.vue

@@ -1,22 +1,59 @@
 <template>
-  <main>
-    {{ options }}
-  </main>
+  <div>
+    <slot />
+  </div>
 </template>
-
 <script lang="ts">
-  import type { PropType } from 'vue-demi';
-  import { defineComponent } from 'vue-demi';
+  import { AttributionControl } from 'mapbox-gl';
+  import type { PropType } from 'vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { MapKey } from '../../types/symbols';
+  import { injectStrict } from '../utils';
 
   export default defineComponent({
     name: 'VControlAttribution',
     props: {
       options: {
-        type: Object as PropType<{}>,
-        default: () => ({}),
+        type: Object as PropType<{
+          compact?: boolean;
+          customAttribution?: string | string[];
+        }>,
+        default: () => ({
+          compact: false,
+          customAttribution: 'Map design by me',
+        }),
         required: true,
       },
+      position: {
+        type: String as PropType<
+          'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+        >,
+        default: () => 'bottom-right',
+        required: false,
+      },
+    },
+    setup(props, { slots }) {
+      let map = injectStrict(MapKey);
+
+      onMounted(() => {
+        addControl();
+      });
+
+      /**
+       * Adds the Attribution Control
+       *
+       * @returns {void}
+       */
+      function addControl(): void {
+        const options = {
+          ...props.options,
+        };
+        if (slots && slots.default!() && Array.isArray(slots.default!())) {
+          options.customAttribution = slots.default().at(0).el.data;
+        }
+        const control = new AttributionControl(options);
+        map.value.addControl(control, props.position);
+      }
     },
-    setup() {},
   });
 </script>

src/controls/VControlFullscreen.vue

@@ -1,22 +1,43 @@
-<template>
-  <main>
-    {{ options }}
-  </main>
-</template>
-
 <script lang="ts">
-  import type { PropType } from 'vue-demi';
-  import { defineComponent } from 'vue-demi';
+  import type { FullscreenControlOptions } from 'mapbox-gl';
+  import { FullscreenControl } from 'mapbox-gl';
+  import type { PropType } from 'vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { MapKey } from '../../types/symbols';
+  import { injectStrict } from '../utils';
 
   export default defineComponent({
     name: 'VControlFullscreen',
     props: {
       options: {
-        type: Object as PropType<{}>,
+        type: Object as PropType<FullscreenControlOptions>,
         default: () => ({}),
         required: true,
       },
+      position: {
+        type: String as PropType<
+          'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+        >,
+        default: () => 'top-left',
+        required: false,
+      },
+    },
+    setup(props) {
+      let map = injectStrict(MapKey);
+
+      onMounted(() => {
+        addControl();
+      });
+
+      /**
+       * Adds the Attribution Control
+       *
+       * @returns {void}
+       */
+      function addControl(): void {
+        const control = new FullscreenControl(props.options);
+        map.value.addControl(control, props.position);
+      }
     },
-    setup() {},
   });
 </script>

src/controls/VControlGeolocate.vue

@@ -1,22 +1,55 @@
-<template>
-  <main>
-    {{ options }}
-  </main>
-</template>
-
 <script lang="ts">
-  import type { PropType } from 'vue-demi';
-  import { defineComponent } from 'vue-demi';
+  import type { FitBoundsOptions, PositionOptions } from 'mapbox-gl';
+  import { GeolocateControl } from 'mapbox-gl';
+  import type { PropType } from 'vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { MapKey } from '../../types/symbols';
+  import { geolocateControlEvents as events } from '../constants/events/geolocate';
+  import { injectStrict } from '../utils';
 
   export default defineComponent({
-    name: 'VControlGeolocate',
+    name: 'VControlFullscreen',
     props: {
       options: {
-        type: Object as PropType<{}>,
+        type: Object as PropType<{
+          positionOptions?: PositionOptions;
+          fitBoundsOptions?: FitBoundsOptions;
+          trackUserLocation?: boolean;
+          showAccuracyCircle?: boolean;
+          showUserLocation?: boolean;
+        }>,
         default: () => ({}),
         required: true,
       },
+      position: {
+        type: String as PropType<
+          'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+        >,
+        default: () => 'top-left',
+        required: false,
+      },
+    },
+    setup(props, { emit }) {
+      let map = injectStrict(MapKey);
+
+      onMounted(() => {
+        addControl();
+      });
+
+      /**
+       * Adds the Attribution Control
+       *
+       * @returns {void}
+       */
+      function addControl(): void {
+        const control = new GeolocateControl(props.options);
+        map.value.addControl(control, props.position);
+        events.forEach((event: string) => {
+          control.on(event, () => {
+            emit(event);
+          });
+        });
+      }
     },
-    setup() {},
   });
 </script>

src/controls/VControlNavigation.vue

@@ -1,22 +1,46 @@
-<template>
-  <main>
-    {{ options }}
-  </main>
-</template>
-
 <script lang="ts">
-  import type { PropType } from 'vue-demi';
-  import { defineComponent } from 'vue-demi';
+  import { NavigationControl } from 'mapbox-gl';
+  import type { PropType } from 'vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { MapKey } from '../../types/symbols';
+  import { injectStrict } from '../utils';
 
   export default defineComponent({
-    name: 'VControlNavigation',
+    name: 'VControlFullscreen',
     props: {
       options: {
-        type: Object as PropType<{}>,
+        type: Object as PropType<{
+          showCompass?: boolean;
+          showZoom?: boolean;
+          visualizePitch?: boolean;
+        }>,
         default: () => ({}),
         required: true,
       },
+      position: {
+        type: String as PropType<
+          'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+        >,
+        default: () => 'top-left',
+        required: false,
+      },
+    },
+    setup(props) {
+      let map = injectStrict(MapKey);
+
+      onMounted(() => {
+        addControl();
+      });
+
+      /**
+       * Adds the Attribution Control
+       *
+       * @returns {void}
+       */
+      function addControl(): void {
+        const control = new NavigationControl(props.options);
+        map.value.addControl(control, props.position);
+      }
     },
-    setup() {},
   });
 </script>

src/controls/VControlScale.vue

@@ -1,22 +1,42 @@
-<template>
-  <main>
-    {{ options }}
-  </main>
-</template>
-
 <script lang="ts">
-  import type { PropType } from 'vue-demi';
-  import { defineComponent } from 'vue-demi';
+  import { ScaleControl } from 'mapbox-gl';
+  import type { PropType } from 'vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { MapKey } from '../../types/symbols';
+  import { injectStrict } from '../utils';
 
   export default defineComponent({
-    name: 'VControlScale',
+    name: 'VControlFullscreen',
     props: {
       options: {
-        type: Object as PropType<{}>,
+        type: Object as PropType<{ maxWidth?: number; unit?: string }>,
         default: () => ({}),
         required: true,
       },
+      position: {
+        type: String as PropType<
+          'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+        >,
+        default: () => 'bottom-left',
+        required: false,
+      },
+    },
+    setup(props) {
+      let map = injectStrict(MapKey);
+
+      onMounted(() => {
+        addControl();
+      });
+
+      /**
+       * Adds the Attribution Control
+       *
+       * @returns {void}
+       */
+      function addControl(): void {
+        const control = new ScaleControl(props.options);
+        map.value.addControl(control, props.position);
+      }
     },
-    setup() {},
   });
 </script>