@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/FSDialogMultiFormBody.vue

@@ -1,60 +1,68 @@
 <template>
-  <FSWindow
-    width="100%"
-    :modelValue="currentStep - 1"
+  <FSCol
+    gap="24px"
   >
-    <FSForm
-      v-for="(step, index) in $props.steps"
-      :variant="$props.variant"
-      :key="index"
-      @submit="onSubmit"
-      v-model="valid"
+    <FSPagination
+      width="calc(100% - 16px)"
+      :pages="$props.steps"
+      :modelValue="currentStep - 1"
+    />
+    <FSWindow
+      width="100%"
+      :modelValue="currentStep - 1"
     >
-      <FSCol
-        gap="24px"
+      <FSForm
+        v-for="(step, index) in $props.steps"
+        :variant="$props.variant"
+        :key="index"
+        @submit="onSubmit"
+        v-model="valid"
       >
-        <FSFadeOut
-          padding="0 8px 0 0"
-          :maxHeight="maxHeight"
+        <FSCol
+          gap="24px"
         >
-          <slot
-            :name="`step-${step}`"
-          />
-        </FSFadeOut>
-        <FSRow
-          padding="0 16px 0 0"
-        >
-          <slot
-            name="left-footer"
-          />
-          <FSRow
-            class="fs-dialog-actions"
-            align="top-right"
-            :wrap="false"
+          <FSFadeOut
+            :maxHeight="maxHeight"
           >
-            <FSButton
-              :prependIcon="$props.cancelButtonPrependIcon"
-              :appendIcon="$props.cancelButtonAppendIcon"
-              :variant="$props.cancelButtonVariant"
-              :color="$props.cancelButtonColor"
-              :label="previousButtonLabel"
-              @click="onPrevious()"
+            <slot
+              :name="`step-${step}`"
             />
-            <FSButton
-              type="submit"
-              :prependIcon="$props.submitButtonPrependIcon"
-              :appendIcon="$props.submitButtonAppendIcon"
-              :color="$props.submitButtonColor"
-              :variant="nextButtonVariant"
-              :editable="$props.editable"
-              :label="nextButtonLabel"
-              :load="$props.load"
+          </FSFadeOut>
+          <FSRow>
+            <slot
+              name="left-footer"
             />
+            <FSRow
+              class="fs-dialog-actions"
+              align="top-right"
+              :wrap="false"
+            >
+              <FSButton
+                v-if="$props.showCancelButton || currentStep > 1"
+                :prependIcon="$props.cancelButtonPrependIcon"
+                :appendIcon="$props.cancelButtonAppendIcon"
+                :variant="$props.cancelButtonVariant"
+                :color="$props.cancelButtonColor"
+                :label="previousButtonLabel"
+                @click="onPrevious()"
+              />
+              <FSButton
+                v-if="$props.showSubmitButton || currentStep < $props.steps"
+                type="submit"
+                :prependIcon="$props.submitButtonPrependIcon"
+                :appendIcon="$props.submitButtonAppendIcon"
+                :color="$props.submitButtonColor"
+                :variant="nextButtonVariant"
+                :editable="$props.editable"
+                :label="nextButtonLabel"
+                :load="$props.load"
+              />
+            </FSRow>
           </FSRow>
-        </FSRow>
-      </FSCol>
-    </FSForm>
-  </FSWindow>
+        </FSCol>
+      </FSForm>
+    </FSWindow>
+  </FSCol>
 </template>
 
 <script lang="ts">
