@dative-gpi/foundation-shared-components 1.0.51 → 1.0.53

package/components/tiles/FSLocationTileUI.vue

@@ -0,0 +1,138 @@
+<template>
+  <FSTile
+    :activeColor="$props.color"
+    :bottomColor="$props.color"
+    :modelValue="$props.modelValue"
+    v-bind="$attrs"
+  >
+    <FSRow
+      align="center-center"
+      width="100%"
+      gap="24px"
+      :wrap="false"
+    >
+      <FSCol 
+        gap="12px"
+        width="100%"
+        class="fs-location-tile-text-container"
+      >
+        <FSCol
+          gap="6px"
+        >
+          <FSSpan
+            font="text-button"
+            :lineClamp="1"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSSpan
+            font="text-overline"
+            variant="soft"
+          >
+            {{ $props.code }}
+          </FSSpan>
+        </FSCol>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSColor
+            padding="0 8px"
+            height="24px"
+            :color="ColorEnum.Light"
+            :border="false"
+          >
+            <FSRow
+              align="center-center"
+            >
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $props.deviceCount }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.location-tile.device(s)", "Device(s) in this location.") }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+      <FSCol
+        width="hug"
+      >
+        <FSIconCard
+          :icon="$props.icon"
+          :iconColor="$props.color"
+          size="100px"
+          iconSize="38px"
+          variant="background"
+          :border="true"
+        />
+      </FSCol>
+    </FSRow>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSIconCard from "../FSIconCard.vue";
+import FSColor from "../FSColor.vue";
+import FSSpan from "../FSSpan.vue";
+import FSTile from "./FSTile.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSGroupTileUI",
+  components: {
+    FSIconCard,
+    FSColor,
+    FSSpan,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    code: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String,
+      required: false,
+      default: () => ColorEnum.Primary
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-map-marker"
+    },
+    deviceCount: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+  },
+  setup() {
+    return {
+      ColorEnum
+    };
+  }
+});
+</script>

package/components/tiles/FSModelTileUI.vue

@@ -0,0 +1,59 @@
+<template>
+  <FSClickable
+    padding="16px"
+    height="196px"
+    width="148px"
+    :border="false"
+    v-bind="$attrs"
+  >
+    <template
+      #default
+    >
+      <FSCol
+        align="center-center"
+      >
+        <FSImage
+          :imageId="imageId"
+          width="116px"
+          height="116px"
+        />
+        <FSSpan
+          :lineClamp="2"
+        >
+          {{ label }}
+        </FSSpan>
+      </FSCol>
+    </template>
+  </FSClickable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSCol from "../FSCol.vue";
+import FSSpan from "../FSSpan.vue";
+import FSImage from "../FSImage.vue";
+import FSClickable from "../FSClickable.vue";
+
+export default defineComponent({
+  name: "FSModelTileUI",
+  components: {
+    FSCol,
+    FSSpan,
+    FSImage,
+    FSClickable,
+  },
+  props:{
+    label: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null,
+    }
+  }
+});
+</script>

package/models/agenda.ts

@@ -0,0 +1,9 @@
+export interface FSAgendaEvent {
+  id: string;
+  label: string;
+  icon?: string;
+  iconBis?: string;
+  color: string;
+  start: number;
+  end: number;
+}

package/models/index.ts

@@ -1,3 +1,4 @@
+export * from "./agenda";
 export * from "./breadcrumbs";
 export * from "./colors";
 export * from "./deviceAlerts";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.51",
+  "version": "1.0.53",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.51",
-    "@dative-gpi/foundation-shared-services": "1.0.51"
+    "@dative-gpi/foundation-shared-domain": "1.0.53",
+    "@dative-gpi/foundation-shared-services": "1.0.53"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "88ce99aa86ffc8a8c22ae0865b80cbfb4baf06d9"
+  "gitHead": "baf907fd3b2c5faed8f0688a5be995224bf42041"
 }

package/styles/components/fs_agenda.scss

