@dative-gpi/foundation-shared-components 1.0.136 → 1.0.137-maps1

package/components/FSCheckbox.vue

@@ -50,6 +50,7 @@
         v-if="$props.description"
         class="fs-checkbox-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSRadio.vue

@@ -50,6 +50,7 @@
         v-if="$props.description"
         class="fs-radio-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSlider.vue

@@ -35,7 +35,7 @@
       :elevation="0"
       :tickSize="4"
       :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @update:modelValue="$emit('update:modelValue', $event)"
       v-bind="$attrs"
     >
       <template
@@ -55,6 +55,7 @@
         v-if="$props.description"
         class="fs-slider-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSwitch.vue

@@ -1,29 +1,25 @@
 <template>
-  <FSRow
-    width="hug"
-    align="top-left"
-    gap="16px"
+  <FSCol
     padding="8px 0px"
-    :wrap="false"
   >
-    <v-switch
-      v-if="variant == 'left'"
-      class="fs-switch"
-      hide-details
-      inset
-      :validateOn="validateOn"
-      :rules="$props.rules"
-      :ripple="false"
-      :style="style"
-      :modelValue="$props.modelValue"
-      @update:modelValue="onToggle"
-      v-bind="$attrs"
-    />
-    <slot>
-      <FSCol
-        width="hug"
-        v-if="$props.label || $props.description || $slots.description"
-      >
+    <FSRow
+      gap="16px"
+      :wrap="false"
+    >
+      <v-switch
+        v-if="variant == 'left'"
+        class="fs-switch"
+        hide-details
+        inset
+        :validateOn="validateOn"
+        :rules="$props.rules"
+        :ripple="false"
+        :style="style"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onToggle"
+        v-bind="$attrs"
+      />
+      <FSCol>
         <FSSpan
           v-if="$props.label"
           class="fs-switch-label"
@@ -41,33 +37,31 @@
             class="fs-switch-description"
             font="text-overline"
             :style="style"
+            :lineClamp="2"
           >
             {{ $props.description }}
           </FSSpan>
         </slot>
-        <slot
-          name="footer"
-        />
       </FSCol>
-    </slot>
-    <FSRow
-      v-if="variant == 'right'"
-      align="center-right"
-    >
-      <v-switch
-        class="fs-switch"
-        hide-details
-        inset
-        :validateOn="validateOn"
-        :rules="$props.rules"
-        :ripple="false"
-        :style="style"
-        :modelValue="$props.modelValue"
-        @update:modelValue="onToggle"
-        v-bind="$attrs"
-      />
+      <FSRow
+        v-if="variant == 'right'"
+        align="center-right"
+      >
+        <v-switch
+          class="fs-switch"
+          hide-details
+          inset
+          :validateOn="validateOn"
+          :rules="$props.rules"
+          :ripple="false"
+          :style="style"
+          :modelValue="$props.modelValue"
+          @update:modelValue="onToggle"
+          v-bind="$attrs"
+        />
+      </FSRow>
     </FSRow>
