chore: remove device plugin + use composable in components

components/Fields/Phone.vue

@@ -3,6 +3,7 @@ import type { PropType } from 'vue'
 
 import { defineNuxtComponent } from '#app'
 import ExternalLink from '~/components/UI/ExternalLink.vue'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -16,22 +17,26 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
+  },
+
   computed: {
     numberFormated(): string {
       return this.number.replaceAll(' ', ' ')
     },
-
-    phone(): boolean {
-      return this.$device.value.phone
-    },
   },
 })
 </script>
 
 <template>
   <client-only>
     <ExternalLink
-      v-if="phone"
+      v-if="device.phone"
       :href="`tel:${number}`"
       :title="$t('fields.phone.callNumber')"
     >

components/Home/ExplorerOrFavoritesBack.vue

@@ -4,6 +4,7 @@ import { mapState } from 'pinia'
 
 import { defineNuxtComponent } from '#app'
 import { mapStore } from '~/stores/map'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -12,10 +13,14 @@ export default defineNuxtComponent({
 
   computed: {
     ...mapState(mapStore, ['isModeFavorites']),
+  },
 
-    device() {
-      return this.$device
-    },
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
   },
 
   emits: {
@@ -42,7 +47,7 @@ export default defineNuxtComponent({
     <p class="tw-ml-2">
       {{
         $t(
-          device.value.smallScreen
+          device.smallScreen
             ? isModeFavorites
               ? 'headerMenu.backToMenuFavorites'
               : 'headerMenu.backToMenuExplorer'

components/Home/Home.vue

@@ -31,6 +31,7 @@ import { menuStore } from '~/stores/menu'
 import { Mode, OriginEnum } from '~/utils/types'
 import { getHashPart, setHashParts } from '~/utils/url'
 import { flattenFeatures } from '~/utils/utilities'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -59,8 +60,11 @@ export default defineNuxtComponent({
   },
 
   setup() {
+    const device = useDevice()
+
     return {
       bottomMenu: ref<InstanceType<typeof HTMLDivElement>>(),
+      device,
     }
   },
 
@@ -111,7 +115,7 @@ export default defineNuxtComponent({
 
     isBottomMenuOpened(): boolean {
       return (
-        (this.$device.value.smallScreen && this.isPoiCardVisible)
+        (this.device.smallScreen && this.isPoiCardVisible)
         || this.isMenuItemOpen
       )
     },
@@ -127,7 +131,7 @@ export default defineNuxtComponent({
     },
 
     fitBoundsPaddingOptions(): FitBoundsOptions['padding'] {
-      if (this.$device.value.smallScreen) {
+      if (this.device.smallScreen) {
         return {
           top: 100,
           bottom: 50,
@@ -335,7 +339,7 @@ export default defineNuxtComponent({
         this.mode = Mode.EXPLORER
         this.goToSelectedFeature()
 
-        if (this.$device.value.smallScreen)
+        if (this.device.smallScreen)
           this.showPoi = false
       }
       else {

components/MainMap/FavoriteMenu.vue

@@ -11,6 +11,7 @@ import FavoriteIcon from '~/components/UI/FavoriteIcon.vue'
 import type { ApiPoi, ApiPoiId } from '~/lib/apiPois'
 import { getPois } from '~/lib/apiPois'
 import { mapStore } from '~/stores/map'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -47,6 +48,14 @@ export default defineNuxtComponent({
     toggleFavorites: () => true,
   },
 
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
+  },
+
   data(): {
     isCopied: boolean
     favs: ApiPoi[]
@@ -61,9 +70,6 @@ export default defineNuxtComponent({
 
   computed: {
     ...mapState(mapStore, ['isModeFavorites']),
-    smallScreen(): boolean {
-      return this.$device.value.smallScreen
-    },
   },
   methods: {
     async fetchFavorites(ids: number[]) {
@@ -153,7 +159,7 @@ export default defineNuxtComponent({
     <div>
       <v-dialog
         v-model="notebookModal"
-        :fullscreen="smallScreen"
+        :fullscreen="device.smallScreen"
         max-width="80rem"
       >
         <FavoriteNoteBook

components/MainMap/MapFeatures.vue

@@ -35,6 +35,7 @@ import { filterRouteByCategories, filterRouteByPoiIds } from '~/utils/styles'
 import type { LatLng } from '~/utils/types'
 import { MapStyleEnum } from '~/utils/types'
 import { getHashPart } from '~/utils/url'
+import useDevice from '~/composables/useDevice'
 
 type ITMarker = InstanceType<typeof Marker>
 
@@ -111,8 +112,12 @@ export default defineNuxtComponent({
       default: undefined,
     },
   },
+
   setup() {
+    const device = useDevice()
+
     return {
+      device,
       mapBase: ref<InstanceType<typeof MapBase>>(),
     }
   },
@@ -136,10 +141,6 @@ export default defineNuxtComponent({
     ...mapState(menuStore, ['isLoadingFeatures']),
     ...mapWritableState(mapStore, ['center']),
 
-    device() {
-      return this.$device.value
-    },
-
     availableStyles(): MapStyleEnum[] {
       return [MapStyleEnum.vector, MapStyleEnum.aerial, MapStyleEnum.bicycle]
     },

components/PoisCard/PoiCardContent.vue

@@ -13,6 +13,7 @@ import { mapStore } from '~/stores/map'
 import { isIOS } from '~/utils/isIOS'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import type { ContribFields } from '~/composables/useContrib'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -38,6 +39,14 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
+  },
+
   data(): {
     contribMode: boolean
     isContribEligible: (properties: ApiPoiProperties) => boolean
@@ -56,10 +65,6 @@ export default defineNuxtComponent({
     ...mapState(mapStore, ['isModeExplorer']),
     ...mapState(favoritesStore, ['favoritesIds']),
 
-    device() {
-      return this.$device
-    },
-
     id(): ApiPoiId {
       return this.poi.properties.metadata.id
     },
@@ -256,7 +261,7 @@ export default defineNuxtComponent({
       class="tw-flex tw-items-center tw-space-x-2 tw-justify-evenly tw-shrink-0 tw-bottom-0 tw-pt-2"
     >
       <a
-        v-if="device.value.phone && coordinatesHref"
+        v-if="device.phone && coordinatesHref"
         :href="coordinatesHref"
         class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg hover:tw-bg-zinc-100"
         :title="$t('poiCard.findRoute')"

components/PoisDetails/Carousel.vue

@@ -4,6 +4,7 @@ import { VCarousel, VCarouselItem } from 'vuetify/components/VCarousel'
 
 import { defineNuxtComponent } from '#app'
 import UIPicture from '~/components/UI/UIPicture.vue'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -12,10 +13,12 @@ export default defineNuxtComponent({
     VCarouselItem,
   },
 
-  computed: {
-    smallScreen(): boolean {
-      return this.$device.value.smallScreen
-    },
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
   },
 
   props: {
@@ -31,7 +34,7 @@ export default defineNuxtComponent({
   <div v-if="images.length === 1" class="tw-margin tw-slide tw-mb-14">
     <UIPicture
       :src="images[0]"
-      :media-size="smallScreen ? '100vw' : '66vw'"
+      :media-size="device.smallScreen ? '100vw' : '66vw'"
       :alt="$t('poiCard.image')"
     />
   </div>
@@ -40,12 +43,12 @@ export default defineNuxtComponent({
       :show-arrows="false"
       :hide-delimiter-background="true"
       class="tw-mb-14 print:tw-mb-6"
-      :height="smallScreen ? 300 : 500"
+      :height="device.smallScreen ? 300 : 500"
     >
       <v-carousel-item v-for="(image, i) in images" :key="i">
         <UIPicture
           :src="image"
-          :media-size="smallScreen ? '100vw' : '66vw'"
+          :media-size="device.smallScreen ? '100vw' : '66vw'"
           :alt="$t('poiCard.image')"
           :img-attrs="{ class: 'h-100 tw-object-cover' }"
         />

nuxt.config.ts

@@ -86,7 +86,6 @@ export default defineNuxtConfig({
     '@/plugins/settings.ts',
     '@/plugins/fontawesome.ts',
     '@/plugins/touch.ts',
-    '@/plugins/device.ts',
     { src: '@/plugins/tracking.ts', mode: 'client' },
     '@/plugins/property-translations.ts',
     { src: '@/plugins/pinia-shared-state.ts', mode: 'client' },

utils/histoire-setup.js

@@ -27,12 +27,6 @@ export const setupVue3 = defineSetupVue3(({ app, _story, _variant }) => {
     p: (field, _context) => field,
     pv: (_field, property, _context) => property,
   }
-  app.config.globalProperties.$device = ref({
-    smallScreen: false,
-    touch: true,
-    phone: true,
-  })
-
   // Plugins
   vuetify({ vueApp: app })
 })