@dative-gpi/foundation-shared-components 1.0.94 → 1.0.96

package/components/FSDialogContent.vue

@@ -19,13 +19,16 @@
           >
             {{ $props.title }}
           </FSText>
-          <v-spacer />
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            :color="ColorEnum.Dark"
-            @click="$emit('update:modelValue', false)"
-          />
+          <FSRow
+            align="center-right"
+          >
+            <FSButton
+              icon="mdi-close"
+              variant="icon"
+              :color="ColorEnum.Dark"
+              @click="$emit('update:modelValue', false)"
+            />
+          </FSRow>
         </FSRow>
         <FSText
           v-if="$props.subtitle"

package/components/FSDialogFormBody.vue

@@ -236,9 +236,9 @@ 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(() => {

package/components/FSDialogMultiFormBody.vue

@@ -192,9 +192,10 @@ 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(() => {

package/components/FSDialogSubmit.vue

@@ -179,9 +179,9 @@ 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(() => {

package/components/FSEditImageUI.vue

@@ -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

@@ -117,20 +117,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, 1);
+    // Delay to wait for animations to end before computing masks
+    const debounceMasks = (): void => debounce(handleMasks, 280);
 
     onMounted((): void => {
       debounceMasks();

package/components/FSGrid.vue

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

package/components/FSTab.vue

@@ -26,19 +26,6 @@
             {{ $props.label }}
           </FSSpan>
         </slot>
-        <v-spacer
-          v-if="$props.tag"
-        />
-        <slot
-          name="tag"
-        >
-          <FSSpan
-            v-if="$props.tag"
-            class="fs-tab-tag"
-          >
-            {{ $props.tag }}
-          </FSSpan>
-        </slot>
         <slot
           name="append"
         >
@@ -49,6 +36,21 @@
             {{ $props.appendIcon }}
           </FSIcon>
         </slot>
+        <FSRow
+          align="center-right"
+          :wrap="false"
+        >
+          <slot
+            name="tag"
+          >
+            <FSSpan
+              v-if="$props.tag"
+              class="fs-tab-tag"
+            >
+              {{ $props.tag }}
+            </FSSpan>
+          </slot>
+        </FSRow>
       </FSRow>
     </slot>
   </v-tab>

package/components/agenda/FSAgenda.vue

@@ -141,7 +141,7 @@ export default defineComponent({
       required: false
     }
   },
-  emits: ['update:mode', 'click:eventId', 'update:start', 'update:end'],
+  emits: ['update', 'update:mode', 'click:eventId', 'update:start', 'update:end'],
   setup(props, { emit }) {
     const { todayToEpoch, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
     const { isExtraSmall } = useBreakpoints();
@@ -167,18 +167,27 @@ export default defineComponent({
         return;
       }
       if (props.mode === AgendaMode.Week) {
-        emit("update:start", epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000));
-        emit("update:end", epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000));
+        const newStart = epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000);
+        const newEnd = epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000);
+        emit("update:start", newStart);
+        emit("update:end", newEnd);
+        emit("update", { start: newStart, end: newEnd, mode: props.mode });
         return;
       }
       if (props.mode === AgendaMode.Month) {
         const lastDayOfMonth = new Date(new Date(now.value).getFullYear(), new Date(now.value).getMonth() + 1, 0);
-        emit("update:start", epochToLocalDayStart(new Date(now.value).setDate(1)));
-        emit("update:end", lastDayOfMonth.getTime());
+        const newStart = epochToLocalDayStart(new Date(now.value).setDate(1));
+        const newEnd = lastDayOfMonth.getTime()
+        emit("update:start", newStart);
+        emit("update:end", newEnd );
+        emit("update", { start: newStart, end: newEnd, mode: props.mode });
         return;
       }
-      emit("update:start", epochToLocalDayStart(now.value));
-      emit("update:end", epochToLocalDayEnd(now.value));
+      const newStart = epochToLocalDayStart(now.value);
+      const newEnd = epochToLocalDayEnd(now.value);
+      emit("update:start", newStart);
+      emit("update:end", newEnd);
+      emit("update", { start: newStart, end: newEnd, mode: props.mode });
     });
 
     onUnmounted(() => {
@@ -188,8 +197,18 @@ export default defineComponent({
     watch(isExtraSmall, (value) => {
       if (value && props.mode !== AgendaMode.Day) {
         emit('update:mode', AgendaMode.Day);
+        emit("update", {
+          start: props.start,
+          end: props.end,
+          mode: AgendaMode.Day
+        });
       } else if (!value && defaultMode.value !== AgendaMode.Day) {
         emit('update:mode', defaultMode.value);
+        emit("update", {
+          start: props.start,
+          end: props.end,
+          mode: defaultMode.value
+        });
       }
     });
 

package/components/agenda/FSAgendaHeader.vue

@@ -16,12 +16,18 @@
           @click="onPrevious"
         />
         <FSButton
-          width="180px"
+          width="220px"
           color="primary"
           :border="false"
-          :label="epochToMonthYearOnlyFormat($props.start)"
           @click="showCalendarDialog = true"
-        />
+        >
+          <FSSpan
+            class="fs-agenda-header-text"
+            font="text-h3"
+          >
+            {{ epochToMonthYearOnlyFormat($props.start) }}
+          </FSSpan>
+        </FSButton>
         <FSButton
           variant="icon"
           icon="mdi-chevron-right"
@@ -89,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from 'vue';
+import { defineComponent, type PropType, ref, watch } from 'vue';
 
 import { useDateFormat } from '@dative-gpi/foundation-shared-services/composables';
 
@@ -100,6 +106,7 @@ import FSRow from '../FSRow.vue';
 import FSButton from '../FSButton.vue';
 import FSSelectAgendaMode from './FSSelectAgendaMode.vue';
 import FSAgendaDialogCalendar from './FSAgendaDialogCalendar.vue';
+import FSSpan from '../FSSpan.vue';
 
 export default defineComponent({
   name: 'FSAgendaHeader',
@@ -108,6 +115,7 @@ export default defineComponent({
     FSSelectAgendaMode,
     FSCol,
     FSButton,
+    FSSpan,
     FSRow
   },
   props: {
@@ -128,7 +136,7 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['update:start', 'update:end', 'update:mode'],
+  emits: ['update', 'update:start', 'update:end', 'update:mode'],
   setup(props, { emit }) {
     const { epochToMonthYearOnlyFormat, epochToDayMonthLongOnly, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
 
@@ -137,18 +145,24 @@ export default defineComponent({
     const updateDateRange = (dayStart: number) => {
       const newStart = epochToLocalDayStart(dayStart);
       if (props.mode === AgendaMode.Week) {
+        const newEnd = epochToLocalDayEnd(newStart + (7 - new Date(newStart).getDay()) * 24 * 60 * 60 * 1000)
         emit('update:start', newStart);
-        emit('update:end', epochToLocalDayEnd(newStart + (7 - new Date(newStart).getDay()) * 24 * 60 * 60 * 1000));
+        emit('update:end', newEnd);
+        emit('update', { start: newStart, end: newEnd, mode: props.mode })
         return;
       }
       if (props.mode === AgendaMode.Month) {
         emit('update:start', newStart);
         const lastDayOfMonth = new Date(new Date(newStart).getFullYear(), new Date(newStart).getMonth() + 1, 0);
-        emit('update:end', epochToLocalDayEnd(lastDayOfMonth.getTime()));
+        const newEnd = epochToLocalDayEnd(lastDayOfMonth.getTime());
+        emit('update:end', newEnd);
+        emit('update', { start: newStart, end: newEnd, mode: props.mode })
         return;
       }
+      const newEnd = epochToLocalDayEnd(newStart);
       emit('update:start', newStart);
-      emit('update:end', epochToLocalDayEnd(newStart));
+      emit('update:end', newEnd);
+      emit('update', { start: newStart, end: newEnd, mode: props.mode })
     }
 
     const onNext = () => {
@@ -175,6 +189,17 @@ export default defineComponent({
       }
     }
 
+    watch(() => props.mode, (newMode) => {
+      const dayBtwStartAndEnd = props.start + (props.end - props.start) / 2;
+      if (newMode === AgendaMode.Week) {
+        updateDateRange(dayBtwStartAndEnd - (new Date(dayBtwStartAndEnd).getDay() - 1) * 24 * 60 * 60 * 1000);
+      } else if (newMode === AgendaMode.Month) {
+        updateDateRange(new Date(dayBtwStartAndEnd).setDate(1));
+      } else if (newMode === AgendaMode.Day) {
+        updateDateRange(dayBtwStartAndEnd);
+      }
+    });
+
     return {
       AgendaMode,
       showCalendarDialog,

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -15,7 +15,7 @@
     @click="$emit('click', $props.id)"
   >
     <template
-      #default="{ label, icon, timeStart, timeEnd, iconBis, variant }"
+      #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
     >
       <slot
         name="default"
@@ -25,6 +25,7 @@
         :timeStart="timeStart"
         :timeEnd="timeEnd"
         :variant="variant"
+        :width="width"
       />
     </template>
   </FSAgendaHorizontalEvent>
@@ -47,6 +48,7 @@
       :timeStart="epochToShortTimeOnlyFormat($props.start)"
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
+      :width="width"
     />
   </FSClickable>
 </template>

package/components/agenda/FSAgendaHoursRow.vue

@@ -7,6 +7,7 @@
       :wrap="false"
       gap="0"
       align="center-center"
+      :style="style"
     >
       <FSRow
         v-for="hour in hours"
@@ -36,14 +37,14 @@
       </FSRow>
     </FSRow>
     <FSRow
-      class="fs-agenda-hours-row"
+      class="fs-agenda-hours-row-markers"
       :wrap="false"
       gap="0"
     >
       <FSRow
-        v-for="hour in hours"
-        :key="hour"
-        :style="getMarkerStyle(displayNow && hour === modelValue)"
+        v-for="hour in 24"
+        :key="hour-1"
+        :style="getMarkerStyle(displayNow && hour-1 === modelValue)"
         width="100%"
         height="0"
         align="center-center"
@@ -59,7 +60,7 @@
 <script lang="ts">
 import { defineComponent, computed, type StyleValue } from 'vue';
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSText from '../FSText.vue';
@@ -90,13 +91,27 @@ export default defineComponent({
   },
   setup() {
     const { getColors } = useColors();
+    const { isMobileSized } = useBreakpoints();
 
     const lightColors = getColors(ColorEnum.Light);
     const primaryColors = getColors(ColorEnum.Primary);
     const fontColor = lightColors.dark;
 
+    const hoursToShow = computed(() => {
+      if(isMobileSized.value) {
+        return 12;
+      }
+      return 24;
+    });
+
     const hours = computed(() => {
-      return Array.from({ length: 24 }, (_, i) => i);
+      return Array.from({ length: hoursToShow.value }, (_, i) => i * (24 / hoursToShow.value));
+    });
+
+    const style = computed((): StyleValue => {
+      return {
+        '--fs-agenda-hours-row-transform': `translateX(calc(-${2.4 * 24 / hoursToShow.value}%))`,
+      }
     });
 
     const getMarkerStyle = (isNowHour: boolean): StyleValue => {
@@ -113,8 +128,9 @@ export default defineComponent({
     const to2Digits = (value: number) => value.toString().padStart(2, '0');
 
     return {
-      fontColor,
       hours,
+      style,
+      fontColor,
       getMarkerStyle,
       to2Digits
     };

package/components/agenda/FSWeekAgenda.vue

@@ -125,7 +125,7 @@
               @click="() => $emit('click:eventId', event.id)"
             >
               <template
-                #default="{ label, icon, timeStart, timeEnd, iconBis, variant }"
+                #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
               >
                 <FSRow
                   align="center-left"
@@ -158,7 +158,7 @@
                     </FSRow>
                   </FSCol>
                   <FSCol
-                    v-if="iconBis && variant !== 'current'"
+                    v-if="iconBis && variant !== 'current' && width > 13"
                     align="center-right"
                     padding="8px 8px 8px 0" 
                     width="hug"

package/components/fields/FSBaseField.vue

@@ -7,39 +7,43 @@
       name="label"
     >
       <FSRow
+        gap="40px"
         :wrap="false"
       >
-        <FSSpan
-          class="fs-base-field-label"
-          font="text-overline"
+        <FSRow
+          gap="2px"
+          :width="widths.label"
+          :wrap="false"
         >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-base-field-label"
-          style="margin-left: -8px;"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-        <v-spacer
-          style="min-width: 40px;"
-        />
-        <template
-          v-if="$props.messages"
+          <FSSpan
+            class="fs-base-field-label"
+            font="text-overline"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSSpan
+            v-if="$props.label && $props.required"
+            class="fs-base-field-label"
+            font="text-overline"
+            :ellipsis="false"
+            :style="style"
+          >
+            *
+          </FSSpan>
+        </FSRow>
+        <FSRow
+          align="center-right"
+          :width="widths.messages"
         >
           <FSSpan
-            v-if="$props.messages.length > 0"
+            v-if="$props.messages && $props.messages.length > 0"
             class="fs-base-field-messages"
             font="text-overline"
             :style="style"
           >
             {{ $props.messages.join(", ") }}
           </FSSpan>
-        </template>
+        </FSRow>
       </FSRow>
     </slot>
     <slot />
@@ -136,7 +140,13 @@ export default defineComponent({
       };
     });
 
+    const widths = computed(() => ({
+      label: props.messages && props.messages.length ? "calc(50% - 40px)" : "100%",
+      messages: props.messages && props.messages.length ? "50%" : "0"
+    }));
+
     return {
+      widths,
       style,
       slots
     };

package/components/fields/FSColorField.vue

@@ -152,7 +152,7 @@ export default defineComponent({
       default: "fill"
     }
   },
-  emits: ["update:modelValue", "update:opacity"],
+  emits: ["update", "update:modelValue", "update:opacity"],
   setup(props, { emit }) {
     const { getColors, getBasePaletteColors } = useColors();
     const { slots } = useSlots();
@@ -192,6 +192,7 @@ export default defineComponent({
       fullColor.value = innerColor.value + innerOpacity.value;
       emit("update:modelValue", innerColor.value);
       emit("update:opacity", getPercentageFromHex(innerOpacity.value));
+      emit("update", { modelValue: innerColor.value, opacity: getPercentageFromHex(innerOpacity.value) });
     };
 
     const reset = (): void => {

package/components/fields/FSIconField.vue

@@ -28,7 +28,6 @@
       </template>
     </FSTextField>
     <FSToggleSet
-      class="fs-icon-field-set"
       ref="toggleSetRef"
       variant="slide"
       :buttonColor="$props.buttonColor"

package/components/fields/FSNumberField.vue

@@ -43,10 +43,14 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(_, { emit }) {
-    const onUpdate = (value: string) => {
+    const onUpdate = (value: string | null | undefined) => {
       if (value === "-") {
         return;
       }
+      if(value === null || value === undefined) {
+        emit("update:modelValue", null);
+        return;
+      }
       const match = /[-]?([0-9 ]*[,.]?)?[0-9]*/.exec(value);
       if (match != null && !isNaN(parseFloat(match[0].replace(",", ".").replace(" ", "")))) {
         emit("update:modelValue", parseFloat(match[0].replace(",", ".").replace(" ", "")));

package/components/fields/FSRichTextField.vue

@@ -29,9 +29,10 @@
           </FSSpan>
         </FSRow>
       </slot>
-      <v-spacer />
-      <template
+      <FSRow
         v-if="$props.editable"
+        align="center-right"
+        :wrap="false"
       >
         <FSIcon
           class="fs-rich-text-field-icon"
@@ -177,7 +178,7 @@
         >
           mdi-format-align-justify
         </FSIcon>
-      </template>
+      </FSRow>
     </FSRow>
     <FSText
       v-if="readonly && !$props.modelValue && $props.emptyLabel"

package/components/fields/FSTermField.vue

@@ -165,7 +165,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:startDate", "update:endDate"],
+  emits: ["update", "update:startDate", "update:endDate"],
   setup(props, { emit }) {
     const { parseForPicker, epochToISO, todayToPicker, yesterdayToPicker } = useDateFormat();
     const { getMessages } = useRules();
@@ -206,6 +206,7 @@ export default defineComponent({
       innerStartDate.value = value;
       if (valid.value) {
         emit("update:startDate", value);
+        emit("update", { startDate: innerStartDate.value, endDate: props.endDate });
       }
     };
 
@@ -219,6 +220,7 @@ export default defineComponent({
       innerEndDate.value = value;
       if (valid.value) {
         emit("update:endDate", value);
+        emit("update", { startDate: props.startDate, endDate: innerEndDate.value });
       }
     };
 
@@ -354,6 +356,7 @@ export default defineComponent({
       }
       emit("update:startDate", innerStartDate.value);
       emit("update:endDate", innerEndDate.value);
+      emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
     };
 
     const innerDateValueChange = (value: number) => {
@@ -417,6 +420,7 @@ export default defineComponent({
       }
       emit("update:startDate", innerStartDate.value);
       emit("update:endDate", innerEndDate.value);
+      emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
     };
 
     const onPickDates = (value: number[] | null) => {
@@ -426,6 +430,7 @@ export default defineComponent({
         if (valid.value) {
           emit("update:startDate", innerStartDate.value);
           emit("update:endDate", innerEndDate.value);
+          emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
         }
       }
       else {
@@ -433,12 +438,14 @@ export default defineComponent({
           innerStartDate.value = epochToISO(value[0]);
           if (valid.value) {
             emit("update:startDate", innerStartDate.value);
+            emit("update", { startDate: innerStartDate.value, endDate: props.endDate });
           }
         }
         if (value && value[1] != null && epochToISO(value[1]) !== innerEndDate.value) {
           innerEndDate.value = epochToISO(value[1]);
           if (valid.value) {
             emit("update:endDate", innerEndDate.value);
+            emit("update", { startDate: props.startDate, endDate: innerEndDate.value });
           }
         }
       }