Move event from prop to emit

components/Home/Embedded.vue

@@ -72,10 +72,6 @@ onMounted(() => {
 //
 // Computed
 //
-const explorerModeEnabled = computed(() => {
-  return settings!.themes[0]?.explorer_mode ?? true
-})
-
 const filters = computed(() => {
   return route.query.menuItemIds
     ? route.query.menuItemIds
@@ -187,7 +183,6 @@ function toggleExploreAroundSelectedPoi() {
       <PoiCardContent
         :details-is-external="true"
         :poi="selectedFeature"
-        :explorer-mode-enabled="explorerModeEnabled"
         :favorites-mode-enabled="false"
         @explore-click="toggleExploreAroundSelectedPoi"
         @zoom-click="goToSelectedFeature"
@@ -207,7 +202,6 @@ function toggleExploreAroundSelectedPoi() {
           :features="mapFeatures"
           :selected-categories-ids="selectedCategoryIds"
           :style-icon-filter="poiFilters"
-          :explorer-mode-enabled="explorerModeEnabled"
           :cooperative-gestures="false"
           :boundary-area="boundaryArea || settings!.polygon.data"
         />

components/Home/Home.vue

@@ -141,10 +141,6 @@ onMounted(async () => {
 //
 // Computed
 //
-const explorerModeEnabled = computed(() => {
-  return settings!.themes[0]?.explorer_mode ?? true
-})
-
 const favoritesModeEnabled = computed(() => {
   return settings!.themes[0]?.favorites_mode ?? true
 })
@@ -288,7 +284,10 @@ watch(isModeFavorites, async (isEnabled) => {
 //
 // Methods
 //
-function goToSelectedFeature() {
+function goToSelectedFeature(feature?: ApiPoi) {
+  if (feature)
+    mapStore.setSelectedFeature(feature)
+
   if (mapFeaturesRef.value)
     mapFeaturesRef.value.goToSelectedFeature()
 }
@@ -557,12 +556,11 @@ function handlePoiCardClose() {
         >
           <FavoriteMenu
             v-if="favoritesModeEnabled"
-            :explore-around-selected-poi="toggleExploreAroundSelectedPoi"
-            :go-to-selected-poi="goToSelectedFeature"
-            :toggle-favorite="toggleFavorite"
-            :explorer-mode-enabled="explorerModeEnabled"
+            @explore-click="toggleExploreAroundSelectedPoi"
+            @favorite-click="toggleFavorite"
             @toggle-favorite-mode="toggleFavoriteMode"
             @toggle-note-book-mode="toggleNoteBookMode"
+            @zoom-click="goToSelectedFeature"
           />
           <NavMenu
             id="nav-menu"
@@ -585,7 +583,6 @@ function handlePoiCardClose() {
           :features="mapFeatures"
           :selected-categories-ids="isModeExplorer ? [] : selectedCategoryIds"
           :style-icon-filter="poiFilters"
-          :explorer-mode-enabled="explorerModeEnabled"
           :enable-filter-route-by-categories="!isModeFavorites"
           :enable-filter-route-by-features="isModeFavorites"
           :boundary-area="boundaryArea || settings!.polygon.data"
@@ -625,7 +622,6 @@ function handlePoiCardClose() {
           "
           :poi="selectedFeature"
           class="tw-grow-0"
-          :explorer-mode-enabled="explorerModeEnabled"
           :favorites-mode-enabled="favoritesModeEnabled"
           @explore-click="toggleExploreAroundSelectedPoi(undefined)"
           @favorite-click="toggleFavorite"
@@ -656,7 +652,6 @@ function handlePoiCardClose() {
             "
             :poi="selectedFeature"
             class="tw-grow-0 tw-text-left tw-h-full"
-            :explorer-mode-enabled="explorerModeEnabled"
             :favorites-mode-enabled="favoritesModeEnabled"
             @explore-click="toggleExploreAroundSelectedPoi(undefined)"
             @favorite-click="toggleFavorite"

components/MainMap/FavoriteMenu.vue

@@ -9,25 +9,24 @@ import type { ApiPoi } from '~/lib/apiPois'
 import { mapStore as useMapStore } from '~/stores/map'
 import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 
-const props = defineProps<{
-  exploreAroundSelectedPoi: Function
-  explorerModeEnabled: boolean
-  goToSelectedPoi: Function
-  toggleFavorite: Function
+const emit = defineEmits<{
+  (e: 'exploreClick', poi: ApiPoi): void
+  (e: 'favoriteClick', poi: ApiPoi): void
+  (e: 'toggleFavoriteMode'): void
+  (e: 'toggleNoteBookMode'): void
+  (e: 'zoomClick', poi: ApiPoi): void
 }>()
 
-const emit = defineEmits(['toggleFavoriteMode', 'toggleNoteBookMode'])
-
 const device = useDevice()
 const notebookModal = ref<boolean>(false)
 
 const mapStore = useMapStore()
 const { isModeFavorites } = storeToRefs(mapStore)
 const { favoriteCount } = storeToRefs(useFavoriteStore())
 
-function explore(poi: ApiPoi) {
+function onExploreClick(poi: ApiPoi) {
   notebookModal.value = false
-  props.exploreAroundSelectedPoi(poi)
+  emit('exploreClick', poi)
 }
 
 function onClose() {
@@ -36,13 +35,8 @@ function onClose() {
 }
 
 function onZoomClick(poi: ApiPoi) {
-  mapStore.setSelectedFeature(poi)
   notebookModal.value = false
-  props.goToSelectedPoi(poi)
-}
-
-function handleFavorite(poi: ApiPoi) {
-  props.toggleFavorite(poi)
+  emit('zoomClick', poi)
 }
 
 const { $tracking } = useNuxtApp()
@@ -108,9 +102,8 @@ async function toggleNoteBookMode() {
         max-width="80rem"
       >
         <FavoriteNoteBook
-          :explorer-mode-enabled="explorerModeEnabled"
-          @explore-click="explore"
-          @favorite-click="handleFavorite"
+          @explore-click="onExploreClick"
+          @favorite-click="$emit('favoriteClick', $event)"
           @zoom-click="onZoomClick"
           @on-close="onClose"
         />

components/MainMap/FavoriteNoteBook.vue

@@ -10,10 +10,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 import { siteStore as useSiteStore } from '~/stores/site'
 
-defineProps<{
-  explorerModeEnabled: boolean
-}>()
-
 defineEmits<{
   (e: 'onClose'): void
   (e: 'exploreClick', poi: ApiPoi): void
@@ -131,7 +127,6 @@ function removeFavorites() {
     <PoisDeck
       :pois="favoriteFeatures"
       :is-card-light="false"
-      :explorer-mode-enabled="explorerModeEnabled"
       :favorites-mode-enabled="true"
       class="tw-pb-4"
       @explore-click="$emit('exploreClick', $event)"

components/MainMap/MapFeatures.stories.ts

@@ -39,7 +39,6 @@ const defaultProps = {
       },
     } as ApiMenuCategory,
   ],
-  explorerModeEnabled: false,
 }
 
 export const Default = bind(

components/MainMap/MapFeatures.story.vue

@@ -34,7 +34,6 @@ const defaultProps = {
       },
     } as ApiMenuCategory,
   ],
-  explorerModeEnabled: false,
 }
 
 const feature1: ApiPoi = {

components/MainMap/MapFeatures.vue

@@ -94,10 +94,6 @@ export default defineNuxtComponent({
       type: Array as PropType<Array<string[]> | null>,
       default: null,
     },
-    explorerModeEnabled: {
-      type: Boolean,
-      required: true,
-    },
     enableFilterRouteByCategories: {
       type: Boolean,
       default: true,
@@ -122,7 +118,9 @@ export default defineNuxtComponent({
 
   setup() {
     const device = useDevice()
-    const { config } = storeToRefs(useSiteStore())
+    const siteStore = useSiteStore()
+    const { config } = siteStore
+    const { explorerModeEnabled } = storeToRefs(useSiteStore())
     const mapStore = useMapStore()
     const { center, selectedFeature, pinMarker, teritorioCluster } = storeToRefs(mapStore)
     const mapStyleLoaded = ref(false)
@@ -131,6 +129,7 @@ export default defineNuxtComponent({
       center,
       config,
       device,
+      explorerModeEnabled,
       mapBase: ref<InstanceType<typeof MapBase>>(),
       mapStore,
       mapStyleLoaded,

components/PoisCard/PoiCard.stories.ts

@@ -11,7 +11,6 @@ export default {
 
 const defaultProps = {
   poi,
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
 }
 

components/PoisCard/PoiCard.story.vue

@@ -5,7 +5,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 
 const defaultProps = {
   poi: poi as ApiPoi,
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
 }
 

components/PoisCard/PoiCard.vue

@@ -11,7 +11,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 withDefaults(defineProps<{
   canClose?: boolean
   poi: ApiPoi
-  explorerModeEnabled: boolean
   favoritesModeEnabled: boolean
   showImage?: boolean
 }>(), {
@@ -85,7 +84,6 @@ const closeBtnStyles = reactive({
 
     <PoiCardContent
       :poi="poi"
-      :explorer-mode-enabled="explorerModeEnabled"
       :favorites-mode-enabled="favoritesModeEnabled"
       class="tw-px-4 tw-py-5 tw-flex tw-flex-col md:tw-overflow-y-auto tw-flex-grow md:tw-max-h-full tw-box-border tw-w-full md:tw-h-80 md:tw-w-96"
       @explore-click="$emit('exploreClick', $event)"

components/PoisCard/PoiCardContent.vue

@@ -8,6 +8,7 @@ import type { ApiPoi } from '~/lib/apiPois'
 import { coordinatesHref } from '~/lib/coordinates'
 import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 import { mapStore as useMapStore } from '~/stores/map'
+import { siteStore as useSiteStore } from '~/stores/site'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import useDevice from '~/composables/useDevice'
 import IsochroneTrigger from '~/components/Isochrone/IsochroneTrigger.vue'
@@ -17,7 +18,6 @@ import IsochroneTrigger from '~/components/Isochrone/IsochroneTrigger.vue'
 //
 const props = withDefaults(defineProps<{
   detailsIsExternal?: boolean
-  explorerModeEnabled: boolean
   favoritesModeEnabled: boolean
   poi: ApiPoi
 }>(), {
@@ -43,6 +43,7 @@ const { contribMode, isContribEligible, getContributorFields } = useContrib()
 const { isModeExplorer } = storeToRefs(useMapStore())
 const device = useDevice()
 const { enabled: isochroneEnabled } = useIsochrone()
+const { explorerModeEnabled } = storeToRefs(useSiteStore())
 
 //
 // Data

components/PoisCard/PoisDeck.stories.ts

@@ -25,7 +25,6 @@ const defaultProps = {
     ),
   ),
   selectedPoiIds: points.map(feature => feature.properties.id),
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
 }
 

components/PoisCard/PoisDeck.story.vue

@@ -18,7 +18,6 @@ const defaultProps = {
     ),
   ),
   selectedPoiIds: points.map(feature => feature.properties.id as ApiPoiId),
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
   isCardLight: true,
 }

components/PoisCard/PoisDeck.vue

@@ -4,12 +4,10 @@ import PoiCard from '~/components/PoisCard/PoiCard.vue'
 import PoiCardLight from '~/components/PoisCard/PoiCardLight.vue'
 
 withDefaults(defineProps<{
-  explorerModeEnabled?: boolean
   favoritesModeEnabled?: boolean
   pois: ApiPoi[]
   isCardLight: boolean
 }>(), {
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
 })
 
@@ -38,7 +36,6 @@ defineEmits<{
       :can-close="false"
       :poi="item"
       class="tw-grow-1 poi-deck"
-      :explorer-mode-enabled="explorerModeEnabled"
       :favorites-mode-enabled="favoritesModeEnabled"
       @explore-click="$emit('exploreClick', $event)"
       @favorite-click="$emit('favoriteClick', $event)"

stores/site.ts

@@ -8,6 +8,7 @@ import type { VidoConfig } from '~/utils/types-config'
 interface State {
   locale: string | null
   config: VidoConfig | undefined
+  explorerModeEnabled: boolean
   settings: Settings | undefined
   contents: ContentEntry[] | undefined
   translations: PropertyTranslations | undefined
@@ -17,6 +18,7 @@ export const siteStore = defineStore('site', {
   state: (): State => ({
     locale: null,
     config: undefined,
+    explorerModeEnabled: false,
     settings: undefined,
     contents: undefined,
     translations: undefined,
@@ -25,6 +27,7 @@ export const siteStore = defineStore('site', {
     async init(headers: Record<string, string>) {
       this.config = vidoConfig(headers)
       this.settings = await getSettings(this.config)
+      this.explorerModeEnabled = this.settings?.themes[0]?.explorer_mode || true
       this.contents = await getContents(this.config)
       this.translations = await getPropertyTranslations(this.config)
     },