@dative-gpi/foundation-shared-components 1.0.128 → 1.0.130-maps2

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.128",
+  "version": "1.0.130-maps2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.128",
-    "@dative-gpi/foundation-shared-services": "1.0.128"
+    "@dative-gpi/foundation-shared-domain": "1.0.130-maps2",
+    "@dative-gpi/foundation-shared-services": "1.0.130-maps2"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "ca2de0b5abd0fb4f1fdfaafbc4267182ab609336"
+  "gitHead": "a0739b48282166f721cf6c2376a430e4690d92ef"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -1,48 +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;
-    }
+.fs-breadcrumbs {
+    height: var(--fs-breadcrumbs-height) !important;
+    padding: 0 !important;
+    gap: 0 !important;
 
-    &:active {
-        color: var(--fs-breadcrumbs-active-color) !important;
-    }
+    max-width: 100%;
 }
 
-// .fs-breadcrumbs-divider {
-//     margin-bottom: 2px !important;
-// }
-
-.fs-breadcrumbs.v-breadcrumbs {
-    line-height: normal!important;
+.v-breadcrumbs-item,
+.v-breadcrumbs-item--link {
     padding: 0 !important;
-    gap: 8px !important;
-    height: 20px;
-}
+    user-select: none;
+    cursor: pointer;
 
-.v-breadcrumbs-item {
-    padding: 0 !important;
+    align-self: stretch;
+    display: flex;
+    flex: 1 0 0;
+
+    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,18 +11,7 @@
     &.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-card-clickable {
-            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-            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;
@@ -33,6 +22,19 @@
             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) {

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;
+        }
     }
 }
 

package/styles/components/fs_dialog.scss

@@ -1,5 +1,5 @@
 .fs-dialog-mobile > .v-overlay__content {
-  max-height: 100vh !important;
+  max-height: 100dvh !important;
   max-width: 100vw !important;
   width: 100% !important;
   margin: 0 !important;

package/styles/components/fs_dialog_menu.scss

@@ -1,11 +1,13 @@
 .v-overlay__content:has(.fs-dialog-menu) {
     width: fit-content !important;
-    max-height: calc(100vh - 40px) !important;
+    max-height: calc(100dvh - 40px) !important;
+    max-width: calc(100vw - 40px) !important;
     justify-content: center;
     align-items: center;
+    margin: 20px;
 }
 
 .fs-dialog-menu {
-    max-height: calc(100vh - 40px) !important;
+    max-height: calc(100dvh - 40px) !important;
     max-width: calc(100vw - 40px) !important;
 }

package/styles/components/fs_image_card.scss

@@ -11,8 +11,10 @@
   }
 }
 
-.fs-image-card:hover {
-  > .fs-card {
-    background-size: 105%;
+@include clickscreen {
+  .fs-image-card:hover {
+    > .fs-card {
+      background-size: 105%;
+    }
   }
 }

package/styles/components/fs_map.scss

@@ -77,31 +77,26 @@
     }
   }
 
