@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/styles/components/fs_map_overlay.scss

@@ -0,0 +1,38 @@
+.fs-map-overlay-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 950;
+  margin: 4px;
+
+  .fs-map-overlay-left-content {
+    max-height: var(--fs-map-overlay-max-height);
+  }
+}
+
+.fs-map-overlay-left-mobile {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1050;
+  margin: 0;
+  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+
+  >* {
+    width: 100%;
+    height: var(--fs-map-overlay-card-height);
+    margin: 0;
+    transition: none;
+  }
+
+  .fs-map-overlay-left-mobile-content {
+    max-height: calc(100% - 20px);
+  }
+
+  .fs-fade-out {
+    transition: none;
+  }
+}

package/styles/components/fs_meta_field.scss

@@ -0,0 +1,6 @@
+// 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;
+    }
+}

package/styles/components/fs_option_group.scss

@@ -1,6 +1,7 @@
 .fs-option-group {
     border-radius: var(--fs-option-group-border-radius) !important;
     border: var(--fs-option-group-border-size) solid !important;
+    background-color: var(--fs-option-group-background-color) !important;
     width: fit-content;
 
     border-color: var(--fs-option-group-border-color) !important;

package/styles/components/fs_radio.scss

@@ -3,7 +3,7 @@
     color: var(--fs-radio-radio-color) !important;
 }
 
