@dative-gpi/foundation-shared-components 1.0.70 → 1.0.71-groupings-2

package/components/FSEditImageUI.vue

@@ -81,14 +81,14 @@
                 font="text-overline"
                 :style="style"
               >
-                {{ $tr('ui.edit-image.format', 'PNG or JPG format') }}
+                {{ $tr('edit-image.format', 'PNG or JPG format') }}
               </FSText>
               <FSText
                 class="fs-edit-image-overline"
                 font="text-overline"
                 :style="style"
               >
-                {{ $tr('ui.edit-image.size', '10 MB Maximum') }}
+                {{ $tr('edit-image.max-size', '10 MB Maximum') }}
               </FSText>
             </FSCol>
           </FSCol>
@@ -154,7 +154,7 @@
           font="text-body"
           :lineClamp="2"
         >
-          {{ $tr('ui.edit-image.add-image', 'Add an image.') }}
+          {{ $tr('edit-image.add-image', 'Add an image.') }}
         </FSText>
         <FSButtonFileMini
           class="fs-edit-image-hidden-button"
@@ -243,7 +243,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ["update:modelValue", "update:source"],
+  emits: ["update", "update:modelValue", "update:source"],
   setup(props, { emit }) {
     const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
@@ -266,9 +266,15 @@ export default defineComponent({
       const content = (await readFile(payload)) as string;
       fileSelected.value.fileName = payload.name;
       fileSelected.value.fileContent = content;
-      emit("update:modelValue", content.substring(content.indexOf(',') + 1));
+      const newModelValue = content.substring(content.indexOf(',') + 1);
       if (props.source) {
+        emit("update:modelValue", newModelValue);
         emit("update:source", null);
+        emit("update", { source: null, modelValue: newModelValue });
+      } 
+      else {
+        emit("update:modelValue", newModelValue);
+        emit("update", { source: props.source, modelValue: newModelValue });
       }
     };
 
@@ -277,9 +283,11 @@ export default defineComponent({
       fileSelected.value.fileContent = null;
       if (props.modelValue) {
         emit("update:modelValue", null);
+        emit("update", { source: props.source, modelValue: null });
       }
       else {
         emit("update:source", null);
+        emit("update", { source: null, modelValue: props.modelValue });
       }
     };
 

package/components/FSFadeOut.vue

@@ -3,15 +3,14 @@
     class="fs-fade-out"
     ref="fadeOutRef"
     :id="elementId"
-    :style="style"
-    @scroll="debounceMasks"
+    @scroll="$emit('scroll', $event); debounceMasks()"
   >
     <slot />
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -45,17 +44,41 @@ export default defineComponent({
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "64px"
+    },
+    scrollOutside: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    hideHorizontalOverflow: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    disableTopMask: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disableBottomMask: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    style:{
+      type: Object,
+      required: false
     }
   },
   emits: ["scroll"],
-  setup(props, { emit }) {
-    const { windowHeight, windowWidth } = useBreakpoints();
+  setup(props) {
+    const { windowHeight, windowWidth, isTouchScreenEnabled } = useBreakpoints();
     const { debounce } = useDebounce();
     const { getColors } = useColors();
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const fadeOutRef = ref(null);
+    const fadeOutRef = ref<HTMLElement | null>(null);
     const bottomMaskHeight = ref("0px");
     const topMaskHeight = ref("0px");
     const lastScroll = ref(0);
@@ -64,14 +87,21 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): StyleValue => ({
-      "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : undefined,
-      "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : undefined,
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled.value);
+
+    const style = computed((): {[index: string]: string} => ({
+      "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
+      "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
+      "--fs-fade-out-width-offset"      : showOutsideScrollbar.value ? '12px' : '0px',
+      "--fs-fade-out-padding-offset"    : showOutsideScrollbar.value ? '4px' : '0px',
+      "--fs-fade-out-margin-right"      : showOutsideScrollbar.value ? '-12px' : '0px',
       "--fs-fade-out-mask-color"        : backgrounds.base,
-      "--fs-fade-out-top-mask-height"   : topMaskHeight.value,
-      "--fs-fade-out-bottom-mask-height": bottomMaskHeight.value
+      "--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-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto', 
+      ...props.style
     }));
 
     const handleMasks = () => {
@@ -93,20 +123,13 @@ export default defineComponent({
         else {
           topMaskHeight.value = sizeToVar(props.maskHeight);
         }
-
-        const event = {
-          target: fadeOutRef.value,
-          onTop: topMaskHeight.value === "0px",
-          onBottom: bottomMaskHeight.value === "0px",
-          goingUp: (fadeOutRef.value as any).scrollTop < lastScroll.value,
-        };
-
-        emit("scroll", event);
+        
         lastScroll.value = (fadeOutRef.value as any).scrollTop;
       }
     };
 
-    const debounceMasks = (): void => debounce(handleMasks, 50);
+    // Delay to wait for animations to end before computing masks
+    const debounceMasks = (): void => debounce(handleMasks, 280);
 
     onMounted((): void => {
       debounceMasks();
@@ -129,6 +152,15 @@ export default defineComponent({
 
     watch([() => windowWidth.value, () => windowHeight.value], debounceMasks);
 
+    watch(() => [style.value, fadeOutRef.value], () => {
+      if(!fadeOutRef.value || !style.value) {
+        return;
+      }
+      for(const key in style.value){
+        fadeOutRef.value.style.setProperty(key, style.value[key])
+      }
+    }, { immediate: true})
+
     return {
       fadeOutRef,
       elementId,

package/components/FSForm.vue

@@ -12,6 +12,9 @@
 
 <script lang="ts">
 import type { PropType} from "vue";
+
+import type VForm from "vuetify/lib/components/VForm";
+
 import { computed, defineComponent, provide, ref } from "vue";
 
 export default defineComponent({
@@ -30,7 +33,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "submit"],
   setup(props, { emit }) {
-    const formRef = ref<HTMLFormElement | null>(null);
+    const formRef = ref<typeof VForm | null>(null);
     const submitted = ref(false);
 
     const validateOn = computed((): "submit" | "input"  => {
@@ -44,25 +47,24 @@ export default defineComponent({
       event.stopImmediatePropagation();
       event.preventDefault();
       submitted.value = true;
-      await (formRef.value as any).validate();
-      emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
-      emit("submit", !!((formRef.value as any).isValid ?? true));
+      await formRef.value.validate();
+      emit("update:modelValue", !!(formRef.value.isValid ?? true));
+      emit("submit", !!(formRef.value.isValid ?? true));
     }; 
 
     const validate = async () => {
       submitted.value = true;
-      await (formRef.value as any).validate();
-      emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
+      return await formRef.value.validate();
     };
 
     const reset = () => {
       submitted.value = false;
-      (formRef.value as any).reset();
+      formRef.value.reset();
     };
 
     const resetValidation = () => {
       submitted.value = false;
-      (formRef.value as any).resetValidation();
+      formRef.value.resetValidation();
     };
 
     provide("validateOn", validateOn);

package/components/FSGrid.vue

@@ -52,7 +52,6 @@
           </template>
         </template>
       </FSCol>
-      <v-spacer />
       <FSRow
         v-if="itemEndSlot(item.code)"
         align="center-right"

package/components/FSIcon.vue

@@ -13,7 +13,7 @@
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
 
 import { sizeToVar } from "../utils";
 
@@ -31,7 +31,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<ColorBaseVariations>,
       required: false,
       default: "base"
     }

package/components/FSIconCard.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCard
     :variant="$props.backgroundVariant"
+    :borderColor="$props.backgroundVariant === 'background' ? ColorEnum.Light : null"
     :color="$props.backgroundColor"
     :border="$props.border"
     :height="$props.size"
@@ -9,10 +10,10 @@
     <FSRow
       align="center-center"
     >
-      <FSIcon 
-        :variant="$props.iconVariant"
-        :color="$props.iconColor"
-        :size="$props.iconSize"
+      <FSIcon
+        :variant="iconVariant"
+        :color="iconColor"
+        :size="actualIconSize"
       >
         {{ $props.icon }}
       </FSIcon>
@@ -21,9 +22,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, type PropType, computed } from "vue";
 
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type ColorBase, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
+
+import { sizeToVar } from "../utils";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
@@ -43,7 +46,7 @@ export default defineComponent({
     backgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
-      default: null
+      default: ColorEnum.Background
     },
     backgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
@@ -57,24 +60,77 @@ export default defineComponent({
     },
     iconColor: {
       type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Primary
+      required: false
     },
     iconVariant: {
-      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<ColorBaseVariations | null>,
       required: false,
-      default: "base"
+      default: null
     },
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "42px"
+      default: null
     },
     border: {
       type: Boolean,
       required: false,
       default: true
     }
+  },
+  setup(props){
+    const actualIconSize = computed(() => {
+      if (props.iconSize){
+        return props.iconSize;
+      }
+      else if (props.size) {
+        return `calc(${sizeToVar(props.size)} * 0.42)`;
+      }
+      return "42px";
+    });
+
+    const iconVariant = computed((): ColorBaseVariations | undefined => {
+      if (props.iconVariant) {
+        return props.iconVariant;
+      }
+      if (props.iconColor) {
+        return "base";
+      }
+
+      switch (props.backgroundVariant) {
+        case "background":
+          return "lightContrast";
+        case "standard":
+          return "lightContrast";
+        case "full":
+          return "baseContrast";
+        case "gradient":
+          return "baseContrast";
+        default:
+          return "base";
+      }
+    });
+
+    const iconColor = computed((): ColorBase | undefined => {
+      if (props.iconColor) {
+        return props.iconColor;
+      }
+      
+      if(Array.isArray(props.backgroundColor)) {
+        return props.backgroundColor[Math.floor(props.backgroundColor.length/2)];
+      }
+      if(props.backgroundVariant === "background") {
+        return ColorEnum.Light;
+      }
+      return props.backgroundColor;
+    });
+
+    return {
+      actualIconSize,
+      iconVariant,
+      ColorEnum,
+      iconColor,
+    };
   }
 });
 </script>

package/components/FSInformationsMenu.vue

@@ -0,0 +1,142 @@
+<template>
+  <FSMenu
+    :location="$props.location"
+    :closeOnContentClick="false"
+    minWidth="0"
+    v-model="modelValue"
+    v-bind="$attrs"
+  >
+    <template
+      #activator="{ props }"
+    >
+      <slot
+        name="activator"
+        v-bind="props"
+      >
+        <FSButton
+          v-bind="props"
+          :color="$props.iconColor"
+          :iconSize="$props.iconSize"
+          variant="icon"
+          icon="mdi-information-outline"
+        />
+      </slot>
+    </template>
+    <slot
+      name="menuContent"
+    >
+      <FSCard
+        :maxWidth="$props.maxWidth"
+        :width="$props.width"
+        :padding="$props.padding"
+        :elevation="true"
+        align="center"
+      >
+        <slot
+          name="cardContent"
+        >
+          <FSRow
+            align="center-center"
+          >
+            <FSText
+              font="text-body"
+              :lineClamp="$props.lineClamp"
+            >
+              {{ $props.content }}
+            </FSText>
+          </FSRow>
+        </slot>
+        <template
+          v-if="$props.showCloseButton"
+          #top-right
+        >
+          <FSButton
+            variant="icon"
+            icon="mdi-close"
+            iconSize="18px"
+            :color="lightColors.dark"
+            @click="modelValue = false"
+          />
+        </template>
+      </FSCard>
+    </slot>
+  </FSMenu>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type PropType } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
+
+export default defineComponent({
+  name: "FSInformationsMenu",
+  components: {
+    FSMenu,
+    FSCard,
+    FSRow,
+    FSText,
+    FSButton
+  },
+  props: {
+    content: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    location: {
+      type: String,
+      default: "top"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: null
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: null
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: "16px 8px"
+    },
+    iconSize: {
+      type: String,
+      default: "18px"
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      default: ColorEnum.Primary
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
+    lineClamp: {
+      type: Number,
+      default: 4
+    }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const modelValue = ref(false);
+
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+
+    return {
+      ColorEnum,
+      modelValue,
+      lightColors
+    };
+  }
+});
+</script>