@dative-gpi/foundation-shared-components 1.0.82 → 1.0.83

package/composables/useBreakpoints.ts

@@ -2,13 +2,13 @@ import { computed, ref } from "vue";
 
 let initialized = false;
 
-const windowHeight = ref(window.innerHeight);
-const windowWidth = ref(window.innerWidth);
+const windowHeight = ref(window.outerHeight);
+const windowWidth = ref(window.outerWidth);
 
 export const useBreakpoints = () => {
     const onSizeChange = (): void => {
-        windowHeight.value = window.innerHeight;
-        windowWidth.value = window.innerWidth;
+        windowHeight.value = window.outerHeight;
+        windowWidth.value = window.outerWidth;
     };
 
     const isTouchScreenEnabled = computed((): boolean => {
@@ -28,11 +28,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/models/tables.ts

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

package/package.json

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

package/styles/components/fs_clickable.scss

@@ -52,20 +52,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_data_table.scss

@@ -41,6 +41,7 @@
   
   th {
     box-shadow: none !important;
+    min-width: 40px;
 
     &:hover .fs-header-button {
       opacity: 1;
@@ -120,13 +121,7 @@
 }
 
 .fs-data-table-pagination {
-  @include web {
-    max-width: 280px;
-  }
-
-  @include mobile {
-    max-width: 274px;
-  }
+  max-width: 280px;
 }
 
 .fs-data-table-intersection {

package/styles/components/fs_filter_button.scss

@@ -1,5 +1,5 @@
 .fs-filter-button-menu {
-    min-width: 300px !important;
+    width: 300px;
 }
 
 .fs-filter-button-chip {

package/styles/components/fs_hidden_button.scss

@@ -1,12 +1,7 @@
 .fs-hidden-button-menu {
-    @include web {
-        min-width: 200px !important;
-    }
-    @include mobile {
-        min-width: 180px !important;
-    }
+    width: 300px;
 }
 
 .fs-hidden-button-chip {
-    width: calc(100% - 16px) !important;
+    width: 100%;
 }

package/styles/components/fs_meta_field.scss

@@ -1,6 +1,4 @@
-// If the custom property value is a boolean or an icon, hide the FSTextField input value in a FSMetaField while on mobile
-.fs-meta-field .v-field:has(.v-field__prepend-inner:not(:empty)) input {
-    @include mobile {
-        content-visibility: hidden;
-    }
+// If the custom property value is an icon, hide the input value to show only the icon
+.fs-meta-icon-field .v-field .v-field__input {
+    content-visibility: hidden;
 }

package/styles/components/fs_radio.scss

@@ -11,15 +11,4 @@
 
 .fs-radio-description {
     color: var(--fs-radio-color) !important;
-}
-
-.fs-radio-label .v-input__control {
-    @include web {
-        height: 40px !important;
-    }
-
-    @include mobile {            
-        height: 36px !important;
-    }
-    grid-area: 1 / 2 / 3 / 3 !important;
 }

package/styles/components/fs_rich_text_field.scss

@@ -1,6 +1,7 @@
 .fs-rich-text-field {
     width: 100%;
     min-width: 120px;
+    padding: var(--fs-rich-text-field-padding) !important;
     border: 1px solid var(--fs-rich-text-field-border-color) !important;
     border-radius: 4px !important;
 
@@ -27,16 +28,6 @@
     }
 }
 
-.fs-rich-text-field-readonly {
-    @include web {
-        padding: 10px 12px !important;
-    }
-
-    @include mobile {
-        padding: 6px 16px !important;
-    }
-}
-
 .fs-rich-text-field-undo {
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     cursor: var(--fs-rich-text-field-undo-cursor);

package/styles/components/fs_span.scss

@@ -1,5 +1,4 @@
 .fs-span {
-    // padding-inline-end: 2px;
     max-width: 100%;
     text-align: left;
 }
@@ -7,6 +6,7 @@
 .fs-span-line-clamp {
     overflow: hidden;
     display: -webkit-box;
+    line-clamp: var(--fs-span-line-clamp);
     -webkit-box-orient: vertical;
     -webkit-line-clamp: var(--fs-span-line-clamp);
 }

package/styles/components/fs_tabs.scss

@@ -2,17 +2,9 @@
     display: flex !important;
     width: 100% !important;
 
-    @include web {
-        height: 48px !important;
-        max-height: 48px;
-        min-height: 48px;
-    }
-
-    @include mobile {
-        height: 40px !important;
-        max-height: 40px;
-        min-height: 40px;
-    }
+    height: var(--fs-tab-height) !important;
+    max-height: var(--fs-tab-height);
+    min-height: var(--fs-tab-height);
 }
 
 .fs-tab {
@@ -23,6 +15,10 @@
     align-items: center !important;
     display: flex;
 
+    height: var(--fs-tab-height) !important;
+    max-height: var(--fs-tab-height);
+    min-height: var(--fs-tab-height);
+
     & .fs-tab-label {
         @extend .text-button;
     }
@@ -31,18 +27,6 @@
         border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
         color: var(--fs-group-hover-color) !important;
     }
-
-    @include web {
-        height: 48px !important;
-        max-height: 48px;
-        min-height: 48px;
-    }
-
-    @include mobile {
-        height: 40px !important;
-        max-height: 40px;
-        min-height: 40px;
-    }
 }
 
 .fs-tab-active {
@@ -64,13 +48,6 @@
     align-items: center;
     justify-content: center;
 
-    @include web {
-        min-width: 28px;
-        height: 28px;
-    }
-
-    @include mobile {
-        min-width: 24px;
-        height: 24px;
-    }
+    min-width: var(--fs-tab-tag-size);
+    height: var(--fs-tab-tag-size);
 }

package/styles/components/fs_tag.scss

@@ -3,14 +3,6 @@
     border-radius: 2px !important;
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
-
-    @include web {
-        height: 28px !important;
-    }
-
-    @include mobile {
-        height: 24px !important;
-    }
 }
 
 .fs-tag-button {
@@ -31,15 +23,7 @@
         color: var(--fs-tag-active-color) !important;
     }
 
-    @include web {
-        min-width: 20px !important;
-        width: 20px !important;
-        height: 20px !important;
-    }
-
-    @include mobile {
-        min-width: 20px !important;
-        width: 20px !important;
-        height: 16px !important;
-    }
+    min-width: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 }

package/styles/components/fs_text_area.scss

@@ -1,6 +1,7 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
+        padding: var(--fs-text-area-padding) !important;
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -24,18 +25,6 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
-
-        & > .v-field__clearable {
-            align-items: flex-start;
-        }
-        
-        @include web {
-            padding: 11px 16px !important;
-        }
-    
-        @include mobile {
-            padding: 10px 16px !important;
-        }
     } 
 
     & > .v-input__append  {
@@ -46,7 +35,7 @@
 .fs-text-area-auto-grow {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
-        padding: 0 !important;
+        padding: var(--fs-text-area-padding) !important;
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -72,14 +61,6 @@
         & > .v-field__clearable {
             align-items: flex-start;
         }
-        
-        @include web {
-            padding: 11px 16px !important;
-        }
-    
-        @include mobile {
-            padding: 10px 16px !important;
-        }
     }
 
     & > .v-input__append  {

package/styles/components/fs_tile.scss

@@ -32,16 +32,6 @@
     justify-content: center;
     top: 1px;
     right: 1px;
-
-    @include web {
-        width: 40px;
-        height: 40px;
-    }
-
-    @include mobile {
-        width: 32px;
-        height: 32px;
-    }
 }
 
 .fs-location-tile-text-container {

package/styles/globals/index.scss

@@ -1,9 +1,5 @@
 // Warning: Imports are loaded in order. If you need to use a variable / property / mixin, import it after the file that defines it
-@import 'breakpoints.scss';
 @import 'text_fonts.scss';
 @import 'touchscreen.scss';
 @import 'scrollbars.scss';
-@import 'overrides.scss';
-
-// Find a better way to fix this
-@import 'fixes.scss';
+@import 'overrides.scss';

package/styles/globals/overrides.scss

@@ -45,16 +45,6 @@
         width: 100%;
     }
 
-    &.v-checkbox {
-        @include web {
-            min-width: 24px;
-        }
-
-        @include mobile {
-            min-width: 20px;
-        }
-    }
-
     &:has(.v-input__control):has(.v-input__append) > .v-input__append {
         margin-inline-start: 8px !important;
     }
@@ -90,29 +80,27 @@
         }
     }
 
-    &:not(.fs-text-area) > .v-input__control > .v-field {
-        padding: 0 12px 0 16px !important;
+    &:not(.fs-text-area) > .v-input__control > .v-field > .v-field__field {
+        min-height: var(--fs-base-field-input-height) !important;
+        height: var(--fs-base-field-input-height) !important;
 
-        & > .v-field__field > .v-field__input {
-            @extend .text-body;
+        & > .v-field__input {
+            min-height: var(--fs-base-field-input-height) !important;
+            height: var(--fs-base-field-input-height) !important;
             
             padding-bottom: 0px !important;
             padding-inline: 0px !important;
             padding-top: 0px !important;
             flex-wrap: nowrap;
             overflow: hidden;
-        
-            @include web {
-                min-height: 38px !important;
-                height: 38px !important;
-            }
-        
-            @include mobile {
-                min-height: 34px !important;
-                height: 34px !important;
-            }
+
+            @extend .text-body;
         }
     }
+
+    &:not(.fs-text-area):not(.fs-clock-field) > .v-input__control > .v-field {
+        padding: 0 12px 0 16px !important;
+    }
 }
 
 // If there is a prepend, it has a padding on the right and an opacity of 100%
@@ -141,15 +129,8 @@
 .v-text-field__suffix {
     padding: 0 8px 0 0 !important;
 
-    @include web {
-        min-height: 38px !important;
-        height: 38px !important;
-    }
-
-    @include mobile {
-        min-height: 34px !important;
-        height: 34px !important;
-    }
+    min-height: var(--fs-base-field-input-height) !important;
+    height: var(--fs-base-field-input-height) !important;
 
     & > .v-text-field__suffix__text {
         @extend .text-body;
@@ -196,13 +177,7 @@ $nthOverlay: 25;
     }
     
     & > .v-icon {
-        @include web {
-            font-size: 24px !important;
-        }
-    
-        @include mobile {
-            font-size: 20px !important;
-        }
+        font-size: var(--fs-group-icon-size) !important;
     }
 }
 

package/styles/globals/text_fonts.scss

@@ -7,17 +7,9 @@
     font-style: normal !important;
     font-weight: 700 !important;
 
-    @include web {
-        font-size: 36px !important;
-        line-height: 40px !important;
-        letter-spacing: -0.72px !important;
-    }
-
-    @include mobile {
-        font-size: 28px !important;
-        line-height: 32px !important;
-        letter-spacing: -1.4px !important;
-    }
+    font-size: var(--fs-font-h1-font-size) !important;
+    line-height: var(--fs-font-h1-line-height) !important;
+    letter-spacing: var(--fs-font-h1-letter-spacing) !important;
 }
 
 .text-h2 {
@@ -25,17 +17,9 @@
     font-style: normal !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 26px !important;
-        line-height: 32px !important;
-        letter-spacing: -0.78px !important;
-    }
-
-    @include mobile {
-        font-size: 22px !important;
-        line-height: 24px !important;
-        letter-spacing: -0.88px !important;
-    }
+    font-size: var(--fs-font-h2-font-size) !important;
+    line-height: var(--fs-font-h2-line-height) !important;
+    letter-spacing: var(--fs-font-h2-letter-spacing) !important;
 }
 
 .text-h3 {
@@ -43,17 +27,9 @@
     font-style: normal !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 20px !important;
-        line-height: 24px !important;
-        letter-spacing: -0.6px !important;
-    }
-
-    @include mobile {
-        font-size: 16px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.48px !important;
-    }
+    font-size: var(--fs-font-h3-font-size) !important;
+    line-height: var(--fs-font-h3-line-height) !important;
+    letter-spacing: var(--fs-font-h3-letter-spacing) !important;
 }
 
 .text-body {
@@ -62,17 +38,9 @@
     font-weight: 500 !important;
     text-transform: none !important;
 
-    @include web {
-        font-size: 14px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.42px !important;
-    }
-
-    @include mobile {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.36px !important;
-    }
+    font-size: var(--fs-font-body-font-size) !important;
+    line-height: var(--fs-font-body-line-height) !important;
+    letter-spacing: var(--fs-font-body-letter-spacing) !important;
 }
 
 .text-button {
@@ -81,17 +49,9 @@
     font-weight: 700 !important;
     text-transform: none !important;
 
-    @include web {
-        font-size: 14px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.42px !important;
-    }
-
-    @include mobile {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.36px !important;
-    }
+    font-size: var(--fs-font-button-font-size) !important;
+    line-height: var(--fs-font-button-line-height) !important;
+    letter-spacing: var(--fs-font-button-letter-spacing) !important;
 }
 
 .text-overline {
@@ -100,15 +60,7 @@
     text-transform: none !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: 0 !important;
-    }
-
-    @include mobile {
-        font-size: 10px !important;
-        line-height: 16px !important;
-        letter-spacing: 0 !important;
-    }
+    font-size: var(--fs-font-overline-font-size) !important;
+    line-height: var(--fs-font-overline-line-height) !important;
+    letter-spacing: var(--fs-font-overline-letter-spacing) !important;
 }

package/styles/globals/breakpoints.scss

@@ -1,20 +0,0 @@
-$extra-small-breakpoint: 599px;
-$mobile-breakpoint: 1264px;
-
-@mixin extra-small {
-    @media only screen and (max-width: $extra-small-breakpoint) {
-        @content;
-    }
-}
-
-@mixin mobile {
-    @media only screen and (max-width: $mobile-breakpoint) {
-        @content;
-    }
-}
-
-@mixin web {
-    @media screen and (min-width: ($mobile-breakpoint - 1)) {
-        @content;
-    }
-}

package/styles/globals/fixes.scss

@@ -1,5 +0,0 @@
-.fs-tab > .v-btn__content > .fs-row > .text-button {
-    @include web {
-        padding-top: 2px !important;
-    }
-}