vikingowl
5fac66a38c
- Add mobile card view for packages (replaces table on small screens) - Implement design tokens system for consistent styling - Add dark/light theme toggle with system preference support - Create reusable StatusBadge and EmptyState components - Add accessible form labels to package filters - Add compact mobile stats display in navigation - Add safe area insets for notched devices - Add reduced motion support for accessibility - Improve touch targets for WCAG compliance - Add unit tests for composables - Update Vuetify configuration and styling
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { ref, watch, type Ref } from 'vue'
|
|
|
|
/**
|
|
* Creates a debounced version of a ref value
|
|
* @param value - The ref to debounce
|
|
* @param delay - Debounce delay in milliseconds (default: 300)
|
|
* @returns A tuple of [debouncedValue, cancel function]
|
|
*/
|
|
export function useDebouncedRef<T>(value: Ref<T>, delay = 300) {
|
|
const debouncedValue = ref(value.value) as Ref<T>
|
|
let timeout: ReturnType<typeof setTimeout> | null = null
|
|
|
|
const cancel = () => {
|
|
if (timeout) {
|
|
clearTimeout(timeout)
|
|
timeout = null
|
|
}
|
|
}
|
|
|
|
watch(value, (newValue) => {
|
|
cancel()
|
|
timeout = setTimeout(() => {
|
|
debouncedValue.value = newValue
|
|
}, delay)
|
|
})
|
|
|
|
return { debouncedValue, cancel }
|
|
}
|
|
|
|
/**
|
|
* Creates a debounced callback function
|
|
* @param callback - The function to debounce
|
|
* @param delay - Debounce delay in milliseconds (default: 300)
|
|
* @returns A tuple of [debounced function, cancel function]
|
|
*/
|
|
export function useDebounce<T extends (...args: Parameters<T>) => void>(callback: T, delay = 300) {
|
|
let timeout: ReturnType<typeof setTimeout> | null = null
|
|
|
|
const cancel = () => {
|
|
if (timeout) {
|
|
clearTimeout(timeout)
|
|
timeout = null
|
|
}
|
|
}
|
|
|
|
const debouncedFn = (...args: Parameters<T>) => {
|
|
cancel()
|
|
timeout = setTimeout(() => {
|
|
callback(...args)
|
|
}, delay)
|
|
}
|
|
|
|
return { debouncedFn, cancel }
|
|
}
|