@dative-gpi/foundation-shared-components 1.0.40 → 1.0.42

package/components/FSCalendar.vue

@@ -67,7 +67,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -108,7 +108,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { epochToPicker, pickerToEpoch, todayToEpoch } = useDateFormat();
     const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
     

package/components/FSCalendarTwin.vue

@@ -114,7 +114,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -155,7 +155,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useDateFormat();
     const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
     

package/components/FSClock.vue

@@ -55,7 +55,7 @@
 import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
@@ -98,7 +98,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongDateFormat } = useAppTimeZone();
+    const { epochToLongDateFormat } = useDateFormat();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -58,7 +58,7 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import type { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import { connectivityLabel } from "../../utils";
 
@@ -89,7 +89,7 @@ export default defineComponent({
   },
   emit: ["close"],
   setup(props) {
-    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
 
     const deviceTimestamp = computed((): string => {
       if (props.deviceConnectivity.sourceTimestamp) {

package/components/deviceOrganisations/FSStatusCard.vue

@@ -71,7 +71,7 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
@@ -108,7 +108,7 @@ export default defineComponent({
   },
   emits: ["close"],
   setup(props) {
-    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
 
     const statusLabel = computed((): string => {
       return props.statusGroup.label || props.modelStatus.label;

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -61,7 +61,7 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 import type { FSDeviceAlert} from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
@@ -90,7 +90,7 @@ export default defineComponent({
   },
   emits: ["close"],
   setup(props) {
-    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
     const { $tr } = useTranslationsProvider();
 
     const criticityColor = computed(() => {

package/components/fields/FSDateField.vue

@@ -152,7 +152,7 @@ import _ from "lodash";
 
 import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
@@ -215,7 +215,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongDateFormat } = useAppTimeZone();
+    const { epochToLongDateFormat } = useDateFormat();
     const { validateOn, getMessages} = useRules();
     const { isExtraSmall } = useBreakpoints();
 

package/components/fields/FSDateRangeField.vue

@@ -62,7 +62,7 @@ import { computed, defineComponent, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
@@ -123,7 +123,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { validateOn, getMessages } = useRules();
-    const { epochToShortDateFormat } = useAppTimeZone();
+    const { epochToShortDateFormat } = useDateFormat();
 
     const dialog = ref(false);
     

package/components/fields/FSDateTimeField.vue

@@ -197,7 +197,7 @@ import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
@@ -264,7 +264,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongTimeFormat, getOffsetUser } = useAppTimeZone();
+    const { getUserOffset } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
 
@@ -300,7 +301,7 @@ export default defineComponent({
       if (props.modelValue) {
         // FSClock just gives two numbers without consideration for the time zone
         // We must adjust the time to the user's time zone
-        innerTime.value = Math.floor((props.modelValue + getOffsetUser()) % (24 * 60 * 60 * 1000));
+        innerTime.value = Math.floor((props.modelValue + getUserOffset()) % (24 * 60 * 60 * 1000));
         innerDate.value = props.modelValue - innerTime.value;
       }
       else {

package/components/fields/FSDateTimeRangeField.vue

@@ -79,7 +79,7 @@
 import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
@@ -115,7 +115,7 @@ export default defineComponent({
     modelValue: {
       type: Array as PropType<number[] | null>,
       required: false,
-      default: null
+      default: () => null
     },
     color: {
       type: String as PropType<ColorBase>,
@@ -145,7 +145,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToShortTimeFormat, getOffsetUser } = useAppTimeZone();
+    const { getUserOffset } = useAppTimeZone();
+    const { epochToShortTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
@@ -206,13 +207,13 @@ export default defineComponent({
             break;
           }
           case 1: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getOffsetUser()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
             break;
           }
           default: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getOffsetUser()) % (24 * 60 * 60 * 1000));
-            innerTimeRight.value = Math.floor((props.modelValue[1] + getOffsetUser()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset()) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
             break;
           }

package/components/fields/FSGradientField.vue

@@ -25,48 +25,29 @@
         :clearable="false"
         :editable="$props.editable"
         :items="items"
-        :modelValue="JSON.stringify($props.modelValue)"
-        @update:modelValue="$emit('update:modelValue', presetGradients[$event])"
+        modelValue="custom"
+        @update:modelValue="$emit('update:modelValue', allGradients[$event])"
       >
         <template
-          v-slot:selection="{ item }"
+          #item-append="{ item }"
         >
           <FSRow
             class="fs-gradient-field-preview"
-            height="fill"
+            height="20px"
             width="100%"
-            :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(JSON.parse(item.value))})` }"
+            align="center-center"
+            :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(allGradients[item.id])})` }"
           >
             <span />
           </FSRow>
         </template>
-        <template
-          v-slot:item="{ item, props }"
-        >
-          <v-list-item
-            v-bind="props"
-          >
-            <template
-              #title
-            >
-              <FSRow
-                class="fs-gradient-field-preview"
-                height="fill"
-                width="100%"
-                :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(presetGradients[item.value])})` }"
-              >
-                <span />
-              </FSRow>
-            </template>
-          </v-list-item>
-        </template>
       </FSSelectField>
     </FSBaseField>
   </FSCol>
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from "vue";
+import { type PropType, defineComponent, computed } from "vue";
 
 import { groupedGradients } from "../../utils";
 import { useColors } from "../../composables";
@@ -127,14 +108,27 @@ export default defineComponent({
     const { getColors } = useColors();
 
     const presetGradients = groupedGradients[props.colorCount];
-    const items = Object.keys(presetGradients)
+
+    const allGradients = computed<Record<string, string[]>>(() => {
+      return {
+        'custom': [
+          ...props.modelValue
+        ],
+        ...presetGradients
+      }
+    });
+
+    const items = Object.keys(allGradients.value).map((key) => ({
+      id: key,
+      label: null
+    }));
 
     const encodeGradientCssColors = (colors: string[]) => {
       return colors.map((color) => getColors(color).base).join(", ");
     };
 
     return {
-      presetGradients,
+      allGradients,
       items,
       encodeGradientCssColors
     };

package/components/fields/FSMagicField.vue

@@ -62,7 +62,7 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
@@ -105,7 +105,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToShortTimeFormat } = useAppTimeZone();
+    const { epochToShortTimeFormat } = useDateFormat();
     const { $tr } = useTranslationsProvider();
     const { get } = useMagicFieldProvider();
 

package/components/fields/FSTermField.vue

@@ -68,7 +68,7 @@
           :rules="[DateRules.required()]"
           :editable="$props.editable"
           :hideHeader="true"
-          :modelValue="[parseForPicker(innerStartDate)!, parseForPicker(innerEndDate)!]"
+          :modelValue="actualValue"
           @update:modelValue="onPickDates"
         />
       </FSRow>
@@ -81,7 +81,7 @@ import { computed, defineComponent, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
 import { DateRules, NumberRules, TextRules } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
 
@@ -163,7 +163,7 @@ export default defineComponent({
   },
   emits: ["update:startDate", "update:endDate"],
   setup(props, { emit }) {
-    const { parseForPicker, formatFromPicker, todayToPicker, yesterdayToPicker } = useAppTimeZone();
+    const { parseForPicker, epochToISO, todayToPicker, yesterdayToPicker } = useDateFormat();
     const { getMessages } = useRules();
 
     const innerDateSetting = ref<DateSetting>(DateSetting.PastDays);
@@ -181,6 +181,14 @@ export default defineComponent({
       ];
     });
 
+    const actualValue = computed(() => {
+      const dates = [parseForPicker(innerStartDate.value), parseForPicker(innerEndDate.value)]
+      if(dates.some(d => d == null)) {
+        return null;
+      }
+      return dates as [number, number];
+    })
+
     const messages = computed((): string[] => {
       return props.messages ??
         getMessages(props.startDate, props.rules).concat(getMessages(props.endDate, props.rules));
@@ -418,14 +426,14 @@ export default defineComponent({
       }
       else {
         console.log(value[0], value[1]);
-        if (value && value[0] != null && formatFromPicker(value[0]) !== innerStartDate.value) {
-          innerStartDate.value = formatFromPicker(value[0]);
+        if (value && value[0] != null && epochToISO(value[0]) !== innerStartDate.value) {
+          innerStartDate.value = epochToISO(value[0]);
           if (valid.value) {
             emit("update:startDate", innerStartDate.value);
           }
         }
-        if (value && value[1] != null && formatFromPicker(value[1]) !== innerEndDate.value) {
-          innerEndDate.value = formatFromPicker(value[1]);
+        if (value && value[1] != null && epochToISO(value[1]) !== innerEndDate.value) {
+          innerEndDate.value = epochToISO(value[1]);
           if (valid.value) {
             emit("update:endDate", innerEndDate.value);
           }
@@ -619,7 +627,7 @@ export default defineComponent({
         }
       }
 
-      if (parseForPicker(props.endDate) != null && parseForPicker(props.startDate) != null) {
+      if (props.endDate && parseForPicker(props.endDate) != null && props.startDate && parseForPicker(props.startDate) != null) {
         innerDateSetting.value = DateSetting.Pick;
         innerDateValue.value = 1;
         return;
@@ -643,6 +651,7 @@ export default defineComponent({
       innerDateValue,
       innerStartDate,
       innerEndDate,
+      actualValue,
       pastSettings,
       DateSetting,
       NumberRules,

package/components/map/FSMap.vue

@@ -40,6 +40,7 @@
         <FSMapMarkerClusterGroup
           v-if="$props.locations"
           :expected-layers="$props.locations.length"
+          :disableClusteringAtZoom="defaultZoom"
           @update:bounds="(bounds) => locationGroupBounds = bounds"
         >
           <FSMapMarker
@@ -116,7 +117,7 @@
 </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 } from "vue";
 
 import type {} from "leaflet.markercluster";
 import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, LatLngBounds, type FitBoundsOptions } from "leaflet";
@@ -240,10 +241,16 @@ 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",
@@ -306,20 +313,20 @@ export default defineComponent({
       return bounds as LatLngBounds;
     });
 
-    const calculateTargetPosition = (target: L.LatLng) => {
+    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) => {
       if(!map.value) {
         return;
       }
-      map.value.panTo(calculateTargetPosition(latLng(lat, lng)));
+      map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom);
     }
 
     const setView = (lat: number, lng: number, zoom: number) => {
@@ -376,8 +383,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 +408,7 @@ export default defineComponent({
       if(!selectedLocation) {
         return;
       }
-      panTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude);
+      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude);
     }, { immediate: true });
 
     watch(() => props.selectedAreaId, (selectedAreaId) => {
@@ -419,6 +432,7 @@ export default defineComponent({
 
     return {
       ColorEnum,
+      defaultZoom,
       leafletContainer,
       locationGroupBounds,
       overlayHeight,

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/FSMapMarker.vue

@@ -10,7 +10,7 @@ import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type
 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',
@@ -41,8 +41,8 @@ export default {
   },
   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();
 

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

@@ -133,4 +133,4 @@ export default defineComponent({
     };
   }
 });
-</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();
 

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/FSSelectDateSetting.vue

@@ -1,5 +1,6 @@
 <template>
   <FSSelectField
+    class="fs-select-date-setting"
     :items="dateSettings"
     :clearable="false"
     :modelValue="$props.modelValue"

package/models/rules.ts

@@ -1,11 +1,11 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { validateExpression } from "@dative-gpi/foundation-shared-domain/tools";
 
 import { getTimeBestString } from "../utils";
 import type { TimeUnit } from "@/shared/foundation-shared-domain";
 
-const { epochToLongDateFormat } = useAppTimeZone()!;
+const { epochToLongDateFormat } = useDateFormat()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {

package/package.json

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

package/styles/components/fs_gradient_field.scss

@@ -1,8 +1,10 @@
 
 .fs-gradient-select-field .v-select__selection {
   width: 100%;
+}
 
-  
+.fs-gradient-select-field  .v-field {
+  grid-template-columns: min-content min-content minmax(0, 1fr) min-content;
 }
 
 .fs-gradient-field-preview {

package/styles/components/fs_select_date_settings.scss

@@ -0,0 +1,3 @@
+.fs-select-field.fs-select-date-setting {
+    min-width: 160px;
+}