@dative-gpi/foundation-shared-components 0.0.207 → 0.0.209

package/components/map/FSMap.vue

@@ -11,15 +11,17 @@
       <FSCol
         v-if="$slots.leftoverlay"
         class="fs-map-overlay-left"
-        height="calc(100% - 32px)"
         width="hug"
         gap="2px"
       >
         <FSCard
-          height="100%"
+          padding="4px"
+          :elevation="true"
+          :border="false"
         >
           <FSFadeOut
-            height="fill"
+            maskHeight="0"
+            :height="`calc(${$props.height} - 40px)`"
           >
             <slot
               name="leftoverlay"
@@ -134,7 +136,7 @@ import "leaflet.markercluster";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import { type Address, type SiteInfos } from '@dative-gpi/foundation-shared-domain/models';
+import { type Address, type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
 import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 import { useColors, useAddress } from "../../composables";
@@ -160,7 +162,7 @@ export default defineComponent({
   },
   props: {
     height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      type: [String, Number] as PropType<string | number | null>,
       required: false,
       default: '400px'
     },
@@ -169,68 +171,68 @@ export default defineComponent({
       required: false,
       default: '100%'
     },
-    sites: {
-      type: Array as PropType<SiteInfos[]>,
+    grayscale: {
+      type: Boolean,
       required: false,
-      default: () => [],
+      default: false
     },
-    center: {
-      type: Array as PropType<number[]>,
+    editable: {
+      type: Boolean,
       required: false,
-      default: () => [45.71, 5.07]
+      default: false
     },
-    selectedLayer: {
-      type: String as PropType<"osm" | "imagery">,
+    showMyLocation: {
+      type: Boolean,
       required: false,
-      default: "osm"
+      default: true
     },
-    selectableLayers: {
-      type: Array as PropType<string[]>,
+    showZoomButtons: {
+      type: Boolean,
       required: false,
-      default: () => ["osm", "imagery"]
+      default: true
     },
-    selectedLocationId: {
-      type: String as PropType<string | null>,
+    showFullScreen: {
+      type: Boolean,
       required: false,
-      default: null
+      default: false
     },
-    selectedSiteId: {
-      type: String as PropType<string | null>,
+    center: {
+      type: Array as PropType<number[]>,
       required: false,
-      default: null
+      default: () => [45.71, 5.07]
     },
     modelValue: {
       type: Array as PropType<FSLocation[]>,
       required: false,
       default: () => [],
     },
-    editable: {
-      type: Boolean,
+    areas: {
+      type: Array as PropType<FSArea[]>,
       required: false,
-      default: false
+      default: () => [],
     },
-    showMyLocation: {
-      type: Boolean,
+    selectedLayer: {
+      type: String as PropType<"osm" | "imagery">,
       required: false,
-      default: true
+      default: "osm"
     },
-    showZoomButtons: {
-      type: Boolean,
+    selectableLayers: {
+      type: Array as PropType<string[]>,
       required: false,
-      default: true
+      default: () => ["osm", "imagery"]
     },
-    showFullScreen: {
-      type: Boolean,
+    selectedLocationId: {
+      type: String as PropType<string | null>,
       required: false,
-      default: false
+      default: null
     },
-    grayscale: {
-      type: Boolean,
+    selectedAreaId: {
+      type: String as PropType<string | null>,
       required: false,
-      default: false
+      default: null
     }
   },
-  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedSiteId"],
+  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId"],
   setup(props, { emit }) {
     const { reverseSearch } = useAddress();
     const { getColors } = useColors();
@@ -246,8 +248,8 @@ export default defineComponent({
     const mapId = `map-${Math.random().toString(36).substring(7)}`;
     const defaultZoom = 15;
     const markers: { [key: string]: L.Marker } = {};
-    const sites: { [key: string]: L.Polygon } = {};
-    const siteLayerGroup = new LL.FeatureGroup();
+    const areas: { [key: string]: L.Polygon } = {};
+    const areaLayerGroup = new LL.FeatureGroup();
     const baseLayerGroup = new LL.LayerGroup();
     const myLocationLayerGroup = new LL.LayerGroup();
 
@@ -291,7 +293,7 @@ export default defineComponent({
         layer: LL.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
           attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
           maxZoom: 19
-        }),
+        })
       }
     ];
 
@@ -307,34 +309,38 @@ export default defineComponent({
     const displayLocations = () => {
       markerLayerGroup.clearLayers();
       innerModelValue.value.forEach((location) => {
-        const iconHtml = `<div class="fs-map-location-pin"><i class="${location.icon} mdi v-icon notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;"  ></i></div>`;
+        const iconHtml = `
+          <div style="--fs-map-mylocation-pin-color-alpha:${getColors(location.color).base}50;--fs-map-location-pin-color: ${getColors(location.color).base}">
+            <div class="fs-map-location-pin">
+              <i class="${location.icon} mdi v-icon notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;"  ></i>
+            </div>
+          </div>`;
         const icon = LL.divIcon({
           html: iconHtml,
-          className: 'fs-map-location',
           iconSize: [36, 36],
+          className: 'fs-map-location',
           iconAnchor: [18, 18],
         });
         const marker = LL.marker([location.address.latitude, location.address.longitude], { icon }).addTo(markerLayerGroup);
         markers[location.id] = marker;
         marker.on('click', () => emit('update:selectedLocationId', location.id));
-
       });
     };
 
-    const displaySites = () => {
-      siteLayerGroup.clearLayers();
-      props.sites.forEach((site) => {
-        const sitePolygon = LL.polygon(site.coordinates.map((coord) => [coord.latitude, coord.longitude]), {
-          color: site.color,
-          fillColor: site.color + "50",
+    const displayAreas = () => {
+      areaLayerGroup.clearLayers();
+      props.areas.forEach((area) => {
+        const areaPolygon = LL.polygon(area.coordinates.map((coord) => [coord.latitude, coord.longitude]), {
+          color: area.color,
+          fillColor: area.color + "50",
           fillOpacity: 0.5,
-          className: 'fs-map-site',
-        }).addTo(siteLayerGroup);
+          className: 'fs-map-area',
+        }).addTo(areaLayerGroup);
 
-        sites[site.id] = sitePolygon;
-        sitePolygon.on('click', () => emit('update:selectedSiteId', site.id));
+        areas[area.id] = areaPolygon;
+        areaPolygon.on('click', () => emit('update:selectedAreaId', area.id));
       });
-    }
+    };
 
     const modifyLocationAddress = (locationId: string, newAddress: Address) => {
       const location = innerModelValue.value.find((loc) => loc.id === locationId);
@@ -363,10 +369,10 @@ export default defineComponent({
       LL.control.attribution({ position: 'bottomleft' }).addTo(map);
 
       baseLayerGroup.addTo(map);
-      siteLayerGroup.addTo(map);
+      areaLayerGroup.addTo(map);
       myLocationLayerGroup.addTo(map);
       setMapBaseLayer(innerSelectedLayer.value);
-      displaySites();
+      displayAreas();
       displayLocations();
       markerLayerGroup.addTo(map);
 
@@ -388,8 +394,9 @@ export default defineComponent({
     };
 
     const onNewAddressEntered = (address: Address) => {
-      if (!map) {return;}
-      if (!props.selectedLocationId) {return;}
+      if (!props.selectedLocationId || !map) {
+        return;
+      }
       modifyLocationAddress(props.selectedLocationId, address);
       map.panTo([address.latitude, address.longitude]);
     };
@@ -493,17 +500,17 @@ export default defineComponent({
       });
 
       const marker = markers[props.selectedLocationId];
-      marker.getElement()?.classList.add('fs-map-location-selected');
       map.flyTo(marker.getLatLng(), 17, { animate: false });
+      marker.getElement()?.classList.add('fs-map-location-selected');
     })
 
-    watch(() => props.selectedSiteId, () => {
-      if (!props.selectedSiteId || !map) {
+    watch(() => props.selectedAreaId, () => {
+      if (!props.selectedAreaId || !map) {
         return;
       }
-      const site = sites[props.selectedSiteId];
-      if (site) {
-        map.fitBounds(site.getBounds(), { maxZoom: 17 });
+      const area = areas[props.selectedAreaId];
+      if (area) {
+        map.fitBounds(area.getBounds(), { maxZoom: 17 });
       }
     });
 

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -3,6 +3,7 @@
     :bottomColor="ColorEnum.Primary"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,10 +18,10 @@
       >
         <FSCol
           gap="12px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSCol
             gap="6px"
-            :width="infoWidth"
           >
             <FSText
               font="text-button"
@@ -141,7 +142,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -190,13 +196,6 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
 
     return {
       carouselDeviceStatuses,
@@ -205,7 +204,6 @@ export default defineComponent({
       singleModelStatuses,
       ColorEnum,
       imageSize,
-      infoWidth
     };
   }
 });

package/components/tiles/FSGroupTileUI.vue

@@ -3,6 +3,7 @@
     :bottomColor="ColorEnum.Error"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,10 +18,10 @@
       >
         <FSCol
           gap="12px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSCol
             gap="6px"
-            :width="infoWidth"
           >
             <FSText
               font="text-button"
@@ -158,7 +159,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -175,20 +181,11 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
-
     return {
       ColorEnum,
       groupsLabel,
       deviceOrganisationsLabel,
-      imageSize,
-      infoWidth
+      imageSize
     };
   }
 });

package/components/tiles/FSSimpleTileUI.vue

@@ -3,6 +3,7 @@
     :bottomColor="$props.bottomColor"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,6 +18,7 @@
       >
         <FSCol
           gap="6px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSText
             font="text-button"
@@ -113,7 +115,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -126,19 +133,10 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.icon) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
-
     return {
       iconBackgroundColor,
       ColorEnum,
-      imageSize,
-      infoWidth
+      imageSize
     };
   }
 });

package/components/tiles/FSTile.vue

@@ -5,7 +5,6 @@
     class="fs-tile"
     padding="12px"
     :height="height"
-    :width="width"
     :style="style"
     :href="$props.href"
     :to="$props.to"
@@ -33,7 +32,6 @@
     class="fs-tile"
     padding="12px"
     :style="style"
-    :width="width"
     :height="height"
     v-bind="$attrs"
   >
@@ -118,17 +116,12 @@ export default defineComponent({
       return {};
     });
 
-    const width = computed(() => {
-      return isMobileSized.value ? 336 : 352;
-    });
-
     const height = computed(() => {
       return isMobileSized.value ? 156 : 170;
     });
 
     return {
       height,
-      width,
       style
     };
   }

package/models/map.ts

@@ -14,4 +14,5 @@ export interface FSLocation {
   label: string;
   icon: string;
   address: Address;
+  color: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.207",
+  "version": "0.0.209",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.207",
-    "@dative-gpi/foundation-shared-services": "0.0.207"
+    "@dative-gpi/foundation-shared-domain": "0.0.209",
+    "@dative-gpi/foundation-shared-services": "0.0.209"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "1387dbf5d3b11c281c0e6183ab900e47c9622a9a"
+  "gitHead": "d966cd48ebb0041fd900b986977912114303f722"
 }

package/styles/components/fs_map.scss

@@ -14,7 +14,7 @@
     top: 0;
     left: 0;
     z-index: 950;
-    margin: 8px;
+    margin: 4px;
   }
 
   .fs-map-overlay-edit-button {
@@ -64,7 +64,6 @@
   }
 
   .fs-map-mylocation {
-    background-color: var(--fs-map-location-pin-color);
     border: 3px solid white;
     border-radius: 100%;
     animation: fs-map-shadow 1.4s linear infinite;
@@ -84,8 +83,9 @@
     }
   }
 
-  .fs-map-location {
+  .fs-map-location > div {
     display: flex;
+    height: 100%;
     color: var(--fs-map-location-pin-color);
     border-radius: 50%;
     background-color: white;
@@ -93,19 +93,6 @@
     align-items: center;
     justify-content: center;
 
-    &.fs-map-location-full {
-      background-color: var(--fs-map-location-pin-color);
-      color: white;
-    }
-
-    >* {
-      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .mdi-loading {
-      animation: spin 1s linear infinite;
-    }
-
     &:hover {
       filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
 
@@ -114,32 +101,27 @@
         transform: scale(1.15);
       }
     }
+  }
+
+  .fs-map-location-full > div {
+    background-color: var(--fs-map-location-pin-color);
+    color: white;
+  }
 
-    @keyframes spin {
+  .fs-map-location-selected > div {
+    animation: fs-map-shadow 1.4s linear infinite;
+
+    @keyframes fs-map-shadow {
       0% {
-        transform: rotate(0deg);
+        box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
       }
 
-      100% {
-        transform: rotate(360deg);
+      50% {
+        box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
       }
-    }
-
-    &.fs-map-location-selected {
-      animation: fs-map-shadow 1.4s linear infinite;
-
-      @keyframes fs-map-shadow {
-        0% {
-          box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
-        }
 
-        50% {
-          box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
-        }
-
-        100% {
-          box-shadow: 0 0 0px 20px transparent;
-        }
+      100% {
+        box-shadow: 0 0 0px 20px transparent;
       }
     }
   }