@dative-gpi/foundation-shared-components 1.0.70 → 1.0.73

package/styles/components/fs_fade_out.scss

@@ -4,8 +4,12 @@
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     max-height: var(--fs-fade-out-max-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));
+
     height: var(--fs-fade-out-height);
-    width: var(--fs-fade-out-width);
     flex-direction: column;
     position: relative;
     display: flex;

package/styles/components/fs_slide_group.scss

@@ -4,7 +4,7 @@
     max-width: 100%;
 
     & > .v-slide-group__container > .v-slide-group__content {
-        margin: 0 2px 1px 0 !important;
+        // margin: 0 2px 1px 0 !important;
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);
     }

package/components/views/FSListView.vue

@@ -1,83 +0,0 @@
-<template>
-  <FSSkeletonView>
-    <template
-      #header
-    >
-      <FSListHeader
-        ref="headerRef"
-        :breadcrumbs="$props.breadcrumbs"
-        :title="$props.title"
-        padding="0 14px 0 0"
-      >
-        <template
-          #toolbar
-        >
-          <slot
-            name="toolbar"
-          />
-        </template>
-      </FSListHeader>
-    </template>
-    <template
-      #default
-    >
-      <FSFadeOut
-        padding="0 8px 0 0"
-        :height="height"
-      >
-        <slot
-          name="default"
-        />
-      </FSFadeOut>
-    </template>
-  </FSSkeletonView>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
-
-import { type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSSkeletonView from "./FSSkeletonView.vue";
-import FSListHeader from "./FSListHeader.vue";
-import FSFadeOut from "../FSFadeOut.vue";
-
-export default defineComponent({
-  name: "FSListView",
-  components: {
-    FSSkeletonView,
-    FSListHeader,
-    FSFadeOut
-  },
-  props: {
-    title: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    breadcrumbs: {
-      type: Array as PropType<FSBreadcrumbItem[]>,
-      required: false,
-      default: () => []
-    }
-  },
-  setup() {
-    const { isExtraSmall, windowHeight } = useBreakpoints();
-
-    const headerRef = ref<HTMLElement | null>(null);
-
-    const height = computed((): string => {
-      let other = isExtraSmall.value ? 16 + 16 : 24 + 24 // Paddings
-        + (headerRef.value?.clientHeight ?? 0);          // Header
-
-      return `${windowHeight.value - other}px`;
-    });
-
-    return {
-      headerRef,
-      height
-    };
-  }
-});
-</script>

package/components/views/FSSkeletonView.vue

@@ -1,100 +0,0 @@
-<template>
-  <template
-    v-if="isExtraSmall"
-  >
-    <FSCol
-      padding="16px 4px 16px 12px"
-      height="100%"
-      gap="16px"
-    >
-      <slot
-        name="header"
-      >
-        <slot
-          name="title"
-        >
-          <FSRow
-            gap="12px"
-          >
-            <slot
-              name="title-image"
-            />
-            <slot
-              name="title-texts"
-            />
-          </FSRow>
-        </slot>
-      </slot>
-      <slot
-        name="breadcrumbs"
-      />
-      <slot
-        name="toolbar"
-      />
-      <slot
-        name="title-append"
-      />
-      <slot
-        name="default"
-      />
-    </FSCol>
-  </template>
-  <template
-    v-else
-  >
-    <FSCol
-      padding="24px 8px 24px 24px"
-      height="100vh"
-      gap="16px"
-    >
-      <slot
-        name="header"
-      >
-        <slot
-          name="title"
-        >
-          <FSRow
-            gap="32px"
-          >
-            <slot
-              name="title-image"
-            />
-            <slot
-              name="title-texts"
-            />
-            <v-spacer />
-            <slot
-              name="title-append"
-            />
-          </FSRow>
-        </slot>
-      </slot>
-      <slot
-        name="breadcrumbs"
-      />
-      <slot
-        name="toolbar"
-      />
-      <slot
-        name="default"
-      />
-    </FSCol>
-  </template>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-
-export default defineComponent({
-  name: "FSSkeletonView",
-  setup() {
-    const { isExtraSmall } = useBreakpoints();
-
-    return {
-      isExtraSmall
-    };
-  }
-});
-</script>