@dative-gpi/foundation-shared-components 1.0.158-sankey2 → 1.0.159-sankey3

package/components/FSOptionsMenu.vue

@@ -0,0 +1,165 @@
+<template>
+  <FSMenu
+    :location="$props.location"
+    :closeOnContentClick="true"
+    :contained="false"
+    minWidth="0"
+    v-model="modelValue"
+    v-bind="$attrs"
+  >
+    <template
+      #activator="{ props }"
+    >
+      <slot
+        name="activator"
+        v-bind="props"
+      >
+        <FSButton
+          v-bind="props"
+          :icon="$props.icon"
+          :iconSize="$props.iconSize"
+          :color="$props.buttonColor"
+          :variant="$props.buttonVariant"
+        />
+      </slot>
+    </template>
+    <FSCard
+      :maxWidth="$props.maxWidth"
+      :width="$props.width"
+      padding="2px"
+      :border="false"
+      :elevation="true"
+      align="center-center"
+    >
+      <slot
+        name="content"
+      >
+        <FSCol
+          gap="0px"
+        >
+          <FSFadeOut
+            :scrollOutside="false"
+            maxHeight="80dvh"
+          >
+            <FSClickable
+              v-for="(item, index) in $props.items"
+              width="100%"
+              padding="8px"
+              height="40px"
+              :key="index"
+              :border="false"
+              @click="onClickItem(item)"
+            >
+              <slot
+                name="item"
+                v-bind="{ item, index }"
+              >
+                <FSRow
+                  align="center-left"
+                >
+                  <FSIcon
+                    v-if="item.icon"
+                    :icon="item.icon"
+                  />
+                  <FSText
+                    font="text-body"
+                  >
+                    {{ item.label }}
+                  </FSText>
+                </FSRow>
+              </slot>
+            </FSClickable>
+          </FSFadeOut>
+        </FSCol>
+      </slot>
+    </FSCard>
+  </FSMenu>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type PropType } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
+import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
+
+export default defineComponent({
+  name: "FSInformationsMenu",
+  components: {
+    FSMenu,
+    FSCard,
+    FSRow,
+    FSText,
+    FSButton,
+    FSCol,
+    FSIcon,
+    FSClickable
+  },
+  props: {
+    items: {
+      type: Array as PropType<{label: string, icon?: string, onClick: () => void, closeOnContentClick?: boolean}[]>,
+      default: () => []
+    },
+    location: {
+      type: String,
+      default: "bottom"
+    },
+    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: "90dvw"
+    },
+    icon: {
+      type: String,
+      default: "mdi-dots-horizontal"
+    },
+    iconSize: {
+      type: String,
+      default: "18px"
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      default: ColorEnum.Light
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "icon"
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const modelValue = ref(false);
+
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+
+    const onClickItem = (item: { onClick: () => void, closeOnContentClick?: boolean }) => {
+      item.onClick();
+      if (item.closeOnContentClick !== false) {
+        modelValue.value = false;
+      }
+    };
+
+    return {
+      ColorEnum,
+      modelValue,
+      lightColors,
+      onClickItem
+    };
+  }
+});
+</script>

package/components/FSRangePicker.vue

@@ -5,6 +5,7 @@
     :required="$props.required"
     :disabled="$props.disabled"
     :label="$props.label"
+    :maxWidth="$props.maxWidth"
   >
     <FSRow
       align="bottom-center"
@@ -29,7 +30,7 @@
           <FSRangeSlider
             minWidth='min(300px, 90vw)'
             :disabled="$props.disabled"
-            :color="ColorEnum.Light"
+            :color="ColorEnum.Dark"
             :thumbColor="ColorEnum.Primary"
             :trackFillColor="ColorEnum.Primary"
             :trackSize="8"
@@ -39,7 +40,7 @@
             :max="endTimestamp"
             :ticks="ticks"
             showTicks="always"
-            :tick-size="0"
+            :tick-size="4"
             :modelValue="$props.modelValue"
             @update:modelValue="$emit('update:modelValue', $event)"
           >
@@ -60,12 +61,7 @@
                   :color="lightColors.dark"
                   font="text-overline"
                 >
-                  {{ intervalTime <= 3600000
-                    ?
-                      epochToShortTimeOnlyFormat(tick.value)
-                    :
-                      epochToDayMonthShortOnly(tick.value)
-                  }}
+                  {{ ticksPrecision === TimePrecision.Hours ? epochToShortTimeOnlyFormat(tick.value) : epochToDayMonthShortOnly(tick.value) }}
                 </FSText>
               </FSRow>
             </template>
