@dative-gpi/foundation-shared-components 1.0.142 → 1.0.143-onboarding

package/components/FSCard.vue

@@ -30,6 +30,14 @@
         </FSRow>
       </FSCol>
     </slot>
+    <FSRow
+      v-if="$slots['top-right']"
+      class="fs-card-top-right"
+    >
+      <slot
+        name="top-right"
+      />
+    </FSRow>
   </div>
 </template>
 
@@ -99,6 +107,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    topRightPadding: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
     }
   },
   setup(props) {
@@ -143,7 +156,8 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": backgrounds.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : darks.base
+          "--fs-card-color"           : darks.base,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "standard": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -154,7 +168,8 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.light,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.lightContrast!
+          "--fs-card-color"           : colors.value.lightContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "full": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -165,7 +180,8 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.baseContrast!
+          "--fs-card-color"           : colors.value.baseContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "gradient": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -176,7 +192,8 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": gradients.value.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.lightContrast!
+          "--fs-card-color"           : colors.value.lightContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
       }
     });

package/components/FSChip.vue

@@ -1,50 +1,56 @@
 <template>
-  <FSRow
-    :align="$props.align"
-    :width="$props.width"
-    :class="classes"
-    :style="style"
-    :wrap="false"
-    v-bind="$attrs"
+  <component
+    :is="$props.to ? 'FSRouterLink' : 'div'"
+    v-bind="$props.to ? { to: $props.to } : {}"
   >
-    <slot
-      name="prepend"
-      v-bind="{ color: $props.color, colors }"
+    <FSRow
+      :align="$props.align"
+      :width="$props.width"
+      :class="classes"
+      :style="style"
+      :wrap="false"
+      v-bind="$attrs"
     >