-  </FSRow>
+  </FSCol>
 </template>
 
 <script lang="ts">

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -0,0 +1,170 @@
+<template>
+  <component
+    v-if="$props.modelStatus"
+    class="fs-status-rich-card"
+    variant="standard"
+    :is="$attrs.onClick ? FSClickable : FSCard"
+    :padding="$props.padding"
+    :height="$props.height"
+    :width="$props.width"
+    :color="color"
+    :style="style"
+  >
+    <FSCol
+      align="center-center"
+      :gap="$props.gap"
+    >
+      <FSRow
+        align="top-center"
+      >
+        <FSIcon
+          v-if="icon"
+        >
+          {{ icon }}
+        </FSIcon>
+        <FSText
+          v-if="value"
+          font="text-button"
+        >
+          {{ value }}
+        </FSText>
+      </FSRow>
+      <FSText
+        font="text-overline"
+        align="center"
+        :lineClamp="$props.titleClamp"
+      >
+        {{ title }}
+      </FSText>
+      <slot
+        name="footer"
+        v-bind="{ color }"
+      />
+    </FSCol>
+    <div
+      class="fs-status-rich-card-corner"
+    >
+      <slot
+        name="corner"
+        v-bind="{ color }"
+      />
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSClickable from "../FSClickable.vue";
+import FSCard from "../FSCard.vue";
+import FSIcon from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSStatusRichCard",
+  components: {
+    FSClickable,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSCol
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "100px"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "160px"
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "12px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    title: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    titleClamp: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    color: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    fillBackground: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelStatus: {
+      type: Object as PropType<FSModelStatus | undefined>,
+      required: true
+    },
+    statusGroup: {
+      type: Object as PropType<FSDeviceStatusGroup | undefined>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const color = computed((): string => {
+      return props.color ?? props.statusGroup?.color ?? props.modelStatus?.colorDefault ?? ColorEnum.Primary;
+    });
+
+    const icon = computed((): string | null => {
+      return props.statusGroup?.icon ?? props.modelStatus?.iconDefault ?? null;
+    });
+
+    const title = computed((): string => {
+      return props.title ?? props.modelStatus?.label;
+    });
+
+    const value = computed((): string | null => {
+      if (props.statusGroup?.label) {
+        return props.statusGroup.label;
+      }
+      if (props.statusGroup?.value && !isNaN(parseFloat(props.statusGroup?.value))) {
+        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
+      }
+      if (props.statusGroup?.value) {
+        return `${props.statusGroup?.value} ${props.statusGroup?.unit}`;
+      }
+      return null;
+    });
+
+    const style = computed((): StyleValue => ({
+      "--fs-status-rich-card-background-color": props.fillBackground ? getColors(color.value).light : "transparent",
+      "--fs-status-rich-card-border-color": props.fillBackground ? getColors(color.value).base : getColors(ColorEnum.Light).dark
+    }));
+
+    return {
+      FSClickable,
+      FSCard,
+      color,
+      style,
+      title,
+      value,
+      icon
+    };
+  }
+});
+</script>

package/components/fields/FSBaseField.vue

@@ -54,6 +54,7 @@
         v-if="$props.description"
         class="fs-base-field-description"
         font="text-overline"
+        :lineClamp="2"
       >
         {{ $props.description }}
       </FSSpan>

package/components/fields/FSRichTextField.vue

@@ -215,7 +215,8 @@
       <FSSpan
         v-if="!readonly && $props.description"
         class="fs-rich-text-field-description"
-        font="text-underline"
+        font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/map/FSMap.vue

@@ -22,38 +22,7 @@
           :color="ColorEnum.Primary"
           :latlng="gpsPosition"
         />
-  
-        <FSMapFeatureGroup
-          v-if="$props.areas"
-          :expected-layers="$props.areas.length"
-          @update:bounds="(bounds) => areaGroupBounds = bounds"
-        >
-          <FSMapPolygon
-            v-for="area in areas"
-            :key="area.id"
-            :color="area.color"
-            :latlngs="area.coordinates.map((coord) => ({lat: coord.latitude, lng: coord.longitude}))"
-            @click="$emit('update:selectedAreaId', area.id)"
-          />
-        </FSMapFeatureGroup>
-  
-        <FSMapMarkerClusterGroup
-          v-if="$props.locations"
-          :expected-layers="$props.locations.length"
-          :disableClusteringAtZoom="defaultZoom"
-          @update:bounds="(bounds) => locationGroupBounds = bounds"
-        >
-          <FSMapMarker
-            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}"
-            @click="$emit('update:selectedLocationId', location.id)"
-          />
-        </FSMapMarkerClusterGroup>
+        <slot />
       </template>
     </div>
 
@@ -125,10 +94,9 @@ import type {} from "leaflet.markercluster";
 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';
 
 import { useBreakpoints, useColors, useSlots } from "../../composables";
-import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
+import { ColorEnum, type MapLayer } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -138,19 +106,12 @@ import FSCol from "../FSCol.vue";
 
 import FSMapMarker from "./FSMapMarker.vue";
 import FSMapTileLayer from "./FSMapTileLayer.vue";
