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

package/components/buttons/FSButtonValidateLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.validate', 'Validate')"
+    :label="$tr('ui.common.validate', 'Validate')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/calendar/FSSimpleCalendar.vue

@@ -0,0 +1,145 @@
+<template>
+  <FSCol>
+    <FSRow
+      v-if="$props.showHeader"
+      :wrap="false"
+    >
+      <FSCol
+        v-for="i in 7"
+        :key="i"
+        :style="{
+          minWidth: `calc((100% - 8px * 7) / 7)`, 
+          maxWidth: `calc((100% - 8px * 7) / 7)`
+        }"
+        align="center-center"
+      >
+        {{ dayLabel(i - 1) }}
+      </FSCol>
+    </FSRow>
+    <FSRow>
+      <FSCol
+        v-for="date in days"
+        :key="$props.month + $props.year + date.date.toISOString()"
+        :style="{
+          minWidth: `calc((100% - 8px * 7) / 7)`, 
+          maxWidth: `calc((100% - 8px * 7) / 7)`
+        }"
+        align="center-center"
+        height="hug"
+      >
+        <slot
+          name="day"
+          v-bind="date"
+        />
+      </FSCol>
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { startOfWeek, endOfWeek, endOfMonth, isSameDay, isBefore, isAfter, isSameMonth, addDays } from "date-fns";
+import { defineComponent, computed } from "vue";
+
+import { dayLabel } from "../../tools";
+
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSCalendarHeader",
+  components: {
+    FSRow,
+    FSCol
+  },
+  props: {
+    year: {
+      type: Number,
+      required: true
+    },
+    month: {
+      type: Number,
+      required: true
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+
+    const { getMachineOffset } = useAppTimeZone();
+
+    const firstDayOfMonth = computed(() => {
+      const date = new Date(props.year, props.month - 1, 1);
+      const offset = getMachineOffset(date.getTime());
+
+      date.setTime(date.getTime() + offset);
+
+      return date;
+    })
+
+    const firstMonday = computed(() => {
+      const day = new Date(firstDayOfMonth.value);
+      
+      const date = startOfWeek(day, { weekStartsOn: 1 });
+      const offset = getMachineOffset(date.getTime());
+
+      date.setTime(date.getTime() + offset);
+
+      return date;
+    });
+
+    const endDayOfMonth = computed(() => {
+      const day = new Date(firstDayOfMonth.value);
+
+      const date = endOfMonth(day);
+      const offset = getMachineOffset(date.getTime());
+
+      date.setTime(date.getTime() + offset);
+
+      return date;
+    });
+
+    const lastSunday = computed(() => {
+      const day = new Date(endDayOfMonth.value);
+
+      const date = endOfWeek(day, { weekStartsOn: 1 });
+      const offset = getMachineOffset(date.getTime());
+
+      date.setTime(date.getTime() + offset);
+
+      return date;
+    });
+
+    const days = computed(() => {
+      const result = [];
+
+      let currentDay = new Date(firstMonday.value);
+      const today = new Date();
+
+      while (currentDay <= lastSunday.value) {
+        result.push({
+          date: new Date(currentDay),
+          isToday: isSameDay(currentDay, today),
+          isPast: isBefore(currentDay, today) && !isSameDay(currentDay, today),
+          isFutur: isAfter(currentDay, today) && !isSameDay(currentDay, today),
+          isPreviousMonth: isBefore(currentDay, firstDayOfMonth.value),
+          isNextMonth: isAfter(currentDay, endDayOfMonth.value),
+          isCurrentMonth: isSameMonth(currentDay, firstDayOfMonth.value)
+        });
+
+        currentDay = addDays(currentDay, 1);
+      }
+
+      return result;
+    });
+
+    return {
+      dayLabel,
+      days
+    };
+  }
+});
+</script>

package/components/calendar/FSSimpleCalendarHeader.vue

