Expose remove function to the popup.

indoorequal · Sep 25, 2024 · a40dcc4 · a40dcc4
1 parent bec966b
commit a40dcc4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/docs/examples/popup.vue b/docs/examples/popup.vue
@@ -10,9 +10,10 @@
   >
     <mgl-navigation-control />
     <mgl-marker :coordinates="coordinates">
-      <mgl-popup>
+      <mgl-popup ref="popup">
         <h1>Hello</h1>
         <p>HTML content</p>
+        <a href="#" @click="closePopup">Close popup</a>
       </mgl-popup>
     </mgl-marker>
   </mgl-map>
@@ -25,11 +26,18 @@ import {
   MglMarker,
   MglPopup,
 } from '@indoorequal/vue-maplibre-gl';
+import { useTemplateRef } from 'vue'
 
 const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
 const center = [12.550343, 55.665957];
 const zoom = 8;
 const coordinates = [12.550343, 55.665957];
+
+const popupRef = useTemplateRef('popup')
+const closePopup = () => {
+  popupRef.value.remove()
+};
+
 </script>
 
 <style lang="scss">

diff --git a/lib/components/popup.component.ts b/lib/components/popup.component.ts
@@ -33,6 +33,12 @@ export default defineComponent({
      */
     "close",
   ],
+  expose: [
+    /**
+     * Close the popup
+     */
+    "remove",
+  ],
   props: {
     /**
      * The geographical location of the popup's anchor.
@@ -124,7 +130,7 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props, { slots, emit }) {
+  setup(props, { slots, emit, expose }) {
     const map = inject(mapSymbol);
     const marker = inject(markerSymbol);
     const root = ref();
@@ -152,6 +158,12 @@ export default defineComponent({
     emitEvent("open");
     emitEvent("close");
 
+    expose({
+      remove() {
+        popup.remove();
+      },
+    });
+
     watch(
       () => props.coordinates,
       (v) => {