From 0ae96f64761391bb4e40df74973832090e597aaa Mon Sep 17 00:00:00 2001
From: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>
Date: Sat, 1 Jun 2024 22:12:59 +0530
Subject: [PATCH] chore: cleanup

---
 lib/v-mapbox/constants/events/layer.ts        |   2 +-
 lib/v-mapbox/constants/events/map.ts          |   2 +-
 lib/v-mapbox/constants/events/popup.ts        |   2 +-
 .../attribution/VControlAttribution.vue       |  12 +-
 lib/v-mapbox/controls/attribution/types.ts    |   2 +-
 .../fullscreen/VControlFullscreen.vue         |   8 +-
 lib/v-mapbox/controls/fullscreen/types.ts     |   2 +-
 .../controls/geolocate/VControlGeolocate.vue  |  10 +-
 lib/v-mapbox/controls/geolocate/types.ts      |   2 +-
 .../navigation/VControlNavigation.vue         |   2 +-
 lib/v-mapbox/controls/scale/VControlScale.vue |   8 +-
 lib/v-mapbox/controls/scale/types.ts          |   2 +-
 .../maplibre/canvas/VLayerMaplibreCanvas.vue  |   6 +-
 .../geojson/VLayerMaplibreGeojson.vue         |  68 ++--
 .../maplibre/image/VLayerMaplibreImage.vue    | 130 ++++----
 .../maplibre/raster/VLayerMaplibreRaster.vue  | 140 ++++-----
 .../maplibre/vector/VLayerMaplibreVector.vue  | 131 ++++----
 .../maplibre/video/VLayerMaplibreVideo.vue    | 131 ++++----
 lib/v-mapbox/map/VMap.vue                     |  23 +-
 lib/v-mapbox/markers/VMarker.vue              | 293 +++++++-----------
 lib/v-mapbox/popups/VPopup.vue                | 214 ++++++-------
 21 files changed, 543 insertions(+), 647 deletions(-)

