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

package/components/FSClickable.vue

@@ -123,12 +123,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
-import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
-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";
 
@@ -213,7 +211,7 @@ export default defineComponent({
     const hover = ref(false);
     const active = ref(false);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-clickable-border-size"     : props.border ? "1px" : "0",
@@ -229,41 +227,39 @@ export default defineComponent({
       switch (props.variant) {
         case "standard":
           switch (props.color) {
-            case ColorEnum.Dark:
-            case ColorEnum.Light:
-              return {
-                "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-                "--fs-clickable-border-style"           : props.borderStyle,
-                "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-                "--fs-clickable-background-color"       : backgrounds.base,
-                "--fs-clickable-border-color"           : lights.dark,
-                "--fs-clickable-color"                  : lights.lightContrast,
-                "--fs-clickable-hover-background-color" : lights.base,
-                "--fs-clickable-hover-border-color"     : lights.dark,
-                "--fs-clickable-hover-color"            : lights.baseContrast,
-                "--fs-clickable-active-background-color": lights.dark,
-                "--fs-clickable-active-border-color"    : lights.dark,
-                "--fs-clickable-active-color"           : lights.darkContrast,
-                "--fs-clickable-height"                 : sizeToVar(props.height),
-                "--fs-clickable-width"                  : sizeToVar(props.width)
-              };
-            default:
-              return {
-                "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-                "--fs-clickable-border-style"           : props.borderStyle,
-                "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-                "--fs-clickable-background-color"       : colors.value.light,
-                "--fs-clickable-border-color"           : colors.value.lightContrast,
-                "--fs-clickable-color"                  : colors.value.lightContrast,
-                "--fs-clickable-hover-background-color" : colors.value.base,
-                "--fs-clickable-hover-border-color"     : colors.value.base,
-                "--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 ColorEnum.Dark :
+            case ColorEnum.Light: return {
+              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+              "--fs-clickable-border-style"           : props.borderStyle,
+              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+              "--fs-clickable-background-color"       : backgrounds.base,
+              "--fs-clickable-border-color"           : lights.dark,
+              "--fs-clickable-color"                  : lights.lightContrast!,
+              "--fs-clickable-hover-background-color" : lights.base,
+              "--fs-clickable-hover-border-color"     : lights.dark,
+              "--fs-clickable-hover-color"            : lights.baseContrast!,
+              "--fs-clickable-active-background-color": lights.dark,
+              "--fs-clickable-active-border-color"    : lights.dark,
+              "--fs-clickable-active-color"           : lights.darkContrast!,
+              "--fs-clickable-height"                 : sizeToVar(props.height),
+              "--fs-clickable-width"                  : sizeToVar(props.width)
+            };
+            default: return {
+              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+              "--fs-clickable-border-style"           : props.borderStyle,
+              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+              "--fs-clickable-background-color"       : colors.value.light,
+              "--fs-clickable-border-color"           : colors.value.lightContrast!,
+              "--fs-clickable-color"                  : colors.value.lightContrast!,
+              "--fs-clickable-hover-background-color" : colors.value.base,
+              "--fs-clickable-hover-border-color"     : colors.value.base,
+              "--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 "background": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
@@ -273,11 +269,11 @@ export default defineComponent({
           "--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-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-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)
         };
@@ -287,13 +283,13 @@ export default defineComponent({
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color"       : colors.value.base,
           "--fs-clickable-border-color"           : colors.value.base,
-          "--fs-clickable-color"                  : colors.value.baseContrast,
+          "--fs-clickable-color"                  : colors.value.baseContrast!,
           "--fs-clickable-hover-background-color" : colors.value.base,
           "--fs-clickable-hover-border-color"     : colors.value.base,
-          "--fs-clickable-hover-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.dark,
-          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-active-color"           : colors.value.darkContrast!,
           "--fs-clickable-height"                 : sizeToVar(props.height),
           "--fs-clickable-width"                  : sizeToVar(props.width)
         };

package/components/FSClock.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
@@ -109,7 +109,7 @@ export default defineComponent({
     const innerHours = ref(0);
     const innerMinutes = ref(0);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-clock-field-cursor"             : "default",

package/components/FSCol.vue

@@ -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";
 
@@ -49,7 +48,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-col-overflow": props.overflow,
       "--fs-col-padding" : sizeToVar(props.padding),
       "--fs-col-gap"     : sizeToVar(props.gap),

package/components/FSColorIcon.vue

@@ -20,11 +20,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, 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 { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSColor from "./FSColor.vue";

package/components/FSDialog.vue

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

package/components/FSDialogMenu.vue

@@ -25,11 +25,9 @@
 </template>
   
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, 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 { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";

package/components/FSDialogSubmit.vue

@@ -61,12 +61,10 @@
 </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 { 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 { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSFadeOut from "./FSFadeOut.vue";

package/components/FSDivider.vue

@@ -34,12 +34,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";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSText from "./FSText.vue";
@@ -87,7 +85,7 @@ 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 "base": return {
           "--fs-divider-size" : sizeToVar(props.size),
@@ -109,9 +107,9 @@ export default defineComponent({
     });
 
     return {
-      style,
-      isEmpty
+      isEmpty,
+      style
     };
   }
 });
-</script>
+</script>

package/components/FSEditImage.vue

@@ -165,7 +165,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum, type FileImage } from "@dative-gpi/foundation-shared-components/models";
@@ -252,13 +252,11 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string]: string | undefined } => {
-      return {
-        "--fs-edit-image-overline-text-color": lights.dark,
-        "--fs-edit-image-color"              : darks.base,
-        "--fs-edit-image-error-color"        : errors.base
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-edit-image-overline-text-color": lights.dark,
+      "--fs-edit-image-color"              : darks.base,
+      "--fs-edit-image-error-color"        : errors.base
+    }));
 
     const onUpload = async (payload: File) => {
       const content = (await readFile(payload)) as string;

package/components/FSErrorToast.vue

@@ -1,8 +1,8 @@
 <template>
   <FSCol
-    padding="18px 32px"
     class="fs-error-toast"
     align="center-center"
+    padding="18px 32px"
     gap="24px"
     :style="style"
   >
@@ -28,8 +28,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 { getError, sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -69,7 +68,7 @@ export default defineComponent({
 
     const errors = getColors(ColorEnum.Error);
 
-    const style = computed((): { [key: string]: string | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "standard": return {
           "--fs-error-toast-border-radius": sizeToVar(props.borderRadius),

package/components/FSFadeOut.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -58,16 +58,14 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-fade-out-height"             : sizeToVar(props.height),
-        "--fs-fade-out-width"              : sizeToVar(props.width),
-        "--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-bottom-mask-height" : bottomMaskHeight.value,
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-fade-out-height"            : sizeToVar(props.height),
+      "--fs-fade-out-width"             : sizeToVar(props.width),
+      "--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-bottom-mask-height": bottomMaskHeight.value
+    }));
 
     const handleMasks = () => {
       if (fadeOutRef.value) {

package/components/FSGrid.vue

@@ -66,12 +66,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 { ColorEnum, type FSGridItem } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import type { FSGridItem } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSText from "./FSText.vue";
 import FSCol from "./FSCol.vue";
@@ -97,11 +95,9 @@ export default defineComponent({
 
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-grid-border-color": lights.dark
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-grid-border-color": lights.dark
+    }));
 
     const headerSlot = (code: string) => {
       if (slots[`header.${code}`]) {

package/components/FSGridMosaic.vue

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

package/components/FSIcon.vue

@@ -10,11 +10,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 { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
@@ -40,14 +39,13 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
-    const color = computed((): string | null => {
+    const color = computed((): string | undefined => {
       if (props.color) {
         return getColors(props.color)[props.variant]!;
       }
-      return null;
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch(props.size) {
         case "s": return {
           "--fs-icon-font-size": isMobileSized.value ? "14px" : "16px"

package/components/FSIconCheck.vue

@@ -9,8 +9,7 @@
 <script lang="ts">
 import { computed, defineComponent } 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 FSIcon from "./FSIcon.vue";
 

package/components/FSImage.vue

@@ -39,8 +39,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 import { decode, isBlurhashValid } from "blurhash";
 
 import { IMAGE_RAW_EXTENSION_URL, IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
@@ -111,12 +110,10 @@ export default defineComponent({
       "/9j/"     : "image/jpg",
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
-        "--fs-image-blurhash-opacity": blurHash.value ? "1" : "0"
-      }
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
+      "--fs-image-blurhash-opacity": blurHash.value ? "1" : "0"
+    }));
 
     const computedHeight = computed((): string | undefined => {
       if (props.height) {
@@ -156,7 +153,7 @@ export default defineComponent({
       return undefined;
     });
 
-    const realSource = computed((): string | null => {
+    const realSource = computed((): string | undefined => {
       if (props.imageB64) {
         if (imageType.value && imageData.value) {
           return `${imageType.value},${imageData.value}`;
@@ -168,7 +165,9 @@ export default defineComponent({
         }
         return IMAGE_RAW_URL(props.imageId);
       }
-      return props.source;
+      else if (props.source) {
+        return props.source;
+      }
     });
 
     const imageData = computed((): string | null => {

package/components/FSImageCard.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
@@ -60,7 +60,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed(() => ({
+    const style = computed((): StyleValue => ({
       "--fs-image-card-background": `url(${props.src})`
     }));
 

package/components/FSLabel.vue

@@ -16,12 +16,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";
 
 import FSLoader from "./FSLoader.vue";
 
@@ -68,21 +66,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const classes = computed((): string[] => {
-      const classNames = ["fs-label", props.font];
-      if (!slots.default) {
-        classNames.push("fs-span-pre-wrap");
-      }
-      if (props.lineClamp > 1) {
-        classNames.push("fs-span-line-clamp");
-      }
-      else if (props.ellipsis) {
-        classNames.push("fs-span-ellipsis");
-      }
-      return classNames;
-    });
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
@@ -99,6 +83,20 @@ export default defineComponent({
       }
     });
 
+    const classes = computed((): string[] => {
+      const classNames = ["fs-label", props.font];
+      if (!slots.default) {
+        classNames.push("fs-span-pre-wrap");
+      }
+      if (props.lineClamp > 1) {
+        classNames.push("fs-span-line-clamp");
+      }
+      else if (props.ellipsis) {
+        classNames.push("fs-span-ellipsis");
+      }
+      return classNames;
+    });
+
     return {
       classes,
       style

package/components/FSLink.vue

@@ -25,13 +25,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
-import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
+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: "FSLink",
@@ -83,21 +81,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const classes = computed((): string[] => {
-      const classNames = ["fs-link", props.font];
-      if (!slots.default) {
-        classNames.push("fs-span-pre-wrap");
-      }
-      if (props.lineClamp > 1) {
-        classNames.push("fs-span-line-clamp");
-      }
-      else if (props.ellipsis) {
-        classNames.push("fs-span-ellipsis");
-      }
-      return classNames;
-    });
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
@@ -114,6 +98,20 @@ export default defineComponent({
       }
     });
 
+    const classes = computed((): string[] => {
+      const classNames = ["fs-link", props.font];
+      if (!slots.default) {
+        classNames.push("fs-span-pre-wrap");
+      }
+      if (props.lineClamp > 1) {
+        classNames.push("fs-span-line-clamp");
+      }
+      else if (props.ellipsis) {
+        classNames.push("fs-span-ellipsis");
+      }
+      return classNames;
+    });
+
     return {
       classes,
       style