@@ -0,0 +1,60 @@
+<template>
+  <FSRow>
+    <FSSimpleMonthSelector 
+      width="hug"
+      :year="$props.year"
+      :month="$props.month"
+      @update:year="$emit('update:year', $event)"
+      @update:month="$emit('update:month', $event)"
+      @update="$emit('update', $event)"
+    />
+    <FSButton
+      :label="$tr('ui.common.today', 'Today')"
+      icon="mdi-calendar-today"
+      @click="onToday"
+    />
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSRow from "../FSRow.vue";
+import FSButton from "../FSButton.vue";
+
+import FSSimpleMonthSelector from "./FSSimpleMonthSelector.vue";
+
+export default defineComponent({
+  name: "FSCalendarHeader",
+  components: {
+    FSRow,
+    FSButton,
+    FSSimpleMonthSelector
+  },
+  props: {
+    year: {
+      type: Number,
+      required: true
+    },
+    month: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(_props, { emit }) {
+    const onToday = () => {
+      const now = new Date();
+      emit("update:year", now.getFullYear());
+      emit("update:month", now.getMonth() + 1);
+      emit("update", {
+        year: now.getFullYear(),
+        month: now.getMonth() + 1
+      });
+    };
+
+    return {
+      onToday
+    };
+  }
+});
+</script>

package/components/calendar/FSSimpleMonthSelector.vue

@@ -0,0 +1,138 @@
+<template>
+  <FSRow
+    align="center-center"
+  >
+    <FSButtonPreviousIcon
+      @click="onPrevious"
+    />
+    <FSRow>
+      <!-- TODO : mettre un VMenu sur le FSColor pour pouvoir changer d'année plus vite -->
+      <FSColor
+        :border="false"
+        padding="0px 30px"
+        :color="$props.color"
+        width="100%"
+        :height="[40, 36]"
+        style="min-width: 210px;"
+      >
+        <FSRow
+          width="100%"
+          height="100%"
+          align="center-center"
+        >
+          <FSSpan
+            font="text-h3"
+          >
+            {{ monthToString($props.month) }}
+          </FSSpan>
+          <FSSpan
+            font="text-h3"
+          >
+            {{ $props.year }}
+          </FSSpan>
+        </FSRow>
+      </FSColor>
+    </FSRow>
+    <FSButtonNextIcon
+      @click="onNext"
+    />
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { useTranslations } from "@dative-gpi/bones-ui";
+import { Months } from '@dative-gpi/foundation-shared-domain/enums';
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSRow from "../FSRow.vue";
+import FSSpan from "../FSSpan.vue";
+import FSColor from "../FSColor.vue";
+
+import FSButtonNextIcon from "../buttons/FSButtonNextIcon.vue";
+import FSButtonPreviousIcon from "../buttons/FSButtonPreviousIcon.vue";
+
+export default defineComponent({
+  name: "FSMonthSelector",
+  components: {
+    FSRow,
+    FSSpan,
+    FSColor,
+    FSButtonNextIcon,
+    FSButtonPreviousIcon
+  },
+  props: {
+    color: {
+      type: String,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    month: {
+      type: Number as PropType<Months>,
+      required: true
+    },
+    year: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: ["update:month", "update:year", "update"],
+  setup(props, { emit }) {
+    const { $tr } = useTranslations();
+
+    const monthToString = (month: number) => {
+      switch(month) {
+        case Months.January:
+          return $tr("ui.common.january", "January");
+        case Months.February:
+          return $tr("ui.common.february", "February");
+        case Months.March:
+          return $tr("ui.common.march", "March");
+        case Months.April:
+          return $tr("ui.common.april", "April");
+        case Months.May:
+          return $tr("ui.common.may", "May");
+        case Months.June:
+          return $tr("ui.common.june", "June");
+        case Months.July:
+          return $tr("ui.common.july", "July");
+        case Months.August:
+          return $tr("ui.common.august", "August");
+        case Months.September:
+          return $tr("ui.common.september", "September");
+        case Months.October:
+          return $tr("ui.common.october", "October");
+        case Months.November:
+          return $tr("ui.common.november", "November");
+        case Months.December:
+          return $tr("ui.common.december", "December");
+      }
+    }
+
+    const onNext = () => {
+      emit("update:month", props.month === 12 ? 1 : props.month + 1);
+      emit("update:year", props.month === 12 ? props.year + 1 : props.year);
+      emit("update", {
+        month: props.month === 12 ? 1 : props.month + 1,
+        year: props.month === 12 ? props.year + 1 : props.year
+      })
+    }
+
+    const onPrevious = () => {
+      emit("update:month", props.month === 1 ? 12 : props.month - 1);
+      emit("update:year", props.month === 1 ? props.year - 1 : props.year);
+      emit("update", {
+        month: props.month === 1 ? 12 : props.month - 1,
+        year: props.month === 1 ? props.year - 1 : props.year
+      })
+    }
+
+    return {
+      monthToString,
+      onNext,
+      onPrevious
+    };
+  }
+});
+</script>

package/components/carousels/FSCarousel.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-carousel
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </v-carousel>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "FSCarousel"
+});
+</script>

package/components/carousels/FSCarouselItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-carousel-item
+    v-bind="$attrs"
+  >
+    <slot/>
+  </v-carousel-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "FSCarouselItem"
+});
+</script>

package/components/deviceOrganisations/FSConnectivity.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="menu"
     location="bottom center"
