@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/tiles/FSTile.vue

@@ -1,67 +1,94 @@
 <template>
-  <FSClickable
-    v-if="$props.href || $props.to || $attrs.onClick"
-    variant="background"
+  <FSCol
     class="fs-tile"
-    padding="12px"
-    :height="height"
-    :style="style"
-    :href="$props.href"
-    :to="$props.to"
-    v-bind="$attrs"
+    :height="$props.height"
+    :width="$props.width"
   >
-    <slot />
-    <FSCard
-      v-if="$props.editable"
-      class="fs-tile-checkbox"
-      :border="false"
+    <FSClickable
+      v-if="$props.singleSelect"
+      padding="12px"
+      :variant="variant"
+      :color="color"
+      :style="style"
+      width="100%"
+      height="100%"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
       v-bind="$attrs"
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
-    <div
-      class="fs-tile-bottom"
+      <slot />
+    </FSClickable>
+    <FSClickable
+      v-else-if="$props.href || $props.to || $attrs.onClick"
+      variant="background"
+      class="fs-tile"
+      padding="12px"
+      :color="ColorEnum.Background"
+      :href="$props.href"
+      width="100%"
+      height="100%"
+      :to="$props.to"
       :style="style"
-    />
-  </FSClickable>
-  <FSCard
-    v-else
-    class="fs-tile"
-    padding="12px"
-    :style="style"
-    :height="height"
-    v-bind="$attrs"
-  >
-    <slot />
+      v-bind="$attrs"
+    >
+      <slot />
+      <FSCard
+        v-if="$props.editable"
+        class="fs-tile-checkbox"
+        variant="background"
+        :color="ColorEnum.Background"
+        :border="false"
+        v-bind="$attrs"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSClickable>
     <FSCard
-      v-if="$props.editable"
-      class="fs-tile-checkbox"
-      :border="false"
+      v-else
+      variant="background"
+      class="fs-tile"
+      padding="12px"
+      :color="color"
+      :style="style"
+      width="100%"
+      height="100%"
       v-bind="$attrs"
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
+      <slot />
+      <FSCard
+        v-if="$props.editable"
+        class="fs-tile-checkbox"
+        variant="background"
+        :border="false"
+        v-bind="$attrs"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSCard>  
+    <div
+      v-if="$props.leftColor"
+      class="fs-tile-left"
+      :style="style"
+    />
     <div
       v-if="$props.bottomColor"
       class="fs-tile-bottom"
       :style="style"
     />
-  </FSCard>  
+  </FSCol>
 </template>
 
 <script lang="ts">
-import type { PropType, StyleValue } from "vue";
-import { computed, defineComponent } from "vue";
-import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
-import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import FSClickable from "../FSClickable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -90,38 +117,71 @@ export default defineComponent({
       required: false,
       default: false
     },
+    activeColor: {
+      type: [Array, String] as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
     bottomColor: {
       type: [Array, String] as PropType<ColorBase[] | ColorBase | null>,
       required: false,
       default: null
     },
+    leftColor: {
+      type: [Array, String] as PropType<ColorBase[] | ColorBase | null>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [170, 156]
+    },
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { isMobileSized } = useBreakpoints();
     const { getGradients } = useColors();
 
     const style = computed((): StyleValue => {
+      const result: StyleValue = {};
       if (props.bottomColor) {
         const bottomColors = getGradients(props.bottomColor);
-        return {
-          "--fs-tile-border-color": bottomColors.base
-        };
+        result["--fs-tile-bottom-border-color"] = bottomColors.base;
+      }
+      if (props.leftColor) {
+        const leftColors = getGradients(props.leftColor);
+        result["--fs-tile-left-border-color"] = leftColors.base;
       }
-      return {};
+      return result;
+    });
+
+    const variant = computed((): "standard" | "background" => {
+      return (props.singleSelect && props.modelValue) ? "standard" : "background";
     });
 
-    const height = computed(() => {
-      return isMobileSized.value ? 156 : 170;
+    const color = computed((): ColorBase => {
+      return (props.singleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
     });
 
     return {
-      height,
+      ColorEnum,
+      variant,
+      color,
       style
     };
   }

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -1,6 +1,8 @@
 <template>
   <FSTile
+    :activeColor="ColorEnum.Primary"
     :editable="$props.editable"
+    :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
@@ -18,16 +20,17 @@
           gap="4px"
           :width="infoWidth"
         >
-          <FSText
+          <FSSpan
             font="text-button"
             :lineClamp="2"
           >
-            {{ title }}
-          </FSText>
+            {{ $props.name }}
+          </FSSpan>
           <FSRow
             v-if="roleLabel"
             align="center-left"
             gap="4px"
+            :wrap="false"
           >
             <FSIcon
               v-if="roleIcon"
@@ -36,12 +39,12 @@
             >
               {{ roleIcon }}
             </FSIcon>
-            <FSText
+            <FSSpan
               font="text-overline"
               variant="soft"
             >
               {{ roleLabel }}
-            </FSText>
+            </FSSpan>
           </FSRow>
         </FSCol>
         <FSImage
@@ -55,16 +58,14 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type 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 FSSpan from "../FSSpan.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -73,7 +74,7 @@ export default defineComponent({
   name: "FSUserOrganisationTileUI",
   components: {
     FSImage,
-    FSText,
+    FSSpan,
     FSTile,
     FSCol,
     FSRow
@@ -89,16 +90,6 @@ 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,
@@ -114,6 +105,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -129,13 +125,6 @@ export default defineComponent({
     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";
@@ -151,24 +140,25 @@ export default defineComponent({
     });
 
     const imageSize = computed((): number => {
+      if (!props.imageId) {
+        return 0;
+      }
       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,
       imageSize,
       infoWidth,
-      ColorEnum,
       roleLabel,
-      roleIcon,
-      title
+      roleIcon
     };
   }
 });

package/components/toggleSets/FSToggleSetPosition.vue

@@ -22,7 +22,7 @@ import { computed, defineComponent } from "vue";
 import type { PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { Position } from "@dative-gpi/foundation-shared-domain/models";
+import { Position } from "@dative-gpi/foundation-shared-domain/enums";
 
 export default defineComponent({
   name: "FSToggleSetPosition",