@dative-gpi/foundation-shared-components 1.0.155 → 1.0.156-maps2

package/components/FSAccordionPanel.vue

@@ -6,47 +6,32 @@
     :disabled="false"
     :elevation="0"
     :style="style"
-    :hideActions="$props.actionPosition === 'start'"
     v-bind="$attrs"
   >
-    <v-expansion-panel-title>
-      <template
-        v-slot:default="{ expanded, collapseIcon, expandIcon }"
+    <template
+      #title
+    >
+      <slot
+        name="title"
       >
-        <FSRow
-          gap="4px"
-        >
-          <FSCol
-            v-if="$props.actionPosition === 'start'"
-            width="hug"
-            align="center-center"
+        <FSRow>
+          <FSIcon
+            v-if="$props.prependIcon"
           >
-            <FSIcon
-              size="22.5px"
-              :icon="expanded ? collapseIcon : expandIcon"
-            />
-          </FSCol>
-          <slot
-            name="title"
+            {{ $props.prependIcon }}
+          </FSIcon>
+          <FSSpan
+            class="fs-accordion-panel-title"
+            :lineClamp="$props.lineClampTitle"
           >
-            <FSRow>
-              <FSIcon
-                v-if="$props.prependIcon"
-              >
-                {{ $props.prependIcon }}
-              </FSIcon>
-              <FSSpan
-                class="fs-accordion-panel-title"
-                :lineClamp="$props.lineClampTitle"
-              >
-                {{ $props.title }}
-              </FSSpan>
-            </FSRow>
-          </slot>
+            {{ $props.title }}
+          </FSSpan>
         </FSRow>
-      </template>
-    </v-expansion-panel-title>
-    <v-expansion-panel-text>
+      </slot>
+    </template>
+    <template
+      #text
+    >
       <slot
         name="content"
       >
@@ -62,7 +47,7 @@
           :modelValue="$props.content"
         />
       </slot>
-    </v-expansion-panel-text>
+    </template>
   </v-expansion-panel>
 </template>
 
