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

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

@@ -20,8 +20,7 @@
     </template>
     <template #default>
       <v-slide-group-item
-        v-for="(component, index) in getChildren(undefined)"
-        :key="index"
+        v-for="(component) in getChildren()"
       >
         <component :is="component" />
       </v-slide-group-item>
@@ -42,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";
@@ -61,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/FSTabs.vue

@@ -11,10 +11,11 @@
     v-bind="$attrs"
   >
     <template
-      v-for="(component, index) in getChildren(undefined)"
-      :key="index"
+      v-for="component in getChildren()"
     >
-      <component :is="component" />
+      <component
+        :is="component"
+      />
     </template>
   </v-tabs>
 </template>

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/FSWindow.vue

@@ -4,11 +4,12 @@
     v-bind="$attrs"
   >
     <v-window-item
-      v-for="(component, index) in getChildren(undefined)"
+      v-for="(component, index) in getChildren()"
       :value="value(component, index)"
-      :key="index"
     >
-      <component :is="component" />
+      <component
+        :is="component"
+      />
     </v-window-item>
   </v-window>
 </template>

package/components/FSWrapGroup.vue

@@ -6,16 +6,17 @@
     v-bind="$attrs"
   >
     <v-slide-group-item
-      v-for="(component, index) in getChildren(undefined)"
-      :key="index"
+      v-for="component in getChildren()"
     >
-      <component :is="component" />
+      <component
+        :is="component"
+      />
     </v-slide-group-item>
   </v-slide-group>
 </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";
@@ -25,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,7 +1,7 @@
-import { useSlots as useVueSlots } from "vue"
+import { Slot, useSlots as useVueSlots } from "vue"
 
 export const useSlots = () => {
-    const getChildren = (name: string | undefined): any => {
+    const getChildren = (name: string | undefined = undefined): any => {
         const innerSlots = { ...useVueSlots() };
         const innerName = name ?? "default";
         if (innerSlots[innerName] != null) {
@@ -27,7 +27,7 @@ export const useSlots = () => {
         return null;
     };
 
-    const getFirstChild = (name: string | undefined): any => {
+    const getFirstChild = (name: string | undefined = undefined): any => {
         const children = getChildren(name);
         if (children != null) {
             return children[0];
@@ -36,7 +36,7 @@ export const useSlots = () => {
     };
 
     return {
-        slots: { ...useVueSlots() },
+        slots: { ...useVueSlots() } as { [label: string]: Slot<any> },
         getChildren,
         getFirstChild
     };

package/models/rules.ts

@@ -7,59 +7,59 @@ const { epochToLongDateFormat } = useAppTimeZone()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {
-    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"))
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    copy: (original: string, message: string | undefined = undefined) => (value: string) => value === original || (message ?? $tr("ui.rules.copy", "Different from original")),
+    min: (min: number, message: string | undefined = undefined) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
+    max: (max: number, message: string | undefined = undefined) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
+    email: (message: string | undefined = undefined) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
+    phone: (message: string | undefined = undefined) => (value: string) => /^[\+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
+    digit: (message: string | undefined = undefined) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
+    uppercase: (message: string | undefined = undefined) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
+    lowercase: (message: string | undefined = undefined) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
+    special: (message: string | undefined = undefined) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
 };
 
 export const TagRules = {
-    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()))
+    required: (message: string | undefined = undefined) => (value: string[]) => value.length > 0 || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => value.length >= min || (message ?? $tr("ui.rules.tag-min", "Must be at least {0} elements", min.toString())),
+    max: (max: number, message: string | undefined = undefined) => (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 | 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"))
+    required: (message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (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 | undefined = undefined) => (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 | undefined = undefined) => (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 | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
 };
 
 export const DateRules = {
-    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)))
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
+    max: (max: number, message: string | undefined = undefined) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
 };
 
 export const SelectRules = {
-    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()))
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (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 | undefined = undefined) => (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 | 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()))
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (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 | undefined = undefined) => (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 | 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)))
+    required: (message: string | undefined = undefined) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
+    max: (max: number, message: string | undefined = undefined) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
 };
 
 export const ToggleRules = {
-    required: (message: string | null) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
+    required: (message: string | undefined = undefined) => (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.52",
+  "version": "0.0.54",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.52",
-    "@dative-gpi/foundation-shared-services": "0.0.52",
+    "@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": "1cea46f60262aceae3135923684ed4a5af60d0bb"
+  "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;
 }