@dative-gpi/foundation-shared-components 0.0.90 → 0.0.92

package/components/FSSlider.vue

@@ -1,7 +1,11 @@
 <template>
   <FSCol>
-    <slot name="label">
-      <FSRow :wrap="false">
+    <slot
+      name="label"
+    >
+      <FSRow
+        :wrap="false"
+      >
         <FSSpan
           v-if="$props.label"
           class="fs-slider-label"
@@ -34,11 +38,19 @@
       @update:modelValue="(value) => $emit('update:modelValue', value)"
       v-bind="$attrs"
     >
-      <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>
     </v-slider>
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="$props.description"
         class="fs-slider-description"
@@ -117,10 +129,10 @@ export default defineComponent({
         };
       }
       return {
-          "--fs-slider-cursor"     : "pointer",
-          "--fs-slider-track-color": colors.value.light,
-          "--fs-slider-thumb-color": colors.value.base,
-          "--fs-slider-color"      : darks.base
+        "--fs-slider-cursor"     : "pointer",
+        "--fs-slider-track-color": colors.value.light,
+        "--fs-slider-thumb-color": colors.value.base,
+        "--fs-slider-color"      : darks.base
       };
     });
 

package/components/FSWindow.vue

@@ -5,6 +5,15 @@
     :touch="false"
     v-bind="$attrs"
   >
+    <template
+      v-for="(_, name) in slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
     <v-window-item
       v-for="(component, index) in getChildren()"
       :value="value(component, index)"
