@dative-gpi/foundation-shared-components 1.0.127 → 1.0.128-fix-mobile

package/components/FSFadeOut.vue

@@ -69,7 +69,7 @@ export default defineComponent({
   },
   emits: ["scroll"],
   setup(props) {
-    const { windowHeight, windowWidth } = useBreakpoints();
+    const { windowHeight, windowWidth, isTouchScreenEnabled } = useBreakpoints();
     const { debounce } = useDebounce();
     const { getColors } = useColors();
 
@@ -84,14 +84,16 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled);
+
     const style = computed((): StyleValue => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
-      "--fs-fade-out-width-offset"      : props.scrollOutside ? '12px' : '0px',
-      "--fs-fade-out-padding-offset"    : props.scrollOutside ? '4px' : '0px',
-      "--fs-fade-out-margin-right"      : props.scrollOutside ? '-12px' : '0px',
+      "--fs-fade-out-width-offset"      : showOutsideScrollbar.value ? '12px' : '0px',
+      "--fs-fade-out-padding-offset"    : showOutsideScrollbar.value ? '4px' : '0px',
+      "--fs-fade-out-margin-right"      : showOutsideScrollbar.value ? '-12px' : '0px',
       "--fs-fade-out-mask-color"        : backgrounds.base,
       "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
       "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,

package/components/FSWindow.vue

@@ -1,9 +1,10 @@
 <template>
   <template 
-    v-if="noMatch"
+    v-if="showError"
   >
     <slot 
-      name="error" 
+      name="error"
+      v-bind="{ goBack, width: $props.width, height: $props.height }"
     >
       <FSRow
         padding="16px"
@@ -144,14 +145,18 @@ export default defineComponent({
       }, 560);
     });
 
-    const noMatch = computed(() => {
+    const showError = computed((): boolean => {
       if (!windowRef.value) {
-        return;
+        return false;
       }
 
       // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VWindow/VWindow.tsx
       // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/group.ts#L161
       const group = windowRef.value.group;
+
+      if (!group.items.value.length) {
+        return false;
+      }
       return !group.items.value.find((item: any) => item.value === props.modelValue);
     });
 
@@ -172,7 +177,7 @@ export default defineComponent({
     return {
       ColorEnum,
       windowRef,
-      noMatch,
+      showError,
       slots,
       style,
       getChildren,

package/package.json

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

package/styles/components/fs_breadcrumbs.scss

@@ -7,8 +7,10 @@
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
 
-    &:hover {
-        text-decoration: underline;
+    @include clickscreen {
+        &:hover {
+            text-decoration: underline;
+        }
     }
 
     &:active {

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_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_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/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>