@@ -22,7 +22,7 @@
       :deviceConnectivity="$props.deviceConnectivity"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -33,12 +33,14 @@ import type { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-compone
 
 import FSConnectivityCard from "./FSConnectivityCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSConnectivity",
   components: {
     FSConnectivityCard,
-    FSColorIcon
+    FSColorIcon,
+    FSMenu
   },
   props: {
     deviceConnectivity: {

package/components/deviceOrganisations/FSStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="menu"
     location="bottom center"
@@ -23,7 +23,7 @@
       :statusGroup="$props.statusGroup"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -34,12 +34,14 @@ import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-
 
 import FSStatusCard from "./FSStatusCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSStatus",
   components: {
     FSStatusCard,
-    FSColorIcon
+    FSColorIcon,
+    FSMenu
   },
   props: {
     modelStatus: {

package/components/deviceOrganisations/FSStatusCard.vue

@@ -10,7 +10,7 @@
       <FSChip
         :prependIcon="$props.statusGroup.icon"
         :color="$props.statusGroup.color"
-        :label="statusLabel"
+        :label="$props.modelStatus.label"
       />
       <FSCol
         v-if="$props.statusGroup.value"
@@ -27,7 +27,7 @@
           font="text-button"
           :color="$props.statusGroup.color"
         >
-          {{ statusValue }} {{ $props.statusGroup.unit }}
+          {{ statusValue }}
         </FSText>
       </FSCol>
       <FSText
@@ -78,15 +78,14 @@ export default defineComponent({
   setup(props) {
     const { epochToLongTimeFormat } = useDateFormat();
 
-    const statusLabel = computed((): string => {
-      return props.statusGroup.label || props.modelStatus.label;
-    });
-
     const statusValue = computed((): string => {
+      if (props.statusGroup.label) {
+        return props.statusGroup.label;
+      }
       if (props.statusGroup.value && !isNaN(parseFloat(props.statusGroup.value))) {
-        return parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 });
+        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
       }
-      return props.statusGroup.value || "";
+      return `${props.statusGroup.value} ${props.statusGroup.unit}`;
     });
 
     const deviceTimestamp = computed((): string => {
@@ -98,7 +97,6 @@ export default defineComponent({
 
     return {
       deviceTimestamp,
-      statusLabel,
       statusValue
     };
   }

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -0,0 +1,171 @@
+<template>
+  <component
+    v-if="$props.modelStatus"
+    class="fs-status-rich-card"
+    topRightPadding="2px"
+    variant="standard"
+    :is="$attrs.onClick ? FSClickable : FSCard"
+    :padding="$props.padding"
+    :height="$props.height"
+    :width="$props.width"
+    :color="color"
+    :style="style"
+  >
+    <FSCol
+      align="center-center"
+      :gap="$props.gap"
+    >
+      <FSRow
+        align="top-center"
+      >
+        <FSIcon
+          v-if="icon"
+        >
+          {{ icon }}
+        </FSIcon>
+        <FSText
+          v-if="value"
+          font="text-button"
+        >
+          {{ value }}
+        </FSText>
+      </FSRow>
+      <FSText
+        font="text-overline"
+        align="center"
+        :lineClamp="$props.titleClamp"
+      >
+        {{ title }}
+      </FSText>
+      <slot
+        name="footer"
+        v-bind="{ color }"
+      />
+    </FSCol>
+    <template
+      #top-right
+    >
+      <slot
+        name="corner"
+        v-bind="{ color }"
+      />
+    </template>
+  </component>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSClickable from "../FSClickable.vue";
+import FSCard from "../FSCard.vue";
+import FSIcon from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSStatusRichCard",
+  components: {
+    FSClickable,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSCol
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "100px"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "160px"
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "12px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    title: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    titleClamp: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    color: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    fillBackground: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelStatus: {
+      type: Object as PropType<FSModelStatus | undefined>,
+      required: true
+    },
+    statusGroup: {
+      type: Object as PropType<FSDeviceStatusGroup | undefined>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const color = computed((): string => {
+      return props.color ?? props.statusGroup?.color ?? props.modelStatus?.colorDefault ?? ColorEnum.Primary;
+    });
+
+    const icon = computed((): string | null => {
+      return props.statusGroup?.icon ?? props.modelStatus?.iconDefault ?? null;
+    });
+
+    const title = computed((): string => {
+      return props.title ?? props.modelStatus?.label ?? "";
+    });
+
+    const value = computed((): string | null => {
+      if (props.statusGroup?.label) {
+        return props.statusGroup.label;
+      }
+      if (props.statusGroup?.value && !isNaN(parseFloat(props.statusGroup?.value))) {
+        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
+      }
+      if (props.statusGroup?.value) {
+        return `${props.statusGroup?.value} ${props.statusGroup?.unit}`;
+      }
+      return null;
+    });
+
+    const style = computed((): StyleValue => ({
+      "--fs-status-rich-card-background-color": props.fillBackground ? getColors(color.value).light : "transparent",
+      "--fs-status-rich-card-border-color": props.fillBackground ? getColors(color.value).base : getColors(ColorEnum.Light).dark
+    }));
+
+    return {
+      FSClickable,
+      FSCard,
+      color,
+      style,
+      title,
+      value,
+      icon
+    };
+  }
+});
+</script>