@@ -33,7 +42,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getChildren } = useSlots();
+    const { slots, getChildren } = useSlots();
+
+    delete slots.default;
 
     const style = computed((): { [key: string] : string | undefined } => ({
       "--fs-window-width": sizeToVar(props.width)
@@ -44,6 +55,7 @@ export default defineComponent({
     };
 
     return {
+      slots,
       style,
       getChildren,
       value

package/components/FSWrapGroup.vue

@@ -6,7 +6,8 @@
     v-bind="$attrs"
   >
     <v-slide-group-item
-      v-for="component in getChildren()"
+      v-for="(component, index) in getChildren()"
+      :key="index"
     >
       <component
         :is="component"

package/components/deviceOrganisations/FSConnectivity.vue

@@ -3,7 +3,9 @@
     :closeOnContentClick="false"
     v-model="menu"
   >
-    <template #activator="{ props }">
+    <template
+      #activator="{ props }"
+    >
       <FSColorIcon
         class="fs-stopclick"
         size="m"
@@ -16,6 +18,7 @@
     </template>
     <FSConnectivityCard
       :deviceConnectivity="$props.deviceConnectivity"
+      @close="menu = false"
     />
   </v-menu>
 </template>

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -1,31 +1,47 @@
 <template>
   <FSCard
+    padding="2px 2px 8px 2px"
     :elevation="true"
     :border="false"
   >
     <FSCol
       align="center-center"
-      padding="6px 24px"
     >
       <FSCol
         align="center-center"
-        gap="12px"
+        gap="0px"
       >
-        <FSChip
-          :color="$props.deviceConnectivity.color"
-          :prependIcon="$props.deviceConnectivity.icon"
-          :label="connectivityLabel"
-        />
         <FSRow
-          width="hug"
+          align="center-right"
         >
-          <FSText>
-            {{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
-          </FSText>
+          <FSButton
+            icon="mdi-close"
+            variant="icon"
+            @click="$emit('close')"
+          />
         </FSRow>
+        <FSCol
+          align="center-center"
+          padding="0px 24px"
+          gap="12px"
+        >
+          <FSChip
+            :prependIcon="$props.deviceConnectivity.icon"
+            :color="$props.deviceConnectivity.color"
+            :label="connectivityLabel"
+          />
+          <FSRow
+            width="hug"
+          >
+            <FSText>
+              {{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
+            </FSText>
+          </FSRow>
+        </FSCol>
       </FSCol>
       <FSRow
         v-if="deviceTimestamp"
+        padding="0px 24px"
         width="hug"
       >
         <FSSpan
@@ -43,9 +59,10 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
 
+import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
@@ -56,6 +73,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSConnectivityCard",
   components: {
+    FSButton,
     FSCard,
     FSChip,
     FSText,
@@ -69,6 +87,7 @@ export default defineComponent({
       required: true
     }
   },
+  emit: ["close"],
   setup(props) {
     const { epochToLongTimeFormat } = useAppTimeZone();
     const { $tr } = useTranslationsProvider();

package/components/deviceOrganisations/FSStatus.vue

@@ -3,7 +3,9 @@
     :closeOnContentClick="false"
     v-model="menu"
   >
-    <template #activator="{ props }">
+    <template
+      #activator="{ props }"
+    >
       <FSColorIcon
         class="fs-stopclick"
         size="m"
@@ -17,6 +19,7 @@
     <FSStatusCard
       :modelStatus="$props.modelStatus"
       :statusGroup="$props.statusGroup"
+      @close="menu = false"
     />
   </v-menu>
 </template>

package/components/deviceOrganisations/FSStatusCard.vue

@@ -1,43 +1,60 @@
 <template>
   <FSCard
+    padding="2px 2px 8px 2px"
     :elevation="true"
     :border="false"
   >
     <FSCol
       align="center-center"
-      padding="6px 24px"
     >
       <FSCol
         align="center-center"
-        gap="12px"
+        gap="0px"
       >
-        <FSChip
-          :color="$props.statusGroup.color"
-          :prependIcon="$props.statusGroup.icon"
-          :label="$props.statusGroup.label"
-        />
         <FSRow
-          v-if="$props.statusGroup.value"
-          width="hug"
+          align="center-right"
         >
-          <FSText
-            font="text-button"
-            :color="$props.statusGroup.color"
-          >
-            {{ $props.statusGroup.value }} {{ $props.statusGroup.unit }}
-          </FSText>
+          <FSButton
+            icon="mdi-close"
+            variant="icon"
+            @click="$emit('close')"
+          />
         </FSRow>
-        <FSRow
-          v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
-          width="hug"
+        <FSCol
+          align="center-center"
+          padding="0px 24px"
+          gap="12px"
         >
-          <FSSpan>
-            {{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
-          </FSSpan>
-        </FSRow>
+          <FSChip
+            :prependIcon="$props.statusGroup.icon"
+            :color="$props.statusGroup.color"
+            :label="statusLabel"
+          />
+          <FSRow
+            v-if="$props.statusGroup.value"
+            width="hug"
+          >
+            <FSText
+              font="text-button"
+              :color="$props.statusGroup.color"
+            >
+              {{ $props.statusGroup.value }} {{ $props.statusGroup.unit }}
+            </FSText>
+          </FSRow>
+          <FSRow
+            v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
+            width="hug"
+          >
+            <FSSpan>
+              {{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
+            </FSSpan>
+          </FSRow>
+        </FSCol>
+
       </FSCol>
       <FSRow
         v-if="deviceTimestamp"
+        padding="0px 24px"
         width="hug"
       >
         <FSSpan
@@ -56,6 +73,7 @@ import { computed, defineComponent, PropType } from "vue";
 import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
+import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
@@ -66,6 +84,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSStatusCard",
   components: {
+    FSButton,
     FSCard,
     FSChip,
     FSText,
@@ -83,9 +102,14 @@ export default defineComponent({
       required: true
     }
   },
+  emits: ["close"],
   setup(props) {
     const { epochToLongTimeFormat } = useAppTimeZone();
 
+    const statusLabel = computed((): string => {
+      return props.statusGroup.label || props.modelStatus.label;
+    });
+
     const deviceTimestamp = computed((): string => {
       if (props.statusGroup.sourceTimestamp) {
         return epochToLongTimeFormat(props.statusGroup.sourceTimestamp);
@@ -94,7 +118,8 @@ export default defineComponent({
     });
 
     return {
-      deviceTimestamp
+      deviceTimestamp,
+      statusLabel
     };
   }
 });

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -1,43 +1,41 @@
 <template>
-  <FSCarousel
-    :height="['26px', '20px']"
+  <FSRow
+    :wrap="false"
   >
-    <template #prev="{ props }">
-      <FSButton
-        v-if="$props.modelStatuses.length > 1"
-        icon="mdi-chevron-left"
-        class="fs-stopclick"
-        variant="icon"
-        :color="ColorEnum.Dark"
-        @click.prevent.stop="props.onClick"
-      />
-    </template>
-    <template #next="{ props }">
-      <FSButton
-        v-if="$props.modelStatuses.length > 1"
-        icon="mdi-chevron-right"
-        class="fs-stopclick"
-        variant="icon"
-        :color="ColorEnum.Dark"
-        @click.prevent.stop="props.onClick"
-      />
-    </template>
-    <FSRow
-      v-for="(modelStatus, index) in $props.modelStatuses"
-      align="center-center"
-      width="hug"
-      gap="4px"
-      :key="index"
-      :wrap="false"
+    <FSButton
+      v-if="$props.modelStatuses.length > 1"
+      icon="mdi-chevron-left"
+      class="fs-stopclick"
+      variant="icon"
+      @click.prevent.stop="previous"
+    />
+    <FSWindow
+      width="100%"
+      :modelValue="tab"
     >
-      <FSStatus
-        v-for="(statusGroup, index) in deviceStatus(modelStatus)"
-        :modelStatus="modelStatus"
-        :statusGroup="statusGroup"
+      <FSRow
+        v-for="(modelStatus, index) in $props.modelStatuses"
+        align="center-center"
+        gap="4px"
+        :wrap="false"
         :key="index"
-      />
-    </FSRow>
-  </FSCarousel>
+      >
+        <FSStatus
+          v-for="(statusGroup, index) in deviceStatus(modelStatus)"
+          :modelStatus="modelStatus"
+          :statusGroup="statusGroup"
+          :key="index"
+        />
+      </FSRow>
+    </FSWindow>
+    <FSButton
+      v-if="$props.modelStatuses.length > 1"
+      icon="mdi-chevron-right"
+      class="fs-stopclick"
+      variant="icon"
+      @click.prevent.stop="next"
+    />
+  </FSRow>
 </template>
 
 <script lang="ts">
@@ -46,16 +44,16 @@ import { defineComponent, PropType, ref } from "vue";
 import { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSCarousel from "../FSCarousel.vue";
 import FSButton from "../FSButton.vue";
+import FSWindow from "../FSWindow.vue";
 import FSStatus from "./FSStatus.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSStatusesCarousel",
   components: {
-    FSCarousel,
     FSButton,
+    FSWindow,
     FSStatus,
     FSRow
   },
@@ -72,6 +70,24 @@ export default defineComponent({
   setup(props) {
     const tab = ref(0);
 
+    const previous = () => {
+      if (tab.value > 0) {
+        tab.value--;
+      }
+      else {
+        tab.value = props.modelStatuses.length - 1;
+      }
+    };
+
+    const next = () => {
+      if (tab.value < props.modelStatuses.length - 1) {
+        tab.value++;
+      }
+      else {
+        tab.value = 0;
+      }
+    };
+
     const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup[] => {
       const deviceStatus = props.deviceStatuses
         .find((deviceStatus: FSDeviceStatus) => deviceStatus.modelStatusId === modelStatus.id);
@@ -91,7 +107,9 @@ export default defineComponent({
     return {
       ColorEnum,
       tab,
-      deviceStatus
+      deviceStatus,
+      previous,
+      next
     };
   }
 });

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -3,7 +3,9 @@
     :closeOnContentClick="false"
     v-model="menu"
   >
-    <template #activator="{ props }">
+    <template
+      #activator="{ props }"
+    >
       <FSBadge
         :content="badgeLabel"
         :color="criticityColor"
@@ -21,6 +23,7 @@
     </template>
     <FSWorstAlertCard
       :deviceAlert="deviceAlert"
+      @close="menu = false"
     />
   </v-menu>
 </template>

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -1,31 +1,47 @@
 <template>
   <FSCard
+    padding="2px 2px 8px 2px"
     :elevation="true"
     :border="false"
   >
     <FSCol
       align="center-center"
-      padding="6px 24px"
     >
       <FSCol
         align="center-center"
-        gap="12px"
+        gap="0px"
       >
-        <FSChip
-          :label="$props.deviceAlert.label"
-          :prependIcon="statusIcon"
-          :color="criticityColor"
-        />
         <FSRow
-          width="hug"
+          align="center-right"
         >
-          <FSText>
-            {{ statusLabel }}
-          </FSText>
+          <FSButton
+            icon="mdi-close"
+            variant="icon"
+            @click="$emit('close')"
+          />
         </FSRow>
+        <FSCol
+          align="center-center"
+          padding="0px 24px"
+          gap="12px"
+        >
+          <FSChip
+            :label="$props.deviceAlert.label"
+            :prependIcon="statusIcon"
+            :color="criticityColor"
+          />
+          <FSRow
+            width="hug"
+          >
+            <FSText>
+              {{ statusLabel }}
+            </FSText>
+          </FSRow>
+        </FSCol>
       </FSCol>
       <FSRow
         v-if="deviceTimestamp"
+        padding="0px 24px"
         width="hug"
       >
         <FSSpan
@@ -39,14 +55,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { FSDeviceAlert, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
-import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
@@ -57,6 +73,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSWorstAlertCard",
   components: {
+    FSButton,
     FSCard,
     FSChip,
     FSText,
@@ -70,6 +87,7 @@ export default defineComponent({
       required: true
     }
   },
+  emits: ["close"],
   setup(props) {
     const { epochToLongTimeFormat } = useAppTimeZone();
     const { $tr } = useTranslationsProvider();

package/components/fields/FSAutocompleteField.vue

@@ -74,7 +74,7 @@
               <FSCheckbox
                 v-if="$props.multiple"
                 :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
-                @click="test(props, item)"
+                @click="props.onClick"
               />
               <FSSpan>
                 {{ item.raw[$props.itemTitle] }}
@@ -312,10 +312,6 @@ export default defineComponent({
       emit('update:modelValue', value);
     };
 
-    const test = (props: any, item: any) => {
-      console.log(props, item);
-    };
-
     watch(innerSearch, () => {
       emit("update:search", innerSearch.value);
     });
@@ -332,8 +328,7 @@ export default defineComponent({
       classes,
       slots,
       style,
-      onUpdate,
-      test
+      onUpdate
     };
   }
 });

package/components/fields/FSSelectField.vue

@@ -127,6 +127,7 @@
                 <FSCheckbox
                   v-if="$props.multiple"
                   :modelValue="$props.modelValue?.includes(item.raw.id)"
+                  @click="props.onClick"
                 />
                 <FSSpan>
                   {{ item.raw.label }}