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

package/composables/useBreakpoints.ts

@@ -5,10 +5,19 @@ 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 => {
@@ -16,11 +25,11 @@ export const useBreakpoints = () => {
     });
 
     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

@@ -53,7 +53,8 @@ export const useColors = () => {
         if(color.darken(0.15).isLight()){
             return color.darken(0.8);
         }
-        return color.lighten(color.value() / 50);
+
+        return color.lightness(color.lightness() < 30 ? 100 : Math.min(color.lightness() + 60, 100));
     }
 
     const parseColor = (color: ColorBase): Color => {
@@ -105,7 +106,7 @@ export const useColors = () => {
         const colors: string[][] = [];
         for (let saturation = baseMinSaturation; saturation <= 100; saturation += (100 - baseMinSaturation) / (columnCount - 1)) {
             const colorsRow = [];
-            for (let hue = 0; hue < 360; hue += 15) {
+            for (let hue = 0; hue < 360; hue += 5) {
                 const color = new Color({ h: hue, s: saturation, v: baseFixedBrightness });
                 colorsRow.push(color.hex());
             }

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/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/agenda.ts

@@ -0,0 +1,9 @@
+export interface FSAgendaEvent {
+  id: string;
+  label: string;
+  icon?: string;
+  iconBis?: string;
+  color: string;
+  start: number;
+  end: number;
+}

package/models/deviceAlerts.ts

@@ -1,4 +1,4 @@
-import type { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import type { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 
 export interface FSDeviceAlert {
     id: string;

package/models/deviceConnectivities.ts

@@ -1,4 +1,4 @@
-import type { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import type { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 export interface FSDeviceConnectivity {
     id: string;

package/models/index.ts

@@ -1,3 +1,4 @@
+export * from "./agenda";
 export * from "./breadcrumbs";
 export * from "./colors";
 export * from "./deviceAlerts";

package/models/magicFields.ts

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

package/models/map.ts

@@ -12,7 +12,7 @@ export interface MapLayer {
 export interface FSLocation {
   id: string;
   label: string;
-  icon: string;
+  icon: string | null;
   address: Address;
-  color: string;
+  color: string | null;
 }

package/models/rules.ts

@@ -1,11 +1,12 @@
 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";
+import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums";
 
-const { epochToLongDateFormat } = useAppTimeZone()!;
+import { getTimeBestString, validateOperation } from "../utils";
+
+const { epochToLongDateFormat } = useDateFormat()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {
@@ -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 = {
@@ -76,6 +79,6 @@ export const ToggleRules = {
 
 export const TreeViewRules = {
     required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | undefined = undefined) => (value: string[]) => { console.log(value); return (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.tree-view-min", "Must select at least {0} elements", min.toString())); },
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.tree-view-min", "Must select at least {0} elements", min.toString())),
     max: (max: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.tree-view-max", "Must select at most {0} elements", max.toString()))
 };

package/models/tables.ts

@@ -8,10 +8,12 @@ export interface FSDataTableColumn {
 
   sortable?: boolean | null;
   sort?: ((a: any, b: any) => number) | null;
+  sortRaw?: ((a: any, b: any) => number) | null;
 
   filterable?: boolean | null;
   fixedFilters?: { value: any, text: string }[] | null;
-  methodFilter?: ((value: any, item: any) => boolean) | null;
+  methodFilter?: ((value: any, property: any) => boolean) | null;
+  methodFilterRaw?: ((value: any, item: any) => boolean) | null;
   filter?: ((value: any, search: string, item: any) => boolean) | null;
 
   innerValue?: ((value: any) => any) | null;
@@ -35,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.36",
+  "version": "1.0.37-report-v1",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.36",
-    "@dative-gpi/foundation-shared-services": "1.0.36"
+    "@dative-gpi/foundation-shared-domain": "1.0.37-report-v1",
+    "@dative-gpi/foundation-shared-services": "1.0.37-report-v1"
   },
   "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": "687d6ae60b16a75dc332400cd6eee19cb306767b"
+  "gitHead": "f3aa27c947cc218b530726383113af17bf59a133"
 }

package/styles/components/fs_agenda.scss

@@ -0,0 +1,36 @@
+.fs-agenda-view {
+  min-height: 0;
+}
+
+.fs-agenda-label-day-container {
+  flex-shrink: 0;
+}
+
+.fs-agenda-label-day {
+  border-bottom: 1px solid var(--fs-agenda-label-day-border-bottom-color);
+  border-right: 1px solid var(--fs-agenda-label-day-border-right-color);
+  min-height: 0px;
+}
+
+.fs-agenda-label-day-now {
+  border-bottom: 4px solid var(--fs-clickable-border-color);
+}
+
+.fs-agenda-body {
+  position: relative;
+}
+
+.fs-agenda-row-day {
+  position: relative;
+  border-bottom: 1px solid var(--fs-agenda-row-day-border-bottom-color);
+}
+
+.fs-day-agenda-hour-line {
+  border-top: solid 1px var(--fs-day-agenda-hour-line-color);
+  width: 100%;
+  height: 100%;
+}
+
+.fs-agenda-header-text {
+  text-transform: capitalize !important;
+}

package/styles/components/fs_agenda_event.scss

@@ -0,0 +1,41 @@
+.fs-agenda-event {
+  position: absolute !important;
+  left: var(--fs-agenda-event-left);
+  top: var(--fs-agenda-event-top);
+
+  &.fs-agenda-event-past {
+    opacity: 0.5;
+  }
+
+  >.fs-card {
+    border-left: solid var(--fs-agenda-event-border-width) var(--fs-clickable-border-color) !important;
+  }
+}
+
+.fs-agenda-event .fs-col,
+.fs-agenda-event .fs-row {
+  overflow: hidden;
+}
+
+.fs-day-agenda .fs-agenda-event {
+  .fs-agenda-event-day-label-container {
+    overflow: visible !important;
+  }
+}
+
+.fs-week-agenda .fs-agenda-event{
+  margin-top: 3px;
+  margin-bottom: 3px;
+  height: calc(100% - 6px) !important;
+}
+
+.fs-month-agenda .fs-agenda-event {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: calc(100% - 4px) !important;
+}
+
+.fs-agenda-event-current span {
+  text-overflow: unset;
+  flex-shrink: 0;
+}

package/styles/components/fs_agenda_hours_col.scss

@@ -0,0 +1,4 @@
+.fs-agenda-hours-col {
+  transform: translateY(calc(-2.4% + 4px));
+  overflow: visible;
+}

package/styles/components/fs_agenda_hours_row.scss

@@ -0,0 +1,5 @@
+.fs-agenda-hours-row-marker {
+  height: 4px;
+  border-right: solid 1px var(--fs-agenda-hours-row-marker-color);
+  transform: translateY(-4px);
+}

package/styles/components/fs_agenda_time_line_marker.scss

@@ -0,0 +1,19 @@
+.fs-agenda-horizontal-time-line-marker {
+  position: absolute;
+  top: 0;
+  left: var(--fs-agenda-horizontal-time-line-marker-left);
+  width: 2px;
+  height: 100%;
+  z-index: 1;
+  background-color: var(--fs-agenda-horizontal-time-line-marker-color);
+}
+
+.fs-agenda-vertical-time-line-marker {
+  position: absolute;
+  top: var(--fs-agenda-vertical-time-line-marker-top);
+  left: 0;
+  width: 100%;
+  height: 2px;
+  z-index: 1;
+  background-color: var(--fs-agenda-vertical-time-line-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_chip.scss

@@ -12,15 +12,17 @@
 .fs-chip-editable {
     cursor: pointer !important;
 
-    &:hover {
-        background-color: var(--fs-chip-hover-background-color) !important;
-        border-color: var(--fs-chip-hover-border-color) !important;
-        color: var(--fs-chip-hover-color) !important;
-    }
-
     &:active {
         background-color: var(--fs-chip-active-background-color) !important;
         border-color: var(--fs-chip-active-border-color) !important;
         color: var(--fs-chip-active-color) !important;
     }
+
+    @include clickscreen {
+        &:hover {
+            background-color: var(--fs-chip-hover-background-color) !important;
+            border-color: var(--fs-chip-hover-border-color) !important;
+            color: var(--fs-chip-hover-color) !important;
+        }
+    }
 }

package/styles/components/fs_clickable.scss

@@ -11,26 +11,30 @@
     &.fs-clickable-disabled {
         cursor: default;
     }
-
-    &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
-        background-color: var(--fs-clickable-hover-background-color) !important;
-        border-color: var(--fs-clickable-hover-border-color) !important;
-        color: var(--fs-clickable-hover-color) !important;
-
-        & .fs-background {
-            background-color: var(--fs-clickable-hover-background-color);
-        }
-    }
-
+    
     &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
         background-color: var(--fs-clickable-active-background-color) !important;
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-active-background-color);
         }
     }
+
+    @include clickscreen {
+        &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
+            background-color: var(--fs-clickable-hover-background-color) !important;
+            border-color: var(--fs-clickable-hover-border-color) !important;
+            color: var(--fs-clickable-hover-color) !important;
+    
+            & .fs-card-clickable {
+                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+                background-color: var(--fs-clickable-hover-background-color);
+            }
+        }
+    }
 }
 
 a:has(.fs-clickable) {
@@ -50,20 +54,11 @@ button:has(.fs-clickable) {
 .fs-clickable-load {
     cursor: default;
     position: absolute !important;
+    height: 100% !important;
     width: 100% !important;
     left: 0;
     top: 0;
-
-    @include web {
-        height: 40px !important;
-        padding: 8px 0;
-    }
-
-    @include mobile {
-        height: 36px !important;
-        padding: 6px 0;
-    }
-
+    
     & > svg {
         height: 24px !important;
     }

package/styles/components/fs_clock.scss

@@ -33,16 +33,6 @@
             text-align: center;
             cursor: var(--fs-clock-field-cursor) !important;
             color: var(--fs-clock-field-color);
-        
-            @include web {
-                min-height: 38px !important;
-                height: 38px !important;
-            }
-        
-            @include mobile {
-                min-height: 34px !important;
-                height: 34px !important;
-            }
         }
     }
 }

package/styles/components/fs_color_field.scss

@@ -1,5 +1,6 @@
 .fs-color-field .fs-card {
   cursor: var(--fs-color-field-cursor) !important;
+  min-width: var(--fs-base-field-min-width);
   border-color: var(--fs-color-field-border-color) !important;
   .fs-text {
     color: var(--fs-color-field-color) !important;
@@ -16,8 +17,4 @@
   background: none !important;
   min-width: auto !important;
   width: 100% !important;
-}
-
-.fs-color-field-description {
-  color: var(--fs-color-field-color);
 }

package/styles/components/fs_data_iterator_item.scss

@@ -8,16 +8,18 @@
         padding-right: 32px;
     }
 
-    &:hover::after {
-        content: "";
-        background-color: black;
-        pointer-events: none;
-        position: absolute;
-        opacity: 0.04;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
+    @include clickscreen {
+        &:hover::after {
+            content: "";
+            background-color: black;
+            pointer-events: none;
+            position: absolute;
+            opacity: 0.04;
+            height: 100%;
+            width: 100%;
+            left: 0;
+            top: 0;
+        }
     }
 }