-      <FSIcon
-        v-if="$props.prependIcon"
-        size="s"
+      <slot
+        name="prepend"
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.prependIcon }}
-      </FSIcon>
-    </slot>
-    <slot
-      v-bind="{ color: $props.color, colors }"
-    >
-      <FSSpan
-        v-if="$props.label"
-        font="text-overline"
-        class="fs-chip-label"
+        <FSIcon
+          v-if="$props.prependIcon"
+          size="s"
+        >
+          {{ $props.prependIcon }}
+        </FSIcon>
+      </slot>
+      <slot
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.label }}
-      </FSSpan>
-    </slot>
-    <slot
-      name="append"
-      v-bind="{ color: $props.color, colors }"
-    >
-      <FSIcon
-        v-if="$props.appendIcon"
-        size="s"
+        <FSSpan
+          v-if="$props.label"
+          font="text-overline"
+          class="fs-chip-label"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot
+        name="append"
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.appendIcon }}
-      </FSIcon>
-    </slot>
-  </FSRow>
+        <FSIcon
+          v-if="$props.appendIcon"
+          size="s"
+        >
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
+    </FSRow>
+  </component>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -53,6 +59,7 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
+import FSRouterLink from '@dative-gpi/foundation-shared-components/components/FSRouterLink.vue';
 
 export default defineComponent({
   name: "FSChip",
@@ -61,6 +68,7 @@ export default defineComponent({
     FSSpan,
     FSRow
   },
+  inheritsAttrs: false,
   props: {
     prependIcon: {
       type: String as PropType<string | null>,
@@ -106,7 +114,12 @@ export default defineComponent({
       type: String as PropType<"center-center" | "center-left">,
       required: false,
       default: "center-center"
-    }
+    },
+    to: {
+      type: Object as PropType<RouteLocation | null>,
+      required: false,
+      default: null
+    },
   },
   setup(props) {
     const { getColors } = useColors();
@@ -165,6 +178,7 @@ export default defineComponent({
     });
 
     return {
+      FSRouterLink,
       classes,
       colors,
       style

package/components/FSInformationsMenu.vue

@@ -0,0 +1,124 @@
+<template>
+  <FSMenu
+    :location="$props.location"
+    :closeOnContentClick="false"
+    minWidth="0"
+    v-model="modelValue"
+    v-bind="$attrs"
+  >
+    <template
+      #activator="{ props }"
+    >
+      <slot
+        name="activator"
+        v-bind="props"
+      >
+        <FSButton
+          v-bind="props"
+          :color="lightColors.dark"
+          :iconSize="$props.iconSize"
+          variant="icon"
+          icon="mdi-information-outline"
+        />
+      </slot>
+    </template>
+    <slot
+      name="menuContent"
+    >
+      <FSCard
+        :width="$props.width"
+        :padding="$props.padding"
+        :elevation="true"
+        align="center"
+      >
+        <slot
+          name="cardContent"
+        >
+          <FSRow
+            align="center-center"
+          >
+            <FSText
+              font="text-overline"
+              :lineClamp="4"
+            >
+              {{ $props.content }}
+            </FSText>
+          </FSRow>
+        </slot>
+        <template
+          #top-right
+        >
+          <FSButton
+            variant="icon"
+            icon="mdi-close"
+            iconSize="18px"
+            :color="lightColors.dark"
+            @click="modelValue = false"
+          />
+        </template>
+      </FSCard>
+    </slot>
+  </FSMenu>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type PropType } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
+
+export default defineComponent({
+  name: "FSInformationsMenu",
+  components: {
+    FSMenu,
+    FSCard,
+    FSRow,
+    FSText,
+    FSButton
+  },
+  props: {
+    content: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    location: {
+      type: String,
+      default: "top"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: 182
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: "16px 8px"
+    },
+    iconSize: {
+      type: String,
+      default: "18px"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const modelValue = ref(false);
+
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+
+    return {
+      ColorEnum,
+      modelValue,
+      lightColors
+    };
+  }
+});
+</script>

package/components/FSMenu.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-menu
+    :modelValue="$props.modelValue"
+    :scrollStrategy="$props.scrollStrategy"
+    :offset="$props.offset"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <slot />
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+  name: "FSMenu",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    scrollStrategy: {
+      type: String,
+      default: "close"
+    },
+    offset: {
+      type: [String, Number] as PropType<string | number | null>,
+      default: "4px"
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+
+    return {
+    };
+  }
+});
+</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/FSWorstAlert.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="menu"
     location="bottom center"
@@ -28,25 +28,29 @@
       :alertTo="$props.alertTo"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
 import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
+import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
 import FSBadge from "../FSBadge.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSWorstAlert",
   components: {
     FSWorstAlertCard,
     FSColorIcon,
-    FSBadge
+    FSBadge,
+    FSMenu
   },
   props: {
     deviceWorstAlert: {
@@ -79,10 +83,8 @@ export default defineComponent({
       if (!props.deviceAlerts || props.deviceAlerts.length < 1) {
         return null;
       }
-      if (props.deviceAlerts.length > 9) {
-        return "9+";
-      }
-      return props.deviceAlerts.length.toString();
+
+      return capNumberToString(props.deviceAlerts.length, 9);
     });
 
     return {

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -17,7 +17,7 @@
         gap="0px"
       >
         <FSText>
-          {{ $tr('ui.alert.status', 'Status') }} : {{ AlertTools.statusLabel($props.deviceAlert?.status) }}
+          {{ $tr('entity.alert.current-status', 'Status') }} : {{ AlertTools.statusLabel($props.deviceAlert?.status) }}
         </FSText>
         <FSText
           font="text-button"

package/components/fields/FSColorField.vue

@@ -1,5 +1,4 @@
 <template>
-
   <FSBaseField
     class="fs-color-field"
     :description="$props.description"
@@ -34,7 +33,7 @@
       </FSRow>
     </FSCard>
   </FSBaseField>
-  <v-menu
+  <FSMenu
     origin="top left"
     min-width="300px"
     :activator="`#${activatorId}`"
@@ -73,7 +72,7 @@
         />
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -87,6 +86,7 @@ import FSBaseField from "./FSBaseField.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSIcon.vue";
 import FSText from "../FSText.vue";
+import FSMenu from "../FSMenu.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
@@ -94,6 +94,7 @@ export default defineComponent({
   name: "FSColorField",
   components: {
     FSBaseField,
+    FSMenu,
     FSText,
     FSCard,
     FSIcon,

package/components/fields/FSDateField.vue

@@ -71,7 +71,7 @@
     <template
       v-else
     >
-      <v-menu
+      <FSMenu
         min-width="300px"
         :closeOnContentClick="false"
         :modelValue="menu && !$props.disabled"
@@ -142,7 +142,7 @@
             />
           </FSCol>
         </FSCard>
-      </v-menu>
+      </FSMenu>
     </template>
   </FSCol>
 </template>
@@ -160,6 +160,7 @@ import FSTextField from "./FSTextField.vue";
 import FSCalendar from "../FSCalendar.vue";
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -170,6 +171,7 @@ export default defineComponent({
     FSCalendar,
     FSButton,
     FSCard,
+    FSMenu,
     FSCol
   },
   props: {

package/components/fields/FSDateTimeField.vue

@@ -91,7 +91,8 @@
     <template
       v-else
     >
-      <v-menu
+      <FSMenu
+        min-width="300px"
         :closeOnContentClick="false"
         :modelValue="menu && !$props.disabled"
         @update:modelValue="menu = $event"
@@ -187,7 +188,7 @@
             </FSCol>
           </FSCard>
         </FSWindow>
-      </v-menu>
+      </FSMenu>
     </template>
   </FSCol>
 </template>
@@ -206,6 +207,7 @@ import FSWindow from "../FSWindow.vue";
 import FSButton from "../FSButton.vue";
 import FSClock from "../FSClock.vue";
 import FSCard from "../FSCard.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -218,6 +220,7 @@ export default defineComponent({
     FSButton,
     FSClock,
     FSCard,
+    FSMenu,
     FSCol
   },
   props: {

package/components/fields/FSRichTextField.vue

@@ -116,7 +116,7 @@
         >
           mdi-link
         </FSIcon>
-        <v-menu
+        <FSMenu
           v-if="$props.variableReferences && $props.variableReferences.length > 0"
           :closeOnContentClick="false"
           v-model="menuVariable"
@@ -146,7 +146,7 @@
               @update:modelValue="insertVariable($event)"
             />
           </FSCard>
-        </v-menu>
+        </FSMenu>
         <v-divider
           vertical
         />
@@ -246,6 +246,7 @@ import FSTextField from "./FSTextField.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCard from "../FSCard.vue";
 import FSText from "../FSText.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
@@ -257,6 +258,7 @@ export default defineComponent({
     FSText,
     FSIcon,
     FSCard,
+    FSMenu,
     FSCol,
     FSRow
   },

package/components/fields/FSTreeViewField.vue

@@ -131,7 +131,7 @@
       <template
         v-else
       >
-        <v-menu
+        <FSMenu
           :closeOnContentClick="false"
           :modelValue="menu && !$props.disabled"
           @update:modelValue="menu = $event"
@@ -233,7 +233,7 @@
               #title
             />
           </v-treeview>
-        </v-menu>
+        </FSMenu>
       </template>
     </FSCol>
   </template>
@@ -253,6 +253,7 @@ import FSFadeOut from "../FSFadeOut.vue";
 import FSLoader from "../FSLoader.vue";
 import FSRadio from "../FSRadio.vue";
 import FSSpan from "../FSSpan.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -266,6 +267,7 @@ export default defineComponent({
     FSLoader,
     FSRadio,
     FSSpan,
+    FSMenu,
     FSCol,
   },
   props: {