fds-vue-core 8.1.0 → 8.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -57,19 +57,19 @@
   "devDependencies": {
     "@chromatic-com/storybook": "5.2.1",
     "@intlify/unplugin-vue-i18n": "11.2.3",
-    "@storybook/addon-a11y": "10.4.5",
-    "@storybook/addon-docs": "10.4.5",
-    "@storybook/addon-vitest": "10.4.5",
-    "@storybook/vue3": "10.4.5",
-    "@storybook/vue3-vite": "10.4.5",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/vue3": "10.4.6",
+    "@storybook/vue3-vite": "10.4.6",
     "@tailwindcss/vite": "4.3.1",
     "@types/node": "22.16.5",
     "@vitejs/plugin-vue": "6.0.7",
-    "@vitest/browser": "3.2.4",
-    "fg-devkit": "1.9.0",
-    "storybook": "10.4.5",
+    "@vitest/browser": "4.1.9",
+    "fg-devkit": "1.9.1",
+    "storybook": "10.4.6",
     "tsx": "4.22.4",
-    "vite": "7.3.2",
+    "vite": "7.3.5",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-vue-devtools": "8.1.3",
     "vitest": "4.1.9",

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

@@ -29,12 +29,15 @@ const emit = defineEmits<{
 
 const { disabled, href, target, rel, attrs } = useAttrsWithDefaults(props)
 
-const rootClasses = computed(() => ['flex transition-opacity duration-200', props.block && 'block w-full'])
+const rootClasses = computed(() => [
+  props.block ? 'flex w-full' : 'inline-flex shrink-0 self-center',
+  'transition-opacity duration-200',
+])
 
 const externalClass = computed(() => attrs.class)
 
 const elBase =
-  'box-border appearance-none inline-flex items-start justify-center w-fit shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-start no-underline transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500'
+  'box-border appearance-none inline-flex items-center justify-center w-fit min-h-0 shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-middle no-underline transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500'
 
 const variantClasses = computed(() =>
   props.invert
@@ -105,7 +108,7 @@ const componentAttrs = computed(() => {
           <FdsIcon :class="iconFillClass" :name="icon" :size="iconSize" />
         </span>
       </template>
-      <span class="pt-0.5">
+      <span>
         {{ text }}
       </span>
     </component>

package/src/components/FdsModal/FdsModal.vue

@@ -102,7 +102,7 @@ const footerClasses = computed(() => [
   {
     'sm:flex-row sm:justify-end': !props.alignLeftFooter,
     'sm:flex-row sm:justify-start': props.alignLeftFooter,
-    'sticky bg-white bottom-0 shadow-[0px_-8px_16px_0px_rgba(255,255,255,0.59)] z-[2] -mx-6 px-6 pb-6':
+    'sticky bg-white bottom-0 shadow-[0px_-8px_16px_0px_rgba(255,255,255,0.59)] z-[2] -mx-6 p-6 mt-0!':
       props.stickyFooter,
   },
 ])

package/src/components/FdsPagination/FdsPagination.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useAttrsWithDefaults } from '../../composables/useAttrsWithDefaults'
+import { debounce } from '../../helpers/debounce'
 import { useFdsI18n } from '../../plugin/useFdsI18n'
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
@@ -49,16 +50,6 @@ watch(
   },
 )
 
-const debounce = <T extends (...args: any[]) => void>(fn: T, delay = 300) => {
-  let timer: ReturnType<typeof setTimeout>
-  return (...args: Parameters<T>) => {
-    clearTimeout(timer)
-    timer = setTimeout(() => {
-      fn(...args)
-    }, delay)
-  }
-}
-
 const handlePageChange = debounce((event: Event) => {
   const target = event.target as HTMLInputElement
   const incomingPage = Number.parseInt(target.value)
@@ -81,7 +72,7 @@ const handlePageChange = debounce((event: Event) => {
 
   internalValue.value = page
   emit('paginate', { target: { id: inputId.value }, detail: page })
-}, 500)
+}, 300)
 
 const handlePagination = (action: 'start' | 'prev' | 'next' | 'end') => {
   let page = 0

package/src/components/FdsSearchSelect/FdsSearchSelect.vue

@@ -8,6 +8,7 @@ import {
   PID_MASK_OPTIONS,
   useIsPid,
 } from '../../composables/useIsPid'
+import { debounce } from '../../helpers/debounce'
 import FdsPagination from '../FdsPagination/FdsPagination.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
 import FdsInput from '../Form/FdsInput/FdsInput.vue'
@@ -258,14 +259,6 @@ watch(
   { immediate: true },
 )
 
-const debounce = <T extends (...args: any[]) => void>(fn: T, delay: number) => {
-  let timeout: ReturnType<typeof setTimeout>
-  return (...args: Parameters<T>) => {
-    clearTimeout(timeout)
-    timeout = setTimeout(() => fn(...args), delay)
-  }
-}
-
 const debouncedEmitChange = debounce((value: string) => {
   const formattedValue = formatPidWithDash(value)
   emit('change', formattedValue)

package/src/components/FdsSearchSelectPro/FdsSearchSelectPro.vue

@@ -9,6 +9,7 @@ import {
   PID_MASK_OPTIONS,
   useIsPid,
 } from '../../composables/useIsPid'
+import { debounce } from '../../helpers/debounce'
 import { useFdsI18n } from '../../plugin/useFdsI18n'
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
@@ -286,28 +287,27 @@ watch(
   { immediate: true },
 )
 
-let changeTimeout: ReturnType<typeof setTimeout> | null = null
-let inputTimeout: ReturnType<typeof setTimeout> | null = null
 const isDebouncingChange = ref(false)
 const isSearching = computed(() => isDebouncingChange.value || props.loading)
 
-const debouncedEmitChange = (value: string) => {
-  if (changeTimeout) clearTimeout(changeTimeout)
-  const delay = Math.max(0, props.debounceMs ?? 500)
-  isDebouncingChange.value = true
-  changeTimeout = setTimeout(() => {
-    const formattedValue = formatPidWithDash(value)
-    emit('change', formattedValue)
+const debouncedEmitChange = debounce(
+  (value: string) => {
+    emit('change', formatPidWithDash(value))
     isDebouncingChange.value = false
-  }, delay)
-}
+  },
+  () => Math.max(0, props.debounceMs ?? 500),
+)
 
-const debouncedEmitInput = (ev: Event) => {
-  if (inputTimeout) clearTimeout(inputTimeout)
-  const delay = Math.max(0, props.debounceMs ?? 500)
-  inputTimeout = setTimeout(() => {
+const debouncedEmitInput = debounce(
+  (ev: Event) => {
     emit('input', ev)
-  }, delay)
+  },
+  () => Math.max(0, props.debounceMs ?? 500),
+)
+
+const scheduleDebouncedEmitChange = (value: string) => {
+  isDebouncingChange.value = true
+  debouncedEmitChange(value)
 }
 
 watch(
@@ -318,7 +318,7 @@ watch(
     }
     filterAndPaginate()
     if (isMultiple.value || selectedItem.value === null) {
-      debouncedEmitChange(newValue)
+      scheduleDebouncedEmitChange(newValue)
     }
   },
 )
@@ -443,9 +443,7 @@ function getCandidateMatchValues(item: Record<string, unknown>): string[] {
   if (isDividerItem(item) && !props.dividerSelectable) return []
 
   if (searchFields.value.length > 0) {
-    return searchFields.value
-      .map((key) => String(item[key] ?? '').trim())
-      .filter((value) => value.length > 0)
+    return searchFields.value.map((key) => String(item[key] ?? '').trim()).filter((value) => value.length > 0)
   }
 
   return [String(item.label ?? item.name ?? '').trim()].filter((value) => value.length > 0)
@@ -757,8 +755,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('mouseup', onClickOutside as EventListener)
-  if (changeTimeout) clearTimeout(changeTimeout)
-  if (inputTimeout) clearTimeout(inputTimeout)
+  debouncedEmitChange.cancel()
+  debouncedEmitInput.cancel()
   isDebouncingChange.value = false
   const input = getInputElement()
   if (input) {

package/src/helpers/debounce.ts

@@ -0,0 +1,35 @@
+export type DebouncedFunction<T extends (...args: never[]) => void> = ((...args: Parameters<T>) => void) & {
+  cancel: () => void
+}
+
+/**
+ * Returns a debounced function that delays invoking `fn` until after `delayMs` has elapsed
+ * since the last call. The returned function has a `cancel()` method to clear pending invocations.
+ */
+export function debounce<T extends (...args: never[]) => void>(
+  fn: T,
+  delayMs: number | (() => number),
+): DebouncedFunction<T> {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+  const debounced = (...args: Parameters<T>) => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId)
+    }
+
+    const delay = typeof delayMs === 'function' ? delayMs() : delayMs
+    timeoutId = setTimeout(() => {
+      timeoutId = undefined
+      fn(...args)
+    }, delay)
+  }
+
+  debounced.cancel = () => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId)
+      timeoutId = undefined
+    }
+  }
+
+  return debounced
+}

package/src/index.ts

@@ -74,6 +74,7 @@ import {
 import { useRouteScrollPositions } from './composables/useRouteScrollPositions'
 import { useViewportBreakpoint } from './composables/useViewportBreakpoint'
 import { capitalizeFirstLetter } from './helpers/capitalizeFirstLetter'
+import { debounce } from './helpers/debounce'
 import { useFileSizeValidation, useFileValidation } from './helpers/fileValidation'
 import { FDS_VUE_CORE_I18N_KEY, type FdsI18nLike } from './plugin/i18n'
 
@@ -128,6 +129,7 @@ export {
 export {
   capitalizeFirstLetter,
   clearUnsavedChanges,
+  debounce,
   formatPidWithDash,
   getExitGuardWizardId,
   isPidString,
@@ -222,6 +224,8 @@ export default FdsVueCorePlugin
 export type { FdsNodeShape, FdsTreeNode, FdsTreeViewProps, FdsTreeViewStyles } from './components/FdsTreeView/types'
 
 // Export helper types
+export type { DebouncedFunction } from './helpers/debounce'
+
 export type { FileSizeValidationResult, FileValidationOptions, FileValidationResult } from './helpers/fileValidation'
 
 // Button component types