@dative-gpi/foundation-shared-components 0.0.69 → 0.0.71

package/components/FSBreadcrumbs.vue

@@ -1,5 +1,9 @@
 <template>
-  <v-breadcrumbs v-bind="$attrs" :style="style" :items="$props.items">
+  <v-breadcrumbs
+    :style="style"
+    :items="$props.items"
+    v-bind="$attrs"
+  >
     <template #title="{ item }">
       <FSSpan :class="classes(item)">
         {{ item.title }}

package/components/FSCard.vue

@@ -65,12 +65,12 @@ export default defineComponent({
       default: "8px"
     },
     variant: {
-      type: String as PropType<"background" | "standard">,
+      type: String as PropType<"background" | "standard" | "gradient">,
       required: false,
       default: "background"
     },
     color: {
-      type: String as PropType<ColorBase>,
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
       default: ColorEnum.Background
     },
@@ -91,9 +91,15 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getColors } = useColors();
+    const { getColors, getGradients } = useColors();
 
-    const colors = computed(() => getColors(props.color));
+    const colors = computed(() => {
+      if(Array.isArray(props.color)) {
+        return getColors(props.color[0]);
+      }
+      return getColors(props.color);
+    });
+    const gradients = computed(() => getGradients(props.color, 135));
     const backgrounds = getColors(ColorEnum.Background);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -120,11 +126,29 @@ export default defineComponent({
           "--fs-card-border-color"    : lights.dark,
           "--fs-card-color"           : darks.base
         }
+        case "gradient": return {
+          "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-card-padding"         : sizeToVar(props.padding),
+          "--fs-card-height"          : sizeToVar(props.height),
+          "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-background-color": gradients.value.base,
+          "--fs-card-border-color"    : colors.value.lightContrast,
+          "--fs-card-color"           : colors.value.lightContrast
+        }
       }
     });
 
     const classes = computed((): string[] => {
       const classNames = ["fs-card"];
+      switch(props.variant) {
+        case "gradient": 
+          classNames.push("fs-card-gradient"); 
+          break;
+        default: 
+          classNames.push("fs-card-background");
+          break;
+      }
       if (props.elevation) {
         classNames.push("fs-card-elevation");
       }

package/components/FSIcon.vue

@@ -1,7 +1,8 @@
 <template>
   <v-icon
-    :class="classes"
+    class="fs-icon"
     :color="color"
+    :style="style"
     v-bind="$attrs"
   >
     <slot />
@@ -11,14 +12,15 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar } from "../utils";
 
 export default defineComponent({
   name: "FSIcon",
   props: {
     size: {
-      type: String as PropType<"s" | "m" | "l">,
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
       required: false,
       default: "m"
     },
@@ -34,6 +36,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
     const color = computed((): string | null => {
@@ -43,13 +46,26 @@ export default defineComponent({
       return null;
     });
 
-    const classes = computed((): string[] => {
-      return [`fs-icon-${props.size}`];
+    const style = computed((): { [key: string] : string | undefined } => {
+      switch(props.size) {
+        case "s": return {
+          "--fs-icon-font-size": isMobileSized.value ? "14px" : "16px"
+        };
+        case "m": return {
+          "--fs-icon-font-size": isMobileSized.value ? "16px" : "20px"
+        };
+        case "l": return {
+          "--fs-icon-font-size": isMobileSized.value ? "20px" : "24px"
+        };
+        default: return {
+          "--fs-icon-font-size": sizeToVar(props.size)
+        };
+      }
     });
 
     return {
-      classes,
-      color
+      color,
+      style
     };
   }
 });

package/components/FSIconCard.vue

@@ -0,0 +1,60 @@
+<template>
+  <FSCard
+    :variant="$props.backgroundColor == null ? 'background' : 'gradient'"
+    :border="$props.backgroundColor == null"
+    :color="$props.backgroundColor"
+    :height="$props.size"
+    :width="$props.size"
+  >
+    <FSRow
+      align="center-center"
+    >
+      <FSIcon 
+        variant="dark"
+        size="56"
+        :color="$props.iconColor"
+      >
+        {{ $props.icon }}
+      </FSIcon>
+    </FSRow>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSCard from "./FSCard.vue";
+import FSIcon from "./FSIcon.vue";
+
+export default defineComponent({
+  name: "FSIconCard",
+  components: {
+    FSCard,
+    FSIcon
+  },
+  props: {
+    size: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    backgroundColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: false,
+      default: "mdi-shape"
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    }
+  }
+});
+</script>

package/components/fields/FSColorField.vue

@@ -34,6 +34,7 @@
                 prependIcon="mdi-pencil"
                 variant="full"
                 :editable="$props.editable"
+                v-bind="props"
               />
             </template>
           </FSTextField>
@@ -64,6 +65,7 @@
                 prependIcon="mdi-pencil"
                 variant="full"
                 :editable="$props.editable"
+                v-bind="props"
               />
             </template>
           </FSTextField>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -22,17 +22,18 @@
             gap="6px"
             :width="infoWidth"
           >
-            <FSSpan
+            <FSText
               font="text-button"
               :lineClamp="2"
             >
               {{ $props.label }}
-            </FSSpan>
-            <FSSpan
+            </FSText>
+            <FSText
               font="text-overline"
+              variant="light"
             >
               {{ $props.code }}
-            </FSSpan>
+            </FSText>
           </FSCol>
           <FSRow
             gap="4px"
@@ -82,7 +83,7 @@ import FSStatusesRow from "../deviceOrganisations/FSStatusesRow.vue";
 import FSWorstAlert from "../deviceOrganisations/FSWorstAlert.vue";
 import FSDivider from "../FSDivider.vue";
 import FSImage from "../FSImage.vue";
-import FSSpan from "../FSSpan.vue";
+import FSText from "../FSText.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -96,8 +97,8 @@ export default defineComponent({
     FSWorstAlert,
     FSDivider,
     FSImage,
+    FSText,
     FSTile,
-    FSSpan,
     FSCol,
     FSRow
   },

package/components/tiles/FSGroupTileUI.vue

@@ -22,16 +22,17 @@
             gap="6px"
             :width="infoWidth"
           >
-            <FSSpan
+            <FSText
               font="text-button"
             >
               {{ $props.label }}
-            </FSSpan>
-            <FSSpan
+            </FSText>
+            <FSText
               font="text-overline"
+              variant="light"
             >
               {{ $props.code }}
-            </FSSpan>
+            </FSText>
           </FSCol>
           <FSCol
             gap="6px"
@@ -55,11 +56,11 @@
                   </FSText>
                 </FSRow>
               </FSColor>
-              <FSSpan
+              <FSText
                 font="text-overline"
               >
                 {{ $tr("ui.group-tile.group(s)", "Group(s)") }}
-              </FSSpan>
+              </FSText>
             </FSRow>
             <FSRow
               align="center-left"
@@ -80,11 +81,11 @@
                   </FSText>
                 </FSRow>
               </FSColor>
-              <FSSpan
+              <FSText
                 font="text-overline"
               >
                 {{ $tr("ui.group-tile.device(s)", "Device(s)") }}
-              </FSSpan>
+              </FSText>
             </FSRow>
           </FSCol>
         </FSCol>
@@ -106,7 +107,6 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
-import FSSpan from "../FSSpan.vue";
 import FSText from "../FSText.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
@@ -117,7 +117,6 @@ export default defineComponent({
   components: {
     FSImage,
     FSColor,
-    FSSpan,
     FSText,
     FSTile,
     FSCol,

package/components/tiles/FSSimpleIconTileUI.vue

@@ -0,0 +1,124 @@
+<template>
+  <FSTile 
+    :bottomColor="$props.bottomColor"
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      width="fill"
+    >
+      <FSRow
+        align="center-center"
+        gap="24px"
+        :height="imageSize"
+        :wrap="false"
+      >
+        <FSCol
+          gap="6px"
+        >
+          <FSText
+            font="text-button"
+            :lineClamp="2"
+          >
+            {{ $props.label }}
+          </FSText>
+          <FSText
+            font="text-overline"
+            variant="light"
+          >
+            {{ $props.code }}
+          </FSText>
+        </FSCol>
+        <FSIconCard
+          :backgroundColor="$props.iconBackgroundColor"
+          :icon="$props.icon"
+          :size="imageSize"
+        />
+      </FSRow>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSIconCard from "../FSIconCard.vue";
+import FSText from "../FSText.vue";
+import FSTile from "./FSTile.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSSimpleIconTileUI",
+  components: {
+    FSIconCard,
+    FSText,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    code: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    iconBackgroundColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: false,
+      default: "mdi-ab-testing"
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): number => {
+      let width = isMobileSized.value ? 288 : 304;
+      if (props.icon) {
+        width -= imageSize.value;
+      }
+      return width;
+    });
+
+    return {
+      ColorEnum,
+      imageSize,
+      infoWidth
+    };
+  }
+});
+</script>

package/components/tiles/FSTile.vue

@@ -48,6 +48,7 @@
       />
     </FSCard>
     <div
+      v-if="$props.bottomColor"
       class="fs-tile-bottom"
       :style="style"
     />
@@ -89,9 +90,9 @@ export default defineComponent({
       default: false
     },
     bottomColor: {
-      type: [Array, String] as PropType<ColorBase[] | ColorBase>,
+      type: [Array, String] as PropType<ColorBase[] | ColorBase | null>,
       required: false,
-      default: ColorEnum.Primary
+      default: null
     },
     editable: {
       type: Boolean,

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -0,0 +1,174 @@
+<template>
+  <FSTile
+    :editable="$props.editable"
+    :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"
+        >
+          <FSText
+            font="text-button"
+            :lineClamp="2"
+          >
+            {{ title }}
+          </FSText>
+          <FSRow
+            v-if="roleLabel"
+            align="center-left"
+            gap="4px"
+          >
+            <FSIcon
+              v-if="roleIcon"
+              variant="light"
+              :color="ColorEnum.Dark"
+            >
+              {{ roleIcon }}
+            </FSIcon>
+            <FSText
+              font="text-overline"
+              variant="light"
+            >
+              {{ roleLabel }}
+            </FSText>
+          </FSRow>
+        </FSCol>
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :width="imageSize"
+        />
+      </FSRow>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { UserType } from "@dative-gpi/foundation-core-domain/models";
+
+import FSImage from "../FSImage.vue";
+import FSText from "../FSText.vue";
+import FSTile from "./FSTile.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSUserOrganisationTileUI",
+  components: {
+    FSImage,
+    FSText,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    name: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    userType: {
+      type: Number as PropType<UserType>,
+      required: false,
+      default: UserType.User
+    },
+    roleIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    roleLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    admin: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+    const { $tr } = useTranslationsProvider();
+
+    const title = computed((): string | null => {
+      switch (props.userType) {
+        case UserType.ServiceAccount: return props.label;
+        default: return props.name;
+      }
+    });
+
+    const roleIcon = computed((): string | null => {
+      if (props.admin) {
+        return "mdi-crown-outline";
+      }
+      return props.roleIcon;
+    });
+
+    const roleLabel = computed((): string | null => {
+      if (props.admin) {
+        return $tr("ui.user-organisation.admin", "Administrator");
+      }
+      return props.roleLabel;
+    });
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): number => {
+      let width = isMobileSized.value ? 288 : 304;
+      if (props.imageId) {
+        width -= imageSize.value;
+      }
+      return width;
+    });
+
+    return {
+      imageSize,
+      infoWidth,
+      ColorEnum,
+      roleLabel,
+      roleIcon,
+      title
+    };
+  }
+});
+</script>

