@dative-gpi/foundation-shared-components 1.0.65 → 1.0.67-map-edit

package/composables/useAddress.ts

@@ -1,20 +1,25 @@
+/// <reference types="@types/google.maps" />
 import _ from "lodash";
 
 import { Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
+import { useAppLanguageCode } from '@dative-gpi/foundation-shared-services/composables';
 
 export const useAddress = () => {
   const enabled = true;
+  const { languageCode } = useAppLanguageCode();
+
   let initialized = false;
+  let userLocation: google.maps.LatLngLiteral | null;
   let searchService: google.maps.places.AutocompleteService;
   let placeService: google.maps.places.PlacesService;
   let sessionId: google.maps.places.AutocompleteSessionToken;
-  
 
   const init = async () => {
     await window.initMap;
+    userLocation = await getCurrentLocation();
     searchService = new google.maps.places.AutocompleteService();
     placeService = new google.maps.places.PlacesService(
-      document.getElementById("places") as HTMLDivElement
+      document.createElement("div")
     );
     sessionId = new google.maps.places.AutocompleteSessionToken();
     initialized = true;
@@ -25,11 +30,12 @@ export const useAddress = () => {
       await init();
     } 
 
-    return _search(search).then(result => {
-      return _.map(result, r => ({ id: r.place_id, label: r.description }));
-    }).catch(() => {
-      return [];
-    });
+    const mapsResults = await _search(search);
+
+    return mapsResults.map((result) => ({
+      id: result.place_id,
+      label: result.description
+    }));
   }
 
   const get = async (place: Place): Promise<Address> => {
@@ -78,16 +84,42 @@ export const useAddress = () => {
     });
   }
 
+  const getCurrentLocation = async (): Promise<google.maps.LatLngLiteral | null> => {
+    if (!navigator.geolocation) {
+      return null;
+    }
+  
+    return new Promise((resolve) => {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          resolve({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          });
+        },
+        () => resolve(null)
+      );
+    });
+  };
+
   const _search = (search: string) => {
     if (!enabled) {
       throw new Error("offline mode, do not call this method");
     }
     return new Promise<google.maps.places.AutocompletePrediction[]>(
       (resolve, reject) => {
+        /**
+         * ISO 3166 language code
+         */
+        const isoLanguageCode = languageCode.value?.split("-")[0];
+
         searchService!.getPlacePredictions(
           {
             input: search,
-            sessionToken: sessionId!
+            region: isoLanguageCode,
+            language: isoLanguageCode,
+            sessionToken: sessionId,
+            locationBias: userLocation,
           },
           function (result, status) {
             if (status != google.maps.places.PlacesServiceStatus.OK || !result) {

package/composables/useBreakpoints.ts

@@ -5,22 +5,31 @@ let initialized = false;
 const windowHeight = ref(window.innerHeight);
 const windowWidth = ref(window.innerWidth);
 
+const windowOuterWidth = ref(!window.document.hasFocus() && window.outerWidth === 0 ? window.innerWidth : window.outerWidth);
+
 export const useBreakpoints = () => {
     const onSizeChange = (): void => {
         windowHeight.value = window.innerHeight;
         windowWidth.value = window.innerWidth;
+
+        // Bug in chromium based browsers where window.outerWidth is 0 when tab loads without focus
+        if (!window.document.hasFocus() && window.outerWidth === 0) {
+            windowOuterWidth.value = window.innerWidth;
+            return;
+        }
+        windowOuterWidth.value = window.outerWidth;
     };
 
     const isTouchScreenEnabled = computed((): boolean => {
-        return navigator.maxTouchPoints > 0;
+        return window.matchMedia('(hover: none), (pointer: coarse), (pointer: none)').matches;
     });
 
     const isMobileSized = computed((): boolean => {
-        return windowWidth.value < 1264;
+        return windowOuterWidth.value < 1264;
     });
 
     const isExtraSmall = computed((): boolean => {
-        return windowWidth.value < 600;
+        return windowOuterWidth.value < 600;
     });
 
     if (!initialized) {
@@ -28,11 +37,38 @@ export const useBreakpoints = () => {
         initialized = true;
     }
 
+    const fontStyles = computed(() => ({
+        "--fs-font-h1-font-size"           : isMobileSized.value ? "28px" : "36px",
+        "--fs-font-h1-line-height"         : isMobileSized.value ? "32px" : "40px",
+        "--fs-font-h1-letter-spacing"      : isMobileSized.value ? "-1.4px" : "-0.72px",
+        "--fs-font-h2-font-size"           : isMobileSized.value ? "22px" : "26px",
+        "--fs-font-h2-line-height"         : isMobileSized.value ? "24px" : "32px",
+        "--fs-font-h2-letter-spacing"      : isMobileSized.value ? "-0.88px" : "-0.78px",
+        "--fs-font-h3-font-size"           : isMobileSized.value ? "16px" : "20px",
+        "--fs-font-h3-line-height"         : isMobileSized.value ? "20px" : "24px",
+        "--fs-font-h3-letter-spacing"      : isMobileSized.value ? "-0.48px" : "-0.6px",
+        "--fs-font-button-font-size"       : isMobileSized.value ? "12px" : "14px",
+        "--fs-font-button-line-height"     : isMobileSized.value ? "16px" : "20px",
+        "--fs-font-button-letter-spacing"  : isMobileSized.value ? "-0.36px" : "-0.42px",
+        "--fs-font-overline-font-size"     : isMobileSized.value ? "10px" : "12px",
+        "--fs-font-overline-line-height"   : isMobileSized.value ? "16px" : "16px",
+        "--fs-font-overline-letter-spacing": isMobileSized.value ? "0" : "0",
+        ...bodyStyle.value
+    }));
+
+    const bodyStyle = computed(() => ({
+        "--fs-font-body-font-size"     : isMobileSized.value ? "12px" : "14px",
+        "--fs-font-body-line-height"   : isMobileSized.value ? "16px" : "20px",
+        "--fs-font-body-letter-spacing": isMobileSized.value ? "-0.36px" : "-0.42px",
+    }));
+
     return {
         isTouchScreenEnabled,
         isMobileSized,
         isExtraSmall,
         windowHeight,
-        windowWidth
+        windowWidth,
+        fontStyles,
+        bodyStyle
     };
 }

package/composables/useColors.ts

@@ -5,6 +5,8 @@ import Color from "color";
 import type { ColorBase, ColorVariations } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+const colorsCache: Map<string, ColorVariations> = new Map();
+
 export const useColors = () => {
     const theme = useTheme().current.value;
     const baseMinSaturation = 0;
@@ -40,17 +42,17 @@ export const useColors = () => {
     };
 
     const getContrast = (color: Color): Color => {
-        if(isGrayScale(color)){
+        if (isGrayScale(color)) {
             const coeff = 4
             return color
                 .value(color.value() < 70 ? 100 : Math.max(color.value() / coeff, 0));
         }
 
-        if(isPastel(color)){
+        if (isPastel(color)) {
             return color.darken(0.6);
         }
 
-        if(color.darken(0.15).isLight()){
+        if (color.darken(0.15).isLight()) {
             return color.darken(0.8);
         }
 
@@ -59,7 +61,7 @@ export const useColors = () => {
 
     const parseColor = (color: ColorBase): Color => {
         const themed = (Object as any).values(ColorEnum).includes(color);
-        
+
         try {
             return themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
         }
@@ -70,7 +72,7 @@ export const useColors = () => {
 
     const getColors = (color: ColorBase): ColorVariations => {
         const base = parseColor(color);
-        
+
         const light = getLight(base);
         const soft = getSoft(base);
         const dark = getDark(base);
@@ -88,7 +90,7 @@ export const useColors = () => {
     };
 
     const getGradients = (colors: ColorBase | ColorBase[], rotation: number = 90): ColorVariations => {
-        const variations = Array.isArray(colors) ? colors.map(getColors) : [getColors(colors)];
+        const variations = Array.isArray(colors) ? colors.map(getColorsCached) : [getColorsCached(colors)];
 
         if (variations.length === 1) {
             return variations[0];
@@ -121,9 +123,16 @@ export const useColors = () => {
         return colors;
     }
 
+    const getColorsCached = (color: ColorBase): ColorVariations => {
+        if (!colorsCache.has(color)) {
+            const variations = getColors(color);
+            colorsCache.set(color, variations);
+        }
+        return colorsCache.get(color) as ColorVariations;
+    };
 
     return {
-        getColors,
+        getColors : getColorsCached,
         getGradients,
         getBasePaletteColors
     };

package/composables/useMagicFieldProvider.ts

@@ -10,6 +10,7 @@ const FIELDS = {
   [MagicFieldType.IconField]      : defineAsyncComponent(() => import("../components/fields/FSIconField.vue")),
   [MagicFieldType.TimeField]      : defineAsyncComponent(() => import("../components/fields/FSTimeField.vue")),
   [MagicFieldType.TimeStepField]  : defineAsyncComponent(() => import("../components/fields/FSTimeStepField.vue")),
+  [MagicFieldType.PlotPerField]   : defineAsyncComponent(() => import("../components/selects/chartSelectors/FSPlotPerSelector.vue")),
 };
 
 export const useMagicFieldProvider = () => {

package/composables/useMapLayers.ts

@@ -0,0 +1,69 @@
+import { ref, onMounted } from "vue";
+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 = ref<any[]>([]);
+
+  onMounted(async () => {
+    try {
+      const leaflet = await import('leaflet');
+      const tileLayer = leaflet.tileLayer;
+
+      layers.value = [
+        {
+          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; OpenStreetMap contributors & ODbL, CC-BY-SA',
+              className: 'fs-map-tile-base-layer'
+            })
+          ]
+        }
+      ];
+    } catch (err) {
+      console.error("Leaflet is not installed or failed to load.", err);
+      layers.value = [];
+    }
+  });
+
+  return { layers };
+};

package/composables/useSlots.ts

@@ -20,11 +20,12 @@ export const useSlots = () => {
         // Directive wrapper (v-for, v-if)
         case "symbol":
           switch (element.type) {
+            // On a v-for, we want to get the children of the v-for
             case Symbol.for("v-fgt"):
               returnElements.push(...recursiveGetChildren(element.children));
               break;
+              // On a negative v-if, we want to get nothing
             case Symbol.for("v-cmt"):
-              returnElements.push(element);
               break;
             default:
               returnElements.push(element);

package/models/colors.ts

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

package/models/deviceAlerts.ts

@@ -7,4 +7,5 @@ export interface FSDeviceAlert {
     criticity: Criticity;
     sourceTimestamp?: number | null;
     enqueuedTimestamp?: number | null;
+    actualTimestamp?: number | null;
 }

package/models/magicFields.ts

@@ -7,4 +7,5 @@ export enum MagicFieldType {
   IconField     = 5,
   TimeField     = 6,
   TimeStepField = 7,
+  PlotPerField  = 8,
 }

package/models/map.ts

@@ -1,18 +1,20 @@
 import { type Layer } from "leaflet";
 
-import { type Address } from "@dative-gpi/foundation-shared-domain/models";
-
 export interface MapLayer {
-  name : string;
+  name : MapLayers;
   label: string;
   image: string;
-  layer: Layer;
+  layers: Layer[];
 }
 
-export interface FSLocation {
-  id: string;
-  label: string;
-  icon: string | null;
-  address: Address;
-  color: string | null;
+export enum MapLayers {
+  Map = "map",
+  Imagery = "imagery",
+  Snow= "snow"
+}
+
+export enum MapOverlayPositions {
+  Expand = "expand",
+  Half = "half",
+  Collapse = "collapse",
 }

package/models/rules.ts

@@ -2,8 +2,9 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 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/enums";
+import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getTimeBestString, validateOperation } from "../utils";
 
 const { epochToLongDateFormat } = useDateFormat()!;
 const { $tr } = useTranslationsProvider();
@@ -22,6 +23,8 @@ export const TextRules = {
     different: (original: string, message: string | undefined = undefined) => (value: string) => value != original || (message ?? $tr("ui.rules.text-different", "Must be different from original")),
     outside: (values: string[], message: string | undefined = undefined) => (value: string) => !values.includes(value) || (message ?? $tr("ui.rules.text-outside", "Must be different from others")),
     inside: (values: string[], message: string | undefined = undefined) => (value: string) => values.includes(value) || (message ?? $tr("ui.rules.text-inside", "Must be one of the options")),
+    operation: (operands: string[], variables: string[], message: string | undefined = undefined) => (value: string) => validateOperation(value, operands, variables) || (message ?? $tr("ui.rules.text-operation", "Invalid operation")),
+    singleWord: (message: string | undefined = undefined) => (value: string) => !value.includes(" ") || (message ?? $tr("ui.rules.text-single-word", "Must be a single word")),
 };
 
 export const TagRules = {

package/models/tables.ts

@@ -37,8 +37,9 @@ export interface FSDataTableOrder {
 export interface FSDataTable {
   headers: FSDataTableColumn[];
   sortBy: FSDataTableOrder | null;
-  mode: "table" | "iterator";
+  mode: "table" | "iterator" | null;
   rowsPerPage: -1 | 10 | 30;
+  showFilters: boolean;
   filters: { [key: string]: FSDataTableFilter[] };
   page: number;
 }

package/models/variableNode.ts

@@ -51,14 +51,17 @@ export class VariableNode extends DecoratorNode<Element> {
       content.classList.add("fs-rich-text-field-node-variable-value");
       if (_editor._rootElement) {
         content.textContent = this.getValue(_editor._rootElement);
-      }
-      else {
+  
+        const observer = new MutationObserver(() => {
+          content.textContent = this.getValue(_editor._rootElement!);
+        });
+        observer.observe(_editor._rootElement, { attributes: true, attributeFilter: ['data-variable-values'] });
+      } else {
         content.textContent = this.__defaultValue;
       }
-    }
-    else {
+    } else {
       content.classList.add("fs-rich-text-field-node-variable-code");
-      content.textContent = `{${this.__code}}`
+      content.textContent = `{${this.__code}}`;
     }
     container.appendChild(content);
     return container;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.65",
+  "version": "1.0.67-map-edit",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.65",
-    "@dative-gpi/foundation-shared-services": "1.0.65"
+    "@dative-gpi/foundation-shared-domain": "1.0.67-map-edit",
+    "@dative-gpi/foundation-shared-services": "1.0.67-map-edit"
   },
   "peerDependencies": {
-    "@dative-gpi/bones-ui": "^0.0.75",
+    "@dative-gpi/bones-ui": "^1.0.0",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "0.12.5",
     "@lexical/history": "0.12.5",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "942a36ea827fcf856d357a4ad826a6d4e3acf53c"
+  "gitHead": "725635256ebf2bb6450c38e5a3077fb907ea550c"
 }

package/styles/components/fs_agenda.scss

@@ -30,3 +30,7 @@
   width: 100%;
   height: 100%;
 }
+
+.fs-agenda-header-text {
+  text-transform: capitalize !important;
+}

package/styles/components/fs_agenda_event.scss

@@ -8,7 +8,7 @@
   }
 
   >.fs-card {
-    border-left: solid 3px var(--fs-clickable-border-color) !important;
+    border-left: solid var(--fs-agenda-event-border-width) var(--fs-clickable-border-color) !important;
   }
 }
 

package/styles/components/fs_agenda_hours_row.scss

@@ -1,11 +1,3 @@
-.fs-agenda-hours-row {
-  transform: translateX(calc(-2.4% + 2px));
-}
-
-.fs-agenda-hours-row-text {
-  padding: 0 2px;
-}
-
 .fs-agenda-hours-row-marker {
   height: 4px;
   border-right: solid 1px var(--fs-agenda-hours-row-marker-color);

package/styles/components/fs_autocomplete_field.scss

@@ -22,19 +22,6 @@
     }
 }
 
-.fs-autocomplete-field-label {
-    color: var(--fs-autocomplete-field-color);
-}
-
-.fs-autocomplete-field-messages {
-    align-self: stretch;
-    color: var(--fs-autocomplete-field-error-color);
-}
-
-.fs-autocomplete-field-description {
-    color: var(--fs-autocomplete-field-color);
-}
-
 .v-overlay-container > .v-overlay > .v-autocomplete__content {
     box-shadow: 0px 5px 8px 0px #00000029;
     max-width: none !important;

package/styles/components/fs_breadcrumbs.scss

@@ -1,54 +1,36 @@
-.fs-breadcrumbs-label {
-    cursor: pointer;
-    user-select: none;
-    color: var(--fs-breadcrumbs-color);
-
-    &-disabled {
-        color: var(--fs-breadcrumbs-disabled-color) !important;
-    }
-
-    &:hover {
-        text-decoration: underline;
-    }
-
-    &:active {
-        color: var(--fs-breadcrumbs-active-color) !important;
-    }
-}
+.fs-breadcrumbs {
+    height: var(--fs-breadcrumbs-height) !important;
+    padding: 0 !important;
+    gap: 0 !important;
 
-.fs-breadcrumbs-divider {
-    margin-bottom: 2px !important;
+    max-width: 100%;
 }
 
-.v-breadcrumbs {
+.v-breadcrumbs-item,
+.v-breadcrumbs-item--link {
     padding: 0 !important;
-    gap: 8px !important;
-
-    @include web {
-        height: 24px;
-    }
+    user-select: none;
+    cursor: pointer;
 
-    @include mobile {
-        height: 20px;
-    }
-}
+    align-self: stretch;
+    display: flex;
+    flex: 1 0 0;
 
-.v-breadcrumbs-item {
-    padding: 0 !important;
+    max-width: fit-content;
+    min-width: 20px;
 
     &--disabled {
         opacity: 1 !important;
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
+}
 
-    &:last-child > .fs-breadcrumbs-label-disabled {
-        @extend .text-button;
+.v-breadcrumbs-item:last-child > .fs-breadcrumbs-label {
+    @extend .text-button;
 
-        color: var(--fs-breadcrumbs-active-color) !important;
-    }
+    color: var(--fs-breadcrumbs-active-color) !important;
 }
 
 .v-breadcrumbs-divider {
-    padding: 0 !important;
     color: var(--fs-breadcrumbs-color) !important;
 }

package/styles/components/fs_button.scss

@@ -2,11 +2,6 @@
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
 
-    &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-        color: var(--fs-button-hover-color) !important;
-        cursor: pointer !important;
-    }
-
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
@@ -16,4 +11,11 @@
         color: inherit;
         text-decoration: none;
     }
+
+    @include clickscreen {
+        &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
+            color: var(--fs-button-hover-color) !important;
+            cursor: pointer !important;
+        }
+    }
 }

package/styles/components/fs_calendar.scss

@@ -32,6 +32,7 @@
     border: 1px solid var(--fs-calendar-border-color) !important;
     border-radius: 4px !important;
     padding: 8px !important;
+    min-height: 380px;
 }
 
 .fs-calendar-header {

package/styles/components/fs_card.scss

@@ -4,6 +4,8 @@
     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;
     
     border-color: var(--fs-card-border-color);
@@ -21,4 +23,11 @@
     &-gradient {
         background: var(--fs-card-background-color);
     }
+
+    .fs-card-top-right {
+        position: absolute;
+        line-height: normal;
+        right: var(--fs-card-top-right-padding);
+        top: var(--fs-card-top-right-padding);
+    }
 }