@@ -85,7 +81,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
 
 import { useDateFormat, useDateExpression } from "@dative-gpi/foundation-shared-services/composables";
 
@@ -100,6 +96,12 @@ import FSRangeSlider from '@dative-gpi/foundation-shared-components/components/F
 import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
 import FSTermField from '@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue';
 
+enum TimePrecision {
+  Hours = 1,
+  Days = 2,
+  Months = 3
+}
+
 export default defineComponent({
   name: "FSRangePicker",
   components: {
@@ -167,6 +169,11 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 50
+    },
+    maxWidth: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
@@ -183,56 +190,91 @@ export default defineComponent({
     const startTimestamp = computed(() => convertTermToEpoch(props.startDate));
     const endTimestamp = computed(() => convertTermToEpoch(props.endDate));
 
-    const intervalTime = computed(() => {
-      const possibleIntervals = [60000, 3600000, 86400000];
+    
 
-      const interval = possibleIntervals.find(interval => {
-        return (endTimestamp.value - startTimestamp.value) / interval < 100;
-      });
+    const tickCountToShow = computed(() => {
+      if (isExtraSmall.value) {
+        return 3;
+      }
+      if (isMobileSized.value) {
+        return 4;
+      }
+      return 5;
+    });
 
-      if (interval) {
-        return interval;
+    const ticksPrecision = computed(() => {
+      const rangeDuration = endTimestamp.value - startTimestamp.value;
+      if (rangeDuration <= 86400000 * tickCountToShow.value) {
+        return TimePrecision.Hours;
+      }
+      if (rangeDuration <= 2592000000 * tickCountToShow.value) {
+        return TimePrecision.Days;
       }
-      return 86400000;
+      return TimePrecision.Months;
     });
 
     const ticks = computed(() => {
       const ticks: number[] = [];
+      const count = tickCountToShow.value;
+      const precision = ticksPrecision.value;
 
-      const rangeDuration = endTimestamp.value - startTimestamp.value;
-      const interval = rangeDuration / maximumTickToShow.value;
+      const start = startTimestamp.value;
+      const end = endTimestamp.value;
+      const range = end - start;
+
+      let step: number;
+
+      if (precision === TimePrecision.Hours) {
+        step = Math.ceil(range / count / 3600000) * 3600000;
+        const alignedStart = Math.ceil(start / 3600000) * 3600000;
+
+        for (let i = 0; i < count; i++) {
+          const tick = alignedStart + i * step;
+          if (tick < end) {
+            ticks.push(tick);
+          }
+        }
+
+      } else if (precision === TimePrecision.Days) {
+        step = Math.ceil(range / count / 86400000) * 86400000;
+
+        const date = new Date(start);
+        date.setHours(0, 0, 0, 0);
+        const alignedStart = date.getTime() + (date.getTime() < start ? step : 0);
+
+        for (let i = 0; i < count; i++) {
+          const tick = alignedStart + i * step;
+          if (tick < end) {
+            ticks.push(tick);
+          }
+        }
 
-      for (let i = 1; i < maximumTickToShow.value; i++) {
-        ticks.push(startTimestamp.value + i * interval);
+      } else {
+        const interval = range / count;
+        for (let i = 0; i < count; i++) {
+          ticks.push(start + i * interval);
+        }
       }
+
       return ticks;
     });
 
-    const maximumTickToShow = computed(() => {
-      if (isExtraSmall.value) {
-        return 4;
-      }
-      if (isMobileSized.value) {
-        return 5;
-      }
-      return 6;
-    });
 
     const onPlayingChange = (value: boolean) => {
       playing.value = value;
     };
 
     const onClickBackward = () => {
-      const rangeDuration = props.modelValue[1] - props.modelValue[0];
-      emit('update:modelValue', [startTimestamp.value, startTimestamp.value + rangeDuration]);
+      const modelValueDuration = props.modelValue[1] - props.modelValue[0];
+      emit('update:modelValue', [startTimestamp.value, startTimestamp.value + modelValueDuration]);
     };
 
     const onClickForward = () => {
-      const rangeDuration = props.modelValue[1] - props.modelValue[0];
-      emit('update:modelValue', [endTimestamp.value - rangeDuration, endTimestamp.value]);
+      const modelValueDuration = props.modelValue[1] - props.modelValue[0];
+      emit('update:modelValue', [endTimestamp.value - modelValueDuration, endTimestamp.value]);
     };
 
-    watch(() => [props.startDate, props.endDate], () => {
+    watch([() => props.startDate, () => props.endDate, () => props.modelValue], () => {
       if((props.modelValue[0] < startTimestamp.value || props.modelValue[1] > endTimestamp.value)) {
         emit('update:modelValue', [startTimestamp.value, endTimestamp.value]);
       }
@@ -241,15 +283,16 @@ export default defineComponent({
     watch(playing, (value) => {
       if(!value && playingInterval.value) {
         clearInterval(playingInterval.value);
-      } else {
-        playingInterval.value = setInterval(() => {
-          if(props.modelValue[0] + props.stepTime <= endTimestamp.value && props.modelValue[1] + props.stepTime <= endTimestamp.value) {
-            emit('update:modelValue', [props.modelValue[0] + props.stepTime, props.modelValue[1] + props.stepTime]);
-          } else {
-            playing.value = false;
-          }
-        }, props.playingStepDuration);
+        return;
       }
+
+      playingInterval.value = setInterval(() => {
+        if(props.modelValue[0] + props.stepTime <= endTimestamp.value && props.modelValue[1] + props.stepTime <= endTimestamp.value) {
+          emit('update:modelValue', [props.modelValue[0] + props.stepTime, props.modelValue[1] + props.stepTime]);
+        } else {
+          playing.value = false;
+        }
+      }, props.playingStepDuration);
     });
 
     return {
@@ -257,10 +300,10 @@ export default defineComponent({
       playing,
       ColorEnum,
       lightColors,
-      intervalTime,
       endTimestamp,
+      TimePrecision,
       startTimestamp,
-      maximumTickToShow,
+      ticksPrecision,
       epochToISO,
       onPlayingChange,
       onClickForward,

package/components/FSRangeSlider.vue

@@ -6,28 +6,32 @@
     :disabled="$props.disabled"
     :style="style"
   >
-    <v-range-slider
-      class="fs-range-slider"
-      hide-details
-      :disabled="$props.disabled"
-      :ripple="false"
-      :style="style"
-      :elevation="0"
-      :tickSize="4"
-      :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="$emit('update:modelValue', $event)"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
+    <FSRow>
+      <v-range-slider
+        class="fs-range-slider"
+        hide-details
+        width="100%"
+        :disabled="$props.disabled"
+        :ripple="false"
+        :color="$props.color"
+        :style="style"
+        :elevation="0"
+        :tickSize="4"
+        :modelValue="$props.modelValue ?? undefined"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        v-bind="$attrs"
       >
-        <slot
-          :name="name"
-          v-bind="slotData"
-        />
-      </template>
-    </v-range-slider>
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </v-range-slider>
+    </FSRow>
   </FSBaseField>
 </template>
 

package/components/map/FSMap.vue

@@ -389,8 +389,6 @@ export default defineComponent({
       if(!map.value || !props.bounds) {
         return;
       }
-
-      //console.log("Bounds changed", props.bounds);
       fitBounds(props.bounds, { maxZoom: 14 });
     });
 

package/components/map/FSMapMarker.vue

@@ -3,11 +3,13 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, type Ref, watch, ref, onUnmounted, onMounted } from 'vue';
+import { inject, type PropType, type Ref, watch, ref, onUnmounted, computed } from 'vue';
+import { type RouteLocation } from "vue-router";
 
-import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type LeafletMouseEvent } from 'leaflet';
+import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup } from 'leaflet';
 
 import { useColors } from "../../composables";
+import { useRouting } from '@dative-gpi/foundation-shared-services/composables';
 
 import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP, MARKERCLUSTERGROUP } from './keys';
@@ -41,14 +43,28 @@ export default {
     label: {
       type: String,
       required: false
+    },
+    to: {
+      type: Object as PropType<RouteLocation | null>,
+      required: false
     }
   },
-  emits: ['click'],
+  emits: ['click', 'auxclick'],
   setup(props, { emit }) {
     const map = inject<Ref<Map | null>>(MAP);
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
-
+      
     const { getColors } = useColors();
+    const { handleRoutingEvent } = useRouting();
+
+    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 getMarkerIcon = () => {
       if(props.variant === 'gps') {
         const size = 16;
@@ -81,12 +97,32 @@ export default {
 
     const actualMarker = ref(marker(props.latlng ?? [0, 0], { icon: getMarkerIcon() }));
 
-    if(!map) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    const markerElement = computed(() => {
+      return actualMarker.value.getElement();
+    });
+
+    const onClick = (event: MouseEvent) => {
+      if(props.to) {
+        handleRoutingEvent(event, props.to, true);
+        return;
+      }
+      
+      emit('click', {
+        ...event,
+        latlng: props.latlng
+      });
     }
 
-    if(!map.value) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    const onAuxClick = (event: MouseEvent) => {
+      if(props.to) {
+        handleRoutingEvent(event, props.to);
+        return;
+      }
+
+      emit('auxclick', {
+        ...event,
+        latlng: props.latlng
+      });
     }
 
     watch(map, () => {
@@ -118,11 +154,14 @@ export default {
       actualMarker.value.setLatLng(props.latlng);
     });
 
-    onMounted(() => {
-      actualMarker.value.on('click', (event: LeafletMouseEvent) => {
-        emit('click', event);
-      });
-    });
+    watch(markerElement, (newMarkerElement) => {
+      if(!newMarkerElement) {
+        return;
+      }
+
+      newMarkerElement.addEventListener('click', onClick);
+      newMarkerElement.addEventListener('auxclick', onAuxClick);
+    }, { immediate: true });
 
     onUnmounted(() => {
       if(actualMarker.value && map.value) {

package/composables/useMapLayers.ts

@@ -13,7 +13,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Map,
       label: $tr("ui.map-layer.map", "Map"),
-      image: new URL("../../assets/images/map/map.png", import.meta.url).href,
+      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,
@@ -26,7 +26,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Imagery,
       label: $tr("ui.map-layer.imagery", "Imagery"),
-      image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
+      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,
@@ -39,7 +39,7 @@ export const useMapLayers = () => {
     {
       name: MapLayers.Snow,
       label: $tr("ui.map-layer.snow", "Snow ski map"),
-      image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
+      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,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.158-sankey2",
+  "version": "1.0.159-sankey3",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.158-sankey2",
-    "@dative-gpi/foundation-shared-services": "1.0.158-sankey2"
+    "@dative-gpi/foundation-shared-domain": "1.0.159-sankey3",
+    "@dative-gpi/foundation-shared-services": "1.0.159-sankey3"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "3bdd971b1260dda85c68b5c550521861a513c2f1"
+  "gitHead": "2e082499c169cb28d4480d2fb76993f1240d9c87"
 }

package/styles/components/index.scss

@@ -48,7 +48,6 @@
 @import "fs_password_field.scss";
 @import "fs_progress_bar.scss";
 @import "fs_radio.scss";
-@import "fs_range_slider.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
 @import "fs_select_field.scss";

package/tools/alertsTools.ts

@@ -74,9 +74,10 @@ export const AlertTools = {
   },
   criticityLabel(value: Criticity): string {
     switch (value) {
+      case Criticity.Information: return $tr('ui.common.information', 'Information');
       case Criticity.Warning: return $tr('ui.common.warning', 'Warning');
       case Criticity.Error: return $tr('ui.common.error', 'Error');
-      default: return $tr('ui.common.information', 'Information');
+      default: return $tr("ui.common.none", "None");
     }
   },
   statusColor(status: AlertStatus): ColorEnum {

package/styles/components/fs_range_slider.scss

@@ -1,51 +0,0 @@
-.fs-range-slider {
-    padding: 0px !important;
-    width: calc(100% - 16px);
-
-    & .v-slider__container {
-        cursor: var(--fs-range-slider-cursor);
-        margin-left: 8px;
-        margin-right: 8px;
-        opacity: 1 !important;
-    }
-
-    & .v-slider-track__background {
-        background-color: var(--fs-range-slider-track-color);
-        height: 6px !important;
-        opacity: 1;
-    }
-
-    & .v-slider-track__fill {
-        background-color: var(--fs-range-slider-fill-color);
-        opacity: 0.7 !important;
-    }
-
-    & .v-slider-track__tick {
-        background-color: var(--fs-range-slider-thumb-color);
-        border-radius: 50%;
-    }
-
-    & .v-slider-thumb {
-        color: var(--fs-range-slider-thumb-color);
-
-        &__surface:before {
-            display: none !important;
-        }
-
-        &__surface:after {
-            display: none !important;
-        }
-
-        &__ripple {
-            display: none !important;
-        }
-    }
-}
-
-.fs-range-slider-label {
-    color: var(--fs-range-slider-color);
-}
-
-.fs-range-slider-description {
-    color: var(--fs-range-slider-color);
-}