package/composables/useColors.ts

@@ -101,17 +101,17 @@ export const useColors = () => {
         }
     };
 
-    const getGradients = (colors: ColorBase | ColorBase[]): ColorVariations => {
+    const getGradients = (colors: ColorBase | ColorBase[], rotation: number = 90): ColorVariations => {
         const variations = Array.isArray(colors) ? colors.map(getColors) : [getColors(colors)];
 
         if (variations.length === 1) {
             return variations[0];
         }
         return {
-            light: `linear-gradient(90deg, ${variations.map(v => v.light).join(", ")})`,
-            soft: `linear-gradient(90deg, ${variations.map(v => v.soft).join(", ")})`,
-            base: `linear-gradient(90deg, ${variations.map(v => v.base).join(", ")})`,
-            dark: `linear-gradient(90deg, ${variations.map(v => v.dark).join(", ")})`,
+            light: `linear-gradient(${rotation}deg, ${variations.map(v => v.light).join(", ")})`,
+            soft: `linear-gradient(${rotation}deg, ${variations.map(v => v.soft).join(", ")})`,
+            base: `linear-gradient(${rotation}deg, ${variations.map(v => v.base).join(", ")})`,
+            dark: `linear-gradient(${rotation}deg, ${variations.map(v => v.dark).join(", ")})`,
         };
     }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.69",
+  "version": "0.0.71",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.69",
-    "@dative-gpi/foundation-shared-services": "0.0.69",
+    "@dative-gpi/foundation-shared-domain": "0.0.71",
+    "@dative-gpi/foundation-shared-services": "0.0.71",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "f42750502e3f9499a2df817d41a2e89847c83cdd"
+  "gitHead": "72097470e9163b0da5e7ab5d67496ac5c403f918"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -23,6 +23,14 @@
 .v-breadcrumbs {
     padding: 0 !important;
     gap: 8px !important;
+
+    @include web {
+        height: 24px;
+    }
+
+    @include mobile {
+        height: 20px;
+    }
 }
 
 .v-breadcrumbs-item {

package/styles/components/fs_card.scss

@@ -6,7 +6,6 @@
     width: var(--fs-card-width);
     display: flex;
     
-    background-color: var(--fs-card-background-color);
     border-color: var(--fs-card-border-color);
     color: var(--fs-card-color);
 
@@ -15,4 +14,12 @@
         border-radius: 4px;
         margin: 4px;
     }
+
+    &-background {
+        background-color: var(--fs-card-background-color);
+    }
+
+    &-gradient {
+        background: var(--fs-card-background-color);
+    }
 }

package/styles/components/fs_icon.scss

@@ -1,27 +1,3 @@
-.fs-icon-s {
-    @include web {
-        font-size: 16px !important;
-    }
-    @include mobile {
-        font-size: 14px !important;
-    }
-}
-
-.fs-icon-m {
-    @include web {
-        font-size: 20px !important;
-    }
-    @include mobile {
-        font-size: 16px !important;
-    }
-}
-
-.fs-icon-l {
-    @include web {
-        font-size: 24px !important;
-    }
-
-    @include mobile {
-        font-size: 20px !important;
-    }
+.fs-icon {
+    font-size: var(--fs-icon-font-size) !important;
 }