@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/tiles/FSGroupTileUI.vue

@@ -1,9 +1,10 @@
 <template>
   <FSTile
+    :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Error"
     :editable="$props.editable"
-    :modelValue="$props.modelValue"
     :width="$props.width"
+    :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
     <FSCol
@@ -13,27 +14,28 @@
       <FSRow
         align="center-center"
         gap="24px"
-        :wrap="false"
         :height="imageSize"
+        :wrap="false"
       >
         <FSCol
           gap="12px"
-          :width="`calc(100% - ${imageSize}px - 24px)`"
+          :width="infoWidth"
         >
           <FSCol
             gap="6px"
           >
-            <FSText
+            <FSSpan
               font="text-button"
+              :lineClamp="1"
             >
               {{ $props.label }}
-            </FSText>
-            <FSText
+            </FSSpan>
+            <FSSpan
               font="text-overline"
               variant="soft"
             >
               {{ $props.code }}
-            </FSText>
+            </FSSpan>
           </FSCol>
           <FSCol
             gap="6px"
@@ -50,18 +52,18 @@
                 <FSRow
                   align="center-center"
                 >
-                  <FSText
+                  <FSSpan
                     font="text-overline"
                   >
                     {{ groupsLabel }}
-                  </FSText>
+                  </FSSpan>
                 </FSRow>
               </FSColor>
-              <FSText
+              <FSSpan
                 font="text-overline"
               >
                 {{ $tr("ui.group-tile.group(s)", "Group(s)") }}
-              </FSText>
+              </FSSpan>
             </FSRow>
             <FSRow
               align="center-left"
@@ -75,18 +77,18 @@
                 <FSRow
                   align="center-center"
                 >
-                  <FSText
+                  <FSSpan
                     font="text-overline"
                   >
                     {{ deviceOrganisationsLabel }}
-                  </FSText>
+                  </FSSpan>
                 </FSRow>
               </FSColor>
-              <FSText
+              <FSSpan
                 font="text-overline"
               >
                 {{ $tr("ui.group-tile.device(s)", "Device(s)") }}
-              </FSText>
+              </FSSpan>
             </FSRow>
           </FSCol>
         </FSCol>
