@dative-gpi/foundation-shared-components 0.1.120 → 1.0.1

package/components/tiles/FSDashboardOrganisationTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -7,14 +7,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTileUI",
+  components: {
+    FSSimpleTileUI
+  },
   props: {
     bottomColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -27,9 +30,6 @@ export default defineComponent({
       default: "mdi-view-dashboard"
     }
   },
-  components: {
-    FSSimpleIconTileUI
-  },
   setup(props){
     const color = computed(() => {
       if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -40,7 +40,7 @@ export default defineComponent({
 
     return {
       color
-    }
+    };
   }
 });
 </script>

package/components/tiles/FSDashboardOrganisationTypeTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -7,14 +7,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTypeTileUI",
+  components: {
+    FSSimpleTileUI
+  },
   props: {
     bottomColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -27,9 +30,6 @@ export default defineComponent({
       default: "mdi-view-dashboard"
     }
   },
-  components: {
-    FSSimpleIconTileUI
-  },
   setup(props){
     const color = computed(() => {
       if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -40,7 +40,7 @@ export default defineComponent({
 
     return {
       color
-    }
+    };
   }
 });
 </script>

package/components/tiles/FSDashboardShallowTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -7,14 +7,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardShallowTileUI",
+  components: {
+    FSSimpleTileUI
+  },
   props: {
     bottomColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -27,9 +30,6 @@ export default defineComponent({
       default: "mdi-view-dashboard"
     }
   },
-  components: {
-    FSSimpleIconTileUI
-  },
   setup(props){
     const color = computed(() => {
       if(Array.isArray(props.bottomColor) && !props.bottomColor.length) {
@@ -40,7 +40,7 @@ export default defineComponent({
 
     return {
       color
-    }
+    };
   }
 });
 </script>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -1,7 +1,9 @@
 <template>
   <FSTile
+    :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Primary"
     :editable="$props.editable"
+    :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
@@ -17,23 +19,23 @@
       >
         <FSCol
           gap="12px"
+          :width="infoWidth"
         >
           <FSCol
             gap="6px"
-            :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>
           <FSStatusesRow
             :deviceConnectivity="$props.deviceConnectivity"
@@ -63,17 +65,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type FSModelStatus, type FSDeviceStatus, type FSDeviceAlert, type FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSStatusesCarousel from "../deviceOrganisations/FSStatusesCarousel.vue";
 import FSStatusesRow from "../deviceOrganisations/FSStatusesRow.vue";
 import FSDivider from "../FSDivider.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";
@@ -85,7 +86,7 @@ export default defineComponent({
     FSStatusesRow,
     FSDivider,
     FSImage,
-    FSText,
+    FSSpan,
     FSTile,
     FSCol,
     FSRow
@@ -131,6 +132,11 @@ export default defineComponent({
       required: true,
       default: () => []
     },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -189,12 +195,11 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
+    const infoWidth = computed((): string => {
+      if (!props.imageId) {
+        return "100%";
       }
-      return width;
+      return `calc(100% - ${imageSize.value}px - 24px)`;
     });
 
     return {

package/components/tiles/FSFolderTileUI.vue

@@ -1,18 +1,18 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
+    :iconBackgroundColor="true"
     :bottomColor="color"
     :icon="$props.icon"
-    :iconBackgroundColor="true"
     v-bind="$attrs"
   />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSFolderTileUI",
@@ -29,7 +29,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {
@@ -41,7 +41,7 @@ export default defineComponent({
 
     return {
       color
-    }
+    };
   }
 });
 </script>

package/components/tiles/FSGroupTileUI.vue

@@ -1,7 +1,9 @@
 <template>
   <FSTile
+    :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Error"
     :editable="$props.editable"
+    :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
@@ -12,27 +14,28 @@
       <FSRow
         align="center-center"
         gap="24px"
-        :wrap="false"
         :height="imageSize"
+        :wrap="false"
       >
         <FSCol
           gap="12px"
+          :width="infoWidth"
         >
           <FSCol
             gap="6px"
-            :width="infoWidth"
           >
-            <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"
@@ -49,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"
@@ -74,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>
@@ -100,14 +103,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } 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";
@@ -117,7 +120,7 @@ export default defineComponent({
   components: {
     FSImage,
     FSColor,
-    FSText,
+    FSSpan,
     FSTile,
     FSCol,
     FSRow
@@ -139,12 +142,12 @@ export default defineComponent({
       default: null
     },
     recursiveGroupsIds: {
-      type: Array as PropType<String[]>,
+      type: Array as PropType<string[]>,
       required: false,
       default: () => []
     },
     recursiveDeviceOrganisationsIds: {
-      type: Array as PropType<String[]>,
+      type: Array as PropType<string[]>,
       required: false,
       default: () => []
     },
@@ -157,7 +160,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -174,18 +182,17 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
+    const infoWidth = computed((): string => {
+      if (!props.imageId) {
+        return "100%";
       }
-      return width;
+      return `calc(100% - ${imageSize.value}px - 24px)`;
     });
 
     return {
-      ColorEnum,
-      groupsLabel,
       deviceOrganisationsLabel,
+      groupsLabel,
+      ColorEnum,
       imageSize,
       infoWidth
     };

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>