-  .fs-map-point-pin {
-    background-color: var(--fs-map-point-pin-color);
-    border-radius: 100%;
-  }
-
-  .fs-map-location > div {
+  .fs-map-marker > div {
     display: flex;
     height: 100%;
-    color: var(--fs-map-location-pin-color);
     border-radius: 50%;
-    background-color: white;
     filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
     align-items: center;
     justify-content: center;
 
-    &:hover {
-      filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
-
-      > * {
-        transform: scale(1.15);
+    @include clickscreen {
+      &:hover {
+        filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+  
+        > * {
+          transform: scale(1.15);
+        }
       }
     }
   }
 
-  .fs-map-location-full > div {
+  .fs-map-cluster-marker > div {
     background-color: var(--fs-map-location-pin-color);
     color: white;
   }
@@ -124,12 +119,49 @@
     }
   }
 
+  .fs-map-location > div {
+    color: var(--fs-map-location-pin-color);
+    background-color: white;
+  }
+
+  .fs-map-pin > div {
+    background-color: var(--fs-map-point-pin-color);
+    position: relative;
+
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .fs-map-pin > div::before {
+    content: "";
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    border-radius: 50%;
+    border: 2px solid var(--fs-map-point-pin-color);
+    opacity: 0.4;
+
+    @include clickscreen {
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .fs-map-pin-selected > div {
+    transform: scale(1.35);
+  }
+
+
   .fs-map-site {
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &:hover {
-      opacity: 1;
+    @include clickscreen {
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }

package/styles/components/fs_password_field.scss

@@ -4,7 +4,9 @@
     color: var(--fs-password-field-color) !important;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &:hover {
-        color: var(--fs-password-field-hover-color) !important;
+    @include clickscreen {
+        &:hover {
+            color: var(--fs-password-field-hover-color) !important;
+        }
     }
 }

package/styles/components/fs_progress_bar.scss

@@ -0,0 +1,14 @@
+.fs-progress-bar-gradient {
+    flex: 1;
+    background-color: var(--progress-bar-background-color);
+    height: 8px;
+    border-radius: 4px;
+
+    div {
+        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        height: 100%;
+        background: linear-gradient(to right, var(--progress-bar-gradient-start-color) 0%, var(--progress-bar-gradient-end-color) var(--progress-bar-total-relative-width));
+        width: var(--progress-bar-gradient-width);
+        border-radius: 4px;
+    }
+}

package/styles/components/fs_select_field.scss

@@ -32,4 +32,8 @@
         border-radius: 4px !important;
         margin-top: 2px !important;
     }
+}
+
+.fs-select-field-multiple-slide-group {
+    opacity: var(--fs-select-field-multiple-opacity);
 }

package/styles/components/fs_span.scss

@@ -1,9 +1,17 @@
 .fs-span {
+    display: flex;
+
+    max-width: 100%;
+    min-width: 0;
+}
+
+.fs-span > span {
+    text-align: var(--fs-span-text-align);
+    align-content: center;
     max-width: 100%;
-    text-align: left;
 }
 
-.fs-span-line-clamp {
+.fs-span-line-clamp > span {
     overflow: hidden;
     display: -webkit-box;
     line-clamp: var(--fs-span-line-clamp);
@@ -11,12 +19,12 @@
     -webkit-line-clamp: var(--fs-span-line-clamp);
 }
 
-.fs-span-ellipsis {
+.fs-span-ellipsis > span {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.fs-span-pre-wrap {
+.fs-span-pre-wrap > span {
     white-space: pre-wrap;
 }

package/styles/components/fs_status_rich_card.scss

@@ -0,0 +1,13 @@
+.fs-status-rich-card {
+  position: relative;
+  flex-grow: 1;
+  background-color: var(--fs-status-rich-card-background-color);
+  border-color: var(--fs-status-rich-card-border-color);
+}
+
+.fs-status-rich-card-corner {
+  position: absolute;
+  display: flex;
+  right: 2px;
+  top: 2px;
+}

package/styles/components/fs_tabs.scss

@@ -23,9 +23,11 @@
         @extend .text-button;
     }
 
-    &:hover {
-        border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
-        color: var(--fs-group-hover-color) !important;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
+            color: var(--fs-group-hover-color) !important;
+        }
     }
 }
 
@@ -34,8 +36,10 @@
     color: var(--fs-group-hover-color) !important;
     border-bottom: 0 !important;
 
-    &:hover {
-        border-bottom: 0 !important;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 0 !important;
+        }
     }
 }
 

package/styles/components/fs_tag.scss

@@ -13,17 +13,19 @@
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
 
-    &:hover {
-        background-color: var(--fs-tag-hover-background-color) !important;
-        color: var(--fs-tag-hover-color) !important;
-    }
+    min-width: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 
     &:active {
         background-color: var(--fs-tag-active-background-color) !important;
         color: var(--fs-tag-active-color) !important;
     }
 
-    min-width: 20px !important;
-    width: 20px !important;
-    height: 20px !important;
+    @include clickscreen {
+        &:hover {
+            background-color: var(--fs-tag-hover-background-color) !important;
+            color: var(--fs-tag-hover-color) !important;
+        }
+    }
 }

package/styles/components/index.scss

@@ -47,6 +47,7 @@
 @import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
+@import "fs_progress_bar.scss";
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
@@ -54,6 +55,7 @@
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
 @import "fs_span.scss";
+@import "fs_status_rich_card.scss";
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";

package/styles/globals/overrides.scss

@@ -137,11 +137,16 @@
     }
 }
 
-// Ellipsis on input of all fields
 input {
+    // Ellipsis on all fields
     text-overflow: ellipsis;
 }
 
+input, select, textarea {
+    // No zoom on focus for user of a certain version of Chrome, and who ask their mobile to zoom if font-size < 16px
+    touch-action: none;
+}
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -187,9 +192,11 @@ $nthOverlay: 25;
 }
 
 // Change color on arrows when hovered
