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

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/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/FSUserOrganisationTileUI.vue

@@ -22,23 +22,25 @@
             font="text-button"
             :lineClamp="2"
           >
-            {{ $props.name }}
+            {{ title }}
           </FSText>
           <FSRow
+            v-if="roleLabel"
             align="center-left"
             gap="4px"
           >
             <FSIcon
+              v-if="roleIcon"
               variant="light"
               :color="ColorEnum.Dark"
             >
-              {{ $props.roleIcon }}
+              {{ roleIcon }}
             </FSIcon>
             <FSText
               font="text-overline"
               variant="light"
             >
-              {{ $props.roleLabel }}
+              {{ roleLabel }}
             </FSText>
           </FSRow>
         </FSCol>
@@ -55,8 +57,10 @@
 <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";
@@ -84,6 +88,16 @@ export default defineComponent({
       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,
@@ -94,6 +108,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    admin: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -107,6 +126,28 @@ export default defineComponent({
   },
   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;
@@ -123,7 +164,10 @@ export default defineComponent({
     return {
       imageSize,
       infoWidth,
-      ColorEnum
+      ColorEnum,
+      roleLabel,
+      roleIcon,
+      title
     };
   }
 });

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.70",
+  "version": "0.0.71",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.70",
-    "@dative-gpi/foundation-shared-services": "0.0.70",
+    "@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": "e280ffdb9ee5d27727cc01325689b792168febcd"
+  "gitHead": "72097470e9163b0da5e7ab5d67496ac5c403f918"
 }

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;
 }