@dative-gpi/foundation-shared-components 1.0.88 → 1.0.89

package/components/FSFadeOut.vue

@@ -51,6 +51,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    hideHorizontalOverflow: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     disableTopMask: {
       type: Boolean,
       required: false,
@@ -84,11 +89,13 @@ export default defineComponent({
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : undefined,
       "--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-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-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
+      "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,
+      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto'
     }));
 
     const handleMasks = () => {

package/components/FSLoader.vue

@@ -32,7 +32,7 @@ export default defineComponent({
       default: "0"
     },
     variant: {
-      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
+      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "standard"
     },
@@ -51,7 +51,7 @@ export default defineComponent({
     const style = computed((): StyleValue => ({
       "--fs-loader-background-color": backgrounds.base,
       "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
-      "--fs-loader-padding"         : sizeToVar(props.padding),
+      "--fs-loader-padding"         : sizeToVar(getPadding.value),
       "--fs-loader-height"          : sizeToVar(getHeight.value),
       "--fs-loader-width"           : sizeToVar(getWidth.value)
     }));
@@ -63,17 +63,20 @@ export default defineComponent({
         case "input"         :
         case "field"         : return isMobileSized.value ? "36px" : "40px";
         case "chip"          : return isMobileSized.value ? "20px" : "24px";
-        case "text-h1"       : return isMobileSized.value ? "32px" : "40px";
-        case "text-h2"       : return isMobileSized.value ? "24px" : "32px";
-        case "text-h3"       : return isMobileSized.value ? "20px" : "24px";
-        case "text-h4"       : return isMobileSized.value ? "16px" : "20px";
+
+        case "text-h1"       : return isMobileSized.value ? "28px" : "36px";
+        case "text-h2"       : return isMobileSized.value ? "22px" : "26px";
+        case "text-h3"       : return isMobileSized.value ? "16px" : "20px";
         case "text-body"     :
-        case "text-button"   : return isMobileSized.value ? "14px" : "16px";
-        case "text-overline" : return "16px";
+        case "text-button"   : return isMobileSized.value ? "12px" : "14px";
+        case "text-overline" : return isMobileSized.value ? "10px" : "12px";
       }
     });
 
     const getWidth = computed((): string | number => {
+      if (props.width != null) {
+        return sizeToVar(props.width);
+      }
       switch (props.variant) {
         case "standard": return sizeToVar(props.width);
         case "button"  : return isMobileSized.value ? "36px" : "40px";
@@ -87,6 +90,21 @@ export default defineComponent({
       }
     });
 
+    const getPadding = computed((): string | number => {
+      if (props.padding !== "0") {
+        return sizeToVar(props.padding);
+      }
+      switch (props.variant) {
+        case "text-h1"       : return "2px 0";
+        case "text-h2"       : return isMobileSized.value ? "1px 0" : "3px 0";
+        case "text-h3"       : return "2px 0";
+        case "text-body"     :
+        case "text-button"   : return isMobileSized.value ? "2px 0" : "3px 0";;
+        case "text-overline" : return isMobileSized.value ? "3px 0" : "2px 0";
+        default              : return sizeToVar(props.padding);
+      }
+    });
+
     return {
       style
     };

package/components/FSWindow.vue

@@ -1,8 +1,11 @@
 <template>
   <v-window
+    ref="windowRoot"
     class="fs-window"
-    :style="style"
     :touch="false"
+    :style="style"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
     <template
@@ -28,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue, type VNode } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, type VNode, watch } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
@@ -45,23 +48,43 @@ export default defineComponent({
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
+    },
+    modelValue: {
+      type: [String, Number, Object] as PropType<any>,
+      required: false,
+      default: 0
     }
   },
+  emits: ["update:modelValue"],
   setup(props) {
     const { slots, getChildren } = useSlots();
 
     delete slots.default;
 
+    const windowRoot = ref<HTMLElement | null>(null);
+
     const style = computed((): StyleValue => ({
-      "--fs-window-width": sizeToVar(props.width),
-      "--fs-window-height": sizeToVar(props.height)
+      "--fs-window-width"   : sizeToVar(props.width),
+      "--fs-window-height"  : sizeToVar(props.height)
     }));
 
     const value = (component: VNode, index: number): any => {
       return component?.props?.value ?? index;
     };
 
+    // Hide horizontal overflow when switching windows, otherwise let it visible for the FSFadeOut scrollbar
+    watch(() => props.modelValue, (): void => {
+      if (windowRoot.value == null) {
+        return;
+      }
+      (windowRoot.value as any).$el.style.setProperty("overflow", "hidden", "important");
+      setTimeout(() => {
+        (windowRoot.value as any).$el.style.setProperty("overflow", "visible", "important");
+      }, 1120);
+    });
+
     return {
+      windowRoot,
       slots,
       style,
       getChildren,

package/package.json

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

package/styles/components/fs_fade_out.scss

@@ -2,14 +2,18 @@
     @extend .fs-hide-y-scrollbar;
     
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow-x: var(--fs-fade-out-x-overflow);
     max-height: var(--fs-fade-out-max-height);
+    min-height: var(--fs-fade-out-height);
+    height: var(--fs-fade-out-height);
     padding: var(--fs-fade-out-padding);
 
     // Petit hack pour que la barre de scroll elle soit à droite du container
     padding-right: calc(var(--fs-fade-out-padding) + var(--fs-fade-out-padding-offset));
     width: calc(var(--fs-fade-out-width) + var(--fs-fade-out-width-offset));
+    margin-right: var(--fs-fade-out-margin-right);
+
 
-    height: var(--fs-fade-out-height);
     flex-direction: column;
     position: relative;
     display: flex;

package/styles/components/fs_window.scss

@@ -1,7 +1,9 @@
 .fs-window {
-    width: var(--fs-window-width);
     height: var(--fs-window-height);
+    width: var(--fs-window-width);
+    overflow: visible !important;
 }
+
 .fs-window-item {
     height: 100%;
     min-height: 0;