@@ -101,15 +103,14 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
-import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -119,7 +120,7 @@ export default defineComponent({
   components: {
     FSImage,
     FSColor,
-    FSText,
+    FSSpan,
     FSTile,
     FSCol,
     FSRow
@@ -181,11 +182,19 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
+    const infoWidth = computed((): string => {
+      if (!props.imageId) {
+        return "100%";
+      }
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
+
     return {
-      ColorEnum,
-      groupsLabel,
       deviceOrganisationsLabel,
-      imageSize
+      groupsLabel,
+      ColorEnum,
+      imageSize,
+      infoWidth
     };
   }
 });

package/components/tiles/FSLoadTile.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -92,6 +92,10 @@ export default defineComponent({
 
     const backgroundColors = getColors(ColorEnum.Background);
 
+    const style = computed((): StyleValue => ({
+      "--fs-load-tile-background-color": backgroundColors.base
+    }));
+
     const heights = computed(() => {
       return {
         image: isMobileSized.value ? "90px" : "100px",
@@ -108,12 +112,6 @@ export default defineComponent({
       }
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-load-tile-background-color": backgroundColors.base
-      };
-    });
-
     return {
       heights,
       widths,

package/components/tiles/FSLocationTileUI.vue

@@ -0,0 +1,157 @@
+<template>
+  <FSTile
+    :activeColor="$props.color"
+    :bottomColor="$props.color"
+    :modelValue="$props.modelValue"
+    :width="$props.width"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      width="fill"
+    >
+      <FSRow
+        align="center-left"
+        gap="24px"
+        :height="imageSize"
+        :wrap="false"
+      >
+        <FSCol 
+          gap="12px"
+          :width="infoWidth"
+        >
+          <FSCol
+            gap="6px"
+          >
+            <FSSpan
+              font="text-button"
+              :lineClamp="1"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              v-if="$props.code"
+              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("entity.location.devices", "Devices") }}
+            </FSSpan>
+          </FSRow>
+        </FSCol>
+        <FSIconCard
+          backgroundVariant="standard"
+          :backgroundColor="ColorEnum.Background"
+          :iconColor="$props.color"
+          :icon="$props.icon"
+          :size="imageSize"
+        />
+      </FSRow>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+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: "FSLocationTileUI",
+  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
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-map-marker"
+    },
+    deviceCount: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup() {
+    const { isMobileSized } = useBreakpoints();
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): string => {
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
+
+    return {
+      ColorEnum,
+      imageSize,
+      infoWidth
+    };
+  }
+});
+</script>

package/components/tiles/FSModelTileUI.vue

@@ -0,0 +1,18 @@
+<template>
+  <FSSimpleTileUI
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+
+export default defineComponent({
+  name: "FSModelTileUI",
+  components: {
+    FSSimpleTileUI,
+  }
+});
+</script>

package/components/tiles/FSServiceAccountOrganisationTileUI.vue

@@ -0,0 +1,142 @@
+<template>
+  <FSTile
+    :activeColor="ColorEnum.Primary"
+    :editable="$props.editable"
+    :width="$props.width"
+    :modelValue="$props.modelValue"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      width="fill"
+    >
+      <FSRow
+        align="center-center"
+        gap="24px"
+        :wrap="false"
+        :height="imageSize"
+      >
+        <FSCol
+          gap="4px"
+          :width="infoWidth"
+        >
+          <FSSpan
+            font="text-button"
+            :lineClamp="2"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSRow
+            v-if="$props.roleLabel"
+            align="center-left"
+            gap="4px"
+            :wrap="false"
+          >
+            <FSIcon
+              v-if="$props.roleIcon"
+              variant="soft"
+              :color="ColorEnum.Dark"
+            >
+              {{ $props.roleIcon }}
+            </FSIcon>
+            <FSSpan
+              font="text-overline"
+              variant="soft"
+            >
+              {{ $props.roleLabel }}
+            </FSSpan>
+          </FSRow>
+        </FSCol>
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :width="imageSize"
+        />
+      </FSRow>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSImage from "../FSImage.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: "FSServiceAccountOrganisationTileUI",
+  components: {
+    FSImage,
+    FSSpan,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    roleIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    roleLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+
+    const imageSize = computed((): number => {
+      if (!props.imageId) {
+        return 0;
+      }
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): string => {
+      if (!props.imageId) {
+        return "100%";
+      }
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
+
+    return {
+      ColorEnum,
+      imageSize,
+      infoWidth
+    };
+  }
+});
+</script>

package/components/tiles/FSSimpleTileUI.vue

@@ -1,9 +1,10 @@
 <template>
   <FSTile 
+    :activeColor="$props.activeColor"
     :bottomColor="$props.bottomColor"
     :editable="$props.editable"
-    :modelValue="$props.modelValue"
     :width="$props.width"
+    :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
     <FSCol
@@ -11,37 +12,40 @@
       width="fill"
     >
       <FSRow
-        align="center-center"
+        align="center-left"
         gap="24px"
         :height="imageSize"
         :wrap="false"
       >
         <FSCol
           gap="6px"
-          :width="`calc(100% - ${imageSize}px - 24px)`"
+          :width="infoWidth"
         >
-          <FSText
+          <FSSpan
             font="text-button"
             :lineClamp="2"
           >
             {{ $props.label }}
-          </FSText>
-          <FSText
+          </FSSpan>
+          <FSSpan
             font="text-overline"
             variant="soft"
           >
             {{ $props.code }}
-          </FSText>
+          </FSSpan>
         </FSCol>
         <FSImage
           v-if="$props.imageId"
+          :imageId="$props.imageId"
           :height="imageSize"
           :width="imageSize"
-          :imageId="$props.imageId"
         />
         <FSIconCard
-          v-else
-          :backgroundColor="iconBackgroundColor"
+          v-else-if="$props.icon"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColor"
+          :iconColor="$props.activeColor"
+          :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
         />
@@ -51,16 +55,14 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIconCard from "../FSIconCard.vue";
 import FSImage from "../FSImage.vue";
-import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -70,57 +72,71 @@ export default defineComponent({
   components: {
     FSIconCard,
     FSImage,
+    FSSpan,
     FSTile,
-    FSText,
     FSCol,
     FSRow
   },
   props: {
-    label: {
-      type: String as PropType<string | null>,
+    imageId: {
+      type: String as PropType<string>,
       required: false,
       default: null
     },
-    modelValue: {
-      type: Boolean,
+    label: {
+      type: String as PropType<string | null>,
       required: false,
-      default: false
+      default: null
     },
     code: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    bottomColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+    icon: {
+      type: String as PropType<string>,
       required: false,
-      default: ColorEnum.Light
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "standard"
     },
     iconBackgroundColor: {
-      type: Boolean,
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
-      default: false
+      default: ColorEnum.Background
     },
-    icon: {
-      type: String as PropType<string>,
+    iconBorder: {
+      type: Boolean as PropType<boolean>,
       required: false,
-      default: "mdi-ab-testing"
+      default: true
     },
-    imageId: {
-      type: String as PropType<string>,
+    activeColor: {
+      type: String as PropType<ColorBase>,
       required: false,
-      default: null
+      default: ColorEnum.Primary
     },
-    editable: {
-      type: Boolean,
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
-      default: true
+      default: ColorEnum.Light
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: () => [352, 336]
     },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -133,10 +149,15 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
+    const infoWidth = computed((): string => {
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
+
     return {
       iconBackgroundColor,
       ColorEnum,
-      imageSize
+      imageSize,
+      infoWidth
     };
   }
 });