-.v-slide-group__prev:hover,
-.v-slide-group__next:hover {
-    color: var(--fs-group-hover-color);
+@include clickscreen {
+    .v-slide-group__prev:hover,
+    .v-slide-group__next:hover {
+        color: var(--fs-group-hover-color);
+    }
 }
 
 /***************************************************************************/

package/styles/globals/scrollbars.scss

@@ -47,9 +47,19 @@
 @include touchscreen {
   .fs-hide-x-scrollbar {
     overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
   }
 }

package/utils/index.ts

@@ -8,6 +8,7 @@ export * from "./icons";
 export * from "./leafletMarkers"
 export * from "./levenshtein";
 export * from "./lexical";
+export * from "./operations";
 export * from "./sort";
 export * from "./statuses";
 export * from "./time";

package/utils/operations.ts

@@ -0,0 +1,69 @@
+const MinusOperator = "-";
+
+// Matches one of the three operators (+, *, /) or the - operator if it is preceded by something that is not another operator
+const operatorsRegex = new RegExp(/[\+\*\/]|(?<=.)(?<![-\+\*\/])[-]/gm);
+
+// Matches a nested block of parenthesis
+const parenthesisRegex = new RegExp(/\([^)(]+\)/gm);
+
+// Match a positive decimal number
+const decimalRegex = new RegExp(/^\d+(.\d+)?$/gm);
+
+const validateBlock = (block: string, operands: string[] = [], variables: string[] = []) => {
+  // Remove parenthesis from the block
+  block = block.replaceAll("(", "").replaceAll(")", "");
+
+  // Split block on operators (Leave negative signs)
+  const components = block.split(operatorsRegex);
+
+  // Check if each bit is a valid operand
+  for (let i = 0; i < components.length; i++) {
+    // Remove negative sign
+    if (components[i].startsWith(MinusOperator)) {
+        components[i] = components[i].substring(1);
+    }
+    if (!operands.includes(components[i]) && !variables.includes(components[i]) && !components[i].match(decimalRegex)) {
+        return false;
+    }
+  }
+  return true;
+}
+
+export const validateOperation = (rawOperation: string, operands: string[] = [], variables: string[] = []) => {
+  // Remove spaces
+  let operation = rawOperation.replaceAll(" ", "");
+
+  // Check parenthesis
+  const parenthesis: number[] = [];
+
+  for (let i = 0; i < operation.length; i++) {
+    if (operation[i] == '(') {
+      parenthesis.push(i);
+    }
+    else if (operation[i] == ')') {
+      if (parenthesis.length > 0) {
+        if (i == parenthesis.pop()! + 1) {
+          return false;
+        }
+      }
+      else {
+        return false;
+      }
+    }
+  }
+  if (parenthesis.length > 0) {
+    return false;
+  }
+
+  // Check each block between parenthesis
+  let match = operation.match(parenthesisRegex);
+
+  while (match?.[0]) {
+    if (!validateBlock(match[0], operands, variables)) {
+      return false;
+    }
+    operation = operation.replace(match[0], "1");
+    match = operation.match(parenthesisRegex);
+  }
+  return validateBlock(operation, operands, variables);
+}