@dative-gpi/foundation-shared-components 1.0.71 → 1.0.74

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -0,0 +1,132 @@
+<template>
+  <FSFadeOut
+    height="100%"
+    maxHeight="100%"
+    :scrollOutside="false"
+    :disableTopMask="true"
+  >
+    <FSCol
+      height="fill"
+      gap="0px"
+    >
+      <slot
+        name="header"
+      >
+
+        <FSRow
+          padding="24px 16px 16px 24px"
+          style="position: sticky; top: 0px; z-index: 1;"
+          :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+        >
+          <slot
+            name="title"
+          >
+            <FSText
+              font="text-h2"
+            >
+              {{ $props.title }}
+            </FSText>
+          </slot>
+        </FSRow>
+        <FSCol
+          v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
+          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          gap="16px"
+        >
+          <FSCol>
+            <slot
+              name="breadcrumbs"
+            >
+              <FSBreadcrumbs
+                :items="$props.breadcrumbs"
+              />
+            </slot>
+          </FSCol>
+        </FSCol>
+        <FSRow
+          v-if="$slots.toolbar"
+          padding="0px 16px 8px 24px"
+          :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 1; background-color: ${backgroundColor}` : undefined"
+        >
+          <FSSlideGroup>
+            <slot
+              name="toolbar"
+            />
+          </FSSlideGroup>
+        </FSRow>
+      </slot>
+
+      <FSCol
+        height="fill"
+        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
+        gap="0px"
+      >
+        <slot />
+      </FSCol>
+    </FSCol>
+  </FSFadeOut>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, computed } from "vue";
+
+import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { useColors } from "../../../composables"
+ 
+import FSCol from "../../FSCol.vue";
+import FSRow from "../../FSRow.vue"
+import FSText from "../../FSText.vue";
+import FSBreadcrumbs from "../../FSBreadcrumbs.vue";
+import FSSlideGroup from "../../FSSlideGroup.vue";
+import FSFadeOut from "../../FSFadeOut.vue"
+
+export default defineComponent({
+  name: "FSBaseDefaultDesktopView",
+  components: {
+    FSCol,
+    FSRow,
+    FSText,
+    FSBreadcrumbs,
+    FSSlideGroup,
+    FSFadeOut
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    breadcrumbs: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: false,
+      default: () => []
+    },
+    stickyToolbar: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    toolbarTopOffset: {
+      type: String,
+      required: false,
+      default: "72px" 
+    },
+    stickyTitleTopOffset: {
+      type: String,
+      required: false,
+      default: "0px"
+    }
+  },
+  setup(){
+    const { getColors } = useColors();
+
+    const backgroundColor = computed(() => {
+      return getColors(ColorEnum.Background).base;
+    });
+
+    return {
+      backgroundColor
+    }
+  }
+});
+</script>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -0,0 +1,199 @@
+<template>
+  <FSBaseDefaultMobileView
+    :toolbarTopOffset="topOffset + 'px'"
+    :stickyTitleTopOffset="topOffset + 'px'"
+    @scroll="onScroll"
+  >
+    <template
+      #title
+    >
+      <FSRow
+        gap="24px"
+        :wrap="false"
+      >
+        <FSImage 
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :cover="$props.imageCover"
+          :height="actualImageSize"
+          :width="actualImageSize"
+        />
+        <FSIconCard
+          v-else-if="$props.icon"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColors"
+          :border="$props.iconBorder"
+          :icon="$props.icon"
+          :iconColor="$props.color"
+          :size="actualImageSize"
+        />
+        <FSCol
+          align="center-left"
+          height="fill"
+        >
+          <slot
+            name="title"
+          >
+            <FSText
+              font="text-h3"
+            >
+              {{ $props.title }}
+            </FSText>
+            <slot
+              name="title-extra"
+              v-bind="{ topOffset }"
+            >
+              <slot
+                name="subtitle"
+              >
+                <FSText
+                  v-if="$props.subtitle && topOffset < 60"
+                  font="text-button"
+                >
+                  {{ $props.subtitle }}
+                </FSText>
+              </slot>
+              <slot
+                name="description"
+              >
+                <FSText
+                  v-if="$props.description && topOffset < 20"
+                  font="text-body"
+                >
+                  {{ $props.description }}
+                </FSText>
+              </slot>
+            </slot>
+          </slot>
+        </FSCol>
+      </FSRow>
+    </template>
+
+    <template
+      v-for="(_, name) in slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseDefaultMobileView>
+</template>
+
+<script lang="ts">
+import { defineComponent, useSlots, type PropType, computed, ref } from "vue";
+
+import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+
+import { sizeToVar } from "../../../utils"
+ 
+import FSCol from "../../FSCol.vue";
+import FSRow from "../../FSRow.vue"
+import FSText from "../../FSText.vue";
+import FSImage from "../../FSImage.vue";
+import FSIconCard from "../../FSIconCard.vue"
+
+import FSBaseDefaultMobileView from "./FSBaseDefaultMobileView.vue";
+
+export default defineComponent({
+  name: "FSBaseEntityMobileView",
+  components: {
+    FSCol,
+    FSRow,
+    FSText,
+    FSBaseDefaultMobileView,
+    FSImage,
+    FSIconCard,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    subtitle: {
+      type: String,
+      required: false
+    },
+    description: {
+      type: String,
+      required: false
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageCover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    imageSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["124px", "96px", "80px"]
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: false,
+      default: "mdi-ab-testing"
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    iconBorder: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    minImageSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["48px", "48px", "48px"]
+    }
+  },
+  setup(props){
+    const slots = { ...useSlots() };
+
+    const topOffset = ref(0);
+
+    const actualImageSize = computed(() => {
+      const size = sizeToVar(props.imageSize);
+      const minSize = sizeToVar(props.minImageSize);
+      return `max(calc(${size} - ${topOffset.value}px), ${minSize})`;
+    });
+
+    const onScroll = (event: Event) => {
+      const actualScrollTop = (event.target as HTMLElement).scrollTop;
+
+      const minSize = sizeToVar(props.minImageSize);
+      const actualMinSize = parseInt(minSize);
+
+      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
+    }
+
+
+    delete slots.title;
+
+    return {
+      slots,
+      onScroll,
+      topOffset,
+      actualImageSize
+    }
+  }
+});
+</script>

package/components/views/mobile/FSBaseMobileView.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSBaseDefaultMobileView
+    v-if="$props.variant === 'default'"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseDefaultMobileView>
+
+  <FSBaseEntityMobileView
+    v-if="$props.variant === 'entity'"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseEntityMobileView>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSBaseDefaultMobileView from "./FSBaseDefaultMobileView.vue";
+import FSBaseEntityMobileView from "./FSBaseEntityMobileView.vue";
+
+export default defineComponent({
+  name: "FSBaseMobileView",
+  components: {
+    FSBaseDefaultMobileView,
+    FSBaseEntityMobileView
+  },
+  props: {
+    variant: {
+      type: String as PropType<"default" | "entity">,
+      required: false,
+      default: "default"
+    }
+  }
+});
+</script>

package/package.json

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

package/styles/components/fs_breadcrumbs.scss

@@ -16,21 +16,15 @@
     }
 }
 
-.fs-breadcrumbs-divider {
-    margin-bottom: 2px !important;
-}
+// .fs-breadcrumbs-divider {
+//     margin-bottom: 2px !important;
+// }
 
-.v-breadcrumbs {
+.fs-breadcrumbs.v-breadcrumbs {
+    line-height: normal!important;
     padding: 0 !important;
     gap: 8px !important;
-
-    @include web {
-        height: 24px;
-    }
-
-    @include mobile {
-        height: 20px;
-    }
+    height: 20px;
 }
 
 .v-breadcrumbs-item {

package/styles/components/fs_clickable.scss

@@ -7,6 +7,7 @@
     background-color: var(--fs-clickable-background-color) !important;
     border-color: var(--fs-clickable-border-color) !important;
     color: var(--fs-clickable-color) !important;
+    box-sizing: border-box;
 
     &.fs-clickable-disabled {
         cursor: default;

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>