@dative-gpi/foundation-shared-components 1.1.23 → 1.1.24-unit-formatter

package/components/tiles/FSServiceAccountOrganisationTileUI.vue

@@ -64,7 +64,6 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSImage from "../FSImage.vue";
 import FSSpan from "../FSSpan.vue";
-import FSIcon from "../FSIcon.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -74,7 +73,6 @@ export default defineComponent({
   components: {
     FSImage,
     FSSpan,
-    FSIcon,
     FSTile,
     FSCol,
     FSRow

package/components/tiles/FSTile.vue

@@ -1,26 +1,67 @@
 <template>
   <FSCol
     class="fs-tile"
-    :style="style"
-    :width="$props.width"
     :height="$props.height"
+    :width="$props.width"
   >
-    <FSCard
+    <FSClickable
+      v-if="($props.href || $props.to || $attrs.onClick)"
+      variant="background"
       class="fs-tile"
-      :variant="selectionState.variant"
-      :color="selectionState.color"
       padding="12px"
+      :href="$props.href"
       width="100%"
       height="100%"
       topRightPadding="1px"
       :to="$props.to"
-      :href="$props.href"
-      v-on="selectionState.listeners"
+      :style="style"
+      v-bind="$attrs"
+    >
+      <slot />
+      <template 
+        v-if="$props.selectable"
+        #top-right
+      >
+        <FSCard
+          padding="8px"
+          :border="false"
+        >
+          <FSCheckbox
+            :modelValue="$props.modelValue"
+            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+          />
+        </FSCard>
+      </template>
+    </FSClickable>
+
+    <FSClickable
+      v-else-if="$props.selectable && $props.singleSelect"
+      padding="12px"
+      :variant="variant"
+      :color="color"
+      :style="style"
+      width="100%"
+      height="100%"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </FSClickable>
+    
+    <FSCard
+      v-else
+      variant="background"
+      class="fs-tile"
+      padding="12px"
+      :style="style"
+      width="100%"
+      height="100%"
+      topRightPadding="1px"
       v-bind="$attrs"
     >
       <slot />
       <template 
-        v-if="selectionState.showCheckbox"
+        v-if="$props.selectable"
         #top-right
       >
         <FSCard
@@ -33,7 +74,8 @@
           />
         </FSCard>
       </template>
-    </FSCard>
+    </FSCard>  
+    
     <div
       v-if="$props.leftColor"
       class="fs-tile-left"
@@ -54,17 +96,17 @@ import { type RouteLocation } from "vue-router";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
-import FSCard from "../FSCard.vue";
+import FSClickable from "../FSClickable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
-import FSCol from "../FSCol.vue";
+import FSCard from "../FSCard.vue";
 
 export default defineComponent({
   name: "FSTile",
   inheritAttrs: false,
   components: {
-    FSCard,
+    FSClickable,
     FSCheckbox,
-    FSCol
+    FSCard
   },
   props: {
     to: {
@@ -119,7 +161,7 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {
+  setup(props) {
     const { getGradients } = useColors();
 
     const style = computed((): StyleValue => {
@@ -135,28 +177,18 @@ export default defineComponent({
       return result;
     });
 
-    const selectionState = computed(() => {
-      const isSingleSelect = props.selectable && props.singleSelect && !props.href && !props.to;
-      const showCheckbox = props.selectable && !isSingleSelect;
-      const variant: "standard" | "background" = (isSingleSelect && props.modelValue) ? "standard" : "background";
-      const color: ColorBase = (isSingleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
-      const onClick = () => { emit("update:modelValue", !props.modelValue); };
-      const listeners: Record<string, (...args: any[]) => void> = {};
-      if (isSingleSelect) {
-        listeners.click = onClick;
-      }
-      return {
-        isSingleSelect,
-        showCheckbox,
-        variant,
-        color,
-        listeners
-      };
+    const variant = computed((): "standard" | "background" => {
+      return (props.singleSelect && props.modelValue) ? "standard" : "background";
+    });
+
+    const color = computed((): ColorBase => {
+      return (props.singleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
     });
 
     return {
-      selectionState,
       ColorEnum,
+      variant,
+      color,
       style
     };
   }

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -65,7 +65,6 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSImage from "../FSImage.vue";
 import FSSpan from "../FSSpan.vue";
-import FSIcon from "../FSIcon.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -75,7 +74,6 @@ export default defineComponent({
   components: {
     FSImage,
     FSSpan,
-    FSIcon,
     FSTile,
     FSCol,
     FSRow

package/components/toggleSets/FSToggleSetPosition.vue

@@ -24,13 +24,8 @@ import type { PropType } from "vue";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { Position } from "@dative-gpi/foundation-shared-domain/enums";
 
-import FSToggleSet from "../FSToggleSet.vue";
-
 export default defineComponent({
   name: "FSToggleSetPosition",
-  components: {
-    FSToggleSet
-  },
   props: {
     modelValue: {
       type: Number as PropType<Position>,

package/composables/useMapLayers.ts

@@ -57,18 +57,6 @@ export const useMapLayers = () => {
               className: 'fs-map-tile-base-layer'
             })
           ]
-        },
-        {
-          name: MapLayers.OpenStreetMap,
-          label: $tr("ui.map-layer.open-street-map", "OpenStreetMap"),
-          image: new URL("../assets/images/map/open-street-map.png", import.meta.url).href,
-          layers: [
-            tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
-              maxZoom: 19,
-              attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-              className: 'fs-map-tile-base-layer'
-            })
-          ]
         }
       ];
     } catch (err) {

package/models/index.ts

@@ -12,5 +12,4 @@ export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";
 export * from "./toggleSets";
-export * from "./variants";
-export * from "./translations";
+export * from "./translations";

package/models/map.ts

@@ -10,8 +10,7 @@ export interface MapLayer {
 export enum MapLayers {
   Map = "map",
   Imagery = "imagery",
-  Snow= "snow",
-  OpenStreetMap = "open-street-map"
+  Snow= "snow"
 }
 
 export enum MapOverlayPositions {

package/models/tables.ts

@@ -26,7 +26,6 @@ export interface FSDataTableFilter {
   text: string;
   value: string;
   hidden: boolean;
-  custom?: boolean;
   filter?: ((value: any, property: any, item: any) => boolean) | null;
 }
 

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.1.23",
+  "version": "1.1.24-unit-formatter",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.1.23",
-    "@dative-gpi/foundation-shared-services": "1.1.23"
+    "@dative-gpi/foundation-shared-domain": "1.1.24-unit-formatter",
+    "@dative-gpi/foundation-shared-services": "1.1.24-unit-formatter"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "b89c8c5be537d450306310fa9dbec12a4477eed6"
+  "gitHead": "ac04fd5da2ebd73bfb31ff6ffc4f5ff54a872e9e"
 }

package/styles/components/fs_button.scss

@@ -1,14 +1,20 @@
 .fs-button-icon {
-    text-decoration: none;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    color: var(--fs-button-color) !important;
 
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
     }
 
+    & > a, a:hover, a:visited, a:active {
+        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_card.scss

@@ -2,11 +2,11 @@
     border: var(--fs-card-border-size) var(--fs-card-border-style);
     border-radius: var(--fs-card-border-radius);
     padding: var(--fs-card-padding);
-    height: 100%;
-    width: 100%;
+    height: var(--fs-card-height);
+    width: var(--fs-card-width);
+    max-width: var(--fs-card-max-width);
     position: relative;
     display: flex;
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     
     border-color: var(--fs-card-border-color);
     color: var(--fs-card-color);
@@ -24,81 +24,10 @@
         background: var(--fs-card-background-color);
     }
 
-    &-load {
-        content: "";
-
-        & > *:not(.fs-card-load__spinner) {
-            opacity: 0;
-        }
-    }
-
-    &-clickable {
-        cursor: pointer;
-
-        &.fs-card-disabled {
-            cursor: default;
-        }
-
-        &:not(.fs-card-disabled):active:not(:has( .fs-stopclick:hover)) {
-            background-color: var(--fs-card-active-background-color) !important;
-            border-color: var(--fs-card-active-border-color) !important;
-            color: var(--fs-card-active-color) !important;
-
-            & .fs-card-clickable:not(.fs-card-disable-hover-style) {
-                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-                background-color: var(--fs-card-active-background-color);
-            }
-        }
-
-        @include clickscreen {
-            &:not(.fs-card-disabled):not(.fs-card-disable-hover-style):hover:not(:has( .fs-stopclick:hover)) {
-                background-color: var(--fs-card-hover-background-color) !important;
-                border-color: var(--fs-card-hover-border-color) !important;
-                color: var(--fs-card-hover-color) !important;
-
-                & .fs-card-clickable:not(.fs-card-disable-hover-style) {
-                    transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-                    background-color: var(--fs-card-hover-background-color);
-                }
-            }
-            // Désactive le hover si un parent a .fs-card-load
-            .fs-card-load & {
-                pointer-events: none;
-            }
-        }
-    }
-
     .fs-card-top-right {
         position: absolute;
         line-height: normal;
         right: var(--fs-card-top-right-padding);
         top: var(--fs-card-top-right-padding);
     }
-}
-
-.fs-card-wrapper {
-    display: block;
-    position: relative;
-    padding: 0 !important;
-    height: var(--fs-card-height);
-    width: var(--fs-card-width);
-    max-width: var(--fs-card-max-width);
-    background: none;
-    border: none;
-    text-decoration: none;
-    box-sizing: border-box;
-}
-
-.fs-card-load__spinner {
-    cursor: default;
-    position: absolute !important;
-    height: 100% !important;
-    width: 100% !important;
-    left: 0;
-    top: 0;
-    
-    & > svg {
-        height: 24px !important;
-    }
-}
-
+}

package/styles/components/fs_chip.scss

@@ -1,3 +1,32 @@
+.fs-chip-container {
+    text-decoration: none;
+}
+
 .fs-chip {
     user-select: none;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color: var(--fs-chip-background-color) !important;
+    border: 1px solid var(--fs-chip-border-color) !important;
+    height: var(--fs-chip-height) !important;
+    color: var(--fs-chip-color) !important;
+    border-radius: 50px !important;
+    padding: 2px 20px !important;
+}
+
+.fs-chip-clickable {
+    cursor: pointer !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

@@ -0,0 +1,69 @@
+.fs-clickable {
+    border: var(--fs-clickable-border-size) var(--fs-clickable-border-style) !important;
+    border-radius: var(--fs-clickable-border-radius) !important;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    
+    background-color: var(--fs-clickable-background-color) !important;
+    border-color: var(--fs-clickable-border-color) !important;
+    color: var(--fs-clickable-color) !important;
+
+    &.fs-clickable-disabled {
+        cursor: default;
+    }
+    
+    &: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;
+        color: var(--fs-clickable-active-color) !important;
+
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+            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) {
+    position: relative !important;
+    text-decoration: none;
+    padding: 0 !important;
+    height: var(--fs-clickable-height);
+    width: var(--fs-clickable-width);
+}
+
+button:has(.fs-clickable) {
+    position: relative;
+    height: var(--fs-clickable-height);
+    width: var(--fs-clickable-width);
+}
+
+.fs-clickable-load {
+    cursor: default;
+    position: absolute !important;
+    height: 100% !important;
+    width: 100% !important;
+    left: 0;
+    top: 0;
+    
+    & > svg {
+        height: 24px !important;
+    }
+}
+
+*:has(~ .fs-clickable-load) > * {
+    opacity: 0;
+}

package/styles/components/fs_color_icon.scss

@@ -0,0 +1,3 @@
+.fs-color-icon {
+    cursor: pointer;
+}

package/styles/components/fs_filter_button.scss

@@ -1,10 +1,5 @@
 .fs-filter-button-menu {
-    max-width: 400px;
-    overflow: hidden;
-}
-
-.fs-filter-button-menu * {
-    min-width: 0;
+    width: 300px;
 }
 
 .fs-filter-button-chip {

package/styles/components/fs_map.scss

@@ -27,18 +27,12 @@
     transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-.fs-map-overlay-desktop {
+  .fs-map-overlay-desktop {
     position: absolute;
     top: 0;
     left: 0;
     margin: 12px;
     max-height: calc(100% - 24px);
-    display: flex;
-    flex-direction: column;
-
-    .fs-card {
-      min-height: 0;
-    }
   }
 
   .fs-map-layer-button {

package/styles/components/fs_progress_bar.scss

@@ -1,70 +1,14 @@
-.fs-progress-bar-wrapper {
+.fs-progress-bar-gradient {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.fs-progress-bar-track {
-    position: relative;
-    background-color: var(--progress-bar-background);
+    background-color: var(--progress-bar-background-color);
     height: 8px;
     border-radius: 4px;
 
-    .fs-progress-bar-fill {
-        position: absolute;
+    div {
+        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
         height: 100%;
-        left: var(--progress-bar-fill-left);
-        width: var(--progress-bar-fill-width);
-        background: linear-gradient(
-            to right,
-            var(--progress-bar-gradient-start) var(--progress-bar-gradient-start-stop),
-            var(--progress-bar-gradient-end)   var(--progress-bar-gradient-end-stop)
-        );
+        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;
-        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .fs-progress-bar-cursor {
-        position: absolute;
-        top: 50%;
-        left: var(--progress-bar-cursor-position);
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        background: linear-gradient(
-            to right,
-            var(--progress-bar-gradient-start),
-            var(--progress-bar-gradient-end)
-        );
-        transform: translate(-50%, -50%);
-        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-
-        .fs-progress-bar-cursor-label {
-            position: absolute;
-            top: calc(100% + 4px);
-            left: 50%;
-            transform: translateX(-50%);
-            white-space: nowrap;
-            pointer-events: none;
-        }
-    }
-}
-
-.fs-progress-bar-labels {
-    position: relative;
-    height: 16px;
-
-    .fs-progress-bar-label {
-        position: absolute;
-        transform: translateX(-50%);
-
-        &.fs-progress-bar-label--start {
-            transform: translateX(0);
-        }
-
-        &.fs-progress-bar-label--end {
-            transform: translateX(-100%);
-        }
     }
 }

package/styles/components/index.scss

@@ -12,10 +12,12 @@
 @import "fs_card.scss";
 @import "fs_checkbox.scss";
 @import "fs_chip.scss";
+@import "fs_clickable.scss";
 @import "fs_clock.scss";
 @import "fs_col.scss";
 @import "fs_color_field.scss";
 @import "fs_color.scss";
+@import "fs_color_icon.scss";
 @import "fs_data_table.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
@@ -51,7 +53,6 @@
 @import "fs_select_field.scss";
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
-@import "fs_snackbar.scss";
 @import "fs_span.scss";
 @import "fs_status_rich_card.scss";
 @import "fs_switch.scss";

package/styles/globals/overrides.scss

@@ -175,7 +175,7 @@ $nthOverlay: 25;
     color: var(--fs-group-color);
     min-width: 32px !important;
     width: 32px !important;
-    flex: 0 1 32px !important;
+    flex: 1 1 0 !important;
 
     @include touchscreen {
         display: none !important;