@dative-gpi/foundation-shared-components 1.0.126 → 1.0.128-dvh

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,11 @@
 .v-overlay__content:has(.fs-dialog-menu) {
     width: fit-content !important;
-    max-height: calc(100vh - 40px) !important;
+    max-height: calc(100dvh - 40px) !important;
     justify-content: center;
     align-items: center;
 }
 
 .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

@@ -92,11 +92,13 @@
     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);
+        }
       }
     }
   }
@@ -128,8 +130,10 @@
     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_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_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/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/tools/chartsTools.ts

@@ -39,10 +39,10 @@ export const colorSetLabel = (value: ColorSets | number): string => {
   switch (value) {
     case ColorSets.Default: return $tr("ui.color-sets.am-charts", "Am Charts");
     case ColorSets.Grafana: return $tr("ui.color-sets.grafana", "Grafana");
-    case ColorSets.Armytage: return $tr("ui.color-sets.armytage", "Armytage");
+    case ColorSets.Armytage: return $tr("ui.color-sets.armytage", "High contrast (26 colors)");
     case ColorSets.Hash: return $tr("ui.color-sets.hash", "Hash");
-    case ColorSets.Kelly: return $tr("ui.color-sets.material", "Kelly");
-    case ColorSets.ZeileisHornikMurrell: return $tr("ui.color-sets.material", "ZeileisHornikMurrell");
+    case ColorSets.Kelly: return $tr("ui.color-sets.kelly", "High contrast (22 colors)");
+    case ColorSets.ZeileisHornikMurrell: return $tr("ui.color-sets.zeileis", "Colorblind accessible");
     default: return $tr("ui.common.none", "None");
   }
 }

package/utils/time.ts

@@ -5,13 +5,13 @@ import { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums"
 const { $tr } = useTranslationsProvider();
 
 export const timeSteps = [
-  { id: TimeUnit.Second,      label: $tr("ui.common.second", "Second"), plural: $tr("ui.common.seconds", "Seconds") },
-  { id: TimeUnit.Minute,      label: $tr("ui.common.minute", "Minute"), plural: $tr("ui.common.minutes", "Minutes") },
-  { id: TimeUnit.Hour,        label: $tr("ui.common.hour", "Hour"),     plural: $tr("ui.common.hours", "Hours") },
-  { id: TimeUnit.Day,         label: $tr("ui.common.day", "Day"),       plural: $tr("ui.common.days", "Days") },
-  { id: TimeUnit.Week,        label: $tr("ui.common.week", "Week"),     plural: $tr("ui.common.weeks", "Weeks") },
-  { id: TimeUnit.Month,       label: $tr("ui.common.month", "Month"),   plural: $tr("ui.common.months", "Months") },
-  { id: TimeUnit.Year,        label: $tr("ui.common.year", "Year"),     plural: $tr("ui.common.years", "Years") },
+  { id: TimeUnit.Second, get label() { return $tr("ui.common.second", "Second") }, get plural() { return $tr("ui.common.seconds", "Seconds") } },
+  { id: TimeUnit.Minute, get label() { return $tr("ui.common.minute", "Minute") }, get plural() { return $tr("ui.common.minutes", "Minutes") } },
+  { id: TimeUnit.Hour,   get label() { return $tr("ui.common.hour", "Hour") },     get plural() { return $tr("ui.common.hours", "Hours") } },
+  { id: TimeUnit.Day,    get label() { return $tr("ui.common.day", "Day") },       get plural() { return $tr("ui.common.days", "Days") } },
+  { id: TimeUnit.Week,   get label() { return $tr("ui.common.week", "Week") },     get plural() { return $tr("ui.common.weeks", "Weeks") } },
+  { id: TimeUnit.Month,  get label() { return $tr("ui.common.month", "Month") },   get plural() { return $tr("ui.common.months", "Months") } },
+  { id: TimeUnit.Year,   get label() { return $tr("ui.common.year", "Year") },     get plural() { return $tr("ui.common.years", "Years") } },
 ];
 
 export const timeStepToString = (value: { value: number, unit: TimeUnit } | null): string => {
@@ -28,12 +28,12 @@ export const timeStepToString = (value: { value: number, unit: TimeUnit } | null
 };
 
 // TODO : remove everything below this line
-export const timeScale: any[] = [
-  { id: 1,      label: $tr("ui.common.second", "Second"), plural: $tr("ui.common.seconds", "Seconds") },
-  { id: 60,     label: $tr("ui.common.minute", "Minute"), plural: $tr("ui.common.minutes", "Minutes") },
-  { id: 3600,   label: $tr("ui.common.hour", "Hour"),     plural: $tr("ui.common.hours", "Hours") },
-  { id: 86400,  label: $tr("ui.common.day", "Day"),       plural: $tr("ui.common.days", "Days") },
-  { id: 604800, label: $tr("ui.common.week", "Week"),     plural: $tr("ui.common.weeks", "Weeks") },
+export const timeScale = [
+  { id: 1,      get label() { return $tr("ui.common.second", "Second") }, get plural() { return $tr("ui.common.seconds", "Seconds") } },
+  { id: 60,     get label() { return $tr("ui.common.minute", "Minute") }, get plural() { return $tr("ui.common.minutes", "Minutes") } },
+  { id: 3600,   get label() { return $tr("ui.common.hour", "Hour") },     get plural() { return $tr("ui.common.hours", "Hours") } },
+  { id: 86400,  get label() { return $tr("ui.common.day", "Day") },       get plural() { return $tr("ui.common.days", "Days") } },
+  { id: 604800, get label() { return $tr("ui.common.week", "Week") },     get plural() { return $tr("ui.common.weeks", "Weeks") } },
 ];
 
 export const getTimeScaleIndex = (value: number): number => {

package/components/tiles/FSChartTile.vue

@@ -1,73 +0,0 @@
-<template>
-  <FSChartTileUI
-    v-if="chart"
-    :label="chart.label"
-    :icon="chart.icon"
-    :type="chart.chartType"
-    :imageId="chart.imageId"
-    v-bind="$attrs"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent, watch, computed } from "vue";
-import type { PropType } from "vue";
-
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
-
-import { useChartOrganisation, useChartOrganisationType } from "@dative-gpi/foundation-core-services/composables";
-
-import { ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
-import FSChartTileUI from "./FSChartTileUI.vue";
-
-export default defineComponent({
-  name: "FSChartTile",
-  components: {
-    FSChartTileUI
-  },
-  props: {
-    chartId: {
-      type: String,
-      required: true
-    },
-    scope: {
-      type: Object as PropType<ApplicationScope | number>,
-      required : true
-    }
-  },
-  setup(props) {
-
-    const {get : fetchChartOrganisation, entity : chartOrganisation } = useChartOrganisation();
-    const {get : fetchChartOrganisationType, entity : chartOrganisationType } = useChartOrganisationType();
-
-    const chart = computed(() =>{
-      if(props.scope == ApplicationScope.Organisation){
-        return chartOrganisation.value;
-      }
-      else if(props.scope == ApplicationScope.OrganisationType){
-        return chartOrganisationType.value;
-      }
-      else{
-        return null
-      }
-    })
-
-    watch(() => [props.chartId, props.scope], () =>{
-      if(props.scope == ApplicationScope.Organisation){
-        fetchChartOrganisation(props.chartId);
-      }
-      else if(props.scope == ApplicationScope.OrganisationType)
-      {
-        fetchChartOrganisationType(props.chartId)
-      }
-    }, {immediate : true})
-
-    return {
-      ColorEnum,
-      chart,
-      chartIcon
-    };
-  }
-});
-</script>