fds-vue-core 2.1.8 → 2.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",

package/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import FdsTreeView from '@/components/FdsTreeView/FdsTreeView.vue'
-import type { FdsTreeNode } from '@/components/FdsTreeView/types'
 import { ref } from 'vue'
+import FdsTreeView from './components/FdsTreeView/FdsTreeView.vue'
+import type { FdsTreeNode } from './components/FdsTreeView/types'
 
 // Mock tree data
 const mockTreeData: FdsTreeNode<Record<string, unknown>>[] = [

package/src/components/Blocks/FdsBlockAlert/FdsBlockAlert.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useHasSlot } from '@/composables/useHasSlots'
 import { computed, ref, watch } from 'vue'
-import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import { useHasSlot } from '../../../composables/useHasSlots'
+import FdsButtonIcon from '../../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsAlertBlockProps } from './types'
 
 const props = withDefaults(defineProps<FdsAlertBlockProps>(), {
@@ -57,11 +57,7 @@ function handleToggle() {
 </script>
 
 <template>
-  <div
-    v-if="isVisible"
-    :id="alertId"
-    :class="alertClasses"
-  >
+  <div v-if="isVisible" :id="alertId" :class="alertClasses">
     <div>
       <div>
         <div
@@ -70,11 +66,7 @@ function handleToggle() {
           :class="{ 'mb-4': (isExpanded || !collapsable) && hasSlot }"
         >
           <div class="flex items-center gap-2">
-            <FdsIcon
-              name="alert"
-              :size="24"
-              class="fill-yellow-700"
-            />
+            <FdsIcon name="alert" :size="24" class="fill-yellow-700" />
             <span>{{ label }}</span>
           </div>
           <div class="relative">
@@ -100,10 +92,7 @@ function handleToggle() {
             />
           </div>
         </div>
-        <div
-          v-if="isExpanded || !collapsable"
-          class="fds-block-alert-slot mb-0-last-child"
-        >
+        <div v-if="isExpanded || !collapsable" class="fds-block-alert-slot mb-0-last-child">
           <slot />
         </div>
       </div>

package/src/components/Blocks/FdsBlockContent/FdsBlockContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, type Slot } from 'vue'
+import { useHasSlot } from '../../../composables/useHasSlots'
 import type { FdsContentBlockProps } from './types'
-import { useHasSlot } from '@/composables/useHasSlots'
 
 const hasSlot = useHasSlot()
 
@@ -43,15 +43,8 @@ defineSlots<{
 </script>
 
 <template>
-  <div
-    :id="contentBlockId"
-    :class="contentClasses"
-    :style="borderLeftStyle"
-  >
-    <header
-      v-if="heading"
-      class="flex items-start justify-between gap-4"
-    >
+  <div :id="contentBlockId" :class="contentClasses" :style="borderLeftStyle">
+    <header v-if="heading" class="flex items-start justify-between gap-4">
       <div class="flex items-center gap-3">
         <h3 :class="headerClasses">{{ heading }}</h3>
       </div>

package/src/components/Blocks/FdsBlockExpander/FdsBlockExpander.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import icons from '@/assets/icons'
+import icons from '../../../assets/icons'
 import FdsBlockExpander from './FdsBlockExpander.vue'
 
 const meta: Meta<typeof FdsBlockExpander> = {

package/src/components/Blocks/FdsBlockExpander/FdsBlockExpander.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsExpanderBlockProps } from './types'
 
 const props = withDefaults(defineProps<FdsExpanderBlockProps>(), {
@@ -44,29 +44,15 @@ function handleToggle() {
 
 <template>
   <div :class="expanderClasses">
-    <button
-      type="button"
-      :class="headerClasses"
-      @click="handleToggle"
-    >
+    <button type="button" :class="headerClasses" @click="handleToggle">
       <span class="inline-flex items-center">
-        <span
-          v-if="preIcon"
-          class="flex items-center mr-4"
-        >
-          <FdsIcon
-            :name="preIcon"
-            :size="24"
-            class="fill-blue-500"
-            :class="{ 'fill-gray-500': disabled }"
-          />
+        <span v-if="preIcon" class="flex items-center mr-4">
+          <FdsIcon :name="preIcon" :size="24" class="fill-blue-500" :class="{ 'fill-gray-500': disabled }" />
         </span>
         <span class="inline-flex items-center">
-          <span
-            class="font-bold font-heading text-lg leading-md"
-            :class="{ 'text-gray-500': disabled }"
-            >{{ label }}</span
-          >
+          <span class="font-bold font-heading text-lg leading-md" :class="{ 'text-gray-500': disabled }">
+            {{ label }}
+          </span>
         </span>
       </span>
       <FdsIcon
@@ -76,11 +62,7 @@ function handleToggle() {
         :class="{ 'rotate-180': isOpen, 'fill-gray-500': disabled }"
       />
     </button>
-    <div
-      :aria-hidden="!isOpen"
-      class="mb-0-last-child block px-4 pb-6 rounded-b-2xl bg-white"
-      v-show="isOpen"
-    >
+    <div :aria-hidden="!isOpen" class="mb-0-last-child block px-4 pb-6 rounded-b-2xl bg-white" v-show="isOpen">
       <slot />
     </div>
   </div>

package/src/components/Blocks/FdsBlockInfo/FdsBlockInfo.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import icons from '@/assets/icons'
+import icons from '../../../assets/icons'
 import FdsBlockInfo from './FdsBlockInfo.vue'
 
 const meta: Meta<typeof FdsBlockInfo> = {

package/src/components/Blocks/FdsBlockInfo/FdsBlockInfo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import { useHasSlot } from '@/composables/useHasSlots'
 import { computed, type Slot } from 'vue'
+import { useHasSlot } from '../../../composables/useHasSlots'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsBlockInfoProps } from './types'
 
 const props = withDefaults(defineProps<FdsBlockInfoProps>(), {

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import icons from '@/assets/icons'
-import FdsSticker from '@/components/FdsSticker/FdsSticker.vue'
+import icons from '../../../assets/icons'
+import FdsSticker from '../../FdsSticker/FdsSticker.vue'
 import FdsBlockLink from './FdsBlockLink.vue'
 
 const meta: Meta<typeof FdsBlockLink> = {

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useHasSlot } from '@/composables/useHasSlots'
 import { computed, useAttrs } from 'vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import { useHasSlot } from '../../../composables/useHasSlots'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsInteractionBlockProps } from './types'
 
 defineOptions({
@@ -99,10 +99,7 @@ const componentType = computed(() => {
     @click="handleClick"
     @keydown="handleKeydown"
   >
-    <div
-      class="flex w-full flex-1"
-      :class="contentClasses"
-    >
+    <div class="flex w-full flex-1" :class="contentClasses">
       <FdsIcon
         v-if="icon"
         :name="icon"
@@ -114,14 +111,8 @@ const componentType = computed(() => {
         class="flex flex-col text-gray-700 font-normal text-base leading-6 tracking-normal"
         :class="containerClasses"
       >
-        <div
-          class="flex items-center gap-4"
-          :class="headerClasses"
-        >
-          <h3
-            class="flex-1 font-heading text-lg tracking-normal m-0 leading-md"
-            :class="headerTextClasses"
-          >
+        <div class="flex items-center gap-4" :class="headerClasses">
+          <h3 class="flex-1 font-heading text-lg tracking-normal m-0 leading-md" :class="headerTextClasses">
             {{ label }}
           </h3>
         </div>
@@ -129,21 +120,12 @@ const componentType = computed(() => {
           <div class="mb-0-last-child">
             <slot />
           </div>
-          <div
-            v-if="hasStickerSlot"
-            class="flex items-end"
-          >
+          <div v-if="hasStickerSlot" class="flex items-end">
             <slot name="sticker" />
           </div>
         </div>
       </div>
     </div>
-    <FdsIcon
-      v-if="arrow"
-      name="arrowRight"
-      :size="20"
-      class="ml-3 fill-blue-500"
-      :class="arrowClasses"
-    />
+    <FdsIcon v-if="arrow" name="arrowRight" :size="20" class="ml-3 fill-blue-500" :class="arrowClasses" />
   </component>
 </template>

package/src/components/Buttons/FdsButtonCopy/FdsButtonCopy.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import FdsButtonMinor from '@/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import { onMounted, ref } from 'vue'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
+import FdsButtonMinor from '../FdsButtonMinor/FdsButtonMinor.vue'
 import type { FdsCopyButtonProps } from './types'
 
 const props = withDefaults(defineProps<FdsCopyButtonProps>(), {
@@ -69,10 +69,7 @@ defineEmits<{ (e: 'click'): void }>()
 </script>
 
 <template>
-  <div
-    v-if="isCopied"
-    class="flex items-center gap-2 h-7"
-  >
+  <div v-if="isCopied" class="flex items-center gap-2 h-7">
     <FdsIcon name="bigSuccess" />
     <span>{{ props.copiedLabel }}</span>
   </div>

package/src/components/Buttons/FdsButtonDownload/FdsButtonDownload.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
+import type { FdsButtonBaseProps } from '../ButtonBaseProps'
 
 defineOptions({
   inheritAttrs: false,
@@ -160,10 +160,7 @@ function onClick(ev: MouseEvent) {
 </script>
 
 <template>
-  <div
-    :class="rootClasses"
-    :aria-disabled="disabled ? 'true' : undefined"
-  >
+  <div :class="rootClasses" :aria-disabled="disabled ? 'true' : undefined">
     <button
       v-bind="$attrs"
       :class="buttonClasses"
@@ -171,15 +168,8 @@ function onClick(ev: MouseEvent) {
       type="button"
       @click="onClick"
     >
-      <span
-        :class="iconOrderClasses"
-        aria-hidden="true"
-      >
-        <FdsIcon
-          :class="iconFillClass"
-          name="download"
-          :size="24"
-        />
+      <span :class="iconOrderClasses" aria-hidden="true">
+        <FdsIcon :class="iconFillClass" name="download" :size="24" />
       </span>
       {{ text }}
     </button>

package/src/components/Buttons/FdsButtonIcon/FdsButtonIcon.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsButtonIcon from './FdsButtonIcon.vue'
-import icons from '@/assets/icons'
+import icons from '../../../assets/icons'
 
 const meta: Meta<typeof FdsButtonIcon> = {
   title: 'FDS/Buttons/FdsButtonIcon',

package/src/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsIconButtonProps } from './types'
 
 const props = withDefaults(defineProps<FdsIconButtonProps>(), {
@@ -42,16 +42,7 @@ function onClick(ev: MouseEvent) {
     :class="buttonClasses"
     @click="onClick"
   >
-    <FdsIcon
-      v-if="!loading"
-      :size="iconSize"
-      :name="icon"
-    />
-    <FdsIcon
-      v-else
-      :size="iconSize"
-      name="spinner"
-      class="animate-spin"
-    />
+    <FdsIcon v-if="!loading" :size="iconSize" :name="icon" />
+    <FdsIcon v-else :size="iconSize" name="spinner" class="animate-spin" />
   </button>
 </template>

package/src/components/Buttons/FdsButtonIcon/types.ts

@@ -1,4 +1,4 @@
-import type { FdsIconName } from '@/components/FdsIcon/types'
+import type { FdsIconName } from '../../FdsIcon/types'
 
 export interface FdsIconButtonProps {
   icon: FdsIconName

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsButtonMinor from './FdsButtonMinor.vue'
-import icons from '@/assets/icons'
+import icons from '../../../assets/icons'
 
 const meta: Meta<typeof FdsButtonMinor> = {
   title: 'FDS/Buttons/FdsButtonMinor',

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
 import { computed, useAttrs } from 'vue'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
+import FdsSpinner from '../../FdsSpinner/FdsSpinner.vue'
+import type { FdsButtonBaseProps } from '../ButtonBaseProps'
 
 defineOptions({
   inheritAttrs: false,
@@ -85,10 +85,7 @@ const componentAttrs = computed(() => ({
 </script>
 
 <template>
-  <div
-    :class="rootClasses"
-    :aria-disabled="disabled ? 'true' : undefined"
-  >
+  <div :class="rootClasses" :aria-disabled="disabled ? 'true' : undefined">
     <component
       :is="as"
       v-bind="componentAttrs"
@@ -100,22 +97,11 @@ const componentAttrs = computed(() => ({
       @click="onClick"
     >
       <template v-if="loading">
-        <FdsSpinner
-          class="mr-2"
-          size="24px"
-          color="inherit"
-        />
+        <FdsSpinner class="mr-2" size="24px" color="inherit" />
       </template>
       <template v-else-if="icon">
-        <span
-          :class="iconOrderClasses"
-          aria-hidden="true"
-        >
-          <FdsIcon
-            :class="iconFillClass"
-            :name="icon"
-            :size="24"
-          />
+        <span :class="iconOrderClasses" aria-hidden="true">
+          <FdsIcon :class="iconFillClass" :name="icon" :size="24" />
         </span>
       </template>
       <span class="pt-0.5">

package/src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsButtonPrimary from './FdsButtonPrimary.vue'
-import icons from '@/assets/icons'
+import icons from '../../../assets/icons'
 
 const meta: Meta<typeof FdsButtonPrimary> = {
   title: 'FDS/Buttons/FdsButtonPrimary',

package/src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
-import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
+import FdsSpinner from '../../FdsSpinner/FdsSpinner.vue'
+import type { FdsButtonBaseProps } from '../ButtonBaseProps'
 
 const props = withDefaults(defineProps<FdsButtonBaseProps>(), {
   loading: false,
@@ -71,10 +71,7 @@ const linkAttrs = computed(() => {
 </script>
 
 <template>
-  <div
-    :class="rootClasses"
-    :aria-disabled="disabled ? 'true' : undefined"
-  >
+  <div :class="rootClasses" :aria-disabled="disabled ? 'true' : undefined">
     <component
       :is="as"
       v-bind="linkAttrs"
@@ -84,21 +81,11 @@ const linkAttrs = computed(() => {
       @click="onClick"
     >
       <template v-if="loading">
-        <FdsSpinner
-          size="24px"
-          color="inherit"
-        />
+        <FdsSpinner size="24px" color="inherit" />
       </template>
       <template v-else-if="icon">
-        <span
-          :class="iconOrderClasses"
-          aria-hidden="true"
-        >
-          <FdsIcon
-            :class="iconFillClass"
-            :name="icon"
-            :size="24"
-          />
+        <span :class="iconOrderClasses" aria-hidden="true">
+          <FdsIcon :class="iconFillClass" :name="icon" :size="24" />
         </span>
       </template>
       <span v-if="text">{{ text }}</span>

package/src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsButtonSecondary from './FdsButtonSecondary.vue'
-import icons from '@/assets/icons'
+import icons from '../../../assets/icons'
 
 const meta: Meta<typeof FdsButtonSecondary> = {
   title: 'FDS/Buttons/FdsButtonSecondary',

package/src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
-import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
+import FdsSpinner from '../../FdsSpinner/FdsSpinner.vue'
+import type { FdsButtonBaseProps } from '../ButtonBaseProps'
 
 const props = withDefaults(defineProps<FdsButtonBaseProps>(), {
   loading: false,
@@ -71,10 +71,7 @@ const linkAttrs = computed(() => {
 </script>
 
 <template>
-  <div
-    :class="rootClasses"
-    :aria-disabled="disabled ? 'true' : undefined"
-  >
+  <div :class="rootClasses" :aria-disabled="disabled ? 'true' : undefined">
     <component
       :is="as"
       v-bind="linkAttrs"
@@ -84,21 +81,11 @@ const linkAttrs = computed(() => {
       @click="onClick"
     >
       <template v-if="loading">
-        <FdsSpinner
-          size="24px"
-          color="inherit"
-        />
+        <FdsSpinner size="24px" color="inherit" />
       </template>
       <template v-else-if="icon">
-        <span
-          :class="iconOrderClasses"
-          aria-hidden="true"
-        >
-          <FdsIcon
-            :class="iconFillClass"
-            :name="icon"
-            :size="24"
-          />
+        <span :class="iconOrderClasses" aria-hidden="true">
+          <FdsIcon :class="iconFillClass" :name="icon" :size="24" />
         </span>
       </template>
       <span v-if="text">{{ text }}</span>

package/src/components/FdsIcon/FdsIcon.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import { computed, ref } from 'vue'
-import icons from '@/assets/icons'
+import icons from '../../assets/icons'
 import FdsIcon from './FdsIcon.vue'
 import type { FdsIconName } from './types'
 

package/src/components/FdsIcon/FdsIcon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import icons, { type IconMap } from '@/assets/icons'
+import icons, { type IconMap } from '../../assets/icons'
 import { computed } from 'vue'
 import type { FdsIconProps } from './types'
 

package/src/components/FdsModal/FdsModal.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import { ref } from 'vue'
-import FdsButtonPrimary from '@/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'
-import FdsButtonSecondary from '@/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'
+import FdsButtonPrimary from '../Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'
+import FdsButtonSecondary from '../Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'
 import FdsModal from './FdsModal.vue'
 
 const meta: Meta<typeof FdsModal> = {

package/src/components/FdsModal/FdsModal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import { useHasSlot } from '@/composables/useHasSlots'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useHasSlot } from '../../composables/useHasSlots'
+import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsIcon from '../FdsIcon/FdsIcon.vue'
 import type { FdsModalProps } from './types'
 
 const props = withDefaults(defineProps<FdsModalProps>(), {
@@ -211,34 +211,16 @@ onBeforeUnmount(() => {
 
 <template>
   <Teleport to="body">
-    <div
-      v-if="isOpen"
-      @click="handleBackdropClick"
-      :class="modalOuterClasses"
-    >
+    <div v-if="isOpen" @click="handleBackdropClick" :class="modalOuterClasses">
       <!-- Backdrop -->
       <div class="fixed top-0 left-0 w-full h-full bg-black/34 z-99"></div>
 
       <!-- Modal Inner -->
-      <div
-        class="fds-modal-inner"
-        :class="modalInnerClasses"
-        role="alertdialog"
-        aria-modal="true"
-        @click.stop
-      >
+      <div class="fds-modal-inner" :class="modalInnerClasses" role="alertdialog" aria-modal="true" @click.stop>
         <!-- Header -->
         <div class="flex justify-between mb-4">
-          <h3
-            tabindex="-1"
-            :class="headerTitleClasses"
-          >
-            <FdsIcon
-              v-if="iconName"
-              :name="iconName"
-              :size="24"
-              :class="iconClasses"
-            />
+          <h3 tabindex="-1" :class="headerTitleClasses">
+            <FdsIcon v-if="iconName" :name="iconName" :size="24" :class="iconClasses" />
             {{ heading }}
           </h3>
           <FdsButtonIcon
@@ -257,10 +239,7 @@ onBeforeUnmount(() => {
         </div>
 
         <!-- Footer -->
-        <div
-          v-if="hasFooterSlot"
-          :class="footerClasses"
-        >
+        <div v-if="hasFooterSlot" :class="footerClasses">
           <slot name="modal-footer" />
         </div>
       </div>