@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/map/FSMap.vue

@@ -40,14 +40,16 @@
         <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"
-            :color="location.color"
-            :icon="location.icon"
+            :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)"
           />
@@ -98,17 +100,18 @@
     </FSCol>
 
     <FSMapOverlay
-      v-if="$slots['overlay']"
       :mode="$props.overlayMode"
       @update:mode="$emit('update:overlayMode', $event)"
       @update:height="(height) => overlayHeight = height"
       @update:width="(width) => overlayWidth = width"
     >
       <template
-        #body
+        v-for="(_, name) in overlaySlots"
+        v-slot:[name]="slotData"
       >
         <slot
-          name="overlay"
+          :name="'overlay-' + name"
+          v-bind="slotData"
         />
       </template>
     </FSMapOverlay>
@@ -116,15 +119,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted, markRaw } from "vue";
 
 import type {} from "leaflet.markercluster";
-import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, LatLngBounds, type FitBoundsOptions } from "leaflet";
+import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
-import { useBreakpoints, useColors } from "../../composables";
+import { useBreakpoints, useColors, useSlots } from "../../composables";
 import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
@@ -229,8 +232,9 @@ export default defineComponent({
   emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
   setup(props, { emit }) {
     const { $tr } = useTranslationsProvider();
-    const { getColors } = useColors();
     const { isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+    const { slots } = useSlots();
 
     const leafletContainer = ref<HTMLElement>();
     const locationGroupBounds = ref<LatLngBounds>();
@@ -240,16 +244,22 @@ export default defineComponent({
     const overlayHeight = ref<number>();
     const overlayWidth = ref<number>();
 
-    const defaultZoom = 15;
-    
     provide('map', map);
 
+    const defaultZoom = 16;
+    const mapResizeObserver = new ResizeObserver(() => {
+      if(!map.value) {
+        return;
+      }
+      map.value.invalidateSize();
+    });
+
     const mapLayers: MapLayer[] = [
       {
         name: "map",
-        label: $tr("ui.map.layer.map", "Map"),
+        label: $tr("ui.map-layer.map", "Map"),
         image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layer: tileLayer(`http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
+        layer: 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'
@@ -257,9 +267,9 @@ export default defineComponent({
       },
       {
         name: "imagery",
-        label: $tr("ui.map.layer.imagery", "Imagery"),
+        label: $tr("ui.map-layer.imagery", "Imagery"),
         image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layer: tileLayer(`http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
+        layer: 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'
@@ -306,20 +316,44 @@ export default defineComponent({
       return bounds as LatLngBounds;
     });
 
-    const calculateTargetPosition = (target: L.LatLng) => {
+    const overlaySlots = computed(() => {
+      return Object.keys(slots).filter((slot) => slot.startsWith("overlay-")).reduce((acc, slot) => {
+        acc[slot.replace("overlay-", "")] = slots[slot];
+        return acc;
+      }, {} as Record<string, unknown>);
+    });
+
+    const calculateTargetPosition = (target: L.LatLng, zoom?: number) => {
       if(!map.value) {
         return target;
       }
-      const zoom = map.value.getZoom();
+      zoom = zoom ?? map.value.getZoom();
       const targetPoint = map.value.project(target, zoom).subtract([leftOffset.value / 2, -bottomOffset.value / 2]);
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const panTo = (lat: number, lng: number) => {
+    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom, options?: ZoomPanOptions) => {
       if(!map.value) {
         return;
       }
-      map.value.panTo(calculateTargetPosition(latLng(lat, lng)));
+
+      if(isExtraSmall.value) {
+        // We wait for bottom offset to be calculated and stable to focus on the right position
+        let tries = 0;
+        let oldBottomOffset = bottomOffset.value;
+        const interval = setInterval(() => {
+          if(oldBottomOffset === bottomOffset.value || tries >= 30) {
+            clearInterval(interval);
+            map.value!.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom, options);
+          }
+          oldBottomOffset = bottomOffset.value;
+          tries++;
+        }, 20);
+        
+      } else {
+        map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom, options);
+      }
+      
     }
 
     const setView = (lat: number, lng: number, zoom: number) => {
@@ -330,15 +364,24 @@ export default defineComponent({
     }
 
     const fitBounds = (bounds: LatLngBounds, options?: FitBoundsOptions) => {
-      if(!map.value) {
-        return;
-      }
-      const calculatedBounds = new LatLngBounds(
-        calculateTargetPosition(bounds.getSouthWest()),
-        calculateTargetPosition(bounds.getNorthEast())
-      );
-      map.value.fitBounds(calculatedBounds, options);
-    }
+      if (!map.value) {return;}
+      const paddingTopLeft: [number, number] = [
+        leftOffset.value,
+        0
+      ];
+
+      const paddingBottomRight: [number, number] = [
+        0,
+        bottomOffset.value
+      ];
+      const paddingOptions = {
+        paddingTopLeft,
+        paddingBottomRight,
+        ...options,
+      };
+
+      map.value.fitBounds(bounds, paddingOptions);
+    };
 
     onMounted(() => {
       if(!leafletContainer.value) {
@@ -354,7 +397,7 @@ export default defineComponent({
         maxBoundsViscosity: 1.0
       };
 
-      map.value = createMap(leafletContainer.value, mapOptions);
+      map.value = markRaw(createMap(leafletContainer.value, mapOptions));
       setView(props.center[0], props.center[1], defaultZoom);
       
       map.value.on('click', (e: L.LeafletMouseEvent) => {
@@ -362,7 +405,6 @@ export default defineComponent({
       });
 
       map.value.attributionControl.remove();
-      // to display google attribution in bottom left corner
       control.attribution({ position: 'bottomleft' }).addTo(map.value);
 
       map.value.on('locationfound', (e: L.LocationEvent) => {
@@ -376,8 +418,14 @@ export default defineComponent({
           return;
         }
 
-        panTo(e.latlng.lat, e.latlng.lng);
+        flyTo(e.latlng.lat, e.latlng.lng);
       });
+      
+      mapResizeObserver.observe(leafletContainer.value);
+    });
+
+    onUnmounted(() => {
+      mapResizeObserver.disconnect();
     });
 
     watch (() => props.center, (center) => {
@@ -395,7 +443,7 @@ export default defineComponent({
       if(!selectedLocation) {
         return;
       }
-      panTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude);
+      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude, defaultZoom, { animate: false });
     }, { immediate: true });
 
     watch(() => props.selectedAreaId, (selectedAreaId) => {
@@ -419,6 +467,7 @@ export default defineComponent({
 
     return {
       ColorEnum,
+      defaultZoom,
       leafletContainer,
       locationGroupBounds,
       overlayHeight,
@@ -428,7 +477,8 @@ export default defineComponent({
       actualLayer,
       mapLayers,
       gpsPosition,
-      style
+      style,
+      overlaySlots
     };
   }
 });

package/components/map/FSMapFeatureGroup.vue

@@ -6,7 +6,7 @@
 import { inject, provide, ref, type Ref } from 'vue';
 
 import { type Map, FeatureGroup } from 'leaflet';
-import { INJECTION_FSMAP_MAP } from './keys';
+import { MAP } from './keys';
 
 export default {
   name: 'FSMapFeatureGroup',
@@ -18,7 +18,7 @@ export default {
     }
   },
   setup(props, { emit }) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    const map = inject<Ref<Map | null>>(MAP);
     let added = false;
     
     if(!map) {

package/components/map/FSMapLayerButton.vue

@@ -7,15 +7,15 @@
   />
   <FSDialog
     v-model="dialog"
-    width="500px"
-    :title="$tr('ui.map.select-layer', 'Select layer')"
+    :title="$tr('ui.map-layer.select', 'Select layer')"
+    :contained="true"
   >
     <template
       v-slot:body
     >
       <FSRow
         align="center-center"
-        padding="0 16px 0 0"
+        :wrap="false"
       >
         <FSImageCard
           v-for="layer in layers"

package/components/map/FSMapMarker.vue

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

package/components/map/FSMapMarkerClusterGroup.vue

@@ -8,7 +8,7 @@ import { inject, provide, ref, type Ref } from 'vue';
 import { type Map, MarkerClusterGroup, divIcon } from 'leaflet';
 
 import { clusterMarkerHtml } from '../../utils/leafletMarkers';
-import { INJECTION_FSMAP_MAP } from './keys';
+import { MAP } from './keys';
 
 export default {
   name: 'FSMapMarkerClusterGroup',
@@ -17,10 +17,15 @@ export default {
       type: Number,
       default: 0,
       required: false
+    },
+    disableClusteringAtZoom: {
+      type: Number,
+      default: 17,
+      required: false
     }
   },
   setup(props, { emit }) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    const map = inject<Ref<Map | null>>(MAP);
     let added = false;
     
     if(!map) {
@@ -34,7 +39,7 @@ export default {
     const markerClusterGroup = ref<MarkerClusterGroup>(new MarkerClusterGroup({
       spiderfyOnMaxZoom: false,
       showCoverageOnHover: false,
-      disableClusteringAtZoom: 17,
+      disableClusteringAtZoom: props.disableClusteringAtZoom,
       iconCreateFunction: function (cluster: any) {
         const size = 36;
 

package/components/map/FSMapOverlay.vue

@@ -10,7 +10,7 @@
     v-show="isExtraSmall"
     ref="mobileOverlayWrapper"
     class="fs-map-overlay-mobile"
-    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '50%' : '20px') }"
+    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '60%' : 'auto') }"
   >
     <FSCard
       width="100%"
@@ -24,14 +24,18 @@
       >
         <FSRow
           align="center-center"
-          @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+          style="cursor: pointer;"
+          @touchstart="onClick"
+          @mousedown="onClick"
         >
-          <FSButton
-            variant="icon"
-            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
-            @click="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
-          />
+          <FSIcon>
+            {{ $props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
+          </FSIcon>
         </FSRow>
+        <slot
+          v-if="$props.mode === 'collapse'"
+          name="collapsed"
+        />
         <FSCol
           v-if="$props.mode !== 'collapse'"
           height="fill"
@@ -44,7 +48,6 @@
       </FSCol>
     </FSCard>
   </div>
-
   <FSCard
     v-show="!isExtraSmall"
     class="fs-map-overlay-desktop"
@@ -64,14 +67,22 @@
 
 <script lang="ts">
 import { defineComponent, type PropType, onUnmounted, onMounted, ref } from "vue";
+
 import { useBreakpoints } from "../../composables";
-import FSButton from "../FSButton.vue";
+
 import FSCard from "../FSCard.vue";
+import FSIcon from "../FSIcon.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSMapOverlay",
+  components: {
+    FSCard,
+    FSIcon,
+    FSCol,
+    FSRow
+  },
   props: {
     mode: {
       type: String as PropType<"collapse" | "half" | "expand">,
@@ -79,15 +90,9 @@ export default defineComponent({
       default: "collapse"
     }
   },
-  components: {
-    FSButton,
-    FSCard,
-    FSCol,
-    FSRow
-  },
   emits: ["update:mode", "update:height", "update:width"],
-  setup(_, { emit }) {
-    const { isExtraSmall } = useBreakpoints();
+  setup(props, { emit }) {
+    const { isExtraSmall, isTouchScreenEnabled } = useBreakpoints();
 
     const mobileOverlayWrapper = ref<HTMLDivElement | null>(null);
     const desktopOverlay = ref<InstanceType<typeof FSCard> | null>(null);
@@ -95,6 +100,14 @@ export default defineComponent({
     const mobileResizeObserver = ref<ResizeObserver | null>(null);
     const desktopResizeObserver = ref<ResizeObserver | null>(null);
 
+    const onClick = (): void => {
+      if (props.mode === "expand") {
+        emit("update:mode", "collapse");
+        return;
+      }
+      emit("update:mode", "expand");
+    }
+
     onMounted(() => {
       mobileResizeObserver.value = new ResizeObserver(entries => {
         entries.forEach((entry) => {
@@ -110,10 +123,12 @@ export default defineComponent({
 
       if (mobileOverlayWrapper.value) {
         mobileResizeObserver.value.observe(mobileOverlayWrapper.value);
+        emit("update:height", mobileOverlayWrapper.value.offsetHeight);
       }
 
       if (desktopOverlay.value) {
         desktopResizeObserver.value.observe(desktopOverlay.value.$el);
+        emit("update:width", desktopOverlay.value.$el.offsetWidth);
       }
     });
 
@@ -127,10 +142,12 @@ export default defineComponent({
     });
 
     return {
-      isExtraSmall,
       mobileOverlayWrapper,
-      desktopOverlay
+      isTouchScreenEnabled,
+      desktopOverlay,
+      isExtraSmall,
+      onClick
     };
   }
 });
-</script>
+</script>

package/components/map/FSMapPolygon.vue

@@ -8,7 +8,7 @@ import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
 import { type Map, type LatLng, type Polygon, type FeatureGroup, polygon } from 'leaflet';
 
 import { useColors } from "../../composables";
-import { INJECTION_FSMAP_FEATUREGROUP, INJECTION_FSMAP_MAP } from './keys';
+import { FEATUREGROUP, MAP } from './keys';
 
 export default {
   name: 'FSMapPolygon',
@@ -25,8 +25,8 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
-    const featureGroup = inject<Ref<FeatureGroup | null>>(INJECTION_FSMAP_FEATUREGROUP, ref(null));
+    const map = inject<Ref<Map | null>>(MAP);
+    const featureGroup = inject<Ref<FeatureGroup | null>>(FEATUREGROUP, ref(null));
 
     const { getColors } = useColors();
 
@@ -47,9 +47,9 @@ export default {
 
       if(lastPolygon.value) {
         if(featureGroup && featureGroup.value) {
-          featureGroup.value.removeLayer(lastPolygon.value);
+          featureGroup.value.removeLayer(lastPolygon.value as Polygon);
         } else {
-          map.value.removeLayer(lastPolygon.value);
+          map.value.removeLayer(lastPolygon.value as Polygon);
         }
       }
 

package/components/map/FSMapTileLayer.vue

@@ -7,7 +7,7 @@ import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
 
 import type { Map, Layer } from 'leaflet';
 
-import { INJECTION_FSMAP_MAP } from './keys';
+import { MAP } from './keys';
 
 export default {
   name: 'FSMapTileLayer',
@@ -18,7 +18,7 @@ export default {
     }
   },
   setup(props) {
-    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    const map = inject<Ref<Map | null>>(MAP);
 
     const lastLayer = props.layer;
 

package/components/map/keys.ts

@@ -1,4 +1,4 @@
-export const INJECTION_FSMAP_FEATUREGROUP = 'featureGroup';
-export const INJECTION_FSMAP_MAP = 'map';
-export const INJECTION_FSMAP_MARKERCLUSTERGROUP = 'markerClusterGroup';
+export const FEATUREGROUP = 'featureGroup';
+export const MAP = 'map';
+export const MARKERCLUSTERGROUP = 'markerClusterGroup';
 

package/components/selects/FSSelectAutoRefresh.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { AutoRefresh } from "@dative-gpi/foundation-shared-domain/models";
+import { AutoRefresh } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 
@@ -40,16 +40,16 @@ export default defineComponent({
 
     const autoRefreshes = computed((): { id: AutoRefresh; label: string }[] => {
       const items = [
-        { id: AutoRefresh.FifteenSeconds, label: $tr("ui.auto-refresh.fifteen-seconds", "Fifteen seconds") },
-        { id: AutoRefresh.ThirtySeconds, label: $tr("ui.auto-refresh.thirty-seconds", "Thirty seconds") },
-        { id: AutoRefresh.OneMinute, label: $tr("ui.auto-refresh.one-minute", "One minute") },
-        { id: AutoRefresh.FiveMinutes, label: $tr("ui.auto-refresh.five-minutes", "Five minutes") },
-        { id: AutoRefresh.FifteenMinutes, label: $tr("ui.auto-refresh.fifteen-minutes", "Fifteen minutes") },
-        { id: AutoRefresh.ThirtyMinutes, label: $tr("ui.auto-refresh.thirty-minutes", "Thirty minutes") },
-        { id: AutoRefresh.OneHour, label: $tr("ui.auto-refresh.one-hour", "One hour") },
+        { id: AutoRefresh.FifteenSeconds, label: $tr("ui.common.fifteen-seconds", "Fifteen seconds") },
+        { id: AutoRefresh.ThirtySeconds, label: $tr("ui.common.thirty-seconds", "Thirty seconds") },
+        { id: AutoRefresh.OneMinute, label: $tr("ui.common.one-minute", "One minute") },
+        { id: AutoRefresh.FiveMinutes, label: $tr("ui.common.five-minutes", "Five minutes") },
+        { id: AutoRefresh.FifteenMinutes, label: $tr("ui.common.fifteen-minutes", "Fifteen minutes") },
+        { id: AutoRefresh.ThirtyMinutes, label: $tr("ui.common.thirty-minutes", "Thirty minutes") },
+        { id: AutoRefresh.OneHour, label: $tr("ui.common.one-hour", "One hour") },
       ];
       if (props.useNone) {
-        items.unshift({ id: AutoRefresh.None, label: $tr("ui.auto-refresh.none", "None") });
+        items.unshift({ id: AutoRefresh.None, label: $tr("ui.common.none", "None") });
       }
       return items;
     });

package/components/selects/FSSelectDashboardVariableType.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { DashboardVariableType } from "@dative-gpi/foundation-shared-domain/models";
+import { DashboardVariableType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 
@@ -34,9 +34,10 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const dashboardVariableTypes = computed((): { id: DashboardVariableType; label: string }[] => ([
-      { id: DashboardVariableType.Number, label: $tr("ui.dashboard-variable-type.number", "Number") },
-      { id: DashboardVariableType.String, label: $tr("ui.dashboard-variable-type.string", "String") },
-      { id: DashboardVariableType.TimeStep, label: $tr("ui.dashboard-variable-type.time-step", "Time step") }
+      { id: DashboardVariableType.Number, label: $tr("ui.common.number", "Number") },
+      { id: DashboardVariableType.String, label: $tr("ui.common.string", "String") },
+      { id: DashboardVariableType.TimeStep, label: $tr("ui.common.time-step", "Time step")},
+      { id: DashboardVariableType.PlotPer, label: $tr("ui.common.plot-per", "Plot per")}
     ]));
 
     return {

package/components/selects/FSSelectDateSetting.vue

@@ -1,5 +1,6 @@
 <template>
   <FSSelectField
+    class="select.date-setting.label"
     :items="dateSettings"
     :clearable="false"
     :modelValue="$props.modelValue"
@@ -12,7 +13,7 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
+import { DateSetting } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 
@@ -87,7 +88,7 @@ export default defineComponent({
         dateSettings.push({ id: DateSetting.LastPeriod, label: $tr("ui.date-setting.last-period", "Last period") });
       }
       if (props.useNone) {
-        dateSettings.unshift({ id: DateSetting.None, label: $tr("ui.date-setting.none", "None") });
+        dateSettings.unshift({ id: DateSetting.None, label: $tr("ui.common.none", "None") });
       }
       return dateSettings;
     })