diff --git a/lib/v-mapbox/constants/events/layer.ts b/lib/v-mapbox/constants/events/layer.ts
index ebc2b2ea..d32759c6 100644
--- a/lib/v-mapbox/constants/events/layer.ts
+++ b/lib/v-mapbox/constants/events/layer.ts
@@ -1,4 +1,4 @@
-import { MapLayerEventType } from 'maplibre-gl';
+import type { MapLayerEventType } from 'maplibre-gl';
 
 export const mapLayerEvents: Array<keyof MapLayerEventType> = [
   'click',
diff --git a/lib/v-mapbox/constants/events/map.ts b/lib/v-mapbox/constants/events/map.ts
index f4fe23da..bccdb3a6 100644
--- a/lib/v-mapbox/constants/events/map.ts
+++ b/lib/v-mapbox/constants/events/map.ts
@@ -1,4 +1,4 @@
-import { MapEventType } from 'maplibre-gl';
+import type { MapEventType } from 'maplibre-gl';
 
 export const mapEvents: Array<keyof MapEventType> = [
   'error',
diff --git a/lib/v-mapbox/constants/events/popup.ts b/lib/v-mapbox/constants/events/popup.ts
index bee65e34..ac910c95 100644
--- a/lib/v-mapbox/constants/events/popup.ts
+++ b/lib/v-mapbox/constants/events/popup.ts
@@ -1 +1 @@
-export const popupEvents = ['open', 'close'];
+export const popupEvents = ['open', 'close'] as Array<'open' | 'close'>;
diff --git a/lib/v-mapbox/controls/attribution/VControlAttribution.vue b/lib/v-mapbox/controls/attribution/VControlAttribution.vue
index 26360718..4281eab0 100644
--- a/lib/v-mapbox/controls/attribution/VControlAttribution.vue
+++ b/lib/v-mapbox/controls/attribution/VControlAttribution.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-  import type { AttributionOptions, ControlPosition } from './types';
   import { AttributionControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
   import { MapKey, injectStrict } from '../../utils';
+  import type { AttributionControlOptions, ControlPosition } from './types';
 
-  const defaultOptions: AttributionOptions = {
+  const defaultOptions: AttributionControlOptions = {
     compact: false,
     customAttribution: undefined,
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: AttributionOptions;
+      options?: AttributionControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -22,7 +22,7 @@
 
   const slots = useSlots();
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();
@@ -36,7 +36,7 @@
       };
     }
     if (slots && slots.default?.()) {
-      options.customAttribution = slots.default()[0]
+      options.customAttribution = slots.default()[0]!
         .children as unknown as string;
     }
     const control = new AttributionControl(options);
@@ -45,5 +45,5 @@
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>
diff --git a/lib/v-mapbox/controls/attribution/types.ts b/lib/v-mapbox/controls/attribution/types.ts
index bdd4dfe1..b7566a2d 100644
--- a/lib/v-mapbox/controls/attribution/types.ts
+++ b/lib/v-mapbox/controls/attribution/types.ts
@@ -1 +1 @@
-export type { AttributionOptions, ControlPosition } from 'maplibre-gl';
+export type { AttributionControlOptions, ControlPosition } from 'maplibre-gl';
diff --git a/lib/v-mapbox/controls/fullscreen/VControlFullscreen.vue b/lib/v-mapbox/controls/fullscreen/VControlFullscreen.vue
index 0a8bfb25..35c79c5d 100644
--- a/lib/v-mapbox/controls/fullscreen/VControlFullscreen.vue
+++ b/lib/v-mapbox/controls/fullscreen/VControlFullscreen.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-  import type { ControlPosition, FullscreenOptions } from './types';
   import { FullscreenControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
   import { MapKey, injectStrict } from '../../utils';
+  import type { ControlPosition, FullscreenControlOptions } from './types';
 
-  const defaultOptions: FullscreenOptions = {
+  const defaultOptions: FullscreenControlOptions = {
     container: undefined,
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: FullscreenOptions;
+      options?: FullscreenControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -19,7 +19,7 @@
     },
   );
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();
diff --git a/lib/v-mapbox/controls/fullscreen/types.ts b/lib/v-mapbox/controls/fullscreen/types.ts
index 81a2b796..ec8eaf9b 100644
--- a/lib/v-mapbox/controls/fullscreen/types.ts
+++ b/lib/v-mapbox/controls/fullscreen/types.ts
@@ -1 +1 @@
-export type { ControlPosition, FullscreenOptions } from 'maplibre-gl';
+export type { FullscreenControlOptions, ControlPosition } from 'maplibre-gl';
diff --git a/lib/v-mapbox/controls/geolocate/VControlGeolocate.vue b/lib/v-mapbox/controls/geolocate/VControlGeolocate.vue
index 9e7d1f2e..9dd312bd 100644
--- a/lib/v-mapbox/controls/geolocate/VControlGeolocate.vue
+++ b/lib/v-mapbox/controls/geolocate/VControlGeolocate.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-  import type { ControlPosition, GeolocateOptions } from './types';
   import { GeolocateControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
-  import { geolocateControlEvents as events } from './events';
   import { MapKey, injectStrict } from '../../utils';
+  import { geolocateControlEvents as events } from './events';
+  import type { ControlPosition, GeolocateControlOptions } from './types';
 
-  const defaultOptions: GeolocateOptions = {
+  const defaultOptions: GeolocateControlOptions = {
     fitBoundsOptions: {
       linear: false,
       offset: [0, 0],
@@ -23,7 +23,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options?: GeolocateOptions;
+      options?: GeolocateControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -34,7 +34,7 @@
 
   const emit = defineEmits(events);
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();
diff --git a/lib/v-mapbox/controls/geolocate/types.ts b/lib/v-mapbox/controls/geolocate/types.ts
index ce319076..9fc3ee4c 100644
--- a/lib/v-mapbox/controls/geolocate/types.ts
+++ b/lib/v-mapbox/controls/geolocate/types.ts
@@ -1 +1 @@
-export type { ControlPosition, GeolocateOptions } from 'maplibre-gl';
+export type { GeolocateControlOptions, ControlPosition } from 'maplibre-gl';
diff --git a/lib/v-mapbox/controls/navigation/VControlNavigation.vue b/lib/v-mapbox/controls/navigation/VControlNavigation.vue
index 740b9694..cb48cde0 100644
--- a/lib/v-mapbox/controls/navigation/VControlNavigation.vue
+++ b/lib/v-mapbox/controls/navigation/VControlNavigation.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-  import type { ControlPosition, NavigationOptions } from './types';
   import { NavigationControl } from 'maplibre-gl';
   import { onMounted, inject } from 'vue';
   import { MapKey } from '../../utils';
+  import type { ControlPosition, NavigationOptions } from './types';
 
   const defaultOptions: NavigationOptions = {
     showCompass: true,
diff --git a/lib/v-mapbox/controls/scale/VControlScale.vue b/lib/v-mapbox/controls/scale/VControlScale.vue
index de719607..aad2b3c2 100644
--- a/lib/v-mapbox/controls/scale/VControlScale.vue
+++ b/lib/v-mapbox/controls/scale/VControlScale.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-  import type { ControlPosition, ScaleOptions } from './types';
   import { onMounted, inject } from 'vue';
   import { ScaleControl } from 'maplibre-gl';
   import { MapKey } from '../../utils';
+  import type { ControlPosition, ScaleControlOptions } from './types';
 
-  const defaultOptions: ScaleOptions = {
+  const defaultOptions: ScaleControlOptions = {
     maxWidth: 100,
     unit: 'metric',
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: ScaleOptions;
+      options?: ScaleControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -31,5 +31,3 @@
     map?.value.addControl(control, props.position);
   };
 </script>
-
-<template></template>
diff --git a/lib/v-mapbox/controls/scale/types.ts b/lib/v-mapbox/controls/scale/types.ts
index fc08d3b3..f17c83b5 100644
--- a/lib/v-mapbox/controls/scale/types.ts
+++ b/lib/v-mapbox/controls/scale/types.ts
@@ -1 +1 @@
-export type { ControlPosition, ScaleOptions } from 'maplibre-gl';
+export type { ControlPosition, ScaleControlOptions } from 'maplibre-gl';
diff --git a/lib/v-mapbox/layers/maplibre/canvas/VLayerMaplibreCanvas.vue b/lib/v-mapbox/layers/maplibre/canvas/VLayerMaplibreCanvas.vue
index ae2fe40a..34bf1f05 100644
--- a/lib/v-mapbox/layers/maplibre/canvas/VLayerMaplibreCanvas.vue
+++ b/lib/v-mapbox/layers/maplibre/canvas/VLayerMaplibreCanvas.vue
@@ -23,8 +23,8 @@
       before: '',
     },
   );
-  let map = injectStrict(MapKey);
-  let loaded: Ref<boolean> = ref(false);
+  const map = injectStrict(MapKey);
+  const loaded: Ref<boolean> = ref(false);
 
   const layer = {
     ...props.layer,
@@ -62,5 +62,5 @@
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>
diff --git a/lib/v-mapbox/layers/maplibre/geojson/VLayerMaplibreGeojson.vue b/lib/v-mapbox/layers/maplibre/geojson/VLayerMaplibreGeojson.vue
index 2028fcad..3088da38 100644
--- a/lib/v-mapbox/layers/maplibre/geojson/VLayerMaplibreGeojson.vue
+++ b/lib/v-mapbox/layers/maplibre/geojson/VLayerMaplibreGeojson.vue
@@ -1,27 +1,57 @@
 <script setup lang="ts">
   import type { Ref } from 'vue';
-  import type { Props } from './types';
   import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
+  import type { GeoJSONSource, LayerSpecification } from 'maplibre-gl';
   import { injectStrict, MapKey } from '../../../utils';
+  import type { Props } from './types';
 
   const props = withDefaults(defineProps<Props>(), {
     sourceId: 'maplibre.gl-geojson-source',
     layerId: 'maplibre.gl-geojson-layer',
-    // source: {} as GeoJSONSourceSpecification,
-    // layer: {} as LayerSpecification,
     before: '',
   });
-  let map = injectStrict(MapKey);
-  let loaded: Ref<boolean> = ref(false);
 
-  const layer = {
-    ...props.layer,
-    id: props.layerId,
-    source: props.sourceId,
+  const map = injectStrict(MapKey);
+  const loaded: Ref<boolean> = ref(false);
+
+  const addLayer = (): void => {
+    if (!map.value.getSource(props.sourceId)) {
+      map.value.addSource(props.sourceId, props.source);
+    }
+    if (!map.value.getLayer(props.layerId)) {
+      const layerSpec = {
+        ...props.layer,
+        id: props.layerId,
+        source: props.sourceId,
+      } as LayerSpecification;
+      map.value.addLayer(layerSpec, props.before);
+    }
+  };
+
+  const updateSource = (): void => {
+    const source = map.value.getSource(props.sourceId) as
+      | GeoJSONSource
+      | undefined;
+    if (source && 'setData' in source) {
+      source.setData(props.source.data);
+    }
   };
 
+  const updateLayer = (): void => {
+    if (map.value.getLayer(props.layerId)) {
+      Object.entries(props.layer.paint || {}).forEach(([key, value]) => {
+        map.value.setPaintProperty(props.layerId, key, value);
+      });
+      Object.entries(props.layer.layout || {}).forEach(([key, value]) => {
+        map.value.setLayoutProperty(props.layerId, key, value);
+      });
+    }
+  };
+
+  watch(() => props.source, updateSource, { deep: true });
+  watch(() => props.layer, updateLayer, { deep: true });
+
   map.value.on('style.load', () => {
-    // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
     const styleTimeout = () => {
       if (!map.value.isStyleLoaded()) {
         loaded.value = false;
@@ -40,23 +70,21 @@
   });
 
   onMounted(() => {
-    addLayer();
+    if (map.value.isStyleLoaded()) {
+      addLayer();
+    }
   });
 
   onBeforeUnmount(() => {
-    if (map.value.getLayer(props.layer.id)) {
-      map.value.removeLayer(props.layer.id);
+    if (map.value.getLayer(props.layerId)) {
+      map.value.removeLayer(props.layerId);
+    }
+    if (map.value.getSource(props.sourceId)) {
       map.value.removeSource(props.sourceId);
     }
   });
-
-  const addLayer = (): void => {
-    console.log('props: ', props);
-    map.value.addSource(layer.source, props.source);
-    map.value.addLayer(layer, props.before);
-  };
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>
diff --git a/lib/v-mapbox/layers/maplibre/image/VLayerMaplibreImage.vue b/lib/v-mapbox/layers/maplibre/image/VLayerMaplibreImage.vue
index ff4a0b60..f54c45f1 100644
--- a/lib/v-mapbox/layers/maplibre/image/VLayerMaplibreImage.vue
+++ b/lib/v-mapbox/layers/maplibre/image/VLayerMaplibreImage.vue
@@ -1,88 +1,76 @@
-<script lang="ts">
+<script setup lang="ts">
   import type {
     LayerSpecification as AnyLayer,
     ImageSourceSpecification as ImageSourceRaw,
   } from 'maplibre-gl';
-  import type { PropType, Ref } from 'vue';
-  import { defineComponent, onMounted, ref, watch } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
   import { injectStrict, MapKey } from '../../../utils';
 
-  export default defineComponent({
-    name: 'VLayerMapboxImage',
-    props: {
-      sourceId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-image-source',
-        required: true,
-      },
-      layerId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-image-layer',
-        required: true,
-      },
-      source: {
-        type: Object as PropType<ImageSourceRaw>,
-        required: true,
-      },
-      layer: {
-        type: Object as PropType<AnyLayer>,
-        default: () => ({}),
-        required: true,
-      },
-      before: {
-        type: String as PropType<string>,
-        default: '',
-        required: false,
-      },
+  const props = defineProps({
+    sourceId: {
+      type: String,
+      default: 'maplibre.gl-image-source',
+      required: true,
     },
-    setup(props) {
-      let map = injectStrict(MapKey);
-      let loaded: Ref<boolean> = ref(false);
+    layerId: {
+      type: String,
+      default: 'maplibre.gl-image-layer',
+      required: true,
+    },
+    source: {
+      type: Object as PropType<ImageSourceRaw>,
+      required: true,
+    },
+    layer: {
+      type: Object as PropType<AnyLayer>,
+      default: () => ({}),
+      required: true,
+    },
+    before: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  });
 
-      const layer = {
-        ...props.layer,
-        id: props.layerId,
-        source: props.sourceId,
-      };
+  const map = injectStrict(MapKey);
+  const loaded = ref(false);
 
-      map.value.on('style.load', () => {
-        // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
-        const styleTimeout = () => {
-          if (!map.value.isStyleLoaded()) {
-            loaded.value = false;
-            setTimeout(styleTimeout, 200);
-          } else {
-            loaded.value = true;
-          }
-        };
-        styleTimeout();
-      });
+  const layer = {
+    ...props.layer,
+    id: props.layerId,
+    source: props.sourceId,
+  };
 
-      /**
-       * Watcher(s)
-       */
-      watch(loaded, (value) => {
-        if (value) {
-          addLayer();
-        }
-      });
+  map.value.on('style.load', () => {
+    // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
+    const styleTimeout = () => {
+      if (!map.value.isStyleLoaded()) {
+        loaded.value = false;
+        setTimeout(styleTimeout, 200);
+      } else {
+        loaded.value = true;
+      }
+    };
+    styleTimeout();
+  });
 
-      onMounted(() => {
-        addLayer();
-      });
+  watch(loaded, (value) => {
+    if (value) {
+      addLayer();
+    }
+  });
 
-      /**
-       * Re–adds the layer when style changed
-       * @returns {void}
-       */
-      function addLayer(): void {
-        map.value.addSource(props.sourceId, props.source);
-        map.value.addLayer(layer, props.before);
-      }
-    },
+  onMounted(() => {
+    addLayer();
   });
+
+  const addLayer = (): void => {
+    map.value.addSource(props.sourceId, props.source);
+    map.value.addLayer(layer, props.before);
+  };
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>
diff --git a/lib/v-mapbox/layers/maplibre/raster/VLayerMaplibreRaster.vue b/lib/v-mapbox/layers/maplibre/raster/VLayerMaplibreRaster.vue
index a7a83773..c9edb0bc 100644
--- a/lib/v-mapbox/layers/maplibre/raster/VLayerMaplibreRaster.vue
+++ b/lib/v-mapbox/layers/maplibre/raster/VLayerMaplibreRaster.vue
@@ -1,93 +1,83 @@
-<script lang="ts">
+<script setup lang="ts">
   import type { FeatureCollection } from 'geojson';
   import type {
     LayerSpecification as AnyLayer,
     GeoJSONSourceSpecification as GeoJSONSourceRaw,
   } from 'maplibre-gl';
-  import { defineComponent, onMounted, ref, watch } from 'vue';
-  import type { PropType, Ref } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
+  import type { PropType } from 'vue';
   import { injectStrict, MapKey } from '../../../utils';
 
-  export default defineComponent({
-    name: 'VLayerMapboxRaster',
-    props: {
-      sourceId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-raster-source',
-        required: true,
-      },
-      layerId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-raster-layer',
-        required: true,
-      },
-      source: {
-        type: Object as PropType<FeatureCollection>,
-        required: true,
-      },
-      layer: {
-        type: Object as PropType<AnyLayer>,
-        default: () => ({}),
-        required: true,
-      },
-      before: {
-        type: String as PropType<string>,
-        default: '',
-        required: false,
-      },
+  const props = defineProps({
+    sourceId: {
+      type: String,
+      default: 'maplibre.gl-raster-source',
+      required: true,
     },
-    setup(props) {
-      let map = injectStrict(MapKey);
-      let loaded: Ref<boolean> = ref(false);
-
-      const layer = {
-        ...props.layer,
-        id: props.layerId,
-        source: props.sourceId,
-      };
-      const source: GeoJSONSourceRaw = {
-        type: 'geojson',
-        data: props.source,
-      };
+    layerId: {
+      type: String,
+      default: 'maplibre.gl-raster-layer',
+      required: true,
+    },
+    source: {
+      type: Object as PropType<FeatureCollection>,
+      required: true,
+    },
+    layer: {
+      type: Object as PropType<AnyLayer>,
+      default: () => ({}),
+      required: true,
+    },
+    before: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  });
 
-      map.value.on('style.load', () => {
-        // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
-        const styleTimeout = () => {
-          if (!map.value.isStyleLoaded()) {
-            loaded.value = false;
-            setTimeout(styleTimeout, 200);
-          } else {
-            loaded.value = true;
-          }
-        };
-        styleTimeout();
-      });
+  const map = injectStrict(MapKey);
+  const loaded = ref(false);
 
-      /**
-       * Watcher(s)
-       */
-      watch(loaded, (value) => {
-        if (value) {
-          addLayer();
-        }
-      });
+  const layer = {
+    ...props.layer,
+    id: props.layerId,
+    source: props.sourceId,
+  };
 
-      onMounted(() => {
-        addLayer();
-      });
+  const source: GeoJSONSourceRaw = {
+    type: 'geojson',
+    data: props.source,
+  };
 
-      /**
-       * Re–adds the layer when style changed
-       * @returns {void}
-       */
-      function addLayer(): void {
-        map.value.addSource(props.sourceId, source);
-        map.value.addLayer(layer, props.before);
+  map.value.on('style.load', () => {
+    // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
+    const styleTimeout = () => {
+      if (!map.value.isStyleLoaded()) {
+        loaded.value = false;
+        setTimeout(styleTimeout, 200);
+      } else {
+        loaded.value = true;
       }
-    },
+    };
+    styleTimeout();
+  });
+
+  watch(loaded, (value) => {
+    if (value) {
+      addLayer();
+    }
   });
+
+  onMounted(() => {
+    addLayer();
+  });
+
+  const addLayer = (): void => {
+    map.value.addSource(props.sourceId, source);
+    map.value.addLayer(layer, props.before);
+  };
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>
diff --git a/lib/v-mapbox/layers/maplibre/vector/VLayerMaplibreVector.vue b/lib/v-mapbox/layers/maplibre/vector/VLayerMaplibreVector.vue
index acbef1a3..cdd1f0b7 100644
--- a/lib/v-mapbox/layers/maplibre/vector/VLayerMaplibreVector.vue
+++ b/lib/v-mapbox/layers/maplibre/vector/VLayerMaplibreVector.vue
@@ -1,88 +1,77 @@
-<script lang="ts">
+<script setup lang="ts">
   import type {
     LayerSpecification as AnyLayer,
     VectorSourceSpecification as VectorSource,
   } from 'maplibre-gl';
-  import type { PropType, Ref } from 'vue';
-  import { defineComponent, onMounted, ref, watch } from 'vue';
+  import type { PropType } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
   import { injectStrict, MapKey } from '../../../utils';
 
-  export default defineComponent({
-    name: 'VLayerMapboxVector',
-    props: {
-      sourceId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-vector-source',
-        required: true,
-      },
-      layerId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-vector-layer',
-        required: true,
-      },
-      source: {
-        type: Object as PropType<VectorSource>,
-        required: true,
-      },
-      layer: {
-        type: Object as PropType<AnyLayer>,
-        default: () => ({}),
-        required: true,
-      },
-      before: {
-        type: String as PropType<string>,
-        default: '',
-        required: false,
-      },
+  const props = defineProps({
+    sourceId: {
+      type: String,
+      default: 'maplibre.gl-vector-source',
+      required: true,
     },
-    setup(props) {
-      let map = injectStrict(MapKey);
-      let loaded: Ref<boolean> = ref(false);
+    layerId: {
+      type: String,
+      default: 'maplibre.gl-vector-layer',
+      required: true,
+    },
+    source: {
+      type: Object as PropType<VectorSource>,
+      required: true,
+    },
+    layer: {
+      type: Object as PropType<AnyLayer>,
+      default: () => ({}),
+      required: true,
+    },
+    before: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  });
 
-      const layer = {
-        ...props.layer,
-        id: props.layerId,
-        source: props.sourceId,
-      };
+  const map = injectStrict(MapKey);
+  const loaded = ref(false);
 
-      map.value.on('style.load', () => {
-        // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
-        const styleTimeout = () => {
-          if (!map.value.isStyleLoaded()) {
-            loaded.value = false;
-            setTimeout(styleTimeout, 200);
-          } else {
-            loaded.value = true;
-          }
-        };
-        styleTimeout();
-      });
+  const layer = {
+    ...props.layer,
+    id: props.layerId,
+    source: props.sourceId,
+  };
 
-      /**
-       * Watcher(s)
-       */
-      watch(loaded, (value) => {
-        if (value) {
-          addLayer();
-        }
-      });
+  map.value.on('style.load', () => {
+    // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
+    const styleTimeout = () => {
+      if (!map.value.isStyleLoaded()) {
+        loaded.value = false;
+        setTimeout(styleTimeout, 200);
+      } else {
+        loaded.value = true;
+      }
+    };
+    styleTimeout();
+  });
 
-      onMounted(() => {
-        addLayer();
-      });
+  watch(loaded, (value) => {
+    if (value) {
+      addLayer();
+    }
+  });
 
-      /**
-       * Re–adds the layer when style changed
-       * @returns {void}
-       */
-      function addLayer(): void {
-        map.value.addSource(props.sourceId, props.source);
-        map.value.addLayer(layer, props.before);
-      }
-    },
+  onMounted(() => {
+    addLayer();
   });
+
+  const addLayer = (): void => {
+    map.value.addSource(props.sourceId, props.source);
+    map.value.addLayer(layer, props.before);
+  };
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>
diff --git a/lib/v-mapbox/layers/maplibre/video/VLayerMaplibreVideo.vue b/lib/v-mapbox/layers/maplibre/video/VLayerMaplibreVideo.vue
index 65d3d033..fa8c31bb 100644
--- a/lib/v-mapbox/layers/maplibre/video/VLayerMaplibreVideo.vue
+++ b/lib/v-mapbox/layers/maplibre/video/VLayerMaplibreVideo.vue
@@ -1,88 +1,77 @@
-<script lang="ts">
+<script setup lang="ts">
   import type {
     LayerSpecification as AnyLayer,
     VectorSourceSpecification as VectorSource,
   } from 'maplibre-gl';
-  import type { PropType, Ref } from 'vue';
-  import { defineComponent, onMounted, ref, watch } from 'vue';
+  import type { PropType } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
   import { injectStrict, MapKey } from '../../../utils';
 
-  export default defineComponent({
-    name: 'VLayerMapboxVideo',
-    props: {
-      sourceId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-video-source',
-        required: true,
-      },
-      layerId: {
-        type: String as PropType<string>,
-        default: 'maplibre.gl-video-layer',
-        required: true,
-      },
-      source: {
-        type: Object as PropType<VectorSource>,
-        required: true,
-      },
-      layer: {
-        type: Object as PropType<AnyLayer>,
-        default: () => ({}),
-        required: true,
-      },
-      before: {
-        type: String as PropType<string>,
-        default: '',
-        required: false,
-      },
+  const props = defineProps({
+    sourceId: {
+      type: String,
+      default: 'maplibre.gl-video-source',
+      required: true,
     },
-    setup(props) {
-      let map = injectStrict(MapKey);
-      let loaded: Ref<boolean> = ref(false);
+    layerId: {
+      type: String,
+      default: 'maplibre.gl-video-layer',
+      required: true,
+    },
+    source: {
+      type: Object as PropType<VectorSource>,
+      required: true,
+    },
+    layer: {
+      type: Object as PropType<AnyLayer>,
+      default: () => ({}),
+      required: true,
+    },
+    before: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  });
 
-      const layer = {
-        ...props.layer,
-        id: props.layerId,
-        source: props.sourceId,
-      };
+  const map = injectStrict(MapKey);
+  const loaded = ref(false);
 
-      map.value.on('style.load', () => {
-        // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
-        const styleTimeout = () => {
-          if (!map.value.isStyleLoaded()) {
-            loaded.value = false;
-            setTimeout(styleTimeout, 200);
-          } else {
-            loaded.value = true;
-          }
-        };
-        styleTimeout();
-      });
+  const layer = {
+    ...props.layer,
+    id: props.layerId,
+    source: props.sourceId,
+  };
 
-      /**
-       * Watcher(s)
-       */
-      watch(loaded, (value) => {
-        if (value) {
-          addLayer();
-        }
-      });
+  map.value.on('style.load', () => {
+    // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
+    const styleTimeout = () => {
+      if (!map.value.isStyleLoaded()) {
+        loaded.value = false;
+        setTimeout(styleTimeout, 200);
+      } else {
+        loaded.value = true;
+      }
+    };
+    styleTimeout();
+  });
 
-      onMounted(() => {
-        addLayer();
-      });
+  watch(loaded, (value) => {
+    if (value) {
+      addLayer();
+    }
+  });
 
-      /**
-       * Re–adds the layer when style changed
-       * @returns {void}
-       */
-      function addLayer(): void {
-        map.value.addSource(props.sourceId, props.source);
-        map.value.addLayer(layer, props.before);
-      }
-    },
+  onMounted(() => {
+    addLayer();
   });
+
+  function addLayer(): void {
+    map.value.addSource(props.sourceId, props.source);
+    map.value.addLayer(layer, props.before);
+  }
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>
diff --git a/lib/v-mapbox/map/VMap.vue b/lib/v-mapbox/map/VMap.vue
index 986ca086..e9776fef 100644
--- a/lib/v-mapbox/map/VMap.vue
+++ b/lib/v-mapbox/map/VMap.vue
@@ -1,13 +1,8 @@
-<template>
-  <div :id="`${options?.container}`" class="v-map-container">
-    <slot />
-  </div>
-</template>
 <script setup lang="ts">
+  import { Map } from 'maplibre-gl';
+  import { onMounted, provide, ref, shallowRef } from 'vue';
   import type { MapOptions, MapEventType } from 'maplibre-gl';
   import type { Ref } from 'vue';
-  import { Map } from 'maplibre-gl';
-  import { defineComponent, onMounted, provide, ref, shallowRef } from 'vue';
   import { mapEvents } from '../constants/events';
   import { MapKey } from '../utils/symbols';
 
@@ -16,14 +11,14 @@
       options: MapOptions;
     }>(),
     {
-      options: { container: 'map' },
+      options: () => ({ container: 'map' }) as MapOptions,
     },
   );
   const emit = defineEmits(['loaded', ...mapEvents]);
 
-  let map: Ref<Map> = shallowRef({} as Map);
-  let loaded: Ref<boolean> = ref(false);
-  let events: Ref<Array<keyof MapEventType>> = ref(mapEvents);
+  const map: Ref<Map> = shallowRef({} as Map);
+  const loaded: Ref<boolean> = ref(false);
+  const events: Ref<Array<keyof MapEventType>> = ref(mapEvents);
 
   onMounted(() => {
     map.value = new Map(props.options);
@@ -48,6 +43,12 @@
   };
 </script>
 
+<template>
+  <div :id="`${options?.container}`" class="v-map-container">
+    <slot></slot>
+  </div>
+</template>
+
 <style scoped>
   canvas {
     outline: none;
diff --git a/lib/v-mapbox/markers/VMarker.vue b/lib/v-mapbox/markers/VMarker.vue
index 81efc478..bda9515f 100644
--- a/lib/v-mapbox/markers/VMarker.vue
+++ b/lib/v-mapbox/markers/VMarker.vue
@@ -1,195 +1,138 @@
-<template>
-  <section :id="`marker-${Date.now()}`" class="absolute">
-    <slot :set-ref="setSlotRef" name="markers" />
-    <template v-if="isMarkerAvailable">
-      <VPopup
-        :marker="marker"
-        :options="popupOptions"
-        :coordinates="coordinates"
-      >
-        <slot />
-      </VPopup>
-    </template>
-  </section>
-</template>
-<script lang="ts">
+<script setup lang="ts">
+  import type { Ref } from 'vue';
+  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
   import type { LngLatLike, MarkerOptions, PopupOptions } from 'maplibre-gl';
-  import type { PropType, Ref } from 'vue';
   import { Marker } from 'maplibre-gl';
-  import { defineComponent, onMounted, onBeforeUnmount, ref, watch } from 'vue';
-  import { markerDOMEvents, markerMapEvents } from '../constants/events';
   import VPopup from '../popups/VPopup.vue';
+  import { markerDOMEvents, markerMapEvents } from '../constants/events';
   import { injectStrict, MapKey } from '../utils';
 
-  export default defineComponent({
-    name: 'VMarker',
-    components: {
-      VPopup,
-    },
-    props: {
-      coordinates: {
-        type: [Object, Array] as PropType<LngLatLike>,
-        default: () => ({}),
-        required: true,
-      },
-      options: {
-        type: Object as PropType<MarkerOptions>,
-        default: () => ({}) as MarkerOptions,
-        required: false,
-      },
-      popupOptions: {
-        type: Object as PropType<PopupOptions>,
-        default: () => ({}) as PopupOptions,
-        required: false,
-      },
-      cursor: {
-        type: String as PropType<string>,
-        default: 'pointer',
-        required: false,
-      },
+  const props = withDefaults(
+    defineProps<{
+      coordinates: LngLatLike | null;
+      options?: MarkerOptions;
+      popupOptions?: PopupOptions;
+      cursor?: string;
+    }>(),
+    {
+      coordinates: null,
+      options: () => ({}),
+      popupOptions: () => ({}),
+      cursor: 'pointer',
     },
-    emits: [
-      'added',
-      'update:coordinates',
-      'removed',
-      ...markerMapEvents,
-      ...markerDOMEvents,
-    ],
-    setup(props, { emit }) {
-      let map = injectStrict(MapKey);
-      let marker: Ref<Marker> = ref({}) as Ref<Marker>;
-      let loaded: Ref<boolean> = ref(true);
-      let isMarkerAvailable = ref(false);
-      let slotRef: Ref<HTMLElement | null> = ref(null);
-
-      const setSlotRef = (el: HTMLElement) => {
-        slotRef.value = el;
+  );
+
+  const emit = defineEmits([
+    'added',
+    'update:coordinates',
+    'removed',
+    ...markerMapEvents,
+    ...markerDOMEvents,
+  ]);
+
+  const map = injectStrict(MapKey);
+  const marker: Ref<Marker | null> = ref(null);
+  const loaded = ref(true);
+  const isMarkerAvailable = ref(false);
+  const slotRef = ref<HTMLElement | null>(null);
+
+  const setSlotRef = (el: HTMLElement) => {
+    slotRef.value = el;
+  };
+
+  watch(marker, (markerValue) => {
+    isMarkerAvailable.value = markerValue !== null && '_map' in markerValue;
+  });
+
+  onMounted(() => {
+    if (loaded.value) {
+      const markerOptions: MarkerOptions = {
+        ...props.options,
+        element: slotRef.value || undefined,
       };
+      marker.value = new Marker(markerOptions);
+      setMarkerCoordinates(marker.value);
+      addToMap(marker.value);
+      setCursorPointer(marker.value);
+      listenMarkerEvents(marker.value);
+    }
+  });
 
-      watch(marker, (marker) => {
-        if ('_map' in marker) {
-          isMarkerAvailable.value = true;
-        } else {
-          isMarkerAvailable.value = false;
-        }
-      });
+  onBeforeUnmount(() => {
+    if (marker.value) {
+      removeFromMap(marker.value);
+    }
+  });
 
-      onMounted(() => {
-        if (loaded.value) {
-          if (slotRef.value !== null) {
-            // add marker to map
-            marker.value = new Marker({
-              element: slotRef.value!,
-              ...props.options,
-            });
-            setMarkerCoordinates(marker.value);
-            addToMap(marker.value);
-            setCursorPointer(marker.value);
-            listenMarkerEvents(marker.value);
-          } else {
-            marker.value = new Marker(props.options);
-            setMarkerCoordinates(marker.value);
-            addToMap(marker.value);
-            setCursorPointer(marker.value);
-            listenMarkerEvents(marker.value);
-          }
-        } else {
-          removeFromMap(marker.value);
-        }
-      });
+  map.value.on('style.load', () => {
+    const styleTimeout = () => {
+      if (!map.value.isStyleLoaded()) {
+        loaded.value = false;
+        setTimeout(styleTimeout, 200);
+      } else {
+        loaded.value = true;
+      }
+    };
+    styleTimeout();
+  });
 
-      onBeforeUnmount(() => {
-        removeFromMap(marker.value);
-      });
+  const setMarkerCoordinates = (marker: Marker): void => {
+    if (props.coordinates !== null) marker.setLngLat(props.coordinates);
+  };
+
+  const setCursorPointer = (marker: Marker): void => {
+    marker.getElement().style.cursor = props.cursor || 'default';
+  };
+
+  const addToMap = (marker: Marker): void => {
+    marker.addTo(map.value);
+    emit('added', { marker });
+  };
+
+  const removeFromMap = (marker: Marker): void => {
+    marker.remove();
+    emit('removed');
+  };
 
-      map.value.on('style.load', () => {
-        // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
-        const styleTimeout = () => {
-          if (!map.value.isStyleLoaded()) {
-            loaded.value = false;
-            setTimeout(styleTimeout, 200);
+  const listenMarkerEvents = (marker: Marker): void => {
+    let coordinates: LngLatLike;
+    markerMapEvents.forEach((event: string) => {
+      marker.on(event, (e: { target: Marker }) => {
+        if (event === 'dragend') {
+          if (Array.isArray(props.coordinates)) {
+            coordinates = [e.target.getLngLat().lng, e.target.getLngLat().lat];
           } else {
-            loaded.value = true;
+            coordinates = e.target.getLngLat();
           }
-        };
-        styleTimeout();
+          emit('update:coordinates', coordinates);
+        }
+        emit(event, e);
       });
+    });
 
-      /**
-       * Set marker coordinates
-       * @param marker
-       * @returns {void}
-       */
-      function setMarkerCoordinates(marker: Marker): void {
-        marker.setLngLat(props.coordinates);
-      }
-      /**
-       * Sets the Cursor to Pointer
-       * @param marker
-       * @returns {void}
-       */
-      function setCursorPointer(marker: Marker): void {
-        marker.getElement().style.cursor = props.cursor || 'default';
-      }
-
-      /**
-       * Add marker to map
-       * @param marker
-       * @returns {void}
-       */
-      function addToMap(marker: Marker): void {
-        marker.addTo(map.value);
-        emit('added', { marker });
-      }
-      /**
-       * Remove marker from map
-       * @param marker
-       * @returns {void}
-       */
-      function removeFromMap(marker: Marker): void {
-        if (isMarkerAvailable.value) {
-          marker.remove();
-          emit('removed');
-        }
-      }
+    markerDOMEvents.forEach((event: string) => {
+      marker.getElement().addEventListener(event, (e) => {
+        emit(event, e);
+      });
+    });
+  };
+</script>
 
-      /**
-       * Listen to events
-       * @param marker
-       * @returns {void}
-       */
-      function listenMarkerEvents(marker: Marker): void {
-        let coordinates: LngLatLike;
-        // Listen to Marker Mapbox events
-        markerMapEvents.forEach((event: string) => {
-          marker.on(event, (e: { target: Marker }) => {
-            if (event === 'dragend') {
-              if (props.coordinates instanceof Array) {
-                coordinates = [e.target._lngLat.lng, e.target._lngLat.lat];
-              } else {
-                coordinates = e.target._lngLat;
-              }
-              emit('update:coordinates', coordinates);
-            }
-            emit(event, e);
-          });
-        });
-        // Listen to Marker DOM events
-        markerDOMEvents.forEach((event: string) => {
-          marker.getElement().addEventListener(event, (e) => {
-            emit(event, e);
-          });
-        });
-      }
+<template>
+  <section :id="`marker-${Date.now()}`" class="absolute">
+    <slot :set-ref="setSlotRef" name="markers"></slot>
+    <template v-if="isMarkerAvailable">
+      <v-popup
+        :marker="marker!"
+        :options="popupOptions"
+        :coordinates="coordinates!"
+      >
+        <slot></slot>
+      </v-popup>
+    </template>
+  </section>
+</template>
 
-      return {
-        isMarkerAvailable,
-        marker,
-        setSlotRef,
-      };
-    },
-  });
-</script>
 <style>
   .absolute {
     position: absolute !important;
diff --git a/lib/v-mapbox/popups/VPopup.vue b/lib/v-mapbox/popups/VPopup.vue
index 6aa25249..72e44c55 100644
--- a/lib/v-mapbox/popups/VPopup.vue
+++ b/lib/v-mapbox/popups/VPopup.vue
@@ -1,135 +1,105 @@
-<template>
-  <section :id="`popup-${Date.now()}`" ref="content">
-    <slot />
-  </section>
-</template>
-<script lang="ts">
-  import type { LngLatLike, Map, Marker, PopupOptions } from 'maplibre-gl';
-  import type { PropType, Ref, SetupContext } from 'vue';
+<script setup lang="ts">
+  import { ref, onMounted, onBeforeUnmount } from 'vue';
+  import type { LngLatLike, Marker, PopupOptions } from 'maplibre-gl';
   import { Popup } from 'maplibre-gl';
-  import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
   import { popupEvents } from '../constants/events';
   import { injectStrict, MapKey } from '../utils';
 
-  export default defineComponent({
-    name: 'VPopup',
-    props: {
-      marker: {
-        type: Object as PropType<Marker>,
-        default: () => ({}) as Marker,
-        required: false,
-      },
-      options: {
-        type: Object as PropType<PopupOptions>,
-        default: () => ({}) as PopupOptions,
-        required: true,
-      },
-      coordinates: {
-        type: Object as PropType<LngLatLike>,
-        default: () => ({}),
-        required: true,
-      },
+  const props = withDefaults(
+    defineProps<{
+      marker?: Marker;
+      options: PopupOptions;
+      coordinates: LngLatLike;
+    }>(),
+    {
+      marker: () => ({}) as Marker,
+      options: () => ({}) as PopupOptions,
+      coordinates: () => ({}) as LngLatLike,
     },
-    emits: ['added', 'removed', ...popupEvents],
-    setup(props, { emit }: SetupContext) {
-      let map: Ref<Map> = injectStrict(MapKey);
-      let popup: Popup = new Popup(props.options);
-      let loaded: Ref<boolean> = ref(true);
-      const content: Ref<null | HTMLElement> = ref(null);
+  );
 
-      map.value.on('style.load', () => {
-        // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
-        const styleTimeout = () => {
-          if (!map.value.isStyleLoaded()) {
-            loaded.value = false;
-            setTimeout(styleTimeout, 200);
-          } else {
-            loaded.value = true;
-          }
-        };
-        styleTimeout();
-      });
-
-      onMounted(() => {
-        if (loaded.value) {
-          setPopupContent();
-          setPopupCoordinates();
-          addToMarker();
-          listenPopupEvents();
-        } else {
-          remove();
-          removePopupEvents();
-        }
-      });
+  const emit = defineEmits<{
+    (e: 'added', payload: { popup: Popup }): void;
+    (e: 'removed' | 'open' | 'close'): void;
+  }>();
 
-      onBeforeUnmount(() => {
-        remove();
-        removePopupEvents();
-      });
+  const map = injectStrict(MapKey);
+  const popup = new Popup(props.options);
+  const loaded = ref(true);
+  const content = ref<HTMLElement | null>(null);
 
-      /**
-       * Sets the HTML content for the popup
-       * @returns {void}
-       */
-      function setPopupContent(): void {
-        popup.setDOMContent(content.value as Node);
-      }
-      /**
-       * Set popup coordinates
-       * @returns {void}
-       */
-      function setPopupCoordinates(): void {
-        popup.setLngLat(props.coordinates);
-      }
-
-      /**
-       * Add popup to marker if marker exists
-       * else add it to the map.
-       * @returns {void}
-       */
-      function addToMarker(): void {
-        if (props.marker) {
-          props.marker.setPopup(popup);
-        } else {
-          popup.addTo(map.value);
-        }
-        emit('added', { popup });
-      }
-      /**
-       * Remove popup from map
-       * @returns {void}
-       */
-      function remove(): void {
-        popup.remove();
-        emit('removed');
+  map.value.on('style.load', () => {
+    const styleTimeout = () => {
+      if (!map.value.isStyleLoaded()) {
+        loaded.value = false;
+        setTimeout(styleTimeout, 200);
+      } else {
+        loaded.value = true;
       }
+    };
+    styleTimeout();
+  });
 
-      /**
-       * Listen to events
-       * @returns {void}
-       */
-      function listenPopupEvents(): void {
-        popupEvents.forEach((event: string) => {
-          popup.on(event, () => {
-            emit(event);
-          });
-        });
-      }
-      /**
-       * Turn off listener
-       * @returns {void}
-       */
-      function removePopupEvents(): void {
-        popupEvents.forEach((event: string) => {
-          popup.off(event, () => {
-            emit(event);
-          });
-        });
-      }
+  onMounted(() => {
+    if (loaded.value) {
+      setPopupContent();
+      setPopupCoordinates();
+      addToMarker();
+      listenPopupEvents();
+    } else {
+      remove();
+      removePopupEvents();
+    }
+  });
 
-      return {
-        content,
-      };
-    },
+  onBeforeUnmount(() => {
+    remove();
+    removePopupEvents();
   });
+
+  const setPopupContent = (): void => {
+    if (content.value) {
+      popup.setDOMContent(content.value);
+    }
+  };
+
+  const setPopupCoordinates = (): void => {
+    popup.setLngLat(props.coordinates);
+  };
+
+  const addToMarker = (): void => {
+    if ('setPopup' in props.marker) {
+      props.marker.setPopup(popup);
+    } else {
+      popup.addTo(map.value);
+    }
+    emit('added', { popup });
+  };
+
+  const remove = (): void => {
+    popup.remove();
+    emit('removed');
+  };
+
+  const listenPopupEvents = (): void => {
+    popupEvents.forEach((event) => {
+      popup.on(event, () => {
+        emit(event);
+      });
+    });
+  };
+
+  const removePopupEvents = (): void => {
+    popupEvents.forEach((event) => {
+      popup.off(event, () => {
+        emit(event);
+      });
+    });
+  };
 </script>
+
+<template>
+  <section :id="`popup-${Date.now()}`" ref="content">
+    <slot></slot>
+  </section>
+</template>