@@ -0,0 +1,32 @@
+.fs-agenda-view {
+  min-height: 0;
+}
+
+.fs-agenda-label-day-container {
+  flex-shrink: 0;
+}
+
+.fs-agenda-label-day {
+  border-bottom: 1px solid var(--fs-agenda-label-day-border-bottom-color);
+  border-right: 1px solid var(--fs-agenda-label-day-border-right-color);
+  min-height: 0px;
+}
+
+.fs-agenda-label-day-now {
+  border-bottom: 4px solid var(--fs-clickable-border-color);
+}
+
+.fs-agenda-body {
+  position: relative;
+}
+
+.fs-agenda-row-day {
+  position: relative;
+  border-bottom: 1px solid var(--fs-agenda-row-day-border-bottom-color);
+}
+
+.fs-day-agenda-hour-line {
+  border-top: solid 1px var(--fs-day-agenda-hour-line-color);
+  width: 100%;
+  height: 100%;
+}

package/styles/components/fs_agenda_event.scss

@@ -0,0 +1,41 @@
+.fs-agenda-event {
+  position: absolute !important;
+  left: var(--fs-agenda-event-left);
+  top: var(--fs-agenda-event-top);
+
+  &.fs-agenda-event-past {
+    opacity: 0.5;
+  }
+
+  >.fs-card {
+    border-left: solid 3px var(--fs-clickable-border-color) !important;
+  }
+}
+
+.fs-agenda-event .fs-col,
+.fs-agenda-event .fs-row {
+  overflow: hidden;
+}
+
+.fs-day-agenda .fs-agenda-event {
+  .fs-agenda-event-day-label-container {
+    overflow: visible !important;
+  }
+}
+
+.fs-week-agenda .fs-agenda-event{
+  margin-top: 3px;
+  margin-bottom: 3px;
+  height: calc(100% - 6px) !important;
+}
+
+.fs-month-agenda .fs-agenda-event {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: calc(100% - 4px) !important;
+}
+
+.fs-agenda-event-current span {
+  text-overflow: unset;
+  flex-shrink: 0;
+}

package/styles/components/fs_agenda_hours_col.scss

@@ -0,0 +1,4 @@
+.fs-agenda-hours-col {
+  transform: translateY(calc(-2.4% + 4px));
+  overflow: visible;
+}

package/styles/components/fs_agenda_hours_row.scss

@@ -0,0 +1,13 @@
+.fs-agenda-hours-row {
+  transform: translateX(calc(-2.4% + 2px));
+}
+
+.fs-agenda-hours-row-text {
+  padding: 0 2px;
+}
+
+.fs-agenda-hours-row-marker {
+  height: 4px;
+  border-right: solid 1px var(--fs-agenda-hours-row-marker-color);
+  transform: translateY(-4px);
+}

package/styles/components/fs_agenda_time_line_marker.scss

@@ -0,0 +1,19 @@
+.fs-agenda-horizontal-time-line-marker {
+  position: absolute;
+  top: 0;
+  left: var(--fs-agenda-horizontal-time-line-marker-left);
+  width: 2px;
+  height: 100%;
+  z-index: 1;
+  background-color: var(--fs-agenda-horizontal-time-line-marker-color);
+}
+
+.fs-agenda-vertical-time-line-marker {
+  position: absolute;
+  top: var(--fs-agenda-vertical-time-line-marker-top);
+  left: 0;
+  width: 100%;
+  height: 2px;
+  z-index: 1;
+  background-color: var(--fs-agenda-vertical-time-line-marker-color);
+}

package/styles/components/fs_clickable.scss

@@ -17,7 +17,8 @@
         border-color: var(--fs-clickable-hover-border-color) !important;
         color: var(--fs-clickable-hover-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-hover-background-color);
         }
     }
@@ -27,7 +28,8 @@
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-active-background-color);
         }
     }

package/styles/components/fs_dialog.scss

