@dative-gpi/foundation-shared-components 0.0.46 → 0.0.48

package/components/FSCard.vue

@@ -1,8 +1,7 @@
 <template>
-  <FSContainer
+  <div
     class="fs-card"
     :style="style"
-    v-bind="$attrs"
   >
     <slot>
       <FSCol
@@ -25,26 +24,56 @@
         </FSRow>
       </FSCol>
     </slot>
-  </FSContainer>
+  </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
-import FSContainer from "./FSContainer.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSCard",
   components: {
-    FSContainer,
     FSCol,
     FSRow
   },
   props: {
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "0"
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    elevation: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    variant: {
+      type: String as PropType<"background" | "standard">,
+      required: false,
+      default: "background"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Background
+    },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
       required: false,
@@ -62,11 +91,36 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-      return {
-        "--fs-card-width" : sizeToVar(props.width),
-        "--fs-card-height": sizeToVar(props.height)
-      };
+      switch (props.variant) {
+        case "standard": 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": colors.value.light,
+          "--fs-card-border-color"    : colors.value.lightContrast,
+          "--fs-card-color"           : colors.value.lightContrast
+        }
+        case "background": 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": backgrounds.base,
+          "--fs-card-border-color"    : lights.dark,
+          "--fs-card-color"           : darks.base
+        }
+      }
     });
 
     return {

package/components/FSClickable.vue

@@ -6,7 +6,6 @@
     @click.stop="onClick"
   >
     <FSCard
-      :border="$props.border"
       :class="classes"
       :style="style"
       v-bind="$attrs"
@@ -31,7 +30,6 @@
     :to="href"
   >
     <FSCard
-      :border="$props.border"
       :class="classes"
       :style="style"
       v-bind="$attrs"

package/components/FSGrid.vue

@@ -0,0 +1,132 @@
+<template>
+  <FSCol
+    gap="0"
+  >
+    <FSRow
+      v-for="(item, index) in $props.items"
+      align="center-center"
+      class="fs-grid-item"
+      padding="0 8px"
+      height="hug"
+      :style="style"
+      :key="index"
+    >
+      <FSCol
+        gap="2px"
+      >
+        <template v-if="headerSlot(item.code)">
+          <component
+            :is="headerSlot(item.code)"
+            v-bind="{ item }"
+          />
+        </template>
+        <template v-else>
+          <FSText
+            :font="item.hideDefault ? 'text-body' : 'text-overline'"
+          >
+            {{ item.label }}
+          </FSText>
+        </template>
+        <template v-if="!item.hideDefault">
+          <template v-if="itemSlot(item.code)">
+            <component
+              :is="itemSlot(item.code)"
+              v-bind="{ item }"
+            />
+          </template>
+          <template v-else>
+            <FSText>
+              {{ item.value }}
+            </FSText>
+          </template>
+        </template>
+      </FSCol>
+      <v-spacer />
+      <FSRow
+        v-if="itemEndSlot(item.code)"
+        align="center-right"
+      >
+        <component
+          :is="itemEndSlot(item.code)"
+          v-bind="{ item }"
+        />
+      </FSRow>
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, GridItem } from "@dative-gpi/foundation-shared-components/models";
+
+import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSGrid",
+  components: {
+    FSText,
+    FSCol,
+    FSRow
+  },
+  props: {
+    items: {
+      type: Array as PropType<GridItem[]>,
+      default: [],
+      required: false
+    }
+  },
+  setup() {
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    const lights = getColors(ColorEnum.Light);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-grid-border-color": lights.dark
+      };
+    });
+
+    const headerSlot = (code: string) => {
+      if (slots[`header.${code}`]) {
+        return slots[`header.${code}`];
+      }
+      else if (slots[`header`]) {
+        return slots[`header`];
+      }
+      return null;
+    };
+
+    const itemSlot = (code: string) => {
+      if (slots[`item.${code}`]) {
+        return slots[`item.${code}`];
+      }
+      else if (slots[`item`]) {
+        return slots[`item`];
+      }
+      return null;
+    };
+
+    const itemEndSlot = (code: string) => {
+      if (slots[`item-end.${code}`]) {
+        return slots[`item-end.${code}`];
+      }
+      else if (slots[`item-end`]) {
+        return slots[`item-end`];
+      }
+      return null;
+    };
+
+    return {
+      style,
+      itemSlot,
+      headerSlot,
+      itemEndSlot
+    };
+  }
+});
+</script>

