@dative-gpi/foundation-shared-components 0.0.53 → 0.0.54

package/components/FSCard.vue

@@ -44,25 +44,25 @@ export default defineComponent({
     FSRow
   },
   props: {
-    padding: {
-      type: [String, Number],
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "0"
+      default: null
     },
-    border: {
-      type: Boolean,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: true
+      default: null
     },
-    borderRadius: {
-      type: [String, Number],
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "4px"
+      default: "0"
     },
-    elevation: {
-      type: Boolean,
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: false
+      default: "8px"
     },
     variant: {
       type: String as PropType<"background" | "standard">,
@@ -74,20 +74,20 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Background
     },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    border: {
+      type: Boolean,
       required: false,
-      default: null
+      default: true
     },
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    borderRadius: {
+      type: [String, Number],
       required: false,
-      default: null
+      default: "4px"
     },
-    gap: {
-      type: [String, Number],
+    elevation: {
+      type: Boolean,
       required: false,
-      default: "8px"
+      default: false
     }
   },
   setup(props) {

package/components/FSClickable.vue

@@ -70,23 +70,23 @@ export default defineComponent({
     FSCard
   },
   props: {
-    to: {
-      type: [String, Object] as PropType<string | RouteLocation>,
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    border: {
-      type: Boolean,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: true
+      default: null
     },
-    borderRadius: {
-      type: [String, Number],
+    to: {
+      type: [String, Object] as PropType<string | RouteLocation>,
       required: false,
-      default: "4px"
+      default: null
     },
     variant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<"standard" | "background" | "full">,
       required: false,
       default: "standard"
     },
@@ -100,15 +100,15 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    border: {
+      type: Boolean,
       required: false,
-      default: null
+      default: true
     },
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    borderRadius: {
+      type: [String, Number],
       required: false,
-      default: null
+      default: "4px"
     },
     load: {
       type: Boolean,
@@ -127,6 +127,7 @@ export default defineComponent({
     const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
@@ -158,6 +159,21 @@ export default defineComponent({
           "--fs-clickable-height"                 : sizeToVar(props.height),
           "--fs-clickable-width"                  : sizeToVar(props.width)
         };
+        case "background": return {
+          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+          "--fs-clickable-background-color"       : backgrounds.base,
+          "--fs-clickable-border-color"           : lights.dark,
+          "--fs-clickable-color"                  : darks.base,
+          "--fs-clickable-hover-background-color" : colors.value.base,
+          "--fs-clickable-hover-border-color"     : colors.value.baseContrast,
+          "--fs-clickable-hover-color"            : colors.value.baseContrast,
+          "--fs-clickable-active-background-color": colors.value.dark,
+          "--fs-clickable-active-border-color"    : colors.value.darkContrast,
+          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-height"                 : sizeToVar(props.height),
+          "--fs-clickable-width"                  : sizeToVar(props.width)
+        };
         case "full": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),

package/components/FSCol.vue

@@ -16,30 +16,30 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 export default defineComponent({
   name: "FSCol",
   props: {
-    width: {
-      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
-      required: false,
-      default: "fill"
-    },
     height: {
-      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
       required: false,
       default: "hug"
     },
-    align: {
-      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+    width: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
       required: false,
-      default: "top-left"
+      default: "fill"
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
     gap: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "8px"
+    },
+    align: {
+      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+      required: false,
+      default: "top-left"
     }
   },
   setup(props) {

package/components/FSDialog.vue

@@ -9,10 +9,10 @@
     <FSCard
       padding="24px"
       gap="24px"
-      :width="width"
-      :class="classes"
-      :color="$props.color"
       :border="!isExtraSmall"
+      :color="$props.color"
+      :class="classes"
+      :width="width"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
@@ -20,8 +20,8 @@
     </FSCard>
     <FSButton
       class="fs-dialog-close-button"
-      variant="icon"
       icon="mdi-close"
+      variant="icon"
       :color="ColorEnum.Dark"
       @click="$emit('update:modelValue', false)"
     />
@@ -37,6 +37,7 @@ import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composa
 import FSButton from "./FSButton.vue";
 import FSCard from "./FSCard.vue";
 import FSCol from "./FSCol.vue";
+import { sizeToVar } from "../utils";
 
 export default defineComponent({
   name: "FSDialog",
@@ -46,25 +47,25 @@ export default defineComponent({
     FSCol
   },
   props: {
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "auto"
+    },
+    cardClasses: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
     modelValue: {
       type: Boolean,
       required: false,
       default: false
     },
-    width: {
-      type: [String, Number],
-      required: false,
-      default: "auto"
-    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Dark
-    },
-    cardClasses: {
-      type: [Array, String] as PropType<string[] | string>,
-      required: false,
-      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -72,24 +73,26 @@ export default defineComponent({
     const { isExtraSmall } = useBreakpoints();
 
     const classes = computed((): string[] => {
-      const innerClasses = ["fs-dialog"];
-      if (Array.isArray(props.cardClasses)) {
-        innerClasses.push(...props.cardClasses);
-      }
-      else {
-        innerClasses.push(props.cardClasses);
+      const classNames = ["fs-dialog"];
+      if (props.cardClasses) {
+        if (Array.isArray(props.cardClasses)) {
+          classNames.push(...props.cardClasses);
+        }
+        else {
+          classNames.push(props.cardClasses);
+        }
       }
       if (isExtraSmall.value) {
-        innerClasses.push("fs-dialog-mobile");
+        classNames.push("fs-dialog-mobile");
       }
-      return innerClasses;
+      return classNames;
     });
 
-    const width = computed((): string | number => {
+    const width = computed((): string => {
       if (isExtraSmall.value) {
         return "100%";
       }
-      return props.width;
+      return sizeToVar(props.width);
     });
 
     return {

package/components/FSDivider.vue

@@ -49,7 +49,7 @@ export default defineComponent({
       default: null
     },
     width: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "100%"
     },
@@ -58,15 +58,15 @@ export default defineComponent({
       required: false,
       default: "text-body"
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
-    },
     variant: {
       type: String as PropType<"base" | "light" | "dark">,
       required: false,
       default: "dark"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
     }
   },
   setup(props) {
@@ -99,7 +99,7 @@ export default defineComponent({
     return {
       style,
       isEmpty
-    }
+    };
   }
 });
 </script>

package/components/FSEditImage.vue

@@ -62,18 +62,23 @@ export default defineComponent({
     FSText
   },
   props: {
-    padding: {
-      type: [String, Number],
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "8px"
+      default: null
     },
     width: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    height: {
-      type: [String, Number],
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -86,11 +91,6 @@ export default defineComponent({
       type: [String, Number],
       required: false,
       default: "4px"
-    },
-    modelValue: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/FSFadeOut.vue

@@ -22,21 +22,21 @@ export default defineComponent({
   name: "FSFadeOut",
   props: {
     height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: true
     },
     width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "100%"
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
     maskHeight: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "64px"
     }
@@ -59,56 +59,10 @@ export default defineComponent({
         "--fs-fade-out-padding"            : sizeToVar(props.padding),
         "--fs-fade-out-mask-color"         : backgrounds.base,
         "--fs-fade-out-top-mask-height"    : topMaskHeight.value,
-        "--fs-fade-out-top-mask-top"       : topPadding.value,
         "--fs-fade-out-bottom-mask-height" : bottomMaskHeight.value,
-        "--fs-fade-out-bottom-mask-bottom" : bottomPadding.value
       };
     });
 
-    const topPadding = computed((): string => {
-      switch (typeof props.padding) {
-        case "number": return sizeToVar(props.padding);
-        default: 
-          const paddings = props.padding.split(" ");
-          let tempPadding = "0px";
-          switch (paddings.length) {
-            case 0 :
-              break;
-            default:
-              tempPadding = "-" + sizeToVar(paddings[0]);
-              break;
-          }
-          if (tempPadding === "0px") {
-            return "-1px";
-          }
-          return tempPadding;
-      }
-    });
-
-    const bottomPadding = computed((): string => {
-      switch (typeof props.padding) {
-        case "number": return sizeToVar(props.padding);
-        default: 
-          const paddings = props.padding.split(" ");
-          let tempPadding = "0px";
-          switch (paddings.length) {
-            case 0 :
-              break;
-            case 1 :
-            case 2 :
-              tempPadding = "-" + sizeToVar(paddings[0]);
-              break;
-            default:
-              tempPadding = "-" + sizeToVar(paddings[2]);
-              break;
-          }
-          if (tempPadding === "0px") {
-            return "-1px";
-          }
-          return tempPadding;
-      }
-    });
-
     const onScroll = ({ target }): void => debounce(() => {
       const currentTopMaskHeight = target.children[0].clientHeight;
       const currentBottomMaskHeight = target.children[target.children.length - 1].clientHeight;
@@ -135,15 +89,15 @@ export default defineComponent({
 
     const onResize = (): void => debounce(() => {
       if (fadeOutRef.value) {
-        const currentTopMaskHeight = fadeOutRef.value.children[0].clientHeight;
-        const currentBottomMaskHeight = fadeOutRef.value.children[fadeOutRef.value.children.length - 1].clientHeight;
-        const contentHeight = fadeOutRef.value.scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
+        const currentTopMaskHeight = (fadeOutRef.value as any).children[0].clientHeight;
+        const currentBottomMaskHeight = (fadeOutRef.value as any).children[(fadeOutRef.value as any).children.length - 1].clientHeight;
+        const contentHeight = (fadeOutRef.value as any).scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
 
-        if (fadeOutRef.value.clientHeight < contentHeight) {
-          if (fadeOutRef.value.scrollHeight - fadeOutRef.value.scrollTop - fadeOutRef.value.clientHeight > 0) {
+        if ((fadeOutRef.value as any).clientHeight < contentHeight) {
+          if ((fadeOutRef.value as any).scrollHeight - (fadeOutRef.value as any).scrollTop - (fadeOutRef.value as any).clientHeight > 0) {
             bottomMaskHeight.value = sizeToVar(props.maskHeight);
           }
-          if (fadeOutRef.value.scrollTop > 0) {
+          if ((fadeOutRef.value as any).scrollTop > 0) {
             topMaskHeight.value = sizeToVar(props.maskHeight);
           }
         }
@@ -156,7 +110,7 @@ export default defineComponent({
 
     onMounted((): void => {
       if (fadeOutRef.value) {
-        if (fadeOutRef.value.clientHeight < fadeOutRef.value.scrollHeight) {
+        if ((fadeOutRef.value as any).clientHeight < (fadeOutRef.value as any).scrollHeight) {
           bottomMaskHeight.value = sizeToVar(props.maskHeight);
         }
       }

package/components/FSImage.vue

@@ -39,7 +39,7 @@ import { decode, isBlurhashValid } from "blurhash";
 
 import { useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
 import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSLoader from "./FSLoader.vue";
 
@@ -49,28 +49,23 @@ export default defineComponent({
     FSLoader
   },
   props: {
-    imageId: {
-      type: String as PropType<string | null>,
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    imageB64: {
-      type: String as PropType<string | null>,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
-    cover: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    width: {
-      type: [String, Number],
+    imageId: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    height: {
-      type: [String, Number],
+    imageB64: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -83,10 +78,15 @@ export default defineComponent({
       type: [String, Number],
       required: false,
       default: "4px"
+    },
+    cover: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {
-    const { get: fetchBlurHash, entity: blurHash } = useImageBlurHash();
+    const { fetch: fetchBlurHash, entity: blurHash } = useImageBlurHash();
 
     const imageRef = ref<HTMLFormElement | null>(null);
     const canvasRef = ref<HTMLCanvasElement | null>(null);
@@ -106,9 +106,9 @@ export default defineComponent({
       }
     });
 
-    const computedHeight = computed((): number | string | undefined => {
+    const computedHeight = computed((): string | undefined => {
       if (props.height) {
-        return props.height;
+        return sizeToVar(props.height);
       }
       if (props.width) {
         if (typeof (props.width) === "string") {
@@ -117,17 +117,17 @@ export default defineComponent({
         if (props.aspectRatio) {
           const split = props.aspectRatio.split('/');
           if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return props.width * (parseFloat(split[1]) / parseFloat(split[0]));
+            return sizeToVar(varToSize(props.width) * (parseFloat(split[1]) / parseFloat(split[0])));
           }
         }
-        return props.width;
+        return sizeToVar(props.width);
       }
       return undefined;
     });
 
-    const computedWidth = computed((): number | string | undefined => {
+    const computedWidth = computed((): string | undefined => {
       if (props.width) {
-        return props.width;
+        return sizeToVar(props.width);
       }
       if (props.height) {
         if (typeof (props.height) === "string") {
@@ -136,10 +136,10 @@ export default defineComponent({
         if (props.aspectRatio) {
           const split = props.aspectRatio.split('/');
           if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return props.height * (parseFloat(split[0]) / parseFloat(split[1]));
+            return sizeToVar(varToSize(props.height) * (parseFloat(split[0]) / parseFloat(split[1])));
           }
         }
-        return props.height;
+        return sizeToVar(props.height);
       }
       return undefined;
     });

package/components/FSLoader.vue

@@ -16,30 +16,30 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 export default defineComponent({
   name: "FSLoader",
   props: {
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+    height: {
+      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>,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
-    borderRadius: {
-      type: [String, Number],
-      required: false,
-      default: "4px"
-    },
     variant: {
       type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
       required: false,
       default: "standard"
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
     }
   },
   setup(props) {

package/components/FSOptionGroup.vue

@@ -161,12 +161,12 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "3px"
     },
     gap: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },

package/components/FSPagination.vue

@@ -31,14 +31,14 @@ export default defineComponent({
   },
   props: {
     width: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
     },
     gap: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: 4
+      default: "4px"
     },
     pages: {
       type: Number,
@@ -80,11 +80,11 @@ export default defineComponent({
     });
 
     const classes = (page: number): string[] => {
-      const innerClasses = ["fs-pagination-page"];
+      const classNames = ["fs-pagination-page"];
       if (page <= props.modelValue) {
-        innerClasses.push("fs-pagination-active-page");
+        classNames.push("fs-pagination-active-page");
       }
-      return innerClasses;
+      return classNames;
     };
 
     return {

package/components/FSRow.vue

@@ -16,15 +16,25 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 export default defineComponent({
   name: "FSRow",
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
     width: {
-      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
       required: false,
       default: "fill"
     },
-    height: {
-      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "hug"
+      default: "0"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
     },
     align: {
       type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
@@ -35,16 +45,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    },
-    padding: {
-      type: [String, Number],
-      required: false,
-      default: "0"
-    },
-    gap: {
-      type: [String, Number],
-      required: false,
-      default: "8px"
     }
   },
   setup(props) {

package/components/FSSlideGroup.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -60,12 +60,12 @@ export default defineComponent({
   },
   props: {
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
     gap: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "8px"
     },

package/components/FSSubmitDialog.vue

@@ -67,16 +67,6 @@ export default defineComponent({
     FSRow
   },
   props: {
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    width: {
-      type: [String, Number],
-      required: false,
-      default: "auto"
-    },
     title: {
       type: String as PropType<string | null>,
       required: false,
@@ -87,6 +77,16 @@ export default defineComponent({
       required: false,
       default: null
     },
+    width: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "auto"
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     leftButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,

package/components/FSToggleSet.vue

@@ -148,12 +148,12 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
     gap: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "8px"
     },

package/components/FSWrapGroup.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -26,12 +26,12 @@ export default defineComponent({
   name: "FSWrapGroup",
   props: {
     padding: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "0"
     },
     gap: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "8px"
     }

package/components/fields/FSAutocompleteField.vue

@@ -1,7 +1,9 @@
 <template>
   <FSCol>
     <slot v-if="!$props.hideHeader" name="label">
-      <FSRow :wrap="false">
+      <FSRow
+        :wrap="false"
+      >
         <FSSpan
           v-if="$props.label"
           class="fs-autocomplete-field-label"
@@ -36,6 +38,7 @@
       clearIcon="mdi-close"
       variant="outlined"
       :style="style"
+      :listProps="listStyle"
       :class="classes"
       :hideDetails="true"
       :items="$props.items"
@@ -163,6 +166,7 @@ export default defineComponent({
     delete slots.label;
     delete slots.description;
 
+    const backgrounds = getColors(ColorEnum.Background);
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -180,6 +184,7 @@ export default defineComponent({
       }
       return {
         "--fs-autocomplete-field-cursor"             : "text",
+        "--fs-autocomplete-field-background-color"   : backgrounds.base,
         "--fs-autocomplete-field-border-color"       : lights.dark,
         "--fs-autocomplete-field-color"              : darks.base,
         "--fs-autocomplete-field-active-border-color": darks.dark,
@@ -188,6 +193,12 @@ export default defineComponent({
       };
     });
 
+    const listStyle = computed((): any => {
+      return {
+        style: style.value
+      };
+    });
+
     const classes = computed((): string[] => {
       const classNames = ["fs-autocomplete-field"];
       if (props.multiple) {
@@ -208,13 +219,14 @@ export default defineComponent({
     });
 
     return {
+      innerSearch,
       validateOn,
+      listStyle,
       messages,
       blurred,
+      classes,
       slots,
       style,
-      classes,
-      innerSearch,
       onUpdate
     };
   }

package/components/fields/FSSelectField.vue

@@ -1,7 +1,9 @@
 <template>
   <FSCol>
     <slot v-if="!$props.hideHeader" name="label">
-      <FSRow :wrap="false">
+      <FSRow
+        :wrap="false"
+      >
         <FSSpan
           v-if="$props.label"
           class="fs-select-field-label"
@@ -37,6 +39,7 @@
       clearIcon="mdi-close"
       variant="outlined"
       :style="style"
+      :listProps="listStyle"
       :hideDetails="true"
       :items="$props.items"
       :itemTitle="$props.itemTitle"
@@ -155,6 +158,7 @@ export default defineComponent({
     delete slots.label;
     delete slots.description;
 
+    const backgrounds = getColors(ColorEnum.Background);
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -170,6 +174,7 @@ export default defineComponent({
       }
       return {
         "--fs-select-field-cursor"             : "pointer",
+        "--fs-select-field-background-color"   : backgrounds.base,
         "--fs-select-field-border-color"       : lights.dark,
         "--fs-select-field-color"              : darks.base,
         "--fs-select-field-active-border-color": darks.dark,
@@ -178,10 +183,17 @@ export default defineComponent({
       };
     });
 
+    const listStyle = computed((): any => {
+      return {
+        style: style.value
+      };
+    });
+
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     return {
       validateOn,
+      listStyle,
       messages,
       blurred,
       slots,

package/components/fields/FSTextField.vue

@@ -2,7 +2,6 @@
   <FSCol>
     <slot v-if="!$props.hideHeader" name="label">
       <FSRow
-        height="16px"
         :wrap="false"
       >
         <FSSpan

package/components/lists/FSDataTableUI.vue

@@ -751,11 +751,11 @@ export default defineComponent({
     });
 
     const classes = computed((): string[] => {
-      const innerClasses = ["fs-data-table"];
+      const classNames = ["fs-data-table"];
       if (props.groupBy) {
-        innerClasses.push("fs-data-table-grouped");
+        classNames.push("fs-data-table-grouped");
       }
-      return innerClasses;
+      return classNames;
     });
 
     const extraHeaders = computed((): any[] => {

package/composables/useSlots.ts

@@ -1,4 +1,4 @@
-import { useSlots as useVueSlots } from "vue"
+import { Slot, useSlots as useVueSlots } from "vue"
 
 export const useSlots = () => {
     const getChildren = (name: string | undefined = undefined): any => {
@@ -36,7 +36,7 @@ export const useSlots = () => {
     };
 
     return {
-        slots: { ...useVueSlots() },
+        slots: { ...useVueSlots() } as { [label: string]: Slot<any> },
         getChildren,
         getFirstChild
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.53",
+  "version": "0.0.54",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.53",
-    "@dative-gpi/foundation-shared-services": "0.0.53",
+    "@dative-gpi/foundation-shared-domain": "0.0.54",
+    "@dative-gpi/foundation-shared-services": "0.0.54",
     "@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": "4ecd4c47590cb49ab9f480e12202cde9af5396e1"
+  "gitHead": "391503e595cd9d731fca14b5bb2d3a10b6efee95"
 }

package/styles/components/fs_autocomplete_field.scss

@@ -33,4 +33,20 @@
 
 .fs-autocomplete-field-description {
     color: var(--fs-autocomplete-field-color);
+}
+
+.v-overlay-container > .v-overlay > .v-autocomplete__content {
+    box-shadow: 0px 5px 8px 0px #00000029;
+    border-radius: 4px;
+
+    & .v-list {
+        background-color: var(--fs-autocomplete-field-background-color);
+        border-radius: 4px;
+        margin-top: 4px;
+        padding: 2px;
+
+        & .v-list-item {
+            border-radius: 4px;
+        }
+    }
 }

package/styles/components/fs_fade_out.scss

@@ -4,6 +4,8 @@
     max-height: var(--fs-fade-out-height);
     padding: var(--fs-fade-out-padding);
     width: var(--fs-fade-out-width);
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
     flex-direction: column;
     position: relative;
     display: flex;
@@ -15,7 +17,7 @@
     z-index: 10;
     min-height: var(--fs-fade-out-top-mask-height);
     width: 100%;
-    top: var(--fs-fade-out-top-mask-top);
+    top: 0;
     transition: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-top-mask-height));
 }
@@ -26,7 +28,7 @@
     z-index: 10;
     min-height: var(--fs-fade-out-bottom-mask-height);
     width: 100%;
-    bottom: var(--fs-fade-out-bottom-mask-bottom);
+    bottom: 0;
     transition: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to bottom, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-bottom-mask-height));
 }

package/styles/components/fs_select_field.scss

@@ -31,4 +31,22 @@
 
 .fs-select-field-description {
     color: var(--fs-select-field-color);
+}
+
+.v-overlay-container > .v-overlay > .v-select__content {
+    box-shadow: 0px 5px 8px 0px #00000029;
+    border-radius: 4px;
+
+    & > .v-list {
+        @extend .fs-hide-y-scrollbar;
+
+        background-color: var(--fs-select-field-background-color);
+        border-radius: 4px;
+        margin-top: 4px;
+        padding: 2px;
+
+        & .v-list-item {
+            border-radius: 4px;
+        }
+    }
 }

package/styles/globals/overrides.scss

@@ -121,10 +121,6 @@ $nthOverlay: 25;
   }
 }
 
-.v-overlay__content {
-    min-width: 0 !important;
-}
-
 /***** Applies to all slide groups (FSTabs, FSSlideGroup, FSWrapGroup) *****/
 
 // On touchscreen, hide arrows

package/utils/css.ts

@@ -20,7 +20,36 @@ export const sizeToVar = (value: string[] | number[] | string | number | null, n
     return typeof value === 'string' && isNaN(+value) ? value : `${value}${unit}`;
 };
 
-export const varToSize = (value: string): number => {
+export const varToSize = (value: string[] | number[] | string | number | null): number => {
+    if (value == null) {
+        return 0;
+    }
+    if (Array.isArray(value)) {
+        if (isExtraSmall.value) {
+            const extraSmallValue = value[2] ?? value[1] ?? value[0];
+            if (typeof extraSmallValue === 'number') {
+                return extraSmallValue;
+            }
+            const parsed = parseInt(extraSmallValue.replace(/[^0-9.]/g, ''));
+            return isNaN(parsed) ? 0 : parsed;
+        }
+        if (isMobileSized.value) {
+            const mobileValue = value[1] ?? value[0];
+            if (typeof mobileValue === 'number') {
+                return mobileValue;
+            }
+            const parsed = parseInt(mobileValue.replace(/[^0-9.]/g, ''));
+            return isNaN(parsed) ? 0 : parsed;
+        }
+        if (typeof value[0] === 'number') {
+            return value[0];
+        }
+        const parsed = parseInt(value[0].replace(/[^0-9.]/g, ''));
+        return isNaN(parsed) ? 0 : parsed;
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
     const parsed = parseInt(value.replace(/[^0-9.]/g, ''));
     return isNaN(parsed) ? 0 : parsed;
 }

package/utils/time.ts

@@ -25,5 +25,5 @@ export const getTimeScaleIndex = (value: number): number => {
 export const getTimeBestString = (value: number): string => {
   const unit = getTimeScaleIndex(value);
   const figure = value / timeScale[unit].id;
-  return `${figure} ${figure === 1 ? timeScale[unit].label.toLowerCase() : timeScale[unit].plural.toLowerCaser()}`;
+  return `${figure} ${figure === 1 ? timeScale[unit].label.toLowerCase() : timeScale[unit].plural.toLowerCase()}`;
 }