-import FSMapFeatureGroup from "./FSMapFeatureGroup.vue";
-import FSMapMarkerClusterGroup from "./FSMapMarkerClusterGroup.vue";
-import FSMapPolygon from "./FSMapPolygon.vue";
 
 export default defineComponent({
   name: "FSMap",
   components: {
     FSMapMarker,
     FSMapTileLayer,
-    FSMapFeatureGroup,
-    FSMapMarkerClusterGroup,
-    FSMapPolygon,
-
     FSMapLayerButton,
     FSMapOverlay,
     FSButton,
@@ -194,19 +155,14 @@ export default defineComponent({
       default: false
     },
     center: {
-      type: Array as PropType<number[]>,
+      type: Array as PropType<number[] | null>,
       required: false,
-      default: () => [45.71, 5.07]
-    },
-    locations: {
-      type: Array as PropType<FSLocation[]>,
-      required: false,
-      default: () => [],
+      default: null
     },
-    areas: {
-      type: Array as PropType<FSArea[]>,
+    bounds: {
+      type: Object as PropType<LatLngBounds | null>,
       required: false,
-      default: () => [],
+      default: null
     },
     currentLayer: {
       type: String as PropType<"map" | "imagery">,
@@ -217,16 +173,6 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       required: false,
       default: () => ["map", "imagery"]
-    },
-    selectedLocationId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    selectedAreaId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
     }
   },
   emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
@@ -303,19 +249,6 @@ export default defineComponent({
       return mapLayers.find((layer) => layer.name === props.currentLayer)?.layer ?? mapLayers[0].layer;
     });
 
-    const bounds = computed<LatLngBounds | null>(() => {
-      if(!locationGroupBounds.value && !areaGroupBounds.value) {
-        return null;
-      }
-      let bounds = locationGroupBounds.value;
-      if(bounds && areaGroupBounds.value) {
-        bounds.extend(areaGroupBounds.value);
-      } else if(areaGroupBounds.value) {
-        bounds = areaGroupBounds.value;
-      }
-      return bounds as LatLngBounds;
-    });
-
     const overlaySlots = computed(() => {
       return Object.keys(slots).filter((slot) => slot.startsWith("overlay-")).reduce((acc, slot) => {
         acc[slot.replace("overlay-", "")] = slots[slot];
@@ -394,11 +327,12 @@ export default defineComponent({
         minZoom: 2,
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
-        maxBoundsViscosity: 1.0
+        maxBoundsViscosity: 1.0,
+        zoom: defaultZoom,
+        center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
       };
 
       map.value = markRaw(createMap(leafletContainer.value, mapOptions));
-      setView(props.center[0], props.center[1], defaultZoom);
       
       map.value.on('click', (e: L.LeafletMouseEvent) => {
         emit('click:latlng', e.latlng);
@@ -428,41 +362,18 @@ export default defineComponent({
       mapResizeObserver.disconnect();
     });
 
-    watch (() => props.center, (center) => {
-      if(!map.value) {
-        return;
-      }
-      setView(center[0], center[1], defaultZoom);
-    });
-
-    watch (() => props.selectedLocationId, (selectedLocationId) => {
-      if(!map.value) {
-        return;
-      }
-      const selectedLocation = props.locations.find((location) => location.id === selectedLocationId);
-      if(!selectedLocation) {
-        return;
-      }
-      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude, defaultZoom, { animate: false });
-    }, { immediate: true });
-
-    watch(() => props.selectedAreaId, (selectedAreaId) => {
-      if(!map.value) {
-        return;
-      }
-      const selectedArea = props.areas.find((area) => area.id === selectedAreaId);
-      if(!selectedArea) {
+    watch ([() => props.center, () => map.value], () => {
+      if(!map.value || !props.center) {
         return;
       }
-      const bounds = latLngBounds(selectedArea.coordinates.map((coord) => latLng(coord.latitude, coord.longitude)));
-      fitBounds(bounds);
+      setView(props.center[0], props.center[1], defaultZoom);
     }, { immediate: true });
 
-    watch( () => bounds.value, (bounds) => {
-      if(!map.value || !bounds) {
+    watch([() => props.bounds, () => map.value], () => {
+      if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(bounds, { maxZoom: defaultZoom });
+      fitBounds(props.bounds, { maxZoom: defaultZoom });
     });
 
     return {

package/components/map/FSMapMarker.vue

@@ -82,20 +82,20 @@ export default {
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });
-      } else if(props.variant === 'location' && props.icon) {
+      } else if(props.variant === 'location') {
         const size = 36;
         icon = divIcon({
-          html: locationMarkerHtml(props.icon, getColors(props.color).base, props.label),
+          html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
           iconSize: [size, size],
-          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
+          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 = 20;
+        const size = 16;
         icon = divIcon({
-          html: pinMarkerHtml(getColors(props.color).base),
+          html: pinMarkerHtml(getColors(props.color).base, props.label),
           iconSize: [size, size],
-          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
+          className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
           iconAnchor: [size / 2, size / 2],
         });
       }

package/components/map/FSMapMarkerClusterGroup.vue

@@ -45,7 +45,7 @@ export default {
 
         return divIcon({
           html: clusterMarkerHtml(cluster.getChildCount()),
-          className: 'fs-map-location fs-map-location-full',
+          className: 'fs-map-marker fs-map-cluster-marker',
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });

package/components/tiles/FSGroupTileUI.vue

@@ -97,6 +97,13 @@
           :imageId="$props.imageId"
           :width="imageSize"
         />
+        <FSIconCard
+          v-else-if="$props.icon"
+          backgroundVariant="standard"
+          :backgroundColor="ColorEnum.Background"
+          :icon="$props.icon"
+          :size="imageSize"
+        />
       </FSRow>
     </FSCol>
   </FSTile>
@@ -108,6 +115,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSIconCard from "../FSIconCard.vue";
 import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
@@ -118,6 +126,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
+    FSIconCard,
     FSImage,
     FSColor,
     FSSpan,
@@ -131,6 +140,10 @@ export default defineComponent({
       required: false,
       default: null
     },
+    icon: {
+      type: String,
+      required: false
+    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -183,7 +196,7 @@ export default defineComponent({
     });
 
     const infoWidth = computed((): string => {
-      if (!props.imageId) {
+      if (!props.imageId && !props.icon) {
         return "100%";
       }
       return `calc(100% - ${imageSize.value}px - 24px)`;

package/models/map.ts

@@ -1,18 +1,8 @@
 import { type Layer } from "leaflet";
 
-import { type Address } from "@dative-gpi/foundation-shared-domain/models";
-
 export interface MapLayer {
   name : string;
   label: string;
   image: string;
   layer: Layer;
-}
-
-export interface FSLocation {
-  id: string;
-  label: string;
-  icon: string | null;
-  address: Address;
-  color: string | null;
 }

package/package.json

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

package/styles/components/fs_map.scss

@@ -77,17 +77,10 @@
     }
   }
 
-  .fs-map-point-pin {
-    background-color: var(--fs-map-point-pin-color);
-    border-radius: 100%;
-  }
-
-  .fs-map-location > div {
+  .fs-map-marker > div {
     display: flex;
     height: 100%;
-    color: var(--fs-map-location-pin-color);
     border-radius: 50%;
-    background-color: white;
     filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
     align-items: center;
     justify-content: center;
@@ -103,7 +96,7 @@
     }
   }
 
-  .fs-map-location-full > div {
+  .fs-map-cluster-marker > div {
     background-color: var(--fs-map-location-pin-color);
     color: white;
   }
@@ -126,6 +119,41 @@
     }
   }
 
+  .fs-map-location > div {
+    color: var(--fs-map-location-pin-color);
+    background-color: white;
+  }
+
+  .fs-map-pin > div {
+    background-color: var(--fs-map-point-pin-color);
+    position: relative;
+
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .fs-map-pin > div::before {
+    content: "";
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    border-radius: 50%;
+    border: 2px solid var(--fs-map-point-pin-color);
+    opacity: 0.4;
+
+    @include clickscreen {
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .fs-map-pin-selected > div {
+    transform: scale(1.35);
+  }
+
+
   .fs-map-site {
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);

package/styles/components/fs_status_rich_card.scss

@@ -0,0 +1,13 @@
+.fs-status-rich-card {
+  position: relative;
+  flex-grow: 1;
+  background-color: var(--fs-status-rich-card-background-color);
+  border-color: var(--fs-status-rich-card-border-color);
+}
+
+.fs-status-rich-card-corner {
+  position: absolute;
+  display: flex;
+  right: 2px;
+  top: 2px;
+}

package/styles/components/index.scss

@@ -55,6 +55,7 @@
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
 @import "fs_span.scss";
+@import "fs_status_rich_card.scss";
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";