diff --git a/src/components/elements/MapMarkers.vue b/src/components/elements/MapMarkers.vue index ca68ec2e..47693439 100644 --- a/src/components/elements/MapMarkers.vue +++ b/src/components/elements/MapMarkers.vue @@ -59,6 +59,7 @@ function onClusterClick(center: Point, proposedZoom: number) {
{{ count < 100 ? count : '99+' }} @@ -98,6 +99,7 @@ function onClusterClick(center: Point, proposedZoom: number) { diff --git a/src/components/elements/MobileList.vue b/src/components/elements/MobileList.vue index 56b3ad22..c6bd2377 100644 --- a/src/components/elements/MobileList.vue +++ b/src/components/elements/MobileList.vue @@ -2,9 +2,11 @@ import { type PropType, nextTick, onMounted, ref, watch } from 'vue' import { storeToRefs } from 'pinia' import { type Location, Theme } from 'types' +import { useEventListener } from '@vueuse/core' import { useLocations } from '@/stores/locations' import SheetModal from '@/components/atoms/SheetModal.vue' import Card from '@/components/elements/Card.vue' +import { useMap } from '@/stores/map' defineProps({ locations: { @@ -13,7 +15,7 @@ defineProps({ }, }) -defineEmits({ +const emit = defineEmits({ closeList: () => true, }) @@ -93,6 +95,12 @@ watch(cards, (newCards, oldCards) => { if (newCards && newCards.length > 0) newCards.forEach(card => observer.observe(card)) }, { deep: true }) + +const { mapInstance } = storeToRefs(useMap()) +useEventListener(mapInstance.value?.$el, 'click', (event: MouseEvent) => { + if (!(event.target as HTMLElement).closest('[data-custom-marker]')) + emit('closeList') +})