@dative-gpi/foundation-shared-components 0.0.102 → 0.0.104

package/components/FSColor.vue

@@ -5,7 +5,9 @@
     :style="style"
     v-bind="$attrs"
   >
-    <slot v-bind="{ color: $props.color, colors }" />
+    <slot
+      v-bind="{ color: $props.color, colors }"
+    />
   </FSCard>
 </template>
 
@@ -39,7 +41,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-color-background-color": colors.value.light,
         "--fs-color-border-color"    : colors.value.lightContrast,

package/components/FSGrid.vue

@@ -14,27 +14,37 @@
       <FSCol
         gap="2px"
       >
-        <template v-if="headerSlot(item.code)">
+        <template
+          v-if="headerSlot(item.code)"
+        >
           <component
             :is="headerSlot(item.code)"
             v-bind="{ item }"
           />
         </template>
-        <template v-else>
+        <template
+          v-else
+        >
           <FSText
             :font="item.hideDefault ? 'text-body' : 'text-overline'"
           >
             {{ item.label }}
           </FSText>
         </template>
-        <template v-if="!item.hideDefault">
-          <template v-if="itemSlot(item.code)">
+        <template
+          v-if="!item.hideDefault"
+        >
+          <template
+            v-if="itemSlot(item.code)"
+          >
             <component
               :is="itemSlot(item.code)"
               v-bind="{ item }"
             />
           </template>
-          <template v-else>
+          <template
+            v-else
+          >
             <FSText>
               {{ item.value }}
             </FSText>
@@ -75,8 +85,8 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<FSGridItem[]>,
-      default: [],
-      required: false
+      required: false,
+      default: () => []
     }
   },
   setup() {
@@ -123,9 +133,9 @@ export default defineComponent({
 
     return {
       style,
-      itemSlot,
+      itemEndSlot,
       headerSlot,
-      itemEndSlot
+      itemSlot
     };
   }
 });

package/components/FSGridMosaic.vue

@@ -18,8 +18,14 @@
         <FSGrid
           :items="item.items"
         >
-          <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
+          <template
+            v-for="(_, name) in $slots"
+            v-slot:[name]="slotData"
+          >
+            <slot
+              :name="name"
+              v-bind="slotData"
+            />
           </template>
         </FSGrid>
       </FSCol>