-.fs-radio-label {
+.fs-radio-label  {
     cursor: var(--fs-radio-cursor) !important;
     color: var(--fs-radio-color) !important;
     user-select: none;

package/styles/components/fs_rich_text_field.scss

@@ -1,19 +1,31 @@
 .fs-rich-text-field {
     width: 100%;
-    min-width: 240px;
-    outline: none !important;
+    min-width: 120px;
     border: 1px solid var(--fs-rich-text-field-border-color) !important;
     border-radius: 4px !important;
 
-    min-height: var(--fs-rich-text-field-min-height);
-    color: var(--fs-rich-text-field-color);
+
     margin: 2px 2px 2px 0 !important;
 
+    .fs-rich-text-field-content {
+        color: var(--fs-rich-text-field-color);
+        width: 100%;
+        min-height: var(--fs-rich-text-field-min-height);
+        outline: none !important;
+    }
+
+    .fs-richtextfield-node-variable {
+        .fs-rich-text-field-node-variable-code {
+            background-color: var(--fs-rich-text-field-variable-backgroundcolor);
+            color: var(--fs-rich-text-field-variable-color);
+            border-radius: 4px;
+        }
+    }
 
     &:focus-within {
         border-color: var(--fs-rich-text-field-active-border-color) !important;
     }
-        
+
     @include web {
         padding: 10px 12px !important;
     }

package/styles/components/fs_row.scss

@@ -1,10 +1,10 @@
 .fs-row {
     display: flex;
+    overflow-x: var(--fs-row-overflow);
     flex-wrap: var(--fs-row-flex-wrap);
     padding: var(--fs-row-padding);
     gap: var(--fs-row-gap);
     max-width: 100%;
-    max-height: 100%;
 
     &-top-left {
         align-items: flex-start;

package/styles/components/fs_select_field.scss

@@ -1,5 +1,6 @@
 .fs-select-field  > .v-input__control > .v-field {
     border: 1px solid var(--fs-select-field-border-color) !important;
+    background-color: var(--fs-select-field-background-color) !important;
     cursor: var(--fs-select-field-cursor) !important;
 
     &--error {
@@ -33,21 +34,15 @@
     color: var(--fs-select-field-color);
 }
 
-.v-overlay-container > .v-overlay > .v-select__content {
-    box-shadow: 0px 5px 8px 0px #00000029;
-    max-width: none !important;
-    border-radius: 4px;
-
-    & > .v-list {
-        @extend .fs-hide-y-scrollbar;
+.v-overlay-container > .v-overlay > .v-select__content > .v-list {
+    @extend .fs-hide-y-scrollbar;
 
-        background-color: var(--fs-select-field-background-color);
-        padding: 2px 8px 2px 16px;
-        border-radius: 4px;
+    background-color: var(--fs-select-field-background-color);
+    padding: 2px 8px 2px 16px;
+    border-radius: 4px;
 
-        & .v-list-item {
-            border-radius: 4px !important;
-            margin-top: 2px !important;
-        }
+    & .v-list-item {
+        border-radius: 4px !important;
+        margin-top: 2px !important;
     }
 }

package/styles/components/fs_text.scss

@@ -1,5 +1,5 @@
 .fs-text {
-    color: var(--fs-text-color);
+    color: var(--fs-text-color) !important;
 
     @extend .fs-span;
 }

package/styles/components/fs_time_field.scss

@@ -1,7 +1,3 @@
-.fs-time-field-select {
-    min-width: 180px;
-}
-
 .fs-time-field-label {
     color: var(--fs-time-field-color);
 }

package/styles/components/fs_translate_field.scss

@@ -0,0 +1,3 @@
+.fs-translate-field-label {
+    color: var(--fs-translate-field-color);
+}

package/styles/components/fs_tree_view_field.scss

@@ -0,0 +1,53 @@
+.fs-tree-view-field > .v-input__control > .v-field > .v-field__field > .v-field__input {
+    cursor: var(--fs-tree-view-field-cursor) !important;
+}
+
+.v-overlay__content > .v-treeview {
+    max-height: 310px !important;
+}
+
+.v-treeview.v-list {
+    @extend .fs-hide-y-scrollbar;
+
+    background-color: var(--fs-select-field-background-color);
+    padding: 2px 8px 2px 16px;
+    border-radius: 4px;
+
+    & .v-list-item {
+        border-radius: 4px !important;
+        margin-top: 2px;
+    }
+}
+
+.v-treeview-item:has(.v-list-item__prepend > .fs-tree-view-item-selected) > .v-list-item__overlay {
+    opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier)) !important;
+}
+
+.v-treeview-item:not(:has(.v-list-item__prepend > .fs-tree-view-item-selected)) > .v-list-item__overlay {
+    display: none;
+}
+
+.fs-dialog-menu {
+    .v-treeview.v-list {
+        display: flex;
+        flex-direction: column;
+        padding: 0px !important;
+        gap: 12px !important;
+    }
+
+    .v-treeview-item {
+        cursor: default;
+        padding-inline: 0px !important;
+        min-height: 20px !important;
+        padding: 0px !important;
+        margin: 0px !important;
+
+        & > .v-list-item__overlay {
+            display: none;
+        }
+
+        & > .v-ripple__container {
+            display: none;
+        }
+    }
+}

package/styles/components/index.scss

@@ -15,7 +15,6 @@
 @import "fs_color_icon.scss";
 @import "fs_data_table.scss";
 @import "fs_data_iterator_item.scss";
-@import "fs_date_field.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
@@ -25,17 +24,23 @@
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";
 @import "fs_form.scss";
+@import "fs_gradient_field.scss";
 @import "fs_grid.scss";
 @import "fs_header_button.scss";
 @import "fs_hidden_button.scss";
 @import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";
+@import "fs_image_card.scss";
 @import "fs_label.scss";
 @import "fs_link.scss";
 @import "fs_load_data_table.scss";
 @import "fs_load_tile.scss";
 @import "fs_loader.scss";
+@import "fs_magic_config_field.scss";
+@import "fs_map_overlay.scss";
+@import "fs_map.scss";
+@import "fs_meta_field.scss";
 @import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
@@ -57,5 +62,7 @@
 @import "fs_time_field.scss";
 @import "fs_timeslot_field.scss";
 @import "fs_tooltip.scss";
+@import "fs_translate_field.scss";
+@import "fs_tree_view_field.scss";
 @import "fs_window.scss";
 @import "fs_wrap_group.scss";

package/styles/globals/overrides.scss

@@ -3,6 +3,12 @@
     display: none;
 }
 
+// Otherwise a v-progress-circular has the size of its parent and can trigger the vertical scroll when spinning
+.v-progress-circular > svg {
+    height: fit-content;
+    width: fit-content;
+}
+
 // No default hover effect on switches and others, no limited opacity, no limited width...
 .v-selection-control {
     min-height: 0 !important;
@@ -34,8 +40,13 @@
         flex: 0 0 auto;
     }
 
-    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
-        min-width: 150px;
+    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input):not(.fs-number-field) {
+        min-width: 120px;
+        width: 100%;
+    }
+
+    &.fs-number-field {
+        min-width: 80px;
         width: 100%;
     }
 
@@ -49,12 +60,20 @@
         }
     }
 
-    & .v-input__prepend {
+    &:has(.v-input__control):has(.v-input__append) > .v-input__append {
+        margin-inline-start: 8px !important;
+    }
+
+    &:not(:has(.v-input__control)):has(.v-input__append) > .v-input__append {
+        margin-inline-start: 0 !important;
+    }
+
+    &:has(.v-input__control):has(.v-input__prepend) > .v-input__prepend {
         margin-inline-end: 8px !important;
     }
 
-    & .v-input__append {
-        margin-inline-start: 8px !important;
+    &:not(:has(.v-input__control)):has(.v-input__prepend) > .v-input__prepend {
+        margin-inline-end: 0 !important;
     }
 
     & > .v-input__control > .v-field {
@@ -65,6 +84,10 @@
             margin-inline: 0px;
             padding-top: 0px;
             height: 100%;
+
+            &  > .v-icon  {
+                opacity: 1 !important;
+            }
         }
 
         & > .v-field__outline {
@@ -73,15 +96,14 @@
     }
 
     &:not(.fs-text-area) > .v-input__control > .v-field {
-        padding: 0 16px !important;
+        padding: 0 12px 0 16px !important;
 
         & > .v-field__field > .v-field__input {
             @extend .text-body;
             
-            padding-inline: 0px !important;
             padding-bottom: 0px !important;
+            padding-inline: 0px !important;
             padding-top: 0px !important;
-            align-items: center;
             flex-wrap: nowrap;
             overflow: hidden;
         
@@ -98,11 +120,34 @@
     }
 }
 
+// If there is a prepend, it has a padding on the right and an opacity of 100%
+.v-field__prepend-inner:not(:empty) {
+    padding-inline-end: 4px !important;
+
+    & > .v-icon {
+        opacity: 1 !important;
+    }
+}
+
+// If there is an append, it has a padding on the left and an opacity of 100%
+.v-field__append-inner:not(:empty) {
+    padding-inline-start: 4px !important;
+
+    & > .v-icon {
+        opacity: 1 !important;
+    }
+}
+
 // No input messages allowed
 .v-input__details {
     display: none !important;
 }
 
+// Ellipsis on input of all fields
+input {
+    text-overflow: ellipsis;
+}
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -128,6 +173,7 @@ $nthOverlay: 25;
 .fs-slide-group {
     max-width: 100%;
     
+    // To avoid borders clipping
     & > .v-slide-group__container > .v-slide-group__content {
         margin: 0 2px 1px 0 !important;
     }

package/styles/globals/scrollbars.scss

@@ -12,7 +12,7 @@
 
 @include clickscreen {
   .fs-hide-x-scrollbar {
-    overflow-x: scroll;
+    overflow-x: scroll !important;
 
     &::-webkit-scrollbar {
       height: 8px;
@@ -28,7 +28,7 @@
   }
 
   .fs-hide-y-scrollbar {
-    overflow-y: scroll;
+    overflow-y: scroll !important;
 
     &::-webkit-scrollbar {
       width: 8px;

package/themes/default.ts

@@ -1,4 +1,4 @@
-import { ThemeDefinition } from "vuetify";
+import type { ThemeDefinition } from "vuetify";
 
 export const DefaultTheme: ThemeDefinition = {
     dark: false,