@@ -1,18 +1,14 @@
-.fs-dialog-mobile {
-  & > .v-overlay__content {
-    max-height: calc(100% - 40px) !important;
-    max-width: 100% !important;
-    width: 100% !important;
-    margin: 0 !important;
-    align-self: flex-end;
-  }
+.fs-dialog-mobile > .v-overlay__content {
+  max-height: calc(100% - 40px) !important;
+  max-width: 100% !important;
+  width: 100% !important;
+  margin: 0 !important;
+  align-self: flex-end;
 }
 
-.fs-dialog {
-  & > .v-overlay__content {
-    max-height: calc(100% - 40px) !important;
-    max-width: calc(100% - 40px) !important;
-    min-width: 35vw !important;
-    width: fit-content !important;
-  }
+.fs-dialog > .v-overlay__content {
+  max-height: calc(100vh - 40px) !important;
+  max-width: calc(100vw - 40px) !important;
+  width: fit-content !important;
+  margin: 20px !important;
 }

package/styles/components/fs_tile.scss

@@ -42,4 +42,8 @@
         width: 32px;
         height: 32px;
     }
+}
+
+.fs-location-tile-text-container {
+    min-width: 0;
 }

package/styles/components/index.scss

@@ -1,4 +1,9 @@
 @import "fs_accordion_panel.scss";
+@import "fs_agenda.scss";
+@import "fs_agenda_event.scss";
+@import "fs_agenda_hours_col.scss";
+@import "fs_agenda_hours_row.scss";
+@import "fs_agenda_time_line_marker.scss";
 @import "fs_autocomplete_field.scss";
 @import "fs_base_field.scss";
 @import "fs_breadcrumbs.scss";

package/tools/alertsTools.ts

@@ -0,0 +1,54 @@
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models"
+
+const { $tr } = useTranslationsProvider();
+
+export const AlertTools = {
+  statusIcon(value: AlertStatus): string {
+    switch (value) {
+      case AlertStatus.Pending: return "mdi-timer-outline";
+      case AlertStatus.Untriggered: return "mdi-timer-off-outline";
+      case AlertStatus.Unresolved: return "mdi-alert-circle-outline";
+      case AlertStatus.Resolved: return "mdi-check-circle-outline";
+      case AlertStatus.Expired: return "mdi-clock-outline";
+      case AlertStatus.Triggered: return "mdi-alert-circle-outline";
+      case AlertStatus.Abandoned: return "mdi-cancel"
+      default: return "";
+    }
+  },
+  statusLabel(value: AlertStatus): string {
+    switch (value) {
+      case AlertStatus.Pending: return $tr("ui.alert.pending", "Pending");
+      case AlertStatus.Untriggered: return $tr("ui.alert.untriggered", "Untriggered");
+      case AlertStatus.Unresolved: return $tr("ui.alert.unresolved", "Unresolved");
+      case AlertStatus.Resolved: return $tr("ui.alert.resolved", "Resolved");
+      case AlertStatus.Expired: return $tr("ui.alert.expired", "Expired");
+      case AlertStatus.Triggered: return $tr("ui.alert.triggered", "Triggered");
+      case AlertStatus.Abandoned: return $tr("ui.alert.abandoned", "Abandoned");
+      default: return "";
+    }
+  },
+  criticityColor(value: Criticity): ColorEnum {
+    switch (value) {
+      case Criticity.Warning: return ColorEnum.Warning;
+      case Criticity.Error: return ColorEnum.Error;
+      case Criticity.Information: return ColorEnum.Primary;
+      default: return ColorEnum.Light;
+    }
+  },
+  criticityIcon(value: Criticity): string {
+    switch (value) {
+      case Criticity.Warning: return "mdi-alert-outline";
+      case Criticity.Error: return "mdi-alert-circle-outline";
+      default: return "mdi-information-outline";
+    }
+  },
+  criticityLabel(value: Criticity): string {
+    switch (value) {
+      case Criticity.Warning: return $tr("ui.alert.warning", "Warning");
+      case Criticity.Error: return $tr("ui.alert.error", "Error");
+      default: return $tr("ui.alert.information", "Information");
+    }
+  }
+}