@dative-gpi/foundation-shared-components 1.0.156 → 1.0.157-mobile

package/components/map/FSMapMarker.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref, onUnmounted } from 'vue';
+import { inject, type PropType, type Ref, watch, ref, onUnmounted, onMounted } from 'vue';
 
-import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup } from 'leaflet';
+import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type LeafletMouseEvent } from 'leaflet';
 
 import { useColors } from "../../composables";
 
@@ -49,87 +49,90 @@ export default {
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
 
     const { getColors } = useColors();
-
-    const lastMarker = ref<Marker | null>(null); 
-
-    if(!map) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component');
-    }
-
-    if(!map.value) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
-    }
-
-    const updateMarker = () => {
-      if(!map.value || !props.latlng) {
-        return;
-      }
-
-      if(lastMarker.value) {
-        if(markerClusterGroup && markerClusterGroup.value) {
-          markerClusterGroup.value.removeLayer(lastMarker.value as Marker);
-        } else {
-          map.value.removeLayer(lastMarker.value as Marker);
-        }
-      }
-
-      let icon: DivIcon | null = null;
+    const getMarkerIcon = () => {
       if(props.variant === 'gps') {
         const size = 16;
-        icon = divIcon({
+        return divIcon({
           html: gpsMarkerHtml(),
           className: 'fs-map-mylocation',
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });
-      } else if(props.variant === 'location') {
+      }
+
+      if(props.variant === 'location') {
         const size = 36;
-        icon = divIcon({
+        return divIcon({
           html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
           iconSize: [size, size],
           className: props.selected ? 'fs-map-marker fs-map-location fs-map-location-selected' : 'fs-map-marker fs-map-location',
           iconAnchor: [size / 2, size / 2],
         });
-      } else {
-        const size = 16;
-        icon = divIcon({
-          html: pinMarkerHtml(getColors(props.color).base, props.label),
-          iconSize: [size, size],
-          className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
-          iconAnchor: [size / 2, size / 2],
-        });
       }
-      
-      lastMarker.value = marker(props.latlng, { icon });
-      lastMarker.value.on('click', (e) => {
-        emit('click', e);
+
+      const size = 16;
+      return divIcon({
+        html: pinMarkerHtml(getColors(props.color).base, props.label),
+        iconSize: [size, size],
+        className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
+        iconAnchor: [size / 2, size / 2],
       });
+    }
+
+    const actualMarker = ref(marker(props.latlng ?? [0, 0], { icon: getMarkerIcon() }));
+
+    if(!map) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    }
+
+    watch(map, () => {
+      if(!map.value) {
+        return;
+      }
 
       if(markerClusterGroup && markerClusterGroup.value) {
-        lastMarker.value.addTo(markerClusterGroup.value);
+        actualMarker.value.addTo(markerClusterGroup.value);
       } else {
-        lastMarker.value.addTo(map.value);
+        actualMarker.value.addTo(map.value);
       }
-    };
+    }, { immediate: true });
+
+    watch([() => props.variant, () => props.color, () => props.selected], () => {
+      if(!actualMarker.value || !map.value) {
+        return;
+      }
+
+      const icon = getMarkerIcon();
+      actualMarker.value?.setIcon(icon);
+    });
+
+    watch([() => props.latlng?.lat, () => props.latlng?.lng], () => {
+      if(!actualMarker.value || !map.value || !props.latlng) {
+        return;
+      }
+
+      actualMarker.value.setLatLng(props.latlng);
+    });
 
     onMounted(() => {
-      updateMarker();
+      actualMarker.value.on('click', (event: LeafletMouseEvent) => {
+        emit('click', event);
+      });
     });
 
     onUnmounted(() => {
-      if(lastMarker.value && map.value) {
+      if(actualMarker.value && map.value) {
         if(markerClusterGroup && markerClusterGroup.value) {
-          markerClusterGroup.value.removeLayer(lastMarker.value as Marker);
+          markerClusterGroup.value.removeLayer(actualMarker.value as Marker);
         } else {
-          map.value.removeLayer(lastMarker.value as Marker);
+          map.value.removeLayer(actualMarker.value as Marker);
         }
       }
-      lastMarker.value = null;
     })
-
-    watch([() => props.variant, () => props.color, () => props.latlng?.lat, () => props.latlng?.lng, () => props.selected],
-          updateMarker,
-    );
   }
 };
 </script>

package/components/map/FSMapMarkerClusterGroup.vue

@@ -58,27 +58,30 @@ export default {
       if (!map.value) {
         return;
       }
+
       const layers = markerClusterGroup.value.getLayers();
-      if (layers.length === props.expectedLayers && !added) {
-        markerClusterGroup.value.addTo(map.value);
-        added = true;
-      }
 
       if (layers.length === 0 && added) {
         map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
         added = false;
+        return;
       }
-
-      const bounds = new LatLngBounds([]);
-      for (const layer of layers as any[]) {
-        if (layer.getBounds) {
-          bounds.extend(layer.getBounds());
-        } else if (layer.getLatLng) {
-          bounds.extend(layer.getLatLng());
-        }
+      if (layers.length === props.expectedLayers && !added) {
+        markerClusterGroup.value.addTo(map.value);
+        added = true;
       }
+      if (layers.length === props.expectedLayers) {
+        const bounds = new LatLngBounds([]);
+        for (const layer of layers as any[]) {
+          if (layer.getBounds) {
+            bounds.extend(layer.getBounds());
+          } else if (layer.getLatLng) {
+            bounds.extend(layer.getLatLng());
+          }
+        }
 
-      emit("update:bounds", layers.length > 0 ? bounds : null);
+        emit("update:bounds", layers.length > 0 ? bounds : null);
+      }
     };
 
     markerClusterGroup.value.on("layeradd", handleLayerChange);

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          :padding="$slots.toolbar ? '0px 24px 16px 24px' : '0px 24px'"
           gap="16px"
         >
           <FSCol>

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -9,6 +9,7 @@
     >
       <FSRow
         gap="24px"
+        :height="actualImageSize"
         :wrap="false"
       >
         <template 
@@ -54,7 +55,7 @@
             >
               <slot
                 name="subtitle"
-                v-if="topOffset < 60"
+                v-if="topOffset < 64"
               >
                 <FSText
                   v-if="$props.subtitle"
@@ -65,10 +66,11 @@
               </slot>
               <slot
                 name="description"
-                v-if="topOffset < 20"
+                v-if="topOffset < 24"
               >
                 <FSText
                   v-if="$props.description"
+                  :lineClamp="2"
                   font="text-body"
                 >
                   {{ $props.description }}
@@ -146,9 +148,9 @@ export default defineComponent({
       default: () => ["124px", "96px", "80px"]
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconColor: {
       type: String as PropType<ColorBase>,

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -15,7 +15,7 @@
         <FSRow
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
-          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
+          :padding="`16px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
         >
           <slot
             name="title"
@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} ${$slots.toolbar ? '12px' : '0px'} 12px`"
           gap="16px"
         >
           <FSCol>
@@ -45,7 +45,7 @@
         <FSRow
           v-if="$slots.toolbar"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
-          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
         >
           <FSSlideGroup>
             <slot
@@ -58,7 +58,7 @@
       <FSCol
         height="fill"
         gap="0px"
-        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
+        :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 16px 12px`"
       >
         <slot />
       </FSCol>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -8,7 +8,8 @@
       #title
     >
       <FSRow
-        gap="24px"
+        gap="12px"
+        :height="actualImageSize"
         :wrap="false"
       >
         <FSImage 
@@ -31,6 +32,7 @@
           style="min-width: 0"
           align="center-left"
           height="fill"
+          :gap="$props.subtitle && $props.description ? '6px' : '8px'"
         >
           <slot
             name="title"
@@ -44,26 +46,31 @@
               name="title-extra"
               v-bind="{ topOffset }"
             >
-              <slot
-                name="subtitle"
+              <FSCol
+                gap="4px"
               >
-                <FSText
-                  v-if="$props.subtitle && topOffset < 60"
-                  font="text-button"
+                <slot
+                  name="subtitle"
                 >
-                  {{ $props.subtitle }}
-                </FSText>
-              </slot>
-              <slot
-                name="description"
-              >
-                <FSText
-                  v-if="$props.description && topOffset < 20"
-                  font="text-body"
+                  <FSText
+                    v-if="$props.subtitle && topOffset < 48"
+                    font="text-button"
+                  >
+                    {{ $props.subtitle }}
+                  </FSText>
+                </slot>
+                <slot
+                  name="description"
                 >
-                  {{ $props.description }}
-                </FSText>
-              </slot>
+                  <FSText
+                    v-if="$props.description && topOffset < 8"
+                    :lineClamp="2"
+                    font="text-body"
+                  >
+                    {{ $props.description }}
+                  </FSText>
+                </slot>
+              </FSCol>
             </slot>
           </slot>
         </FSCol>
@@ -136,9 +143,9 @@ export default defineComponent({
       default: () => ["124px", "96px", "80px"]
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconColor: {
       type: String as PropType<ColorBase>,
@@ -183,7 +190,7 @@ export default defineComponent({
       const minSize = sizeToVar(props.minImageSize);
       const actualMinSize = parseInt(minSize);
 
-      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
+      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 12));
     }
 
     delete slots.title;

package/package.json

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

package/tools/alertsTools.ts

@@ -21,19 +21,19 @@ export const AlertTools = {
   statusLabel(value: AlertStatus): string {
     switch (value) {
       case AlertStatus.Pending:
-        return $tr('ui.alert-status.pending','Pending');
+        return $tr('ui.alert-status.pending', 'Pending');
       case AlertStatus.Untriggered:
-        return $tr('ui.alert-status.untriggered','Untriggered');
+        return $tr('ui.alert-status.untriggered', 'Untriggered');
       case AlertStatus.Unresolved:
-        return $tr('ui.alert-status.unresolved','Unresolved');
+        return $tr('ui.alert-status.unresolved', 'Unresolved');
       case AlertStatus.Resolved:
-        return $tr('ui.alert-status.resolved','Resolved');
+        return $tr('ui.alert-status.resolved', 'Resolved');
       case AlertStatus.Expired:
-        return $tr('ui.alert-status.expired','Expired');
+        return $tr('ui.alert-status.expired', 'Expired');
       case AlertStatus.Triggered:
-        return $tr('ui.alert-status.triggered','Triggered');
+        return $tr('ui.alert-status.triggered', 'Triggered');
       case AlertStatus.Abandoned:
-        return $tr('ui.alert-status.abandoned','Abandoned');
+        return $tr('ui.alert-status.abandoned', 'Abandoned');
       default: return "";
     }
   },
@@ -74,11 +74,43 @@ export const AlertTools = {
   },
   criticityLabel(value: Criticity): string {
     switch (value) {
-      case Criticity.Warning: return $tr('ui.common.warning','Warning');
-      case Criticity.Error: return $tr('ui.common.error','Error');
-      default: return $tr('ui.common.information','Information');
+      case Criticity.Warning: return $tr('ui.common.warning', 'Warning');
+      case Criticity.Error: return $tr('ui.common.error', 'Error');
+      default: return $tr('ui.common.information', 'Information');
+    }
+  },
+  statusColor(status: AlertStatus): ColorEnum {
+    switch (status) {
+      case AlertStatus.None:
+      case AlertStatus.Pending:
+      case AlertStatus.Expired:
+        return ColorEnum.Warning;
+      case AlertStatus.Unresolved:
+      case AlertStatus.Triggered:
+        return ColorEnum.Error;
+      case AlertStatus.Resolved:
+      case AlertStatus.Untriggered:
+        return ColorEnum.Success;
+      default:
+        return ColorEnum.Warning;
+    }
+  },
+
+  formatValue(value: string) {
+    const n = parseFloat(value);
+
+    if (isNaN(n)) {
+      return value;
+    }
+
+    if (Number.isInteger(n)) {
+      return n;
+    }
+    else {
+      return n.toFixed(2);
     }
   }
+
 }
 
 export const prettyDuration = (n: number | undefined) => {