@@ -64,17 +72,21 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSPagination from "./FSPagination.vue";
 import FSFadeOut from "./FSFadeOut.vue";
 import FSButton from "./FSButton.vue";
 import FSForm from "./FSForm.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSDialogMultiFormBody",
   components: {
+    FSPagination,
     FSFadeOut,
     FSButton,
     FSForm,
+    FSCol,
     FSRow
   },
   props: {
@@ -97,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,
@@ -122,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,
@@ -170,21 +192,22 @@ export default defineComponent({
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
+        + (props.steps > 1 ? 24 + 4 : 0)                             // Pagination
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100vh - 42px - ${other}px)`;
     });
 
     const previousButtonLabel = computed(() => {
       return currentStep.value == 1
-        ? props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel")
-        : $tr("ui.button.back", "Back");
+        ? props.cancelButtonLabel ?? $tr("ui.common.cancel", "Cancel")
+        : $tr("ui.common.back", "Back");
     });
 
     const nextButtonLabel = computed(() => {
       return currentStep.value == props.steps
-        ? props.submitButtonLabel ?? $tr("ui.button.validate", "Validate")
-        : $tr("ui.button.next", "Next");
+        ? props.submitButtonLabel ?? $tr("ui.common.validate", "Validate")
+        : $tr("ui.common.next", "Next");
     });
 
     const nextButtonVariant = computed(() => {

package/components/FSDialogRemove.vue

@@ -1,7 +1,8 @@
 <template>
   <FSDialogSubmit
+    width="460px"
     :title="title"
-    :submitButtonLabel="$tr('ui.button.remove', 'Remove')"
+    :submitButtonLabel="$tr('ui.common.remove', 'Remove')"
     :submitButtonColor="ColorEnum.Error"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -20,20 +21,20 @@
             mdi-alert-outline
           </FSIcon>
           <FSRow
-            gap="2px"
+            gap="4px"
           >
             <FSSpan>
-              {{ $tr("ui.remove-dialog.body-regular", "This action is") }}
+              {{ $tr("dialog-remove.body-regular", "This action is") }}
             </FSSpan>
             <FSSpan
               font="text-button"
             >
-              {{ $tr("ui.remove-dialog.body-bold", "definitive") }}
+              {{ $tr("dialog-remove.body-bold", "definitive") }}
             </FSSpan>
           </FSRow>
         </FSRow>
         <FSSpan>
-          {{ $tr("ui.remove-dialog.final-warning", "Once removed, entities won't be retrievable") }}
+          {{ $tr("dialog-remove.final-warning", "Once removed, entities won't be retrievable") }}
         </FSSpan>
       </FSCol>
     </template>
@@ -42,7 +43,6 @@
       v-if="$props.removing"
     >
       <FSRow
-        padding="0 16px 0 0"
         align="center-right"
         :height="footerHeight"
       >
@@ -108,10 +108,10 @@ export default defineComponent({
 
     const title = computed((): string => {
       if (props.removeTotal > 1) {
-        return $tr("ui.dialog-remove.remove-plural", "Remove {0} entities", props.removeTotal.toString());
+        return $tr("dialog-remove.remove-plural", "Remove {0} entities", props.removeTotal.toString());
       }
       else {
-        return $tr("ui.dialog-remove.remove-singular", "Remove an entity");
+        return $tr("dialog-remove.remove-singular", "Remove an entity");
       }
     });
 

package/components/FSDialogSubmit.vue

@@ -11,7 +11,6 @@
       #body
     >
       <FSFadeOut
-        padding="0 8px 0 0"
         :maxHeight="maxHeight"
       >
         <slot
@@ -25,9 +24,7 @@
       <slot
         name="footer"
       >
-        <FSRow
-          padding="0 16px 0 0"
-        >
+        <FSRow>
           <slot
             name="left-footer"
           />
@@ -36,6 +33,7 @@
             :wrap="false"
           >
             <FSButton
+              v-if="$props.showCancelButton"
               :prependIcon="$props.cancelButtonPrependIcon"
               :appendIcon="$props.cancelButtonAppendIcon"
               :variant="$props.cancelButtonVariant"
@@ -44,6 +42,7 @@
               @click="$emit('update:modelValue', false)"
             />
             <FSButton
+              v-if="$props.showSubmitButton"
               :prependIcon="$props.submitButtonPrependIcon"
               :appendIcon="$props.submitButtonAppendIcon"
               :variant="$props.submitButtonVariant"
@@ -101,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,
@@ -126,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,
@@ -170,17 +179,17 @@ export default defineComponent({
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100vh - 42px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {
-      return props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel");
+      return props.cancelButtonLabel ?? $tr("ui.common.cancel", "Cancel");
     });
 
     const submitLabel = computed(() => {
-      return props.submitButtonLabel ??  $tr("ui.button.validate", "Validate");
+      return props.submitButtonLabel ??  $tr("ui.common.validate", "Validate");
     });
 
     return {

package/components/FSEditImage.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 
     const onError = (): void => {
       if (props.imageId) {
-        console.log("onError");
+        console.error("Error loading image", props.imageId);
         getImage(props.imageId);
       }
     };

package/components/FSEditImageUI.vue

@@ -39,6 +39,7 @@
         :wrap="false"
       >
         <FSRow
+          class="fs-edit-image-standard-row"
           gap="24px"
           :wrap="false"
         >
@@ -59,6 +60,7 @@
             :width="$props.width"
           />
           <FSCol
+            class="fs-edit-image-standard-label-wrapper"
             align="center-left"
             height="fill"
             width="hug"
@@ -79,24 +81,24 @@
                 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>
         </FSRow>
-        <v-spacer />
         <FSRow
-          width="hug"
+          align="center-right"
+          :width="isExtraSmall ? '40px' : 'hug'"
         >
           <FSButtonFileMini
-            accept="image/*"
+            accept=".jpg,.jpeg,.png"
             :readFile="false"
             @update:metadata="onUpload"
           />
@@ -124,7 +126,7 @@
         padding="4px"
       >
         <FSButtonFileMini
-          accept="image/*"
+          accept=".jpg,.jpeg,.png"
           :readFile="false"
           @update:metadata="onUpload"
         />
@@ -152,12 +154,12 @@
           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"
           ref="invisibleButtonRef"
-          accept="image/*"
+          accept=".jpg,.jpeg,.png"
           :readFile="false"
           @update:metadata="onUpload"
         />
@@ -241,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();
@@ -264,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 });
       }
     };
 
@@ -275,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

@@ -27,6 +27,7 @@
         >
           <FSText
             :font="item.hideDefault ? 'text-body' : 'text-overline'"
+            variant="soft"
           >
             {{ item.label }}
           </FSText>
@@ -51,7 +52,6 @@
           </template>
         </template>
       </FSCol>
-      <v-spacer />
       <FSRow
         v-if="itemEndSlot(item.code)"
         align="center-right"

package/components/FSIcon.vue

@@ -14,7 +14,8 @@ 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 { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+
+import { sizeToVar } from "../utils";
 
 export default defineComponent({
   name: "FSIcon",