@dative-gpi/foundation-shared-components 0.0.103 → 0.0.105

package/components/FSAccordionPanel.vue

@@ -117,7 +117,7 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-accordion-panel-padding-title"         : sizeToVar(props.paddingTitle),
         "--fs-accordion-panel-padding-content"       : sizeToVar(props.paddingContent),

package/components/FSButton.vue

@@ -213,7 +213,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         switch (props.variant) {
           case "icon": return {

package/components/FSCalendar.vue

@@ -118,7 +118,7 @@ export default defineComponent({
     const innerMonth = ref(props.modelValue ? epochToPicker(props.modelValue).getMonth() : new Date().getMonth());
     const innerYear = ref(props.modelValue ? epochToPicker(props.modelValue).getFullYear() : new Date().getFullYear());
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-calendar-background-color"       : backgrounds.base,
         "--fs-calendar-hover-background-color" : colors.value.light,

package/components/FSCalendarTwin.vue

@@ -223,7 +223,7 @@ export default defineComponent({
       }
     }
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-calendar-background-color"       : backgrounds.base,
         "--fs-calendar-hover-background-color" : colors.value.light,

package/components/FSCard.vue

@@ -115,7 +115,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       switch (props.variant) {
         case "standard": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",

package/components/FSCheckbox.vue

@@ -127,7 +127,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-checkbox-cursor"        : "default",

package/components/FSChip.vue

@@ -105,7 +105,7 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       switch (props.variant) {
         case "standard": return {
           "--fs-chip-height"                 : sizeToVar(props.height),

package/components/FSClickable.vue

@@ -211,7 +211,7 @@ export default defineComponent({
     const hover = ref(false);
     const active = ref(false);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-clickable-border-size"     : props.border ? "1px" : "0",

package/components/FSClock.vue

@@ -115,7 +115,7 @@ export default defineComponent({
     const innerHours = ref(props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0);
     const innerMinutes = ref(props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-clock-field-cursor"             : "default",

package/components/FSCol.vue

@@ -43,7 +43,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed((): { [key: string] : string | undefined } => ({
+    const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-col-padding": sizeToVar(props.padding),
       "--fs-col-gap"    : sizeToVar(props.gap),
       "--fs-col-width"  : sizeToVar(props.width),

package/components/FSDialog.vue

@@ -128,7 +128,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (isExtraSmall.value) {
         return {
           "--fs-dialog-width": "100%"

package/components/FSDivider.vue

@@ -85,7 +85,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       switch (props.variant) {
         case "base": return {
           "--fs-divider-size" : sizeToVar(props.size),

package/components/FSFadeOut.vue

@@ -54,7 +54,7 @@ export default defineComponent({
 
     const resizeObserver = ref<ResizeObserver | null>(null);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-fade-out-height"             : sizeToVar(props.height),
         "--fs-fade-out-width"              : sizeToVar(props.width),

package/components/FSGrid.vue

@@ -95,7 +95,7 @@ export default defineComponent({
 
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-grid-border-color": lights.dark
       };

package/components/FSIcon.vue

@@ -46,7 +46,7 @@ export default defineComponent({
       return null;
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       switch(props.size) {
         case "s": return {
           "--fs-icon-font-size": isMobileSized.value ? "14px" : "16px"

package/components/FSImage.vue

@@ -110,7 +110,7 @@ export default defineComponent({
       "/9j/"     : "image/jpg",
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
         "--fs-image-blurhash-opacity": blurHash.value ? "1" : "0"

package/components/FSLabel.vue

@@ -80,7 +80,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),

package/components/FSLink.vue

@@ -95,7 +95,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),

package/components/FSLoader.vue

@@ -48,7 +48,7 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-loader-background-color": backgrounds.base,
         "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),

package/components/FSOptionGroup.vue

@@ -205,7 +205,7 @@ export default defineComponent({
 
     const colors = getColors(props.optionColor);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-option-group-border-size"  : props.border ? "1px" : "0",
         "--fs-option-group-border-radius": sizeToVar(props.borderRadius),

package/components/FSPagination.vue

@@ -63,7 +63,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       switch (props.color) {
         case ColorEnum.Light:
         case ColorEnum.Dark: return {

package/components/FSRadio.vue

@@ -122,7 +122,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-radio-cursor"     : "default",

package/components/FSRow.vue

@@ -48,7 +48,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed((): { [key: string] : string | undefined } => ({
+    const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-row-flex-wrap": props.wrap ? "wrap" : "nowrap",
       "--fs-row-padding"  : sizeToVar(props.padding),
       "--fs-row-gap"      : sizeToVar(props.gap),

package/components/FSSlideGroup.vue

@@ -97,7 +97,7 @@ export default defineComponent({
 
     const slideGroupRef = ref<HTMLElement | null>(null);
 
-    const style = computed((): { [key: string] : string | undefined } => ({
+    const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-arrows-width": props.dash ? "52px" : "32px",
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),

package/components/FSSlider.vue

@@ -119,7 +119,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-slider-cursor"     : "default",

package/components/FSSpan.vue

@@ -56,7 +56,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-span-line-clamp": props.lineClamp.toString()
       };

package/components/FSSwitch.vue

@@ -108,7 +108,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",

package/components/FSTabs.vue

@@ -47,7 +47,7 @@ export default defineComponent({
     const colors = computed(() => getColors(props.color));
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => ({
+    const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-color"                 : darks.base,
       "--fs-group-disabled-color"        : darks.light,
       "--fs-group-hover-background-color": colors.value.light,

package/components/FSTag.vue

@@ -77,7 +77,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       switch (props.variant) {
         case "standard": return {
           "--fs-tag-background-color"       : colors.value.light,

package/components/FSText.vue

@@ -70,7 +70,7 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-span-line-clamp": props.lineClamp.toString(),
         "--fs-text-color"     : colors.value[props.variant]

package/components/FSWindow.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 
     delete slots.default;
 
-    const style = computed((): { [key: string] : string | undefined } => ({
+    const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-window-width": sizeToVar(props.width)
     }));
 

package/components/FSWrapGroup.vue

@@ -45,7 +45,7 @@ export default defineComponent({
 
     const wrapGroupRef = ref(null);
 
-    const style = computed((): { [key: string] : string | undefined } => ({
+    const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
       "--fs-group-color"      : darks.light,

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -102,7 +102,7 @@ export default defineComponent({
         }];
       }
       return [];
-    }
+    };
 
     return {
       ColorEnum,

package/components/fields/FSBaseField.vue

@@ -113,7 +113,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-base-field-color": lights.dark

package/components/fields/FSDateField.vue

@@ -229,7 +229,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-date-field-color": lights.dark

package/components/fields/FSDateRangeField.vue

@@ -133,7 +133,7 @@ export default defineComponent({
     const dialog = ref(false);
     const innerDateRange = ref<number[] | null>(props.modelValue);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-date-field-color": lights.dark

package/components/fields/FSDateTimeField.vue

@@ -288,7 +288,7 @@ export default defineComponent({
       innerDate.value = props.modelValue - innerTime.value;
     }
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-date-field-color": lights.dark

package/components/fields/FSDateTimeRangeField.vue

@@ -186,7 +186,7 @@ export default defineComponent({
       }
     }
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-date-field-color": lights.dark

package/components/fields/FSIconField.vue

@@ -135,7 +135,7 @@ export default defineComponent({
     const toggleSetRef = ref<HTMLElement | null>(null);
     const innerValue = ref<string | null>(null);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-icon-field-color": lights.dark

package/components/fields/FSPasswordField.vue

@@ -69,7 +69,7 @@ export default defineComponent({
 
     const stars = ref(true);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-password-field-cursor"   : "default",

package/components/fields/FSRichTextField.vue

@@ -314,7 +314,7 @@ export default defineComponent({
       return ["readonly"].includes(props.variant);
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       let minHeight: string | undefined = "auto";
       if (!readonly.value) {
         const base = isMobileSized.value ? 30 : 42;

package/components/fields/FSSelectField.vue

@@ -292,7 +292,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-select-field-cursor"             : "default",

package/components/fields/FSTagField.vue

@@ -127,7 +127,7 @@ export default defineComponent({
 
     const innerValue = ref("");
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-tag-field-color": lights.dark

package/components/fields/FSTextArea.vue

@@ -134,7 +134,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       let height: string | undefined = undefined;
       let minHeight: string | undefined = undefined;
       if (!props.autoGrow) {

package/components/fields/FSTextField.vue

@@ -122,7 +122,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-text-field-cursor"             : "default",

package/components/fields/FSTimeField.vue

@@ -126,7 +126,7 @@ export default defineComponent({
       }
     }
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-time-field-cursor"             : "default",

package/components/fields/FSTimeSlotField.vue

@@ -141,7 +141,7 @@ export default defineComponent({
       return acc;
     }, [] as { id: number, label: string }[]);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
           "--fs-time-slot-field-cursor"             : "default",

package/components/lists/FSLoadDataTable.vue

@@ -81,7 +81,7 @@ export default defineComponent({
 
     const backgroundColors = getColors(ColorEnum.Background);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-load-data-table-background-color": backgroundColors.base
       };

package/components/tiles/FSLoadTile.vue

@@ -108,7 +108,7 @@ export default defineComponent({
       }
     });
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-load-tile-background-color": backgroundColors.base
       };

package/components/tiles/FSTile.vue

@@ -107,7 +107,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { getGradients } = useColors();
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       if (props.bottomColor) {
         const bottomColors = getGradients(props.bottomColor);
         return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.103",
+  "version": "0.0.105",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.103",
-    "@dative-gpi/foundation-shared-services": "0.0.103",
+    "@dative-gpi/foundation-shared-domain": "0.0.105",
+    "@dative-gpi/foundation-shared-services": "0.0.105",
     "@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": "dd1b4c1e23a1826d70e02de27cb419205392fc5c"
+  "gitHead": "87c3913599bcfc96f33e3f2528e2be91a252726e"
 }