@dative-gpi/foundation-shared-components 1.0.56 → 1.0.58-groupings

package/components/tiles/FSGroupingTileUI.vue

@@ -0,0 +1,115 @@
+<template>
+  <FSSimpleTileUI
+    :bottomColor="null"
+    :width="$props.width"
+    :modelValue="$props.modelValue"
+    :label="$props.label"
+    :code="$props.code"
+    :icon="$props.icon"
+    :iconColor="$props.iconColor"
+    v-bind="$attrs"
+  >
+    <template
+      #append-info
+    >
+      <FSCol
+        gap="6px"
+      >
+        <FSRow
+          align="center-left"
+        >
+          <FSColor
+            height="24px"
+            width="24px"
+            :color="ColorEnum.Primary"
+            :border="false"
+          >
+            <FSRow
+              align="center-center"
+            >
+              <FSSpan
+                font="text-overline"
+              >
+                {{ subGroupingsBadgeContent }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.common.sub-groupings", "Categories") }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSSimpleTileUI>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSSimpleTileUI from './FSSimpleTileUI.vue';
+import FSColor from "../FSColor.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSGroupingTileUI",
+  components: {
+    FSSimpleTileUI,
+    FSColor,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    icon: {
+      type: String,
+      required: false
+    },
+    iconColor: {
+      type: String,
+      required: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    code: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    subGroupingCount: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
+  },
+  setup(props) {
+    const subGroupingsBadgeContent = computed(() => props.subGroupingCount ? capNumberToString(props.subGroupingCount) : 0);
+
+
+    return {
+      subGroupingsBadgeContent,
+      ColorEnum,
+    };
+  }
+});
+</script>

package/components/tiles/FSLoadTile.vue

@@ -2,6 +2,7 @@
   <FSCard
     class="fs-load-tile"
     padding="11px"
+    topRightPadding="1px"
     :height="heights.card"
     :width="widths.card"
     :style="style"
@@ -39,16 +40,21 @@
         :width="widths.image"
       />
     </FSRow>
-    <FSCard
-      v-if="$props.editable"
-      class="fs-tile-checkbox"
-      :border="false"
+    <template 
+      v-if="$props.selectable"
+      #top-right
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
+      <FSCard
+        padding="8px"
+        :border="false"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          :disabled="true"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </template>
   </FSCard>
 </template>
 
@@ -79,7 +85,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: false

package/components/tiles/FSLocationTileUI.vue

@@ -1,99 +1,96 @@
 <template>
-  <FSTile
+  <FSSimpleTileUI
     :activeColor="$props.color"
     :bottomColor="$props.color"
     :modelValue="$props.modelValue"
+    :width="$props.width"
+    :label="$props.label"
+    :icon="$props.icon"
+    :code="$props.code"
     v-bind="$attrs"
   >
-    <FSRow
-      align="center-center"
-      width="100%"
-      gap="24px"
-      :wrap="false"
+    <template
+      #append-info
     >
-      <FSCol 
-        gap="12px"
-        width="100%"
-        class="fs-location-tile-text-container"
+      <FSCol
+        gap="8px"
       >
-        <FSCol
-          gap="6px"
+        <FSRow
+          v-if="$props.deviceCount"
+          :wrap="false"
+          align="center-left"
         >
-          <FSSpan
-            font="text-button"
-            :lineClamp="1"
+          <FSColor
+            width="24px"
+            height="24px"
+            :color="ColorEnum.Primary"
+            :border="false"
           >
-            {{ $props.label }}
-          </FSSpan>
+            <FSRow
+              align="center-center"
+            >
+              <FSSpan
+                font="text-overline"
+              >
+                {{ capNumberToString($props.deviceCount) }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
           <FSSpan
             font="text-overline"
-            variant="soft"
           >
-            {{ $props.code }}
+            {{ $tr("ui.common.devices", "Equipment(s)") }}
           </FSSpan>
-        </FSCol>
+        </FSRow>
         <FSRow
+          v-if="$props.address"
           :wrap="false"
           align="center-left"
         >
           <FSColor
-            padding="0 8px"
+            width="24px"
             height="24px"
-            :color="ColorEnum.Light"
+            :color="ColorEnum.Primary"
             :border="false"
           >
             <FSRow
               align="center-center"
             >
-              <FSSpan
-                font="text-overline"
-              >
-                {{ $props.deviceCount }}
-              </FSSpan>
+              <FSIcon
+                icon="mdi-map-marker-radius-outline"
+                size="16px"
+              />
             </FSRow>
           </FSColor>
           <FSSpan
             font="text-overline"
           >
-            {{ $tr("ui.location-tile.device(s)", "Device(s) in this location.") }}
+            {{ $props.address }}
           </FSSpan>
         </FSRow>
       </FSCol>
-      <FSCol
-        width="hug"
-      >
-        <FSIconCard
-          :icon="$props.icon"
-          :iconColor="$props.color"
-          size="100px"
-          iconSize="38px"
-          variant="background"
-          :border="true"
-        />
-      </FSCol>
-    </FSRow>
-  </FSTile>
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSIconCard from "../FSIconCard.vue";
+import FSSimpleTileUI from './FSSimpleTileUI.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: "FSGroupTileUI",
+  name: "FSLocationTileUI",
   components: {
-    FSIconCard,
+    FSSimpleTileUI,
     FSColor,
     FSSpan,
-    FSTile,
     FSCol,
     FSRow
   },
@@ -108,30 +105,41 @@ export default defineComponent({
       required: false,
       default: null
     },
-    color: {
-      type: String,
-      required: false,
-      default: () => ColorEnum.Primary
-    },
     icon: {
       type: String,
       required: false,
       default: "mdi-map-marker"
     },
+    address: {
+      type: String,
+      required: false
+    },
     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() {
+
     return {
-      ColorEnum
+      ColorEnum,
+      capNumberToString
     };
   }
 });

