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

package/components/FSClickable.vue

@@ -86,6 +86,7 @@
     :type="$props.type"
     :style="style"
     :class="$props.class"
+    :disabled="$props.load || !$props.editable"
     @click.stop="onClick"
     @mouseover="hover = true"
     @mouseleave="hover = false"

package/components/FSDialogFormBody.vue

@@ -28,6 +28,7 @@
             :wrap="false"
           >
             <FSButton
+              v-if="$props.showCancelButton"
               :prependIcon="$props.cancelButtonPrependIcon"
               :appendIcon="$props.cancelButtonAppendIcon"
               :variant="$props.cancelButtonVariant"
@@ -36,6 +37,7 @@
               @click="() => $emit('click:cancelButton', false)"
             />
             <FSButton
+              v-if="$props.showSubmitButton"
               type="submit"
               :prependIcon="$props.submitButtonPrependIcon"
               :appendIcon="$props.submitButtonAppendIcon"
@@ -122,6 +124,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -147,6 +154,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,

package/components/FSDialogMultiFormBody.vue

@@ -38,6 +38,7 @@
               :wrap="false"
             >
               <FSButton
+                v-if="$props.showCancelButton || currentStep > 1"
                 :prependIcon="$props.cancelButtonPrependIcon"
                 :appendIcon="$props.cancelButtonAppendIcon"
                 :variant="$props.cancelButtonVariant"
@@ -46,6 +47,7 @@
                 @click="onPrevious()"
               />
               <FSButton
+                v-if="$props.showSubmitButton || currentStep < $props.steps"
                 type="submit"
                 :prependIcon="$props.submitButtonPrependIcon"
                 :appendIcon="$props.submitButtonAppendIcon"
@@ -107,6 +109,11 @@ export default defineComponent({
       type: Number,
       required: true
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -132,6 +139,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,

package/components/FSDialogSubmit.vue

@@ -33,6 +33,7 @@
             :wrap="false"
           >
             <FSButton
+              v-if="$props.showCancelButton"
               :prependIcon="$props.cancelButtonPrependIcon"
               :appendIcon="$props.cancelButtonAppendIcon"
               :variant="$props.cancelButtonVariant"
@@ -41,6 +42,7 @@
               @click="$emit('update:modelValue', false)"
             />
             <FSButton
+              v-if="$props.showSubmitButton"
               :prependIcon="$props.submitButtonPrependIcon"
               :appendIcon="$props.submitButtonAppendIcon"
               :variant="$props.submitButtonVariant"
@@ -98,6 +100,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -123,6 +130,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,

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,10 @@
 <template>
   <v-window
     class="fs-window"
-    :style="style"
     :touch="false"
+    :style="style"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
     <template
@@ -28,7 +30,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,22 +47,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 showOverflow = ref(true);
+    const overflowTimeout = ref<NodeJS.Timeout | null>(null);
 
     const style = computed((): StyleValue => ({
-      "--fs-window-width": sizeToVar(props.width),
-      "--fs-window-height": sizeToVar(props.height)
+      "--fs-window-overflow": showOverflow.value ? "visible" : "hidden",
+      "--fs-window-height"  : sizeToVar(props.height),
+      "--fs-window-width"   : sizeToVar(props.width)
     }));
 
     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 => {
+      showOverflow.value = false;
+      if (overflowTimeout.value) {
+        clearTimeout(overflowTimeout.value);
+      }
+      overflowTimeout.value = setTimeout(() => {
+        showOverflow.value = true;
+      }, 560);
+    });
+
     return {
       slots,
       style,

package/components/lists/FSDataTableUI.vue

@@ -1544,6 +1544,7 @@ export default defineComponent({
 
     watch(() => props.items, async () => {
       computeFilters();
+      observeIntersection();
       if (innerPage.value !== 1) {
         const formerPage = innerPage.value;
         innerPage.value = 1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.88",
+  "version": "1.0.91",
   "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.91",
+    "@dative-gpi/foundation-shared-services": "1.0.91"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "ab11b2d34cc774a15549d7450ae6d06a6c6023ee"
+  "gitHead": "996da7085e717a1b1c0a9e58d6d3cc40b4aadb2b"
 }

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);
+    overflow: var(--fs-window-overflow) !important;
     height: var(--fs-window-height);
+    width: var(--fs-window-width);
 }
+
 .fs-window-item {
     height: 100%;
     min-height: 0;