package/components/FSGridMosaic.vue

@@ -0,0 +1,67 @@
+<template>
+  <FSRow
+    gap="32px"
+  >
+    <FSRow
+      v-for="(item, index) in  items"
+      :width="width"
+      :key="index"
+    >
+      <FSCol
+        gap="16px"
+      >
+        <FSText
+          font="text-h3"
+        >
+          {{ item.categoryLabel }}
+        </FSText>
+        <FSGrid
+          :items="item.items"
+        />
+      </FSCol>
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { GridMosaic } from "@dative-gpi/foundation-shared-components/models";
+
+import FSGrid from "./FSGrid.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSGridMosaic",
+  components: {
+    FSGrid,
+    FSCol,
+    FSRow
+  },
+  props: {
+    items: {
+      type: Array as PropType<GridMosaic[]>,
+      default: [],
+      required: false
+    },
+    cols: {
+      type: Number as PropType<1 | 2>,
+      required: false,
+      default: 1
+    }
+  },
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
+
+    const width = computed(() => {
+        return props.cols == 2 && !isExtraSmall.value ? "calc(50% - 16px)" : "100%";
+    });
+
+    return {
+      width
+    };
+  }
+});
+</script>

package/components/buttons/FSButtonFile.vue

@@ -21,6 +21,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
+
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -34,12 +35,12 @@ export default defineComponent({
     accept: {
       type: String,
       required: false,
-      default: "",
+      default: ""
     },
     readFile: {
       type: Boolean,
       required: false,
-      default: true,
+      default: true
     }
   },
   emits: ["update:modelValue"],

package/components/buttons/FSButtonFileIcon.vue

@@ -21,6 +21,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
+
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -34,12 +35,12 @@ export default defineComponent({
     accept: {
       type: String,
       required: false,
-      default: "",
+      default: ""
     },
     readFile: {
       type: Boolean,
       required: false,
-      default: true,
+      default: true
     }
   },
   emits: ["update:modelValue"],

package/components/buttons/FSButtonFileLabel.vue

@@ -20,6 +20,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
+
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -33,12 +34,12 @@ export default defineComponent({
     accept: {
       type: String,
       required: false,
-      default: "",
+      default: ""
     },
     readFile: {
       type: Boolean,
       required: false,
-      default: true,
+      default: true
     }
   },
   emits: ["update:modelValue"],

package/components/buttons/FSButtonFileMini.vue

@@ -20,6 +20,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
+
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -33,12 +34,12 @@ export default defineComponent({
     accept: {
       type: String,
       required: false,
-      default: "",
+      default: ""
     },
     readFile: {
       type: Boolean,
       required: false,
-      default: true,
+      default: true
     }
   },
   emits: ["update:modelValue"],

package/components/lists/FSDataIteratorItem.vue

@@ -35,7 +35,7 @@
       </FSRow>
       <slot name="item.bottom" v-bind="{ item: $props.item }" />
     </FSCol>
-    <FSContainer
+    <FSCard
       v-if="$props.showSelect"
       class="fs-data-iterator-item-checkbox"
       :border="false"
@@ -45,7 +45,7 @@
         :modelValue="$props.modelValue"
         @update:modelValue="() => $emit('update:modelValue', $props.item)"
       />
-    </FSContainer>
+    </FSCard>
   </FSCard>
 </template>
 
@@ -54,16 +54,14 @@ import { defineComponent, PropType } from "vue";
 
 import { ColorEnum, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
-import FSContainer from "../FSContainer.vue";
 import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
 import FSText from "../FSText.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
-  name: "FSIteratorCard",
+  name: "FSDataIteratorItem",
   components: {
-    FSContainer,
     FSCheckbox,
     FSCard,
     FSText,

package/components/lists/FSDataTableUI.vue

@@ -319,8 +319,8 @@
       >
         <template #default="{ items }">
           <FSCol
-            width="fill"
             class="fs-data-iterator-container"
+            width="fill"
           >
             <FSDraggable
               v-for="(item, index) in items"

package/components/selects/FSSelectTimeZone.vue

@@ -1,10 +1,19 @@
 <template>
   <FSSelectField
+    itemTitle="id"
     :items="entities"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
-  />
+  >
+    <template #selection>
+      <FSRow>
+        <FSSpan font="text-underline" :style="style">
+          {{ entities.find((entity) => entity.id === $props.modelValue)?.id }}
+        </FSSpan>
+      </FSRow>
+    </template>
+  </FSSelectField>
 </template>
 
 <script lang="ts">

package/components/tiles/FSLoadTile.vue

@@ -39,7 +39,7 @@
         :width="widths.image"
       />
     </FSRow>
-    <FSContainer
+    <FSCard
       v-if="$props.editable"
       class="fs-tile-checkbox"
       :border="false"
@@ -48,7 +48,7 @@
         :modelValue="$props.modelValue"
         @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
       />
-    </FSContainer>
+    </FSCard>
   </FSCard>
 </template>
 
@@ -58,7 +58,6 @@ import { computed, defineComponent } from "vue";
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSContainer from "../FSContainer.vue";
 import FSCheckbox from "../FSCheckbox.vue";
 import FSLoader from "../FSLoader.vue";
 import FSCard from "../FSCard.vue";
@@ -66,9 +65,8 @@ import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
-  name: "FSTile",
+  name: "FSLoadTile",
   components: {
-    FSContainer,
     FSCheckbox,
     FSLoader,
     FSCard,

package/components/tiles/FSTile.vue

@@ -7,7 +7,7 @@
     :height="height"
   >
     <slot />
-    <FSContainer
+    <FSCard
       v-if="$props.editable"
       class="fs-tile-checkbox"
       :border="false"
@@ -17,11 +17,11 @@
         :modelValue="$props.modelValue"
         @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
       />
-    </FSContainer>
-      <div
-        class="fs-tile-bottom"
-        :style="style"
-      />
+    </FSCard>
+    <div
+      class="fs-tile-bottom"
+      :style="style"
+    />
   </FSCard>  
 </template>
 
@@ -31,14 +31,12 @@ import { computed, defineComponent, PropType } from "vue";
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSContainer from "../FSContainer.vue";
 import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
 
 export default defineComponent({
   name: "FSTile",
   components: {
-    FSContainer,
     FSCheckbox,
     FSCard
   },

package/models/grids.ts

@@ -1,10 +1,10 @@
-export interface GridItem {
+export interface GridMosaic {
     categoryLabel: string;
     categoryCode: string;
-    items: Item[];
+    items: GridItem[];
 }
 
-export interface Item {
+export interface GridItem {
     label: string;
     code: string;
     value: string;

package/models/rules.ts

@@ -7,59 +7,59 @@ const { epochToLongDateFormat } = useTimeZone()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {
-    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    copy: (original: string, message: string) => (value: string) => value === original || (message ?? $tr("ui.rules.copy", "Different from original")),
-    min: (min: number, message: string) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
-    max: (max: number, message: string) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
-    email: (message: string) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
-    phone: (message: string) => (value: string) => /^[\+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
-    digit: (message: string) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
-    uppercase: (message: string) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
-    lowercase: (message: string) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
-    special: (message: string) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
+    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    copy: (original: string, message: string | null) => (value: string) => value === original || (message ?? $tr("ui.rules.copy", "Different from original")),
+    min: (min: number, message: string | null) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
+    max: (max: number, message: string | null) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
+    email: (message: string | null) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
+    phone: (message: string | null) => (value: string) => /^[\+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
+    digit: (message: string | null) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
+    uppercase: (message: string | null) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
+    lowercase: (message: string | null) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
+    special: (message: string | null) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
 };
 
 export const TagRules = {
-    required: (message: string) => (value: string[]) => value.length > 0 || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string) => (value: string[]) => value.length >= min || (message ?? $tr("ui.rules.tag-min", "Must be at least {0} elements", min.toString())),
-    max: (max: number, message: string) => (value: string[]) => value.length <= max || (message ?? $tr("ui.rules.tag-max", "Must be at most {0} elements", max.toString()))
+    required: (message: string | null) => (value: string[]) => value.length > 0 || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | null) => (value: string[]) => value.length >= min || (message ?? $tr("ui.rules.tag-min", "Must be at least {0} elements", min.toString())),
+    max: (max: number, message: string | null) => (value: string[]) => value.length <= max || (message ?? $tr("ui.rules.tag-max", "Must be at most {0} elements", max.toString()))
 };
 
 export const NumberRules = {
-    required: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? $tr("ui.rules.number-min", "Must be at least {0}", min.toString())),
-    max: (max: number, message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? $tr("ui.rules.number-max", "Must be at most {0}", max.toString())),
-    integer: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? $tr("ui.rules.number-integer", "Must be an integer"))
+    required: (message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? $tr("ui.rules.number-min", "Must be at least {0}", min.toString())),
+    max: (max: number, message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? $tr("ui.rules.number-max", "Must be at most {0}", max.toString())),
+    integer: (message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? $tr("ui.rules.number-integer", "Must be an integer"))
 };
 
 export const IconRules = {
-    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
 };
 
 export const DateRules = {
-    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
-    max: (max: number, message: string) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
+    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | null) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
+    max: (max: number, message: string | null) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
 };
 
 export const SelectRules = {
-    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.select-min", "Must select at least {0} elements", min.toString())),
-    max: (max: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.select-max", "Must select at most {0} elements", max.toString()))
+    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.select-min", "Must select at least {0} elements", min.toString())),
+    max: (max: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.select-max", "Must select at most {0} elements", max.toString()))
 };
 
 export const AutocompleteRules = {
-    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
-    max: (max: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
+    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
+    max: (max: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
 };
 
 export const TimeRules = {
-    required: (message: string) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
-    max: (max: number, message: string) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
+    required: (message: string | null) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | null) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
+    max: (max: number, message: string | null) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
 };
 
 export const ToggleRules = {
-    required: (message: string) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
+    required: (message: string | null) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.46",
-    "@dative-gpi/foundation-shared-services": "0.0.46",
+    "@dative-gpi/foundation-shared-domain": "0.0.48",
+    "@dative-gpi/foundation-shared-services": "0.0.48",
     "@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": "a1963363ed2f74aa24319fae34baeaa4d54e5e97"
+  "gitHead": "0029f53ff50ea72e704647e64d3419266ae680fa"
 }

package/styles/components/fs_card.scss

@@ -1,4 +1,18 @@
 .fs-card {
-    width: var(--fs-card-width);
+    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);
+    display: flex;
+    
+    background-color: var(--fs-card-background-color);
+    border-color: var(--fs-card-border-color);
+    color: var(--fs-card-color);
+
+    &-elevation {
+        box-shadow: 0px 1px 8px 0px #00000029;
+        border-radius: 4px;
+        margin: 4px;
+    }
 }

package/styles/components/fs_data_iterator_item.scss

@@ -1,6 +1,7 @@
 .fs-data-iterator-item {
     position: relative;
     min-height: 36px;
+    flex: 1 0 0;
 
     & > .fs-col > .fs-row:first-of-type > :last-child {
         padding-right: 22px;

package/styles/components/index.scss

@@ -13,7 +13,6 @@
 @import "fs_color_field.scss";
 @import "fs_color.scss";
 @import "fs_color_icon.scss";
-@import "fs_container.scss";
 @import "fs_data_table.scss";
 @import "fs_data_iterator_item.scss";
 @import "fs_date_field.scss";

package/styles/globals/overrides.scss

@@ -29,8 +29,21 @@
 // Applies to all inputs
 .v-input {
     padding: 0px !important;
-    min-width: 200px;
-    width: 100%;
+
+    &:not(.v-checkbox) {
+        min-width: 200px;
+        width: 100%;
+    }
+
+    &.v-checkbox {
+        @include web {
+            min-width: 24px;
+        }
+
+        @include mobile {
+            min-width: 20px;
+        }
+    }
 
     & .v-input__prepend {
         margin-inline-end: 8px !important;

package/components/FSContainer.vue

@@ -1,67 +0,0 @@
-<template>
-  <div
-    :class="classes"
-    :style="style"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from "vue";
-
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
-
-export default defineComponent({
-  name: "FSContainer",
-  props: {
-    padding: {
-      type: [String, Number],
-      required: false,
-      default: "8px"
-    },
-    border: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    elevation: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  setup(props) {
-    const { getColors } = useColors();
-
-    const backgrounds = getColors(ColorEnum.Background);
-    const lights = getColors(ColorEnum.Light);
-
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-      return {
-        "--fs-container-padding"         : sizeToVar(props.padding),
-        "--fs-container-background-color": backgrounds.base,
-        "--fs-container-border-color"    : lights.dark
-      };
-    });
-
-    const classes = computed((): string[] => {
-      const classNames = ["fs-container"];
-      if (props.border) {
-        classNames.push("fs-container-border");
-      }
-      if (props.elevation) {
-        classNames.push("fs-container-elevation");
-      }
-      return classNames;
-    });
-
-    return {
-      style,
-      classes
-    };
-  }
-})
-</script>

package/components/lists/FSGrid.vue

@@ -1,131 +0,0 @@
-<template>
-  <FSRow
-    gap="32px"
-  >
-    <FSRow
-      v-for="(gridItem, index) in  gridItems"
-      :width="width"
-      :style="style"
-      :key="index"
-    >
-      <FSCol
-        gap="16px"
-      >
-        <FSText
-          font="text-h3"
-        >
-          {{ gridItem.categoryLabel }}
-        </FSText>
-        <FSCol
-          gap="0"
-        >
-          <FSRow
-            v-for="(item, index)  in  gridItem.items"
-            padding="0 8px"
-            align="center-center"
-            class="fs-grid-item"
-            height="hug"
-            :key="index"
-          >
-            <FSCol
-              gap="2px"
-            >
-              <slot :name="`item-header.${gridItem.categoryCode}-${item.code}`" v-bind="{ item }">
-                <FSText
-                  :font="item.hideDefault ? 'text-body' : 'text-overline'"
-                >
-                  {{ item.label }}
-                </FSText>
-              </slot>
-              <FSRow
-                v-if="!item.hideDefault"
-              >
-                <slot
-                  :name="`item-value-left.${gridItem.categoryCode}-${item.code}`"
-                  v-bind="{ item }"
-                >
-                  <FSText>
-                    {{ item.value }}
-                  </FSText>
-                </slot>
-              </FSRow>
-            </FSCol>
-            <v-spacer />
-            <FSRow
-              v-if="useSlot(`item-value-right.${gridItem.categoryCode}-${item.code}`)"
-              align="center-right"
-            >
-              <slot
-                :name="`item-value-right.${gridItem.categoryCode}-${item.code}`"
-                v-bind="{ item }"
-              >
-                <FSText
-                  font="text-body"
-                >
-                  {{ item.value }}
-                </FSText>
-              </slot>
-            </FSRow>
-          </FSRow>
-        </FSCol>
-      </FSCol>
-    </FSRow>
-  </FSRow>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
-
-import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum, GridItem } from "@dative-gpi/foundation-shared-components/models";
-
-import FSDivider from "../FSDivider.vue";
-import FSText from "../FSText.vue";
-
-export default defineComponent({
-  name: "FSGrid",
-  components: {
-    FSDivider,
-    FSText
-  },
-  props: {
-    gridItems: {
-      type: Array as PropType<GridItem[]>,
-      default: [],
-      required: false
-    },
-    cols: {
-      type: Number as PropType<1 | 2>,
-      required: false,
-      default: 1
-    }
-  },
-  setup(props) {
-    const { isExtraSmall } = useBreakpoints();
-    const { getColors } = useColors();
-    const { slots } = useSlots();
-
-    const lights = getColors(ColorEnum.Light);
-
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-      return {
-        "--fs-grid-border-color": lights.dark
-      };
-    });
-
-    const width = computed(() => {
-        return props.cols == 2 && !isExtraSmall.value ? "calc(50% - 16px)" : "100%";
-    });
-
-    const useSlot = (name: string): boolean => {
-      return !!slots[name];
-    };
-
-    return {
-      width,
-      style,
-      useSlot
-    }
-  }
-})
-</script>

package/styles/components/fs_container.scss

@@ -1,16 +0,0 @@
-.fs-container {
-    background-color: var(--fs-container-background-color);
-    padding: var(--fs-container-padding);
-    display: flex;
-
-    &-border {
-        border: 1px solid var(--fs-container-border-color);
-        border-radius: 4px;
-    }
-
-    &-elevation {
-        box-shadow: 0px 1px 8px 0px #00000029;
-        border-radius: 4px;
-        margin: 4px;
-    }
-}