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

package/components/FSText.vue

@@ -1,20 +1,22 @@
 <template>
-  <span
+  <div
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <slot>
-      {{ $props.label }}
-    </slot>
-  </span>
+    <span>
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSText",
@@ -48,9 +50,15 @@ export default defineComponent({
       type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" | "soft" | "softContrast">,
       required: false,
       default: "base"
-    }
+    },
+    wordBreak: {
+      type: String as PropType<"normal" | "break-all" | "keep-all" | "break-word">,
+      required: false,
+      default: "normal"
+    },
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -58,7 +66,9 @@ export default defineComponent({
 
     const style = computed((): StyleValue => ({
       "--fs-span-line-clamp": props.lineClamp.toString(),
-      "--fs-text-color"     : colors.value[props.variant]!
+      "--fs-text-color"     : colors.value[props.variant]!,
+      "--fs-span-word-break": props.wordBreak,
+      ...fontStyles.value
     }));
 
     const classes = computed((): string[] => {
@@ -72,6 +82,9 @@ export default defineComponent({
       else if (props.ellipsis) {
         classNames.push("fs-span-ellipsis");
       }
+      if (props.wordBreak !== "normal") {
+        classNames.push("fs-span-word-break");
+      }
       return classNames;
     });
 

package/components/FSToggleSet.vue

@@ -5,13 +5,13 @@
     :modelValue="$props.modelValue"
   >
     <FSWrapGroup
-      v-if="['wrap'].includes($props.variant)"
+      v-if="$props.variant && ['wrap'].includes($props.variant)"
       ref="toggleSetRef"
       :padding="$props.padding"
       :gap="$props.gap"
     >
       <template
-        v-if="$props.values.length"
+        v-if="$props.values && $props.values.length"
       >
         <template
           v-if="!$slots.item"
@@ -20,7 +20,7 @@
             v-for="(item, index) in $props.values"
             :prependIcon="item.prependIcon"
             :appendIcon="item.appendIcon"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :variant="getVariant(item)"
             :color="getColor(item)"
             :class="getClass(item)"
@@ -54,7 +54,7 @@
       :gap="$props.gap"
     >
       <template
-        v-if="$props.values.length"
+        v-if="$props.values && $props.values.length"
       >
         <template
           v-if="!$slots.item"
@@ -63,7 +63,7 @@
             v-for="(item, index) in $props.values"
             :prependIcon="item.prependIcon"
             :appendIcon="item.appendIcon"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :variant="getVariant(item)"
             :color="getColor(item)"
             :class="getClass(item)"
@@ -197,10 +197,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/FSTreeView.vue

@@ -0,0 +1,107 @@
+<template>
+  <template
+    v-if="$props.loading"
+  >
+    <FSCol>
+      <FSLoader
+        v-if="$props.loading"
+        width="100%"
+        :height="['40px', '36px']"
+      />
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
+    <v-treeview
+      :itemTitle="$props.itemTitle"
+      :itemValue="$props.itemValue"
+      :items="treeItems"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
+      </template>
+    </v-treeview>
+  </template>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+import { VTreeview } from "vuetify/labs/VTreeview";
+
+
+import FSLoader from "./FSLoader.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+  name: "FSTreeView",
+  components: {
+    VTreeview,
+    FSLoader,
+    FSCol,
+  },
+  props: {
+    items: {
+      type: Array as PropType<any[]>,
+      required: true
+    },
+    itemValue: {
+      type: String,
+      required: false,
+      default: "id"
+    },
+    itemTitle: {
+      type: String,
+      required: false,
+      default: "label"
+    },
+    itemParent: {
+      type: String,
+      required: false,
+      default: "parentId"
+    },
+    exclude: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+    const treeItems = computed((): any[] => {
+      const filter = ((parentId: string | null) => {
+        return props.items.filter((item: any) => {
+          if (props.exclude.includes(item[props.itemValue])) {
+            return false;
+          }
+          return item[props.itemParent] == parentId;
+        });
+      });
+      const process = ((item: any): any => {
+        if (props.items.some((child: any) => child[props.itemParent] === item[props.itemValue])) {
+          return {
+            ...item,
+            children: filter(item[props.itemValue]).map(process)
+          };
+        }
+        return item;
+      });
+      return filter(null).map(process);
+    });
+
+    return {
+      treeItems
+    };
+  }
+});
+</script>

package/components/FSWindow.vue

@@ -1,8 +1,54 @@
 <template>
+  <template 
+    v-if="showError"
+  >
+    <slot 
+      name="error"
+      v-bind="{ goBack, width: $props.width, height: $props.height }"
+    >
+      <FSRow
+        padding="16px"
+        :width="$props.width"
+      >
+        <FSCol
+          align="center-center"
+          gap="16px"
+        >
+          <FSCol
+            align="center-center"
+          >
+            <FSIcon
+              size="42px"
+              :color="ColorEnum.Error"
+            >
+              mdi-alert-outline
+            </FSIcon>
+            <FSText
+              font="text-h3"
+            >
+              {{ $tr("window.no-access-title", "Nothing to see here") }}
+            </FSText>
+          </FSCol>
+          <FSText
+            :lineClamp="2"
+          >
+            {{ $tr("window.no-access-body", "It seems you either do not have access to this content, or there is nothing to display here") }}
+          </FSText>
+          <FSButton
+            :label="$tr('window.no-access-button', 'Go back')"
+            :color="ColorEnum.Primary"
+            @click="goBack"
+          />
+        </FSCol>
+      </FSRow>
+    </slot>
+  </template>
   <v-window
     class="fs-window"
-    :style="style"
+    ref="windowRef"
     :touch="false"
+    :style="style"
+    :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
     <template
@@ -28,13 +74,28 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue, type VNode } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, type VNode, watch } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import { ColorEnum } from "../models";
+
+import FSButton from "./FSButton.vue";
+import FSCard from "./FSCard.vue";
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+import FSRow from "./FSRow.vue";
+
 export default defineComponent({
   name: "FSWindow",
+  components: {
+    FSButton,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSRow
+  },
   props: {
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -45,26 +106,82 @@ export default defineComponent({
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
+    },
+    modelValue: {
+      type: [String, Number, Object] as PropType<any>,
+      required: false,
+      default: 0
     }
   },
-  setup(props) {
+  emits: ["update:modelValue", "error"],
+  setup(props, { emit }) {
     const { slots, getChildren } = useSlots();
 
     delete slots.default;
 
+    const windowRef = ref<any | null>(null);
+    
+    const showOverflow = ref(true);
+    const overflowTimeout = ref<NodeJS.Timeout | null>(null);
+
     const style = computed((): StyleValue => ({
-      "--fs-window-width": sizeToVar(props.width),
-      "--fs-window-height": sizeToVar(props.height)
+      "--fs-window-overflow": showOverflow.value ? "visible" : "hidden",
+      "--fs-window-height"  : sizeToVar(props.height),
+      "--fs-window-width"   : sizeToVar(props.width)
     }));
 
     const value = (component: VNode, index: number): any => {
       return component?.props?.value ?? index;
     };
 
+    // Hide horizontal overflow when switching windows, otherwise let it visible for the FSFadeOut scrollbar
+    watch(() => props.modelValue, (): void => {
+      showOverflow.value = false;
+      if (overflowTimeout.value) {
+        clearTimeout(overflowTimeout.value);
+      }
+      overflowTimeout.value = setTimeout(() => {
+        showOverflow.value = true;
+      }, 560);
+    });
+
+    const showError = computed((): boolean => {
+      if (!windowRef.value) {
+        return false;
+      }
+
+      // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VWindow/VWindow.tsx
+      // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/group.ts#L161
+      const group = windowRef.value.group;
+
+      if (!group.items.value.length) {
+        return false;
+      }
+      return !group.items.value.find((item: any) => item.value === props.modelValue);
+    });
+
+    const goBack = (): void => {
+      if (!windowRef.value) {
+        emit("error");
+        return;
+      }
+      
+      const group = windowRef.value.group;
+      if (!group.items.value.length) {
+        emit("error");
+        return;
+      }
+      emit("update:modelValue", group.items.value[0].value);
+    };
+
     return {
+      ColorEnum,
+      windowRef,
+      showError,
       slots,
       style,
       getChildren,
+      goBack,
       value
     };
   }

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/FSAgendaDialogCalendar.vue

@@ -7,8 +7,8 @@
       :elevation="true"
     >
       <FSCol
-        gap="12px"
         padding="16px"
+        gap="12px"
       >
         <FSCalendar
           v-model="calendarValue"
@@ -16,7 +16,7 @@
         <FSButton
           color="primary"
           width="100%"
-          :label="$tr('ui.agenda.calendar.dialog.submit', 'Validate')"
+          :label="$tr('ui.common.submit', 'Validate')"
           @click="onSubmit"
         />
       </FSCol>

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-button"
+          >
+            {{ epochToMonthYearOnlyFormat($props.start) }}
+          </FSSpan>
+        </FSButton>
         <FSButton
           variant="icon"
           icon="mdi-chevron-right"
@@ -41,7 +47,7 @@
           />
           <FSButton
             prependIcon="mdi-calendar-today-outline"
-            :label="$tr('ui.agenda.today', 'Today')"
+            :label="$tr('ui.common.today', 'Today')"
             @click="onToday"
           />
         </FSRow>
@@ -52,7 +58,7 @@
     >
       <FSButton
         prependIcon="mdi-calendar-today-outline"
-        :label="$tr('ui.agenda.today', 'Today')"
+        :label="$tr('ui.common.today', 'Today')"
         width="100%"
         @click="onToday"
       />
@@ -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>
@@ -43,10 +44,11 @@
       name="default"
       :label="label"
       :icon="icon"
-      :iconBis="iconBis"
+      :iconBis="endToday ? iconBis : null"
       :timeStart="epochToShortTimeOnlyFormat($props.start)"
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
+      :width="width"
     />
   </FSClickable>
 </template>
@@ -118,12 +120,20 @@ export default defineComponent({
       return dayEnd.value - props.dayStart;
     });
 
+    const startToday = computed(() => {
+      return props.start >= props.dayStart;
+    });
+
+    const endToday = computed(() => {
+      return props.end <= dayEnd.value;
+    });
+
     const dayDurationOffset = computed(() => {
       return dayDuration.value - dayToMillisecond(1);
     });
 
     const leftPosition = computed(() => {
-      if (props.start < props.dayStart) {
+      if (!startToday.value) {
         return 0;
       }
       return millisecondToDay(props.start - props.dayStart - dayDurationOffset.value) * 100;
@@ -132,12 +142,12 @@ export default defineComponent({
     const width = computed(() => {
       let start = props.start - dayDurationOffset.value;
       let end = props.end - dayDurationOffset.value;
-      if(props.variant === 'current') {
+      if(props.variant === 'current' && dayEnd.value > props.now) {
         end = props.now;
-      } else if (props.end > dayEnd.value) {
+      } else if (!endToday.value) {
         end = dayEnd.value - dayDurationOffset.value;
       }
-      if (props.start < props.dayStart) {
+      if (!startToday.value) {
         start = props.dayStart;
       }
       
@@ -148,12 +158,14 @@ export default defineComponent({
     const style = computed((): StyleValue => {
       return {
         '--fs-agenda-event-left': `${leftPosition.value}%`,
+        '--fs-agenda-event-border-width': startToday.value ? '3px' : '0px',
       };
     });
 
     return {
       style,
       width,
+      endToday,
       epochToShortTimeOnlyFormat
     };
   }