@@ -47,8 +53,8 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<FSGridMosaic[]>,
-      default: [],
-      required: false
+      required: false,
+      default: () => []
     },
     cols: {
       type: Number as PropType<1 | 2>,
@@ -60,7 +66,7 @@ export default defineComponent({
     const { isExtraSmall } = useBreakpoints();
 
     const width = computed(() => {
-        return props.cols == 2 && !isExtraSmall.value ? "calc(50% - 16px)" : "100%";
+      return props.cols == 2 && !isExtraSmall.value ? "calc(50% - 16px)" : "100%";
     });
 
     return {

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -1,36 +1,66 @@
 <template>
   <FSRow
-    v-for="(modelStatus, index) in $props.modelStatuses"
-    align="center-center"
-    width="hug"
+    align="center-left"
     gap="4px"
-    :key="index"
     :wrap="false"
   >
-    <FSStatus
-      v-for="(statusGroup, index) in deviceStatus(modelStatus)"
-      :modelStatus="modelStatus"
-      :statusGroup="statusGroup"
-      :key="index"
+    <FSConnectivity
+      v-if="$props.deviceConnectivity && $props.deviceConnectivity.status != ConnectivityStatus.None"
+      :deviceConnectivity="$props.deviceConnectivity"
     />
+    <FSWorstAlert
+      v-if="$props.deviceWorstAlert"
+      :deviceAlerts="$props.deviceAlerts.length"
+      :deviceAlert="$props.deviceWorstAlert"
+    />
+    <template
+      v-for="(modelStatus, index) in $props.modelStatuses"
+    >
+      <FSStatus
+        v-if="deviceStatus(modelStatus)"
+        :statusGroup="deviceStatus(modelStatus)"
+        :modelStatus="modelStatus"
+        :key="index"
+      />
+    </template>
   </FSRow>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { FSDeviceAlert, FSDeviceConnectivity, FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
 
+import FSConnectivity from "./FSConnectivity.vue";
+import FSWorstAlert from "./FSWorstAlert.vue";
 import FSStatus from "./FSStatus.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSStatusesRow",
   components: {
+    FSConnectivity,
+    FSWorstAlert,
     FSStatus,
     FSRow
   },
   props: {
+    deviceConnectivity: {
+      type: Object as PropType<FSDeviceConnectivity>,
+      required: false,
+      default: null
+    },
+    deviceWorstAlert: {
+      type: Object as PropType<FSDeviceAlert>,
+      required: false,
+      default: null
+    },
+    deviceAlerts: {
+      type: Array as PropType<FSDeviceAlert[]>,
+      required: false,
+      default: () => []
+    },
     modelStatuses: {
       type: Array as PropType<FSModelStatus[]>,
       required: true
@@ -41,23 +71,24 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup[] => {
+    const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup | null => {
       const deviceStatus = props.deviceStatuses
         .find((deviceStatus: FSDeviceStatus) => deviceStatus.modelStatusId === modelStatus.id);
       if (deviceStatus != null) {
-        return deviceStatus.statusGroups;
+        return deviceStatus.statusGroups[0];
       }
       if (modelStatus.showDefault) {
-        return [{
+        return {
           label: modelStatus.label,
           icon: modelStatus.iconDefault!,
           color: modelStatus.colorDefault!
-        }];
+        };
       }
-      return [];
-    }
+      return null;
+    };
 
     return {
+      ConnectivityStatus,
       deviceStatus
     };
   }

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -12,8 +12,8 @@
       <FSRow
         align="center-center"
         gap="24px"
-        :wrap="false"
         :height="imageSize"
+        :wrap="false"
       >
         <FSCol
           gap="12px"
@@ -35,23 +35,13 @@
               {{ $props.code }}
             </FSText>
           </FSCol>
-          <FSRow
-            gap="4px"
-          >
-            <FSConnectivity
-              v-if="$props.deviceConnectivity && $props.deviceConnectivity.status != ConnectivityStatus.None"
-              :deviceConnectivity="$props.deviceConnectivity"
-            />
-            <FSWorstAlert
-              v-if="$props.deviceWorstAlert"
-              :deviceAlert="$props.deviceWorstAlert"
-              :deviceAlerts="$props.deviceAlerts.length"
-            />
-            <FSStatusesRow
-              :modelStatuses="lineModelStatuses"
-              :deviceStatuses="lineDeviceStatuses"
-            />
-          </FSRow>
+          <FSStatusesRow
+            :deviceConnectivity="$props.deviceConnectivity"
+            :deviceWorstAlert="$props.deviceWorstAlert"
+            :deviceStatuses="singleDeviceStatuses"
+            :modelStatuses="singleModelStatuses"
+            :deviceAlerts="$props.deviceAlerts"
+          />
         </FSCol>
         <FSImage
           v-if="$props.imageId"
@@ -77,13 +67,10 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSStatusesCarousel from "../deviceOrganisations/FSStatusesCarousel.vue";
-import FSConnectivity from "../deviceOrganisations/FSConnectivity.vue";
 import FSStatusesRow from "../deviceOrganisations/FSStatusesRow.vue";
-import FSWorstAlert from "../deviceOrganisations/FSWorstAlert.vue";
 import FSDivider from "../FSDivider.vue";
 import FSImage from "../FSImage.vue";
 import FSText from "../FSText.vue";
@@ -95,9 +82,7 @@ export default defineComponent({
   name: "FSDeviceOrganisationTileUI",
   components: {
     FSStatusesCarousel,
-    FSConnectivity,
     FSStatusesRow,
-    FSWorstAlert,
     FSDivider,
     FSImage,
     FSText,
@@ -160,9 +145,9 @@ export default defineComponent({
   setup(props) {
     const { isMobileSized } = useBreakpoints();
 
-    const lineModelStatuses = computed((): FSModelStatus[] => {
+    const singleModelStatuses = computed((): FSModelStatus[] => {
       return props.modelStatuses.filter(modelStatus => {
-        if (!modelStatus.inline || modelStatus.groupById) {
+        if (modelStatus.groupById != null) {
           return false;
         }
         if (!modelStatus.showDefault) {
@@ -171,24 +156,18 @@ export default defineComponent({
           }
         }
         return true;
-      }).slice(0, 4).sort((a, b) => a.index - b.index);
+      }).slice(0, 5).sort((a, b) => a.index - b.index);
     });
 
-    const lineDeviceStatuses = computed((): FSDeviceStatus[] => {
+    const singleDeviceStatuses = computed((): FSDeviceStatus[] => {
       return props.deviceStatuses.filter(deviceStatus => {
-        return lineModelStatuses.value.some(modelStatus => modelStatus.id === deviceStatus.modelStatusId)
+        return singleModelStatuses.value.some(modelStatus => modelStatus.id === deviceStatus.modelStatusId)
       });
     });
 
     const carouselModelStatuses = computed((): FSModelStatus[] => {
-      const notCarouselModelStatuses = props.modelStatuses.filter(modelStatus => {
-        if (!modelStatus.inline || modelStatus.groupById) {
-          return false;
-        }
-        return true;
-      }).slice(0, 4);
       return props.modelStatuses.filter(modelStatus => {
-        if (notCarouselModelStatuses.some(lineModelStatus => modelStatus.id === lineModelStatus.id)) {
+        if (modelStatus.groupById == null) {
           return false;
         }
         if (!modelStatus.showDefault) {
@@ -197,7 +176,7 @@ export default defineComponent({
           }
         }
         return true;
-      }).sort((a, b) => (a.index + (a.inline ? b.index : 0)) - b.index);
+      }).sort((a, b) => a.index - b.index);
     });
 
     const carouselDeviceStatuses = computed((): FSDeviceStatus[] => {
@@ -219,12 +198,11 @@ export default defineComponent({
     });
 
     return {
-      ColorEnum,
-      lineModelStatuses,
-      lineDeviceStatuses,
-      ConnectivityStatus,
-      carouselModelStatuses,
       carouselDeviceStatuses,
+      carouselModelStatuses,
+      singleDeviceStatuses,
+      singleModelStatuses,
+      ColorEnum,
       imageSize,
       infoWidth
     };

package/models/modelStatuses.ts

@@ -1,11 +1,10 @@
 export interface FSModelStatus {
-    id: string;
-    label: string;
-    inline: boolean;
-    index: number;
-    groupById?: string | null;
-    groupByLabel?: string | null;
-    showDefault: boolean;
-    iconDefault?: string | null;
-    colorDefault?: string | null;
+  id: string;
+  label: string;
+  index: number;
+  groupById?: string | null;
+  groupByLabel?: string | null;
+  showDefault: boolean;
+  iconDefault?: string | null;
+  colorDefault?: string | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.102",
+  "version": "0.0.104",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.102",
-    "@dative-gpi/foundation-shared-services": "0.0.102",
+    "@dative-gpi/foundation-shared-domain": "0.0.104",
+    "@dative-gpi/foundation-shared-services": "0.0.104",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "d2534b5fa79d557769bcdfd5da4b8dffa0f42c3e"
+  "gitHead": "2c21d0a59340ac959e6b885b75638469148cde26"
 }