fds-vue-core 2.1.8 → 2.1.10

package/src/components/FdsPagination/FdsPagination.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
-import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
-import FdsInput from '@/components/Form/FdsInput/FdsInput.vue'
+import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
+import FdsInput from '../Form/FdsInput/FdsInput.vue'
 import type { FdsPaginationProps } from './types'
 
 const props = withDefaults(defineProps<FdsPaginationProps>(), {
@@ -94,17 +94,10 @@ const handlePagination = (action: 'start' | 'prev' | 'next' | 'end') => {
 </script>
 
 <template>
-  <div
-    class="my-6 flex items-between justify-between gap-2"
-    :id="inputId"
-  >
+  <div class="my-6 flex items-between justify-between gap-2" :id="inputId">
     <!-- Prev -->
     <div class="flex items-center justify-start gap-1 w-[100px]">
-      <FdsSpinner
-        v-if="loading && loadingIndicator === 'start'"
-        size="32px"
-        color="blue"
-      />
+      <FdsSpinner v-if="loading && loadingIndicator === 'start'" size="32px" color="blue" />
       <FdsButtonIcon
         v-else
         icon="first"
@@ -116,11 +109,7 @@ const handlePagination = (action: 'start' | 'prev' | 'next' | 'end') => {
         @click="handlePagination('start')"
       />
 
-      <FdsSpinner
-        v-if="loading && loadingIndicator === 'prev'"
-        size="24px"
-        color="blue"
-      />
+      <FdsSpinner v-if="loading && loadingIndicator === 'prev'" size="24px" color="blue" />
       <FdsButtonIcon
         v-else
         icon="arrowLeft"
@@ -157,11 +146,7 @@ const handlePagination = (action: 'start' | 'prev' | 'next' | 'end') => {
 
     <!-- Next -->
     <div class="flex items-center justify-end gap-1 order-2 sm:order-0 w-[100px]">
-      <FdsSpinner
-        v-if="loading && loadingIndicator === 'next'"
-        size="24px"
-        color="blue"
-      />
+      <FdsSpinner v-if="loading && loadingIndicator === 'next'" size="24px" color="blue" />
       <FdsButtonIcon
         v-else
         icon="arrowRight"
@@ -173,11 +158,7 @@ const handlePagination = (action: 'start' | 'prev' | 'next' | 'end') => {
         @click="handlePagination('next')"
       />
 
-      <FdsSpinner
-        v-if="loading && loadingIndicator === 'end'"
-        size="24px"
-        color="blue"
-      />
+      <FdsSpinner v-if="loading && loadingIndicator === 'end'" size="24px" color="blue" />
       <FdsButtonIcon
         v-else
         icon="last"

package/src/components/FdsSearchSelect/FdsSearchSelect.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useBoldQuery } from '@/composables/useBoldQuery'
-import { isPidString, useIsPid } from '@/composables/useIsPid'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import FdsPagination from '@/components/FdsPagination/FdsPagination.vue'
-import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
-import FdsInput from '@/components/Form/FdsInput/FdsInput.vue'
+import { useBoldQuery } from '../../composables/useBoldQuery'
+import { isPidString, useIsPid } from '../../composables/useIsPid'
+import FdsIcon from '../FdsIcon/FdsIcon.vue'
+import FdsPagination from '../FdsPagination/FdsPagination.vue'
+import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
+import FdsInput from '../Form/FdsInput/FdsInput.vue'
 import type { FdsSearchSelectProps } from './types'
 
 const props = withDefaults(defineProps<FdsSearchSelectProps>(), {

package/src/components/FdsTreeView/FdsTreeView.vue

@@ -4,10 +4,10 @@ import useTreeState from './useTreeState'
 import TreeNode from './TreeNode.vue'
 import { getTitleFromProperties } from './utils'
 import type { FdsTreeNode as TreeNodeType, FdsNodeShape, WrapperProps } from './types'
-import { useElementFinalSize } from '@/composables/useElementFinalSize'
-import FdsInput from '@/components/Form/FdsInput/FdsInput.vue'
-import FdsBlockContent from '@/components/Blocks/FdsBlockContent/FdsBlockContent.vue'
-import FdsText from '@/components/Typography/FdsText/FdsText.vue'
+import { useElementFinalSize } from '../../composables/useElementFinalSize'
+import FdsInput from '../Form/FdsInput/FdsInput.vue'
+import FdsBlockContent from '../Blocks/FdsBlockContent/FdsBlockContent.vue'
+import FdsText from '../Typography/FdsText/FdsText.vue'
 
 const props = withDefaults(defineProps<WrapperProps<Record<string, unknown>>>(), {
   indentation: 36,

package/src/components/FdsTreeView/TreeNode.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject, nextTick, reactive, ref, watch } from 'vue'
-import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
-import FdsCheckbox from '@/components/Form/FdsCheckbox/FdsCheckbox.vue'
-import FdsRadio from '@/components/Form/FdsRadio/FdsRadio.vue'
+import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsCheckbox from '../Form/FdsCheckbox/FdsCheckbox.vue'
+import FdsRadio from '../Form/FdsRadio/FdsRadio.vue'
 import type { FdsTreeViewProps } from './types'
 import useTreeState from './useTreeState'
 import { getTitleFromProperties } from './utils'

package/src/components/FdsTreeView/useTreeState.ts

@@ -1,6 +1,6 @@
 import { computed, reactive, ref, watch } from 'vue'
+import type { FdsIconName } from '../FdsIcon/types'
 import type { FdsTreeNode, FdsTreeNodeArray, FdsTreeNodeItem } from './types'
-import type { FdsIconName } from '@/components/FdsIcon/types'
 import { getTitleFromProperties } from './utils'
 
 interface TreeStateOptions {

package/src/components/FdsTruncatedText/FdsTruncatedText.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useHasSlot } from '@/composables/useHasSlots'
+import { useHasSlot } from '../../composables/useHasSlots'
 import { computed, onMounted, ref, watch } from 'vue'
-import FdsButtonMinor from '@/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'
+import FdsButtonMinor from '../Buttons/FdsButtonMinor/FdsButtonMinor.vue'
 import type { FdsTruncatedTextProps } from './types'
 
 const props = withDefaults(defineProps<FdsTruncatedTextProps>(), {

package/src/components/Form/FdsCheckbox/FdsCheckbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHasSlot } from '@/composables/useHasSlots'
+import { useHasSlot } from '../../../composables/useHasSlots'
 import { computed, nextTick, watch } from 'vue'
 import type { FdsCheckboxProps } from './types'
 

package/src/components/Form/FdsInput/FdsInput.vue

@@ -2,9 +2,9 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 // @ts-ignore - IMask types may not be resolved in build
 import IMask from 'imask'
-import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
-import FdsButtonMinor from '@/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsButtonIcon from '../../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsButtonMinor from '../../Buttons/FdsButtonMinor/FdsButtonMinor.vue'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsInputProps } from './types'
 
 // Support both v-model (modelValue) and :value prop for backward compatibility

package/src/components/Form/FdsRadio/FdsRadio.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHasSlot } from '@/composables/useHasSlots'
+import { useHasSlot } from '../../../composables/useHasSlots'
 import { computed } from 'vue'
 import type { FdsRadioProps } from './types'
 

package/src/components/Form/FdsSelect/FdsSelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsSelectProps } from './types'
 
 // Support both v-model (modelValue) and :value prop for backward compatibility
@@ -73,12 +73,10 @@ function handleChange(ev: Event) {
       :for="selectId"
       class="block font-bold text-gray-900 cursor-pointer"
       :class="{ 'mb-0': meta, 'mb-1': !meta }"
-      >{{ label }}</label
-    >
-    <div
-      v-if="meta"
-      class="font-thin mb-1"
     >
+      {{ label }}
+    </label>
+    <div v-if="meta" class="font-thin mb-1">
       {{ meta }}
     </div>
     <div class="relative">
@@ -93,21 +91,12 @@ function handleChange(ev: Event) {
         @change="handleChange"
         @input="(e) => emit('input', e)"
       >
-        <option
-          v-if="placeholder && !hasDefaultSlot"
-          value=""
-          disabled
-        >
+        <option v-if="placeholder && !hasDefaultSlot" value="" disabled>
           {{ placeholder }}
         </option>
         <!-- Render options from prop if no slot is provided -->
         <template v-if="!hasDefaultSlot && options">
-          <option
-            v-for="option in options"
-            :key="option.value"
-            :value="option.value"
-            :disabled="option.disabled"
-          >
+          <option v-for="option in options" :key="option.value" :value="option.value" :disabled="option.disabled">
             {{ option.label }}
           </option>
         </template>
@@ -126,10 +115,7 @@ function handleChange(ev: Event) {
         />
       </div>
     </div>
-    <div
-      v-if="showInvalidMessage"
-      class="text-red-600 font-bold mt-1"
-    >
+    <div v-if="showInvalidMessage" class="text-red-600 font-bold mt-1">
       {{ invalidMessage }}
     </div>
   </div>

package/src/components/Form/FdsTextarea/FdsTextarea.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 { FdsTextareaProps } from './types'
 
 // Support both v-model (modelValue) and :value prop for backward compatibility
@@ -62,12 +62,10 @@ const internalValue = computed({
       :for="textareaId"
       class="block font-bold text-gray-900 cursor-pointer"
       :class="{ 'mb-0': meta, 'mb-1': !meta }"
-      >{{ label }}</label
-    >
-    <div
-      v-if="meta"
-      class="font-thin mb-1"
     >
+      {{ label }}
+    </label>
+    <div v-if="meta" class="font-thin mb-1">
       {{ meta }}
     </div>
     <div class="relative">
@@ -83,28 +81,13 @@ const internalValue = computed({
         @input="(e) => emit('input', e)"
       />
       <div :class="validationIconClasses">
-        <FdsIcon
-          v-if="isInvalid"
-          name="alert"
-          class="fill-red-600"
-        />
-        <FdsIcon
-          v-if="isValid"
-          name="bigSuccess"
-        />
+        <FdsIcon v-if="isInvalid" name="alert" class="fill-red-600" />
+        <FdsIcon v-if="isValid" name="bigSuccess" />
       </div>
     </div>
-    <div
-      v-if="showInvalidMessage"
-      class="text-red-600 font-bold mt-1"
-    >
+    <div v-if="showInvalidMessage" class="text-red-600 font-bold mt-1">
       {{ invalidMessage }}
     </div>
   </div>
-  <div
-    v-if="isValid"
-    class="sr-only"
-  >
-    OK
-  </div>
+  <div v-if="isValid" class="sr-only">OK</div>
 </template>

package/src/components/Table/FdsTable/FdsTable.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsTableHead from '@/components/Table/FdsTableHead/FdsTableHead.vue'
+import FdsTableHead from '../FdsTableHead/FdsTableHead.vue'
 import FdsTable from './FdsTable.vue'
 
 const meta: Meta<typeof FdsTable> = {

package/src/components/Table/FdsTableHead/FdsTableHead.vue

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

package/src/components/Tabs/FdsTabs/FdsTabs.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsTabs from '@/components/Tabs/FdsTabs/FdsTabs.vue'
-import FdsTabsItem from '@/components/Tabs/FdsTabsItem/FdsTabsItem.vue'
+import FdsTabs from './FdsTabs.vue'
+import FdsTabsItem from '../FdsTabsItem/FdsTabsItem.vue'
 
 const meta: Meta<typeof FdsTabs> = {
   title: 'FDS/FdsTabs',

package/src/components/Typography/FdsListHeading/FdsListHeading.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
+import FdsSpinner from '../../FdsSpinner/FdsSpinner.vue'
 import type { FdsListHeadingProps } from './types'
 
 const props = withDefaults(defineProps<FdsListHeadingProps>(), {