package/components/tiles/FSModelTileUI.vue

@@ -1,59 +1,18 @@
 <template>
-  <FSClickable
-    padding="16px"
-    height="196px"
-    width="148px"
-    :border="false"
+  <FSSimpleTileUI
     v-bind="$attrs"
-  >
-    <template
-      #default
-    >
-      <FSCol
-        align="center-center"
-      >
-        <FSImage
-          :imageId="imageId"
-          width="116px"
-          height="116px"
-        />
-        <FSSpan
-          :lineClamp="2"
-        >
-          {{ label }}
-        </FSSpan>
-      </FSCol>
-    </template>
-  </FSClickable>
+  />
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent } from "vue";
 
-import FSCol from "../FSCol.vue";
-import FSSpan from "../FSSpan.vue";
-import FSImage from "../FSImage.vue";
-import FSClickable from "../FSClickable.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSModelTileUI",
   components: {
-    FSCol,
-    FSSpan,
-    FSImage,
-    FSClickable,
-  },
-  props:{
-    label: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    imageId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null,
-    }
+    FSSimpleTileUI,
   }
 });
 </script>

package/components/tiles/FSServiceAccountOrganisationTileUI.vue

@@ -1,7 +1,6 @@
 <template>
   <FSTile
     :activeColor="ColorEnum.Primary"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -108,11 +107,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {

package/components/tiles/FSSimpleTileUI.vue

@@ -2,7 +2,6 @@
   <FSTile 
     :activeColor="$props.activeColor"
     :bottomColor="$props.bottomColor"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -12,27 +11,35 @@
       width="fill"
     >
       <FSRow
-        align="center-center"
+        align="center-left"
         gap="24px"
         :height="imageSize"
         :wrap="false"
       >
         <FSCol
-          gap="6px"
+          gap="12px"
           :width="infoWidth"
         >
-          <FSSpan
-            font="text-button"
-            :lineClamp="2"
+          <FSCol
+            gap="4px"
           >
-            {{ $props.label }}
-          </FSSpan>
-          <FSSpan
-            font="text-overline"
-            variant="soft"
-          >
-            {{ $props.code }}
-          </FSSpan>
+            <FSSpan
+              font="text-button"
+              :lineClamp="2"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              font="text-overline"
+              variant="soft"
+            >
+              {{ $props.code }}
+            </FSSpan>
+          </FSCol>
+          <slot
+            name="append-info"
+            v-bind="$attrs"
+          />
         </FSCol>
         <FSImage
           v-if="$props.imageId"
@@ -41,9 +48,10 @@
           :width="imageSize"
         />
         <FSIconCard
-          v-else
+          v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColor"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
@@ -78,7 +86,7 @@ export default defineComponent({
   },
   props: {
     imageId: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -93,32 +101,34 @@ export default defineComponent({
       default: null
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
-      required: false,
-      default: "background"
+      required: false
     },
     iconBackgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
-      required: false,
-      default: ColorEnum.Background
+      required: false
     },
     iconBorder: {
       type: Boolean as PropType<boolean>,
       required: false,
       default: true
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false
+    },
     activeColor: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
     bottomColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      type: [Array, String] as PropType<ColorBase | ColorBase[] | null>,
       required: false,
       default: ColorEnum.Light
     },
@@ -131,18 +141,13 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
 
     const iconBackgroundColor = computed((): ColorBase | ColorBase[] => {
-      return props.iconBackgroundColor ? props.bottomColor : ColorEnum.Background;
+      return (props.iconBackgroundColor && props.bottomColor) ? props.bottomColor : ColorEnum.Background;
     });
 
     const imageSize = computed((): number => {