@dative-gpi/foundation-shared-components 1.0.85 → 1.0.87

package/components/map/FSMap.vue

@@ -47,6 +47,7 @@
             v-for="location in $props.locations"
             :selected="location.id === $props.selectedLocationId"
             :key="location.id"
+            :label="location.label"
             :color="location.color ?? ColorEnum.Primary"
             :icon="location.icon ?? 'mdi-map-marker'"
             :latlng="{lat: location.address.latitude, lng: location.address.longitude}"
@@ -120,7 +121,7 @@
 import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted, markRaw } from "vue";
 
 import type {} from "leaflet.markercluster";
-import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, LatLngBounds, type FitBoundsOptions } from "leaflet";
+import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type FSArea } from '@dative-gpi/foundation-shared-domain/models';
@@ -322,11 +323,11 @@ export default defineComponent({
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom) => {
+    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom, options?: ZoomPanOptions) => {
       if(!map.value) {
         return;
       }
-      map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom);
+      map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom, options);
     }
 
     const setView = (lat: number, lng: number, zoom: number) => {
@@ -337,15 +338,24 @@ export default defineComponent({
     }
 
     const fitBounds = (bounds: LatLngBounds, options?: FitBoundsOptions) => {
-      if(!map.value) {
+      if (!map.value) {
         return;
       }
-      const calculatedBounds = new LatLngBounds(
-        calculateTargetPosition(bounds.getSouthWest()),
-        calculateTargetPosition(bounds.getNorthEast())
-      );
-      map.value.fitBounds(calculatedBounds, options);
-    }
+
+      let paddingRatio = 1
+      if(leftOffset.value) {
+        paddingRatio = leftOffset.value / map.value.getSize().x
+      }
+      else if(bottomOffset.value) {
+        paddingRatio = bottomOffset.value / map.value.getSize().y
+      }
+      if(paddingRatio > 0.5) {
+        paddingRatio = 0.5;
+      }
+      const paddedBounds = bounds.pad(paddingRatio);
+
+      map.value.fitBounds(paddedBounds, options);
+    };
 
     onMounted(() => {
       if(!leafletContainer.value) {
@@ -369,7 +379,6 @@ export default defineComponent({
       });
 
       map.value.attributionControl.remove();
-      // to display google attribution in bottom left corner
       control.attribution({ position: 'bottomleft' }).addTo(map.value);
 
       map.value.on('locationfound', (e: L.LocationEvent) => {
@@ -408,7 +417,7 @@ export default defineComponent({
       if(!selectedLocation) {
         return;
       }
-      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude);
+      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude, defaultZoom, { animate: false });
     }, { immediate: true });
 
     watch(() => props.selectedAreaId, (selectedAreaId) => {

package/components/map/FSMapMarker.vue

@@ -5,7 +5,7 @@
 <script lang="ts">
 import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
 
-import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type Layer } from 'leaflet';
+import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup } from 'leaflet';
 
 import { useColors } from "../../composables";
 
@@ -37,6 +37,10 @@ export default {
       type: Boolean,
       default: false,
       required: false
+    },
+    label: {
+      type: String,
+      required: false
     }
   },
   emits: ['click'],
@@ -63,9 +67,9 @@ export default {
 
       if(lastMarker.value) {
         if(markerClusterGroup && markerClusterGroup.value) {
-          markerClusterGroup.value.removeLayer(lastMarker.value);
+          markerClusterGroup.value.removeLayer(lastMarker.value as Marker);
         } else {
-          map.value.removeLayer(lastMarker.value as Layer);
+          map.value.removeLayer(lastMarker.value as Marker);
         }
       }
 
@@ -81,7 +85,7 @@ export default {
       } else if(props.variant === 'location' && props.icon) {
         const size = 36;
         icon = divIcon({
-          html: locationMarkerHtml(props.icon, getColors(props.color).base),
+          html: locationMarkerHtml(props.icon, getColors(props.color).base, props.label),
           iconSize: [size, size],
           className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
           iconAnchor: [size / 2, size / 2],

package/components/map/FSMapOverlay.vue

@@ -110,10 +110,12 @@ export default defineComponent({
 
       if (mobileOverlayWrapper.value) {
         mobileResizeObserver.value.observe(mobileOverlayWrapper.value);
+        emit("update:height", mobileOverlayWrapper.value.offsetHeight);
       }
 
       if (desktopOverlay.value) {
         desktopResizeObserver.value.observe(desktopOverlay.value.$el);
+        emit("update:width", desktopOverlay.value.$el.offsetWidth);
       }
     });
 

package/components/map/FSMapPolygon.vue

@@ -47,9 +47,9 @@ export default {
 
       if(lastPolygon.value) {
         if(featureGroup && featureGroup.value) {
-          featureGroup.value.removeLayer(lastPolygon.value);
+          featureGroup.value.removeLayer(lastPolygon.value as Polygon);
         } else {
-          map.value.removeLayer(lastPolygon.value);
+          map.value.removeLayer(lastPolygon.value as Polygon);
         }
       }
 

package/components/tiles/FSLocationTileUI.vue

@@ -38,11 +38,12 @@
             </FSSpan>
           </FSCol>
           <FSRow
+            v-if="$props.deviceCount"
             :wrap="false"
             align="center-left"
           >
             <FSColor
-              padding="0 8px"
+              width="24px"
               height="24px"
               :color="ColorEnum.Light"
               :border="false"
@@ -53,7 +54,7 @@
                 <FSSpan
                   font="text-overline"
                 >
-                  {{ $props.deviceCount }}
+                  {{ $props.deviceCount <= 99 ? $props.deviceCount : "99+" }}
                 </FSSpan>
               </FSRow>
             </FSColor>
@@ -63,6 +64,32 @@
               {{ $tr("entity.location.devices", "Devices") }}
             </FSSpan>
           </FSRow>
+          <FSRow
+            v-if="$props.address"
+            :wrap="false"
+            align="center-left"
+          >
+            <FSColor
+              width="24px"
+              height="24px"
+              :color="ColorEnum.Light"
+              :border="false"
+            >
+              <FSRow
+                align="center-center"
+              >
+                <FSIcon
+                  icon="mdi-map-marker"
+                  size="16px"
+                />
+              </FSRow>
+            </FSColor>
+            <FSSpan
+              font="text-overline"
+            >
+              {{ $props.address }}
+            </FSSpan>
+          </FSRow>
         </FSCol>
         <FSIconCard
           backgroundVariant="standard"
@@ -115,6 +142,10 @@ export default defineComponent({
       required: false,
       default: "mdi-map-marker"
     },
+    address: {
+      type: String,
+      required: false
+    },
     deviceCount: {
       type: Number,
       required: false,

package/composables/useBreakpoints.ts

@@ -2,13 +2,17 @@ import { computed, ref } from "vue";
 
 let initialized = false;
 
-const windowHeight = ref(window.outerHeight);
-const windowWidth = ref(window.outerWidth);
+const windowHeight = ref(window.innerHeight);
+const windowWidth = ref(window.innerWidth);
+
+const windowOuterWidth = ref(window.outerWidth);
 
 export const useBreakpoints = () => {
     const onSizeChange = (): void => {
-        windowHeight.value = window.outerHeight;
-        windowWidth.value = window.outerWidth;
+        windowHeight.value = window.innerHeight;
+        windowWidth.value = window.innerWidth;
+
+        windowOuterWidth.value = window.outerWidth;
     };
 
     const isTouchScreenEnabled = computed((): boolean => {
@@ -16,11 +20,11 @@ export const useBreakpoints = () => {
     });
 
     const isMobileSized = computed((): boolean => {
-        return windowWidth.value < 1264;
+        return windowOuterWidth.value < 1264;
     });
 
     const isExtraSmall = computed((): boolean => {
-        return windowWidth.value < 600;
+        return windowOuterWidth.value < 600;
     });
 
     if (!initialized) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.85",
+  "version": "1.0.87",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.85",
-    "@dative-gpi/foundation-shared-services": "1.0.85"
+    "@dative-gpi/foundation-shared-domain": "1.0.87",
+    "@dative-gpi/foundation-shared-services": "1.0.87"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "178fc269ca3ac29c4a0a6e3b1c163b52d1865dbf"
+  "gitHead": "180b62cf6fa6a72b6eff933df6f245c7cdc341db"
 }

package/utils/leafletMarkers.ts

@@ -1,6 +1,6 @@
-export const locationMarkerHtml = (icon: string, color: string) => {
+export const locationMarkerHtml = (icon: string, color: string, label: string = '') => {
   const iconHtml = `
-  <div style="--fs-map-location-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
+  <div title="${label}" style="--fs-map-location-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
     <i class="${icon} mdi notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;" />
   </div>`;
 
@@ -22,8 +22,8 @@ export const gpsMarkerHtml = () => {
   return iconHtml;
 }
 
-export const pinMarkerHtml = (color: string) => {
-  const iconHtml = `<div style="--fs-map-point-pin-color:${color}" class="fs-map-point-pin" />`;
+export const pinMarkerHtml = (color: string, label: string = "") => {
+  const iconHtml = `<div title="${label}" style="--fs-map-point-pin-color:${color}" class="fs-map-point-pin" />`;
 
   return iconHtml;
 }