@@ -143,10 +128,6 @@ export default defineComponent({
       type: String as PropType<"standard" | "rich-text">,
       required: false,
       default: "standard"
-    },
-    actionPosition: {
-      type: String as () => "start" | "end",
-      default: "end"
     }
   },
   setup(props) {

package/components/FSCard.vue

@@ -68,11 +68,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    maxWidth: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -108,11 +103,6 @@ export default defineComponent({
       required: false,
       default: "solid"
     },
-    borderColor: {
-      type: [Array, String] as PropType<ColorBase | null | string>,
-      required: false,
-      default: null
-    },
     elevation: {
       type: Boolean,
       required: false,
@@ -139,10 +129,6 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const borderColor = computed((): ColorBase => {
-      if (props.borderColor) {
-        return getColors(props.borderColor).base;
-      }
-
       switch (props.variant) {
         case "background":
           return lights.dark;
@@ -168,7 +154,6 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": backgrounds.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : darks.base,
@@ -181,7 +166,6 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.light,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!,
@@ -194,7 +178,6 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.baseContrast!,
@@ -207,7 +190,6 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": gradients.value.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!,

package/components/FSChip.vue

@@ -1,9 +1,7 @@
 <template>
   <component
-    :is="$props.to && $props.clickable ? 'FSRouterLink' : 'div'"
-    class="fs-chip-container"
+    :is="$props.to ? 'FSRouterLink' : 'div'"
     v-bind="$props.to ? { to: $props.to } : {}"
-    @click="$emit('click', $event)"
   >
     <FSRow
       :align="$props.align"
@@ -71,6 +69,7 @@ export default defineComponent({
     FSSpan,
     FSRow
   },
+  inheritsAttrs: false,
   props: {
     prependIcon: {
       type: String as PropType<string | null>,
@@ -123,8 +122,6 @@ export default defineComponent({
       default: null
     },
   },
-  inheritsAttrs: false,
-  emits: ['click'],
   setup(props) {
     const { getColors } = useColors();
 
@@ -139,9 +136,9 @@ export default defineComponent({
           "--fs-chip-background-color"       : backgrounds.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.base,
-          "--fs-chip-hover-background-color" : colors.value.base,
+          "--fs-chip-hover-background-color" : backgrounds.base,
           "--fs-chip-hover-border-color"     : colors.value.base,
-          "--fs-chip-hover-color"            : colors.value.baseContrast!,
+          "--fs-chip-hover-color"            : colors.value.base,
           "--fs-chip-active-background-color": backgrounds.base,
           "--fs-chip-active-border-color"    : colors.value.dark,
           "--fs-chip-active-color"           : colors.value.dark
@@ -151,8 +148,8 @@ export default defineComponent({
           "--fs-chip-background-color"       : colors.value.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.baseContrast!,
-          "--fs-chip-hover-background-color" : colors.value.soft,
-          "--fs-chip-hover-border-color"     : colors.value.soft,
+          "--fs-chip-hover-background-color" : colors.value.base,
+          "--fs-chip-hover-border-color"     : colors.value.base,
           "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": colors.value.dark,
           "--fs-chip-active-border-color"    : colors.value.darkContrast!,

package/components/FSIcon.vue

@@ -13,7 +13,7 @@
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { type ColorBase, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import { sizeToVar } from "../utils";
 
@@ -31,7 +31,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<ColorBaseVariations>,
+      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
       required: false,
       default: "base"
     }

package/components/FSIconCard.vue

@@ -1,7 +1,6 @@
 <template>
   <FSCard
     :variant="$props.backgroundVariant"
-    :borderColor="$props.backgroundVariant === 'background' ? ColorEnum.Light : null"
     :color="$props.backgroundColor"
     :border="$props.border"
     :height="$props.size"
@@ -11,8 +10,8 @@
       align="center-center"
     >
       <FSIcon
-        :variant="iconVariant"
-        :color="iconColor"
+        :variant="$props.iconVariant"
+        :color="contrastedIconColor"
         :size="actualIconSize"
       >
         {{ $props.icon }}
@@ -24,9 +23,10 @@
 <script lang="ts">
 import { defineComponent, type PropType, computed } from "vue";
 
-import { ColorEnum, type ColorBase, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import { sizeToVar } from "../utils";
+import { useColors } from "../composables";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
@@ -46,7 +46,7 @@ export default defineComponent({
     backgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
-      default: ColorEnum.Background
+      default: null
     },
     backgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
@@ -60,12 +60,13 @@ export default defineComponent({
     },
     iconColor: {
       type: String as PropType<ColorBase>,
-      required: false
+      required: false,
+      default: ColorEnum.Light
     },
     iconVariant: {
-      type: String as PropType<ColorBaseVariations | null>,
+      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
       required: false,
-      default: null
+      default: "base"
     },
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -79,6 +80,14 @@ export default defineComponent({
     }
   },
   setup(props){
+    const { getColors } = useColors();
+    
+    const colors = computed(() => {
+      return Array.isArray(props.backgroundColor) 
+        ? getColors(props.backgroundColor[Math.floor(props.backgroundColor.length/2)]) 
+        : getColors(props.backgroundColor)
+    });
+
     const actualIconSize = computed(() => {
       if (props.iconSize){
         return props.iconSize;
@@ -89,47 +98,22 @@ export default defineComponent({
       return "42px";
     });
 
-    const iconVariant = computed((): ColorBaseVariations | undefined => {
-      if (props.iconVariant) {
-        return props.iconVariant;
-      }
-      if (props.iconColor) {
-        return "base";
-      }
-
+    const contrastedIconColor = computed(() => {
       switch (props.backgroundVariant) {
-        case "background":
-          return "lightContrast";
         case "standard":
-          return "lightContrast";
-        case "full":
-          return "baseContrast";
-        case "gradient":
-          return "baseContrast";
-        default:
-          return "base";
-      }
-    });
-
-    const iconColor = computed((): ColorBase | undefined => {
-      if (props.iconColor) {
-        return props.iconColor;
-      }
-      
-      if(Array.isArray(props.backgroundColor)) {
-        return props.backgroundColor[Math.floor(props.backgroundColor.length/2)];
-      }
-      if(props.backgroundVariant === "background") {
-        return ColorEnum.Light;
+          switch (props.iconColor) {
+            case ColorEnum.Dark :
+            case ColorEnum.Light:
+            default: return colors.value.lightContrast!
+          };
+        case "background": return colors.value.base
+        default: return colors.value.baseContrast!
       }
-      return props.backgroundColor;
     });
 
     return {
-      actualIconSize,
-      iconVariant,
-      ColorEnum,
-      iconColor,
+      contrastedIconColor,
+      actualIconSize
     };
   }
 });

package/components/FSInformationsMenu.vue

@@ -15,7 +15,7 @@
       >
         <FSButton
           v-bind="props"
-          :color="$props.iconColor"
+          :color="lightColors.dark"
           :iconSize="$props.iconSize"
           variant="icon"
           icon="mdi-information-outline"
@@ -26,7 +26,6 @@
       name="menuContent"
     >
       <FSCard
-        :maxWidth="$props.maxWidth"
         :width="$props.width"
         :padding="$props.padding"
         :elevation="true"
@@ -39,15 +38,14 @@
             align="center-center"
           >
             <FSText
-              font="text-body"
-              :lineClamp="$props.lineClamp"
+              font="text-overline"
+              :lineClamp="4"
             >
               {{ $props.content }}
             </FSText>
           </FSRow>
         </slot>
         <template
-          v-if="$props.showCloseButton"
           #top-right
         >
           <FSButton
@@ -97,11 +95,7 @@ export default defineComponent({
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      default: null
-    },
-    maxWidth: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      default: null
+      default: 182
     },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -110,18 +104,6 @@ export default defineComponent({
     iconSize: {
       type: String,
       default: "18px"
-    },
-    iconColor: {
-      type: String as PropType<ColorBase>,
-      default: ColorEnum.Primary
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: true
-    },
-    lineClamp: {
-      type: Number,
-      default: 4
     }
   },
   emits: ["update:modelValue"],

package/components/map/FSMap.vue

@@ -28,7 +28,8 @@
 
     <FSMapLayerButton
       v-if="$props.allowedLayers?.length && $props.allowedLayers.length > 1"
-      :layers="mapLayers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
+      :disabled="$props.disabled"
+      :layers="layers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
       :modelValue="$props.currentLayer"
       @update:model-value="$emit('update:currentLayer', $event)"
     />
@@ -39,6 +40,7 @@
     >
       <FSButton
         v-if="$props.showMyLocation"
+        :disabled="$props.disabled"
         icon="mdi-crosshairs-gps"
         color="primary"
         variant="full"
@@ -53,12 +55,14 @@
           gap="0"
         >
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-plus-button"
             icon="mdi-plus"
             @click="() => map!.zoomIn()"
             :border="false"
           />
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-minus-button"
             icon="mdi-minus"
             @click="() => map!.zoomOut()"
@@ -92,12 +96,10 @@
 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, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
+import { map as createMap, control, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-
-import { useBreakpoints, useColors, useSlots } from "../../composables";
-import { ColorEnum, MapLayers, MapOverlayPositions, type MapLayer } from "../../models";
+import { useBreakpoints, useColors, useMapLayers, useSlots } from "../../composables";
+import { ColorEnum, MapLayers, MapOverlayPositions } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -130,6 +132,11 @@ export default defineComponent({
       required: false,
       default: '100%'
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     grayscale: {
       type: Boolean,
       required: false,
@@ -175,22 +182,20 @@ export default defineComponent({
       required: false,
       default: () => [MapLayers.Map, MapLayers.Imagery]
     },
-    dirtyZoom: {
+    zoom: {
       type: Number,
       required: false,
       default: 16
     }
   },
-  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
+  emits: ['update:overlayMode', 'update:currentLayer', "click:latlng", "update:zoom", "update:center"],
   setup(props, { emit }) {
-    const { $tr } = useTranslationsProvider();
+    const { layers } = useMapLayers();
     const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
     const leafletContainer = ref<HTMLElement>();
-    const locationGroupBounds = ref<LatLngBounds>();
-    const areaGroupBounds = ref<LatLngBounds>();
     const gpsPosition : Ref<LatLng | null> = ref(null);
     const map: Ref<L.Map | null> = ref(null);
     const overlayHeight = ref<number>();
@@ -198,7 +203,6 @@ export default defineComponent({
 
     provide('map', map);
 
-    const defaultZoom = ref(props.dirtyZoom);
     const mapResizeObserver = new ResizeObserver(() => {
       if(!map.value) {
         return;
@@ -206,53 +210,6 @@ export default defineComponent({
       map.value.invalidateSize();
     });
 
-    const mapLayers: MapLayer[] = [
-      {
-        name: MapLayers.Map,
-        label: $tr("ui.map-layer.map", "Map"),
-        image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      },
-      {
-        name: MapLayers.Imagery,
-        label: $tr("ui.map-layer.imagery", "Imagery"),
-        image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      },
-      {
-        name: MapLayers.Snow,
-        label: $tr("ui.map-layer.snow", "Snow ski map"),
-        image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
-          }),
-          tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
-            maxZoom: 18,
-            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      }
-    ];
-
     const bottomOffset = computed(() => {
       if (props.overlayMode !== MapOverlayPositions.Expand && overlayHeight.value && isExtraSmall.value) {
         return overlayHeight.value;
@@ -276,7 +233,7 @@ export default defineComponent({
     }));
 
     const actualLayer = computed(() => {
-      return mapLayers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? mapLayers[0].layers;
+      return layers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? layers[0].layers;
     });
 
     const overlaySlots = computed(() => {
@@ -295,7 +252,7 @@ export default defineComponent({
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom.value, options?: ZoomPanOptions) => {
+    const flyTo = (lat: number, lng: number, zoom: number, options?: ZoomPanOptions) => {
       if(!map.value) {
         return;
       }
@@ -316,7 +273,6 @@ export default defineComponent({
       } else {
         map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom, options);
       }
-      
     }
 
     const setView = (lat: number, lng: number, zoom: number) => {
@@ -329,13 +285,13 @@ export default defineComponent({
     const fitBounds = (bounds: LatLngBounds, options?: FitBoundsOptions) => {
       if (!map.value) {return;}
       const paddingTopLeft: [number, number] = [
-        leftOffset.value,
-        0
+        leftOffset.value + 24,
+        24
       ];
 
       const paddingBottomRight: [number, number] = [
-        0,
-        bottomOffset.value
+        24,
+        bottomOffset.value + 24
       ];
       const paddingOptions = {
         paddingTopLeft,
@@ -353,14 +309,16 @@ export default defineComponent({
 
       const mapOptions = {
         zoomControl: false,
-        scrollWheelZoom: props.enableScrollWheelZoom,
+        scrollWheelZoom: props.enableScrollWheelZoom && !props.disabled,
+        dragging: !props.disabled,
+        doubleClickZoom: false,
         minZoom: 2,
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
         maxBoundsViscosity: 1.0,
-        zoom: defaultZoom.value,
+        zoom: props.zoom,
         center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
-      };
+      } satisfies L.MapOptions;
 
       map.value = markRaw(createMap(leafletContainer.value, mapOptions));
       
@@ -368,6 +326,21 @@ export default defineComponent({
         emit('click:latlng', e.latlng);
       });
 
+      map.value.on('zoomend', () => {
+        if(!map.value) {
+          return;
+        }
+        emit('update:zoom', map.value.getZoom());
+      });
+
+      map.value.on('moveend', () => {
+        if(!map.value) {
+          return;
+        }
+        const center = map.value.getCenter();
+        emit('update:center', [center.lat, center.lng]);
+      });
+
       map.value.attributionControl.remove();
       control.attribution({ position: 'bottomleft' }).addTo(map.value);
 
@@ -382,7 +355,7 @@ export default defineComponent({
           return;
         }
 
-        flyTo(e.latlng.lat, e.latlng.lng);
+        flyTo(e.latlng.lat, e.latlng.lng, 14);
       });
       
       mapResizeObserver.observe(leafletContainer.value);
@@ -392,38 +365,69 @@ export default defineComponent({
       mapResizeObserver.disconnect();
     });
 
-    watch ([() => props.center, () => map.value], () => {
-      if(!map.value || !props.center) {
+    watch ([() => props.center, () => props.zoom], ([newCenter, newZoom], [oldCenter, oldZoom]) => {
+      if(!map.value || !props.center || !newCenter) {
         return;
       }
-      setView(props.center[0], props.center[1], defaultZoom.value);
+
+      if(map.value.getZoom() === newZoom && map.value.getCenter().equals(latLng(newCenter[0], newCenter[1]))) {
+        return;
+      }
+
+      if((newCenter[0] !== oldCenter?.[0] || newCenter[1] !== oldCenter?.[1]) && newZoom !== oldZoom) {
+        setView(newCenter[0], newCenter[1], newZoom);
+      }
+      else if ((newCenter[0] !== oldCenter?.[0] || newCenter[1] !== oldCenter?.[1])) {
+        setView(newCenter[0], newCenter[1], map.value.getZoom());
+      }
+      else if(newZoom !== oldZoom) {
+        map.value.setZoom(newZoom);
+      }
     }, { immediate: true });
 
     watch([() => props.bounds, () => map.value], () => {
       if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: defaultZoom.value });
+
+      //console.log("Bounds changed", props.bounds);
+      fitBounds(props.bounds, { maxZoom: 14 });
     });
 
-    watch(() => props.dirtyZoom, (newZoom) => {
-      defaultZoom.value = newZoom;
-      if(map.value) {
-        map.value.setZoom(newZoom);
+    watch(() => props.enableScrollWheelZoom, (newValue) => {
+      if(!map.value) {
+        return;
+      }
+      if(newValue) {
+        map.value.scrollWheelZoom.enable();
+      } else {
+        map.value.scrollWheelZoom.disable();
+      }
+    }, { immediate: true });
+
+    watch(() => props.disabled, (newValue) => {
+      if(!map.value) {
+        return;
+      }
+      if(newValue) {
+        map.value.dragging.disable();
+        map.value.scrollWheelZoom.disable();
+      } else {
+        map.value.dragging.enable();
+        if(props.enableScrollWheelZoom) {
+          map.value.scrollWheelZoom.enable();
+        }
       }
     }, { immediate: true });
 
     return {
       ColorEnum,
-      defaultZoom,
       leafletContainer,
-      locationGroupBounds,
       overlayHeight,
       overlayWidth,
-      areaGroupBounds,
       map,
       actualLayer,
-      mapLayers,
+      layers,
       gpsPosition,
       style,
       overlaySlots

package/components/map/FSMapFeatureGroup.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, provide, ref, type Ref } from 'vue';
+import { inject, provide, ref, type Ref, onUnmounted } from 'vue';
 
 import { type Map, FeatureGroup } from 'leaflet';
 import { MAP } from './keys';
@@ -46,6 +46,12 @@ export default {
         emit("update:bounds", featureGroup.value.getBounds());
       }
     });
+
+    onUnmounted(() => {
+      if (map.value && map.value.hasLayer(featureGroup.value as unknown as FeatureGroup)) {
+        map.value.removeLayer(featureGroup.value as unknown as FeatureGroup);
+      }
+    });
   }
 };
 </script>

package/components/map/FSMapLayerButton.vue

@@ -4,6 +4,7 @@
     icon="mdi-layers-outline"
     :elevation="true"
     @click="dialog = true"
+    v-bind="$attrs"
   />
   <FSDialog
     v-model="dialog"

package/components/map/FSMapMarker.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref } 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,72 +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 });
 
-    onMounted(updateMarker);
+    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);
+    });
 
-    watch(() => [props.variant, props.color, props.latlng, props.selected], updateMarker);
+    onMounted(() => {
+      actualMarker.value.on('click', (event: LeafletMouseEvent) => {
+        emit('click', event);
+      });
+    });
+
+    onUnmounted(() => {
+      if(actualMarker.value && map.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
+          markerClusterGroup.value.removeLayer(actualMarker.value as Marker);
+        } else {
+          map.value.removeLayer(actualMarker.value as Marker);
+        }
+      }
+    })
   }
 };
 </script>

package/components/map/FSMapMarkerClusterGroup.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { inject, provide, ref, type Ref } from 'vue';
+import { inject, provide, ref, type Ref, onUnmounted } from 'vue';
 
-import { type Map, MarkerClusterGroup, divIcon } from 'leaflet';
+import { LatLngBounds, type Map, MarkerClusterGroup, divIcon } from 'leaflet';
 
 import { clusterMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP } from './keys';
@@ -54,17 +54,42 @@ export default {
 
     provide('markerClusterGroup', markerClusterGroup);
 
-    markerClusterGroup.value.on("layeradd", () => {
-      if(!map.value) {
+    const handleLayerChange = () => {
+      if (!map.value) {
         return;
       }
 
       const layers = markerClusterGroup.value.getLayers();
 
-      if(layers.length === props.expectedLayers && !added) {
+      if (layers.length === 0 && added) {
+        map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
+        added = false;
+        return;
+      }
+      if (layers.length === props.expectedLayers && !added) {
         markerClusterGroup.value.addTo(map.value);
         added = true;
-        emit("update:bounds", markerClusterGroup.value.getBounds());
+      }
+      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);
+      }
+    };
+
+    markerClusterGroup.value.on("layeradd", handleLayerChange);
+    markerClusterGroup.value.on("layerremove", handleLayerChange);
+
+    onUnmounted(() => {
+      if (map.value && map.value.hasLayer(markerClusterGroup.value as unknown as L.Layer)) {
+        map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
       }
     });
   }

package/components/map/FSMapPolygon.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, ref, onUnmounted } from 'vue';
 
 import { type Map, type LatLng, type Polygon, type FeatureGroup, polygon } from 'leaflet';
 
@@ -75,7 +75,19 @@ export default {
 
     onMounted(updatePolygon);
 
-    watch(() => [props.color, props.latlngs], updatePolygon);
+    onUnmounted(() => {
+      if (lastPolygon.value) {
+        if (featureGroup?.value) {
+          featureGroup.value.removeLayer(lastPolygon.value);
+        } else if (map.value?.hasLayer(lastPolygon.value)) {
+          map.value.removeLayer(lastPolygon.value);
+        }
+        lastPolygon.value = null;
+      }
+    });
+
+
+    watch([() => props.color, () => props.latlngs], updatePolygon);
   }
 };
 </script>

package/components/map/FSMapTileLayer.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, onUnmounted } from 'vue';
 
 import type { Map, Layer } from 'leaflet';
 
@@ -50,6 +50,17 @@ export default {
 
     onMounted(updateLayer);
 
+    onUnmounted(() => {
+      if (lastLayers && map.value) {
+        lastLayers.forEach(layer => {
+          if (map.value.hasLayer(layer)) {
+            map.value.removeLayer(layer);
+          }
+        });
+        lastLayers = [];
+      }
+    });
+
     watch(() => props.layers, updateLayer);
   }
 };

package/components/tiles/FSChartTileUI.vue

@@ -1,6 +1,6 @@
 <template>
   <FSTile
-    :width="['296px','336px']"
+    :width="['324px','272px']"
     :height="['132px', '116px']"
     :padding="['16px', '12px']"
     borderRadius="8px"

package/components/tiles/FSSimpleTileUI.vue

@@ -107,11 +107,13 @@ export default defineComponent({
     },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
-      required: false
+      required: false,
+      default: "standard"
     },
     iconBackgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
-      required: false
+      required: false,
+      default: ColorEnum.Background
     },
     iconBorder: {
       type: Boolean as PropType<boolean>,
@@ -120,7 +122,8 @@ export default defineComponent({
     },
     iconColor: {
       type: String as PropType<ColorBase>,
-      required: false
+      required: false,
+      default: ColorEnum.Light
     },
     activeColor: {
       type: String as PropType<ColorBase>,

package/composables/index.ts

@@ -4,6 +4,7 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
 export * from "./useMagicFieldProvider";
+export * from "./useMapLayers";
 export * from "./useRules";
 export * from "./useSlots";
 export * from "./useTables";

package/composables/useMapLayers.ts

@@ -0,0 +1,62 @@
+import { tileLayer } from 'leaflet';
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
+
+export const useMapLayers = () => {
+  const { $tr } = useTranslationsProvider();
+
+  const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "";
+
+  const layers = [
+    {
+      name: MapLayers.Map,
+      label: $tr("ui.map-layer.map", "Map"),
+      image: new URL("../../assets/images/map/map.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    },
+    {
+      name: MapLayers.Imagery,
+      label: $tr("ui.map-layer.imagery", "Imagery"),
+      image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    },
+    {
+      name: MapLayers.Snow,
+      label: $tr("ui.map-layer.snow", "Snow ski map"),
+      image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
+        }),
+        tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
+          maxZoom: 18,
+          attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    }
+  ];
+
+  return {
+    layers
+  };
+}

package/models/colors.ts

@@ -19,5 +19,4 @@ export interface ColorVariations {
     darkContrast?: string | null;
 }
 
-export type ColorBase = (string | ColorEnum);
-export type ColorBaseVariations = "base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast";
+export type ColorBase = (string | ColorEnum);

package/package.json

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

package/styles/components/fs_card.scss

@@ -4,7 +4,6 @@
     padding: var(--fs-card-padding);
     height: var(--fs-card-height);
     width: var(--fs-card-width);
-    max-width: var(--fs-card-max-width);
     position: relative;
     display: flex;
     

package/styles/components/fs_chip.scss

@@ -1,7 +1,3 @@
-.fs-chip-container {
-    text-decoration: none;
-}
-
 .fs-chip {
     user-select: none;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

package/utils/operations.ts

@@ -1,42 +1,7 @@
 const MinusOperator = "-";
 
-/**
- * Splits an expression by operators while keeping unary minus signs.
- */
-const splitByOperators = (expression: string): string[] => {
-  const tokens: string[] = [];
-  let current = '';
-  let expectOperand = true;
-
-  for (let i = 0; i < expression.length; i++) {
-    const char = expression[i];
-    if ('+-*/'.includes(char)) {
-      const isUnaryMinus = char === '-' && expectOperand;
-      if (isUnaryMinus) {
-        current += char;
-        expectOperand = true;
-      } else {
-        if (expectOperand) {
-          // 2 consecutive operators or operator at the start
-          return [];
-        }
-        if (current !== '') {
-          tokens.push(current);
-          current = '';
-        }
-        tokens.push(char);
-        expectOperand = true;
-      }
-    } else {
-      current += char;
-      expectOperand = false;
-    }
-  }
-  if (current !== '') {
-    tokens.push(current);
-  }
-  return tokens;
-};
+// Matches one of the three operators (+, *, /) or the - operator if it is preceded by something that is not another operator
+const operatorsRegex = new RegExp(/[\+\*\/]|(?<=.)(?<![-\+\*\/])[-]/gm);
 
 // Matches a nested block of parenthesis
 const parenthesisRegex = new RegExp(/\([^)(]+\)/gm);
@@ -49,11 +14,7 @@ const validateBlock = (block: string, operands: string[] = [], variables: string
   block = block.replaceAll("(", "").replaceAll(")", "");
 
   // Split block on operators (Leave negative signs)
-  const tokens = splitByOperators(block);
-  if (tokens.length === 0) {
-    return false;
-  }
-  const components = tokens.filter(token => !'+-*/'.includes(token));
+  const components = block.split(operatorsRegex);
 
   // Check if each bit is a valid operand
   for (let i = 0; i < components.length; i++) {