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

package/components/FSCard.vue

@@ -84,6 +84,11 @@ export default defineComponent({
       required: false,
       default: "4px"
     },
+    borderStyle: {
+      type: String as PropType<"solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "none">,
+      required: false,
+      default: "solid"
+    },
     elevation: {
       type: Boolean,
       required: false,
@@ -108,6 +113,7 @@ export default defineComponent({
       switch (props.variant) {
         case "standard": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
           "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
@@ -118,6 +124,7 @@ export default defineComponent({
         }
         case "background": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
           "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
@@ -128,6 +135,7 @@ export default defineComponent({
         }
         case "gradient": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
           "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),

package/components/FSCheckbox.vue

@@ -8,7 +8,7 @@
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
-      @click.prevent
+      @click.prevent.stop="onToggle"
       @blur="blurred = true"
       v-bind="$attrs"
     >
@@ -17,7 +17,6 @@
           align="center-left"
           width="hug"
           :style="style"
-          @click.stop="onToggle"
         >
           <FSIcon
             class="fs-checkbox"

package/components/FSClickable.vue

@@ -3,6 +3,10 @@
     v-if="$props.href"
     :href="$props.href"
     :style="style"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
   >
     <FSCard
       :height="$props.height"
@@ -12,7 +16,7 @@
       v-bind="$attrs"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
       </template>
     </FSCard>
     <template v-if="$props.load">
@@ -29,6 +33,10 @@
     v-else-if="$props.to"
     :style="style"
     :to="$props.to"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
   >
     <FSCard
       :height="$props.height"
@@ -38,7 +46,7 @@
       v-bind="$attrs"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
       </template>
     </FSCard>
     <template v-if="$props.load">
@@ -56,6 +64,10 @@
     :type="$props.type"
     :style="style"
     @click.stop="onClick"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
   >
     <FSCard
       :height="$props.height"
@@ -65,7 +77,7 @@
       v-bind="$attrs"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
       </template>
     </FSCard>
     <template v-if="$props.load">
@@ -81,7 +93,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 import { RouteLocation } from "vue-router";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -141,6 +153,11 @@ export default defineComponent({
       required: false,
       default: "4px"
     },
+    borderStyle: {
+      type: String as PropType<"solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "none">,
+      required: false,
+      default: "solid"
+    },
     load: {
       type: Boolean,
       required: false,
@@ -161,10 +178,14 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
+    const hover = ref(false);
+    const active = ref(false);
+
     const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-clickable-border-size"     : props.border ? "1px" : "0",
+          "--fs-clickable-border-style"    : props.borderStyle,
           "--fs-clickable-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color": lights.light,
           "--fs-clickable-border-color"    : lights.dark,
@@ -176,6 +197,7 @@ export default defineComponent({
       switch (props.variant) {
         case "standard": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-style"           : props.borderStyle,
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color"       : colors.value.light,
           "--fs-clickable-border-color"           : colors.value.lightContrast,
@@ -191,6 +213,7 @@ export default defineComponent({
         };
         case "background": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-style"           : props.borderStyle,
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color"       : backgrounds.base,
           "--fs-clickable-border-color"           : lights.dark,
@@ -206,6 +229,7 @@ export default defineComponent({
         };
         case "full": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-style"           : props.borderStyle,
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color"       : colors.value.base,
           "--fs-clickable-border-color"           : colors.value.base,
@@ -222,6 +246,20 @@ export default defineComponent({
       }
     });
 
+    const contentVariant = computed((): "base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" => {
+      if (active.value) {
+        return "darkContrast";
+      }
+      if (hover.value) {
+        return "baseContrast";
+      }
+      switch (props.variant) {
+        case "standard"  : return "lightContrast";
+        case "background": return "base";
+        case "full"      : return "baseContrast";
+      }
+    });
+
     const classes = computed((): string[] => {
       const classNames: string[] = ["fs-clickable"];
       if (!props.editable) {
@@ -247,8 +285,11 @@ export default defineComponent({
     };
 
     return {
+      contentVariant,
       loadColor,
       classes,
+      active,
+      hover,
       style,
       onClick
     };

package/components/FSEditImage.vue

@@ -1,21 +1,16 @@
 <template>
   <FSRow
-    width="fill"
     gap="24px"
   >
-    <FSCard
+    <FSImage
       class="fs-edit-image"
-      :borderRadius="$props.borderRadius"
-      :padding="$props.padding"
-    >
-      <FSImage
-        :borderRadius="$props.borderRadius"
-        :aspectRatio="$props.aspectRatio"
-        :height="$props.height"
-        :imageB64="realSource"
-        :width="$props.width"
-      />
-    </FSCard>
+      :aspectRatio="$props.aspectRatio"
+      :imageId="$props.imageId"
+      :height="$props.height"
+      :imageB64="realSource"
+      :width="$props.width"
+      :style="style"
+    />
     <FSCol
       height="fill"
       align="bottom-left"
@@ -43,14 +38,16 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
-import { FileImage } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, FileImage } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButtonRemoveIcon from "./buttons/FSButtonRemoveIcon.vue";
 import FSButtonFileIcon from "./buttons/FSButtonFileIcon.vue";
 import FSImage from "./FSImage.vue";
-import FSCard from "./FSCard.vue";
 import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSEditImage",
@@ -58,8 +55,9 @@ export default defineComponent({
     FSButtonRemoveIcon,
     FSButtonFileIcon,
     FSImage,
-    FSCard,
-    FSText
+    FSText,
+    FSCol,
+    FSRow
   },
   props: {
     height: {
@@ -72,12 +70,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    padding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "8px"
-    },
-    modelValue: {
+    imageId: {
       type: String as PropType<string | null>,
       required: false,
       default: null
@@ -87,18 +80,27 @@ export default defineComponent({
       required: false,
       default: null
     },
-    borderRadius: {
-      type: [String, Number],
+    modelValue: {
+      type: String as PropType<string | null>,
       required: false,
-      default: "4px"
+      default: null
     }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { getColors } = useColors();
     const { readFile } = useFiles();
 
+    const lights = getColors(ColorEnum.Light);
+
     const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
 
+    const style = computed((): { [key: string] : string | undefined } => {
+      return {
+        "--fs-edit-image-border-color": lights.dark
+      };
+    });
+
     const realSource = computed(() => {
       if (fileSelected.value && fileSelected.value.fileName) {
         return fileSelected.value.fileContent as string;
@@ -122,6 +124,7 @@ export default defineComponent({
     return {
       fileSelected,
       realSource,
+      style,
       onUpload,
       onRemove
     };

package/components/FSIcon.vue

@@ -30,7 +30,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"base" | "light" | "dark">,
+      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
       required: false,
       default: "base"
     }
@@ -41,7 +41,7 @@ export default defineComponent({
 
     const color = computed((): string | null => {
       if (props.color) {
-        return getColors(props.color)[props.variant];
+        return getColors(props.color)[props.variant]!;
       }
       return null;
     });

package/components/FSIconCard.vue

@@ -1,10 +1,10 @@
 <template>
   <FSCard
-    :variant="$props.backgroundColor == null ? 'background' : 'gradient'"
-    :border="$props.backgroundColor == null"
     :color="$props.backgroundColor"
     :height="$props.size"
     :width="$props.size"
+    :variant="variant"
+    :border="border"
   >
     <FSRow
       align="center-center"
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
@@ -55,6 +55,26 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Dark
     }
+  },
+  setup(props) {
+    const variant = computed((): "background" | "gradient" => {
+      switch (props.backgroundColor) {
+        case ColorEnum.Background: return "background";
+        default:                   return "gradient";
+      }
+    });
+
+    const border = computed((): boolean => {
+      switch (props.backgroundColor) {
+        case ColorEnum.Background: return true;
+        default:                   return false;
+      }
+    });
+
+    return {
+      variant,
+      border
+    };
   }
 });
 </script>

package/components/FSImage.vue

@@ -145,14 +145,14 @@ export default defineComponent({
     });
 
     const source = computed((): string | undefined => {
-      if (props.imageId) {
-        return IMAGE_RAW_URL(props.imageId);
-      }
-      else if (props.imageB64) {
+      if (props.imageB64) {
         if (imageType.value && imageData.value) {
           return `${imageType.value},${imageData.value}`;
         }
       }
+      else if (props.imageId) {
+        return IMAGE_RAW_URL(props.imageId);
+      }
     });
 
     const imageData = computed((): string | null => {

package/components/FSText.vue

@@ -45,7 +45,7 @@ export default defineComponent({
       default: ColorEnum.Dark
     },
     variant: {
-      type: String as PropType<"base" | "light" | "dark">,
+      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
       required: false,
       default: "base"
     }
@@ -71,20 +71,10 @@ export default defineComponent({
     });
 
     const style = computed((): { [key: string] : string | undefined } => {
-      switch (props.variant) {
-        case "base": return {
-          "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-text-color"     : colors.value.base
-        };
-        case "light": return {
-          "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-text-color"     : colors.value.light
-        };
-        case "dark": return {
-          "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-text-color"     : colors.value.dark
-        };
-      }
+      return {
+        "--fs-span-line-clamp": props.lineClamp.toString(),
+        "--fs-text-color"     : colors.value[props.variant]
+      };
     });
 
     return {

package/components/lists/FSDataIteratorItem.vue

@@ -3,6 +3,8 @@
     class="fs-data-iterator-item"
     padding="12px"
     width="100%"
+    :color="$props.itemColor"
+    :variant="variant"
   >
     <FSCol>
       <slot name="item.top" v-bind="{ item: $props.item }" />
@@ -38,6 +40,8 @@
     <FSCard
       v-if="$props.showSelect"
       class="fs-data-iterator-item-checkbox"
+      :color="$props.itemColor"
+      :variant="variant"
       :border="false"
     >
       <FSCheckbox
@@ -50,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 import { ColorEnum, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
@@ -86,6 +90,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    itemColor: {
+      type: String as PropType<ColorEnum>,
+      required: false,
+      default: ColorEnum.Background
+    },
     color: {
       type: String as PropType<ColorEnum>,
       required: false,
@@ -96,6 +105,19 @@ export default defineComponent({
       required: false,
       default: true
     }
+  },
+  setup(props) {
+    const variant = computed((): "standard" | "background" => {
+      switch (props.itemColor) {
+        case ColorEnum.Background:
+        case null: return "background";
+        default:   return "standard";
+      }
+    });
+
+    return {
+      variant
+    };
   }
 });
 </script>

package/components/lists/FSDataTableUI.vue

@@ -5,7 +5,9 @@
     <FSRow
       align="bottom-center"
     >
-      <template v-if="$props.showSearch">
+      <template
+        v-if="$props.showSearch"
+      >
         <FSSearchField
           prependInnerIcon="mdi-magnify"
           :hideHeader="true"
@@ -17,7 +19,9 @@
           @click="showFilters = !showFilters"
         />
       </template>
-      <slot name="toolbar" />
+      <slot
+        name="toolbar"
+      />
       <v-spacer />
       <FSOptionGroup
         v-if="!$props.disableTable && !$props.disableIterator"
@@ -29,7 +33,9 @@
     <FSRow
       v-if="showFiltersRow"
     >
-      <template v-if="showFilters">
+      <template
+        v-if="showFilters"
+      >
         <FSFilterButton
           v-for="(header, index) in filterableHeaders"
           :key="index"
@@ -37,7 +43,9 @@
           :filters="filters[header.value]"
           @update:filter="(value) => toggleFilter(header.value, value)"
         >
-          <template #default="{ filter }">
+          <template
+            #default="{ filter }"
+          >
             <slot
               :name="filterSlot(header)"
               v-bind="{ filter }"
@@ -60,7 +68,9 @@
         @update:show="(value) => updateHeader(value, 'hidden', false)"
       />
     </FSRow>
-    <template v-if="innerMode === 'table'">
+    <template
+      v-if="innerMode === 'table'"
+    >
       <v-data-table
         v-if="!isExtraSmall"
         selectStrategy="all"
@@ -75,6 +85,7 @@
         :multiSort="false"
         :hover="!$props.sortDraggable"
         :style="style"
+        :row-props="rowProps"
         :class="classes"
         :page="innerPage"
         :itemsPerPage="innerRowsPerPage"
@@ -87,14 +98,18 @@
         @dragover="onDragOver($event, 'tr.v-data-table__tr', 'tbody')"
         @dragleave="onDragLeave"
       >
-        <template #no-data>
+        <template
+          #no-data
+        >
           <FSText
             font="text-overline"
           >
             {{ $tr("ui.data-table.empty", "No data") }}
           </FSText>
         </template>
-        <template #[`header.data-table-select`]="props">
+        <template
+          #header.data-table-select="props"
+        >
           <FSRow
             v-if="!$props.singleSelect"
             class="fs-data-table-select"
@@ -102,13 +117,15 @@
             width="hug"
           >
             <FSCheckbox
-              :modelValue="props.allSelected"
               :indeterminate="props.someSelected && !props.allSelected"
+              :modelValue="props.allSelected"
               @update:modelValue="toggleSelectAll(props.allSelected)"
             />
           </FSRow>
         </template>
-        <template #[`item.data-table-select`]="props">
+        <template
+          #item.data-table-select="props"
+        >
           <FSRow
             class="fs-data-table-select"
             align="bottom-center"
@@ -120,7 +137,9 @@
             />
           </FSRow>
         </template>
-        <template #[`item.data-table-draggable`]="props">
+        <template
+          #item.data-table-draggable="props"
+        >
           <FSDraggable
             elementSelector="tr.v-data-table__tr"
             :disabled="draggableDisabled"
@@ -140,21 +159,31 @@
             </FSRow>
           </FSDraggable>
         </template>
-        <template #[`header.data-table-group`]="props">
+        <template
+          #header.data-table-group="props"
+        >
           <slot
             name="header.data-table-group"
             v-bind="props"
           />
         </template>
-        <template #[`item.data-table-group`]="props">
+        <template
+          #item.data-table-group="props"
+        >
           <slot
             name="item.data-table-group"
             v-bind="props"
           />
         </template>
-        <template #group-header="props">
-          <template :ref="() => { if (!props.isGroupOpen(props.item)) { props.toggleGroup(props.item) } }" />
-          <tr class="fs-data-table-group-header">
+        <template
+          #group-header="props"
+        >
+          <template
+            :ref="() => { if (!props.isGroupOpen(props.item)) { props.toggleGroup(props.item) } }"
+          />
+          <tr
+            class="fs-data-table-group-header"
+          >
             <td />
             <td
               class="fs-data-table-group-header"
@@ -198,15 +227,23 @@
               :wrap="false"
               :key="index"
             >
-              <slot :name="`${header.slotName}-prepend`" />
-              <slot :name="`${header.slotName}-title`">
+              <slot
+                :name="`${header.slotName}-prepend`"
+              />
+              <slot
+                :name="`${header.slotName}-title`"
+              >
                 <FSText>
                   {{ header.text }}
                 </FSText>
               </slot>
-              <slot :name="`${header.slotName}-append`" />
+              <slot
+                :name="`${header.slotName}-append`"
+              />
               <v-spacer />
-              <slot :name="`${header.slotName}-configuration`">
+              <slot
+                :name="`${header.slotName}-configuration`"
+              >
                 <FSHeaderButton
                   :first="index === 0"
                   :last="index === headersSlots.length - 1"
@@ -228,31 +265,41 @@
           v-for="(item, index) in itemsSlots"
           #[item.slotName]="props"
         >
-          <slot
-            :name="item.slotName"
-            v-bind="props"
+          <div
+            class="fs-td-color"
           >
-            <FSRow
-              align="center-left"
-              :key="index"
+            <slot
+              :name="item.slotName"
+              v-bind="props"
             >
-              <FSText
-                font="text-overline"
+              <FSRow
+                align="center-left"
+                :key="index"
               >
-                {{ props.item[item.value] }}
-              </FSText>
-            </FSRow>
-          </slot>
+                <FSSpan
+                  font="text-overline"
+                >
+                  {{ props.item[item.value] }}
+                </FSSpan>
+              </FSRow>
+            </slot>
+          </div>
         </template>
-        <template #bottom>
+        <template
+          #bottom
+        >
           <FSRow
             class="fs-data-table-footer"
             align="center-right"
             padding="16px"
             gap="24px"
           >
-            <template v-if="$props.modelValue.length">
-              <template v-if="$props.modelValue.length >= innerItems.length">
+            <template
+              v-if="$props.modelValue.length"
+            >
+              <template
+                v-if="$props.modelValue.length >= innerItems.length"
+              >
                 <FSRow
                   gap="2px"
                 >
@@ -266,7 +313,9 @@
                   </FSText>
                 </FSRow>
               </template>
-              <template v-else>
+              <template
+                v-else
+              >
                 <FSText>
                   {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
                 </FSText>
@@ -319,7 +368,9 @@
         :page="innerPage"
         :itemsPerPage="innerRowsPerPage"
       >
-        <template #default="{ items }">
+        <template
+          #default="{ items }"
+        >
           <FSCol
             class="fs-data-iterator-container"
             width="fill"
@@ -331,7 +382,7 @@
               :item="item"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
-              @dragover="onDragOver($event, '.fs-draggable-item', '.fs-data-iterator-container')"
+              @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
               @drop="(event) => onDrop(event, item, '.fs-draggable-item')"
               @dragleave="onDragLeave"
               @dragover.prevent
@@ -342,16 +393,19 @@
               >
                 <FSDataIteratorItem
                   v-if="item.type === 'item'"
+                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
                   :showSelect="$props.showSelect"
                   :itemTo="$props.itemTo"
                   :color="$props.color"
                   :item="item.raw"
                   :key="index"
+                  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
                   @update:modelValue="toggleSelect"
                 >
-                  <template #[`item.top`]="props">
+                  <template
+                    #item.top="props"
+                  >
                     <slot
                       name="item.top"
                       v-bind="props"
@@ -365,14 +419,16 @@
                       :name="item.slotName"
                       v-bind="props"
                     >
-                      <FSText
+                      <FSSpan
                         :key="index"
                       >
                         {{ props.item[item.value] }}
-                      </FSText>
+                      </FSSpan>
                     </slot>
                   </template>
-                  <template #[`item.bottom`]="props">
+                  <template
+                    #item.bottom="props"
+                  >
                     <slot
                       name="item.bottom"
                       v-bind="props"
@@ -383,29 +439,37 @@
             </FSDraggable>
           </FSCol>
         </template>
-        <template #footer>
+        <template
+          #footer
+        >
           <FSRow
             class="fs-data-table-footer"
             align="center-right"
             padding="16px"
             gap="24px"
           >
-            <template v-if="$props.modelValue.length">
-              <template v-if="$props.modelValue.length >= innerItems.length">
+            <template
+              v-if="$props.modelValue.length"
+            >
+              <template
+                v-if="$props.modelValue.length >= innerItems.length"
+              >
                 <FSRow
                   gap="2px"
                 >
                   <FSText
                     font="text-button"
                   >
-                    {{ $tr("ui.data-table.all-selected-bold", "Attention:") }}
+                    {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
                   </FSText>
                   <FSText>
                     {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
                   </FSText>
                 </FSRow>
               </template>
-              <template v-else>
+              <template
+                v-else
+              >
                 <FSText>
                   {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
                 </FSText>
@@ -446,16 +510,21 @@
         </template>
       </v-data-iterator>
     </template>
-    <template v-else>
+    <template
+      v-else
+    >
       <v-data-iterator
         class="fs-data-table-iterator"
         :items="innerItems"
         :itemsPerPage="size"
       >
-        <template #default="{ items }">
+        <template
+          #default="{ items }"
+        >
           <FSRow
             width="hug"
             class="fs-data-iterator-container"
+            :gap="$props.tileGap"
           >
             <FSDraggable
               v-for="(item, index) in items.filter((item) => item.type === 'item')"
@@ -464,7 +533,7 @@
               :item="item"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
-              @dragover="onDragOver($event, '.fs-draggable-item', '.fs-data-iterator-container')"
+              @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
               @drop="(event) => onDrop(event, item, '.fs-draggable-item')"
               @dragleave="onDragLeave"
               @dragover.prevent
@@ -474,16 +543,19 @@
                 v-bind="{ index, item: item.raw, toggleSelect }"
               >
                 <FSDataIteratorItem
+                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
                   :showSelect="$props.showSelect"
                   :itemTo="$props.itemTo"
                   :color="$props.color"
                   :item="item.raw"
                   :key="index"
+                  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
                   @update:modelValue="toggleSelect"
                 >
-                  <template #[`item.top`]="props">
+                  <template
+                    #item.top="props"
+                  >
                     <slot
                       name="item.top"
                       v-bind="props"
@@ -504,7 +576,9 @@
                       </FSText>
                     </slot>
                   </template>
-                  <template #[`item.bottom`]="props">
+                  <template
+                    #item.bottom="props"
+                  >
                     <slot
                       name="item.bottom"
                       v-bind="props"
@@ -517,7 +591,9 @@
         </template>
       </v-data-iterator>
     </template>
-    <div class="fs-data-table-intersection" />
+    <div
+      class="fs-data-table-intersection"
+    />
   </FSCol>
 </template>
 
@@ -528,6 +604,7 @@ import { useRouter } from "vue-router";
 import { ColorEnum, FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { sizeToVar } from "../../utils";
 
 import FSDataIteratorItem from "./FSDataIteratorItem.vue";
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -542,6 +619,7 @@ import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
 import FSText from "../FSText.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
@@ -562,6 +640,7 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSIcon,
+    FSSpan,
     FSText,
     FSRow,
     FSCol
@@ -674,7 +753,27 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    rowColor: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    rowGap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "0"
+    },
+    rowBorderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    tileGap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
   },
   emits: ["update:modelValue", "update:headers", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
@@ -744,10 +843,11 @@ export default defineComponent({
       return slots;
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string]: string | undefined } => {
       return {
         "--fs-data-table-background-color": backgrounds.base,
-        "--fs-data-table-border-color": lights.base
+        "--fs-data-table-border-color": lights.base,
+        "--fs-data-table-row-gap": sizeToVar(props.rowGap)
       };
     });
 
@@ -1061,6 +1161,25 @@ export default defineComponent({
       }
     }
 
+    const rowProps = (row: any): Record<string, any> => {
+      if (props.rowColor && row.item) {
+        const rowColors = getColors(props.rowColor(row.item));
+        return {
+          class: "fs-data-table-custom-row",
+          style: {
+            "--fs-data-table-row-border-size"     : "1px",
+            "--fs-data-table-row-border-radius"   : sizeToVar(props.rowBorderRadius),
+            "--fs-data-table-row-background-color": rowColors.light,
+            "--fs-data-table-row-border-color"    : rowColors.lightContrast,
+            "--fs-data-table-row-color"           : rowColors.lightContrast
+          }
+        };
+      }
+      else {
+        return {};
+      }
+    };
+
     const changeIndex = (oldIndex: number, newIndex: number) => {
       if (oldIndex === newIndex) {
         return;
@@ -1251,6 +1370,7 @@ export default defineComponent({
       filterSlot,
       sortColor,
       sortIcon,
+      rowProps,
       onDrop,
       onDragOver,
       onDragLeave,

package/components/tiles/FSDashboardOrganisationTileUI.vue

@@ -0,0 +1,18 @@
+<template>
+  <FSSimpleIconTileUI
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+
+export default defineComponent({
+  name: "FSDashboardOrganisationTileUI",
+  components: {
+    FSSimpleIconTileUI
+  }
+});
+</script>

package/components/tiles/FSDashboardOrganisationTypeTileUI.vue

@@ -0,0 +1,18 @@
+<template>
+  <FSSimpleIconTileUI
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+
+export default defineComponent({
+  name: "FSDashboardOrganisationTypeTileUI",
+  components: {
+    FSSimpleIconTileUI
+  }
+});
+</script>

package/components/tiles/FSDashboardShallowTileUI.vue

@@ -0,0 +1,18 @@
+<template>
+  <FSSimpleIconTileUI
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+
+export default defineComponent({
+  name: "FSDashboardShallowTileUI",
+  components: {
+    FSSimpleIconTileUI
+  }
+});
+</script>

package/components/tiles/FSFolderTileUI.vue

@@ -0,0 +1,19 @@
+<template>
+  <FSSimpleIconTileUI
+    :iconBackgroundColor="true"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+
+export default defineComponent({
+  name: "FSFolderTileUI",
+  components: {
+    FSSimpleIconTileUI
+  }
+});
+</script>

package/components/tiles/FSSimpleIconTileUI.vue

@@ -32,7 +32,7 @@
           </FSText>
         </FSCol>
         <FSIconCard
-          :backgroundColor="$props.iconBackgroundColor"
+          :backgroundColor="iconBackgroundColor"
           :icon="$props.icon"
           :size="imageSize"
         />
@@ -84,9 +84,9 @@ export default defineComponent({
       default: ColorEnum.Light
     },
     iconBackgroundColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      type: Boolean,
       required: false,
-      default: null
+      default: false
     },
     icon: {
       type: String as PropType<string>,
@@ -102,6 +102,10 @@ export default defineComponent({
   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;
     });
@@ -115,6 +119,7 @@ export default defineComponent({
     });
 
     return {
+      iconBackgroundColor,
       ColorEnum,
       imageSize,
       infoWidth

package/components/tiles/FSTile.vue

@@ -1,6 +1,7 @@
 <template>
   <FSClickable
     v-if="$props.href || $props.to || $attrs.onClick"
+    variant="background"
     class="fs-tile"
     padding="12px"
     :height="height"
@@ -15,9 +16,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 +35,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 +62,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 +107,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 +126,9 @@ export default defineComponent({
     });
 
     return {
-      ColorEnum,
-      style,
+      height,
       width,
-      height
+      style
     };
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.71",
+  "version": "0.0.73",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.71",
-    "@dative-gpi/foundation-shared-services": "0.0.71",
+    "@dative-gpi/foundation-shared-domain": "0.0.73",
+    "@dative-gpi/foundation-shared-services": "0.0.73",
     "@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": "72097470e9163b0da5e7ab5d67496ac5c403f918"
+  "gitHead": "6798551a8edc232d59e64569cf432272685a4d15"
 }

package/styles/components/fs_card.scss

@@ -1,6 +1,7 @@
 .fs-card {
+    border: var(--fs-card-border-size) var(--fs-card-border-style);
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: var(--fs-card-border-radius);
-    border: var(--fs-card-border-size) solid;
     padding: var(--fs-card-padding);
     height: var(--fs-card-height);
     width: var(--fs-card-width);

package/styles/components/fs_clickable.scss

@@ -1,6 +1,6 @@
 .fs-clickable {
+    border: var(--fs-clickable-border-size) var(--fs-clickable-border-style) !important;
     border-radius: var(--fs-clickable-border-radius) !important;
-    border: var(--fs-clickable-border-size) solid !important;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     
@@ -8,6 +8,12 @@
     border-color: var(--fs-clickable-border-color) !important;
     color: var(--fs-clickable-color) !important;
 
+    & .fs-card {
+        background-color: var(--fs-clickable-background-color) !important;
+        border-color: var(--fs-clickable-border-color) !important;
+        color: var(--fs-clickable-color) !important;
+    }
+
     &.fs-clickable-disabled {
         cursor: default;
     }
@@ -16,12 +22,24 @@
         background-color: var(--fs-clickable-hover-background-color) !important;
         border-color: var(--fs-clickable-hover-border-color) !important;
         color: var(--fs-clickable-hover-color) !important;
+
+        & .fs-card {
+            background-color: var(--fs-clickable-hover-background-color) !important;
+            border-color: var(--fs-clickable-hover-border-color) !important;
+            color: var(--fs-clickable-hover-color) !important;
+        }
     }
 
     &:not(.fs-clickable-disabled):active {
         background-color: var(--fs-clickable-active-background-color) !important;
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
+
+        & .fs-card {
+            background-color: var(--fs-clickable-active-background-color) !important;
+            border-color: var(--fs-clickable-active-border-color) !important;
+            color: var(--fs-clickable-active-color) !important;
+        }
     }
 }
 

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

@@ -1,3 +1,3 @@
 .fs-edit-image {
-    border-style: dashed;
+    border: 1px dashed var(--fs-edit-image-border-color);
 }