@dative-gpi/foundation-shared-components 1.0.7 → 1.0.10

package/components/FSLoader.vue

@@ -7,8 +7,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -49,15 +48,13 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    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),
-        "--fs-loader-padding"         : sizeToVar(props.padding),
-        "--fs-loader-height"          : sizeToVar(getHeight.value),
-        "--fs-loader-width"           : sizeToVar(getWidth.value)
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-loader-background-color": backgrounds.base,
+      "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
+      "--fs-loader-padding"         : sizeToVar(props.padding),
+      "--fs-loader-height"          : sizeToVar(getHeight.value),
+      "--fs-loader-width"           : sizeToVar(getWidth.value)
+    }));
 
     const getHeight = computed((): string | number => {
       switch (props.variant) {

package/components/FSOptionGroup.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { type ColorBase, ColorEnum, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -211,14 +211,12 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const colors = getColors(props.optionColor);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-option-group-background-color": backgrounds.base,
-        "--fs-option-group-border-size"     : props.border ? "1px" : "0",
-        "--fs-option-group-border-radius"   : sizeToVar(props.borderRadius),
-        "--fs-option-group-border-color"    : lights.base
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-option-group-background-color": backgrounds.base,
+      "--fs-option-group-border-size"     : props.border ? "1px" : "0",
+      "--fs-option-group-border-radius"   : sizeToVar(props.borderRadius),
+      "--fs-option-group-border-color"    : lights.base
+    }));
 
     const getVariant = (value: FSToggle): "standard" | "background" | "full" => {
       if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {

package/components/FSPagination.vue

@@ -16,11 +16,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type 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";
 
@@ -65,7 +63,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.color) {
         case ColorEnum.Light:
         case ColorEnum.Dark: return {

package/components/FSRadio.vue

@@ -59,12 +59,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -135,7 +133,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-radio-cursor"     : "default",
@@ -159,7 +157,7 @@ export default defineComponent({
 
     const icon = computed((): string => props.selected ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
 
-    const font = computed((): string => props.selected ? "text-button" : "text-body");
+    const font = computed((): "text-button" | "text-body" => props.selected ? "text-button" : "text-body");
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 

package/components/FSRadioGroup.vue

@@ -29,11 +29,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSRadio from "./FSRadio.vue";
 import FSCol from "./FSCol.vue";

package/components/FSRow.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :style="style"
     :class="classes"
+    :style="style"
     v-bind="$attrs"
   >
     <slot />
@@ -9,8 +9,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -54,7 +53,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-row-flex-wrap": props.wrap ? "wrap" : "nowrap",
       "--fs-row-overflow" : props.overflow,
       "--fs-row-padding"  : sizeToVar(props.padding),

package/components/FSSlideGroup.vue

@@ -40,8 +40,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, onMounted, onUnmounted, ref } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -89,7 +88,7 @@ export default defineComponent({
     
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-group-padding"     : sizeToVar(props.padding),
       "--fs-group-gap"         : sizeToVar(props.gap),
       "--fs-group-color"       : darks.soft,

package/components/FSSlider.vue

@@ -16,8 +16,8 @@
         </FSSpan>
         <FSSpan
           v-if="$props.label && $props.required"
-          class="fs-slider-label"
           style="margin-left: -8px;"
+          class="fs-slider-label"
           font="text-overline"
           :ellipsis="false"
           :style="style"
@@ -29,12 +29,12 @@
     <v-slider
       class="fs-slider"
       hide-details
-      :tickSize="4"
+      :disabled="!$props.editable"
+      :ripple="false"
       :style="style"
       :elevation="0"
-      :ripple="false"
-      :disabled="!$props.editable"
-      :modelValue="$props.modelValue"
+      :tickSize="4"
+      :modelValue="$props.modelValue ?? undefined"
       @update:modelValue="(value) => $emit('update:modelValue', value)"
       v-bind="$attrs"
     >
@@ -64,11 +64,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";
@@ -121,7 +119,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-slider-cursor"     : "default",

package/components/FSSpan.vue

@@ -11,8 +11,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -43,6 +42,10 @@ export default defineComponent({
   setup(props) {
     const { slots } = useSlots();
 
+    const style = computed((): StyleValue => ({
+      "--fs-span-line-clamp": props.lineClamp.toString()
+    }));
+
     const classes = computed((): string[] => {
       const classNames = ["fs-span", props.font];
       if (!slots.default) {
@@ -57,12 +60,6 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-span-line-clamp": props.lineClamp.toString()
-      };
-    });
-
     return {
       classes,
       style

package/components/FSSwitch.vue

@@ -10,10 +10,10 @@
         class="fs-switch"
         hide-details
         inset
-        :style="style"
-        :ripple="false"
-        :rules="$props.rules"
         :validateOn="validateOn"
+        :rules="$props.rules"
+        :ripple="false"
+        :style="style"
         :modelValue="$props.modelValue"
         @update:modelValue="onToggle"
         v-bind="$attrs"
@@ -46,12 +46,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
@@ -112,7 +110,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
@@ -140,7 +138,7 @@ export default defineComponent({
       };
     });
 
-    const font = computed((): string => props.modelValue ? "text-button" : "text-body");
+    const font = computed((): "text-button" | "text-body" => props.modelValue ? "text-button" : "text-body");
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 

package/components/FSTab.vue

@@ -55,11 +55,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";

package/components/FSTabs.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -41,14 +41,14 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => ({
-      "--fs-group-color"                 : darks.soft,
-      "--fs-group-hover-color"           : darks.dark,
-      "--fs-tab-border-color"            : lights.dark,
-      "--fs-tab-hover-border-color"      : darks.dark,
-      "--fs-tab-active-background-color" : colors.value.light,
-      "--fs-tab-tag-background-color"    : colors.value.base,
-      "--fs-tab-tag-color"               : colors.value.baseContrast
+    const style = computed((): StyleValue => ({
+      "--fs-group-color"                : darks.soft,
+      "--fs-group-hover-color"          : darks.dark,
+      "--fs-tab-border-color"           : lights.dark,
+      "--fs-tab-hover-border-color"     : darks.dark,
+      "--fs-tab-active-background-color": colors.value.light,
+      "--fs-tab-tag-background-color"   : colors.value.base,
+      "--fs-tab-tag-color"              : colors.value.baseContrast!
     }));
 
     return {

package/components/FSTag.vue

@@ -38,11 +38,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSIcon from "./FSIcon.vue";
@@ -84,23 +82,23 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "standard": return {
           "--fs-tag-background-color"       : colors.value.light,
-          "--fs-tag-color"                  : colors.value.lightContrast,
+          "--fs-tag-color"                  : colors.value.lightContrast!,
           "--fs-tag-hover-background-color" : colors.value.base,
-          "--fs-tag-hover-color"            : colors.value.baseContrast,
+          "--fs-tag-hover-color"            : colors.value.baseContrast!,
           "--fs-tag-active-background-color": colors.value.dark,
-          "--fs-tag-active-color"           : colors.value.darkContrast
+          "--fs-tag-active-color"           : colors.value.darkContrast!
         };
         case "full": return {
           "--fs-tag-background-color"       : colors.value.base,
-          "--fs-tag-color"                  : colors.value.baseContrast,
+          "--fs-tag-color"                  : colors.value.baseContrast!,
           "--fs-tag-hover-background-color" : colors.value.base,
-          "--fs-tag-hover-color"            : colors.value.baseContrast,
+          "--fs-tag-hover-color"            : colors.value.baseContrast!,
           "--fs-tag-active-background-color": colors.value.dark,
-          "--fs-tag-active-color"           : colors.value.darkContrast
+          "--fs-tag-active-color"           : colors.value.darkContrast!
         };
       }
     });

package/components/FSTagGroup.vue

@@ -32,11 +32,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSWrapGroup from "./FSWrapGroup.vue";
 import FSTag from "./FSTag.vue";

package/components/FSText.vue

@@ -11,12 +11,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSText",
@@ -58,6 +56,11 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
+    const style = computed((): StyleValue => ({
+      "--fs-span-line-clamp": props.lineClamp.toString(),
+      "--fs-text-color"     : colors.value[props.variant]!
+    }));
+
     const classes = computed((): string[] => {
       const classNames = ["fs-text", props.font];
       if (!slots.default) {
@@ -72,13 +75,6 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-span-line-clamp": props.lineClamp.toString(),
-        "--fs-text-color"     : colors.value[props.variant]
-      };
-    });
-
     return {
       classes,
       style

package/components/FSWindow.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type VNode } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue, type VNode } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
@@ -46,7 +46,7 @@ export default defineComponent({
 
     delete slots.default;
 
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-window-width": sizeToVar(props.width)
     }));
 

package/components/FSWrapGroup.vue

@@ -19,8 +19,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, onMounted, onUnmounted, ref } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, type StyleValue, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -52,7 +51,7 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
       "--fs-group-color"      : darks.soft,

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -55,8 +55,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import type { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";

package/components/deviceOrganisations/FSStatusCard.vue

@@ -67,8 +67,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -27,8 +27,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import type { FSDeviceAlert, FSDeviceConnectivity, FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -29,8 +29,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
 import type { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -55,8 +55,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import type { FSDeviceAlert} from "@dative-gpi/foundation-shared-components/models";

package/components/fields/FSAutocompleteField.vue

@@ -313,8 +313,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -450,7 +449,7 @@ export default defineComponent({
     const dialog = ref(false);
     const search = ref("");
 
-    const style = computed((): { [key: string]: string | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-autocomplete-field-cursor":              "default",

package/components/fields/FSBaseField.vue

@@ -27,14 +27,18 @@
         <v-spacer
           style="min-width: 40px;"
         />
-        <FSSpan
-          v-if="$props.messages.length > 0"
-          class="fs-base-field-messages"
-          font="text-overline"
-          :style="style"
+        <template
+          v-if="$props.messages"
         >
-          {{ $props.messages.join(", ") }}
-        </FSSpan>
+          <FSSpan
+            v-if="$props.messages.length > 0"
+            class="fs-base-field-messages"
+            font="text-overline"
+            :style="style"
+          >
+            {{ $props.messages.join(", ") }}
+          </FSSpan>
+        </template>
       </FSRow>
     </slot>
     <slot />
@@ -54,8 +58,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -114,7 +117,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-base-field-color": lights.dark