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

package/components/tiles/FSSimpleIconTileUI.vue

@@ -0,0 +1,129 @@
+<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="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: Boolean,
+      required: false,
+      default: false
+    },
+    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 iconBackgroundColor = computed((): ColorBase | ColorBase[] => {
+      return props.iconBackgroundColor ? props.bottomColor : ColorEnum.Background;
+    });
+
+    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 {
+      iconBackgroundColor,
+      ColorEnum,
+      imageSize,
+      infoWidth
+    };
+  }
+});
+</script>

package/components/tiles/FSTile.vue

@@ -15,9 +15,9 @@
       v-if="$props.editable"
       class="fs-tile-checkbox"
       :border="false"
+      v-bind="$attrs"
     >
       <FSCheckbox
-        :color="ColorEnum.Dark"
         :modelValue="$props.modelValue"
         @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
       />
@@ -34,15 +34,16 @@
     :style="style"
     :width="width"
     :height="height"
+    v-bind="$attrs"
   >
     <slot />
     <FSCard
       v-if="$props.editable"
       class="fs-tile-checkbox"
       :border="false"
+      v-bind="$attrs"
     >
       <FSCheckbox
-        :color="ColorEnum.Dark"
         :modelValue="$props.modelValue"
         @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
       />
@@ -60,7 +61,7 @@ import { computed, defineComponent, PropType } from "vue";
 import { RouteLocation } from "vue-router";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import FSClickable from "../FSClickable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -105,12 +106,14 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { getGradients } = useColors();
 
-    const bottomColors = computed(() => getGradients(props.bottomColor));
-
     const style = computed((): { [key: string] : string | undefined } => {
-      return {
-        "--fs-tile-border-color": bottomColors.value.base
-      };
+      if (props.bottomColor) {
+        const bottomColors = getGradients(props.bottomColor);
+        return {
+          "--fs-tile-border-color": bottomColors.base
+        };
+      }
+      return {};
     });
 
     const width = computed(() => {
@@ -122,10 +125,9 @@ export default defineComponent({
     });
 
     return {
-      ColorEnum,
-      style,
+      height,
       width,
-      height
+      style
     };
   }
 });

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.72",
   "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.72",
+    "@dative-gpi/foundation-shared-services": "0.0.72",
     "@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": "dbc4787e4b28439c3d9284f6e430daab222cd671"
 }

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_data_table.scss

@@ -1,8 +1,34 @@
 .fs-data-table {
-    th,
-    td {
+    table {
+        margin-top: calc(var(--fs-data-table-row-gap) * -1);
+        border-spacing: 0 var(--fs-data-table-row-gap) !important;
+        background-color: var(--fs-data-table-background-color) !important;
+    }
+
+    .fs-data-table-custom-row > td {
+        border-bottom: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
+        border-top: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
+        background-color: var(--fs-data-table-row-background-color) !important;
+        color: var(--fs-data-table-row-color);
         position: relative;
+    }
+
+    .fs-data-table-custom-row > td:first-child{
+        border-top-left-radius: var(--fs-data-table-row-border-radius) !important;
+        border-bottom-left-radius: var(--fs-data-table-row-border-radius) !important;
+        border-left: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
+    }
+
+    .fs-data-table-custom-row > td:last-child{
+        border-top-right-radius: var(--fs-data-table-row-border-radius) !important;
+        border-bottom-right-radius: var(--fs-data-table-row-border-radius) !important;
+        border-right: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
+    }
+
+    th,
+    :not(.fs-data-table-custom-row) > td {
         background-color: var(--fs-data-table-background-color) !important;
+        position: relative;
     }
     
     th {

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