0
# Utilities
1

2
Helper functions and utility modules for common operations, styling, and component development.
3

4
## Capabilities
5

6
### Color Utilities
7

8
Functions for color manipulation, conversion, and Material Design color operations.
9

10
```typescript { .api }
11
/**
12
 * Parse color string into RGB components
13
 * @param color - Color string in various formats (hex, rgb, hsl, named)
14
 * @returns Object with r, g, b numeric values
15
 */
16
function parseColor(color: string): { r: number; g: number; b: number };
17

18
/**
19
 * Convert color to hexadecimal format
20
 * @param color - Color in any supported format
21
 * @returns Hex color string (e.g., "#FF0000")
22
 */
23
function colorToHex(color: string): string;
24

25
/**
26
 * Convert color to RGB format
27
 * @param color - Color in any supported format
28
 * @returns RGB object with r, g, b values
29
 */
30
function colorToRgb(color: string): { r: number; g: number; b: number };
31

32
/**
33
 * Convert color to HSL format
34
 * @param color - Color in any supported format
35
 * @returns HSL object with h, s, l values
36
 */
37
function colorToHsl(color: string): { h: number; s: number; l: number };
38

39
/**
40
 * Get contrasting text color for background
41
 * @param backgroundColor - Background color
42
 * @returns 'white' or 'black' for optimal contrast
43
 */
44
function getContrast(backgroundColor: string): 'white' | 'black';
45

46
/**
47
 * Lighten a color by specified percentage
48
 * @param color - Base color
49
 * @param amount - Percentage to lighten (0-1)
50
 * @returns Lightened color string
51
 */
52
function lighten(color: string, amount: number): string;
53

54
/**
55
 * Darken a color by specified percentage
56
 * @param color - Base color
57
 * @param amount - Percentage to darken (0-1)
58
 * @returns Darkened color string
59
 */
60
function darken(color: string, amount: number): string;
61
```
62

63
**Usage Examples:**
64

65
```typescript
66
import { parseColor, colorToHex, getContrast, lighten } from 'vuetify/util/colors';
67

68
// Parse different color formats
69
const rgbColor = parseColor('#FF5722'); // { r: 255, g: 87, b: 34 }
70
const namedColor = parseColor('red'); // { r: 255, g: 0, b: 0 }
71

72
// Convert colors
73
const hexColor = colorToHex('rgb(255, 87, 34)'); // "#FF5722"
74

75
// Get contrasting text color
76
const textColor = getContrast('#FF5722'); // "white"
77

78
// Adjust color brightness
79
const lightColor = lighten('#FF5722', 0.2); // Lighter shade
80
const darkColor = darken('#FF5722', 0.3); // Darker shade
81
```
82

83
### Animation Utilities
84

85
Animation helper functions and easing definitions for smooth transitions.
86

87
```typescript { .api }
88
/**
89
 * Standard Material Design easing functions
90
 */
91
const easings: {
92
  /** Standard easing curve */
93
  standard: string;
94
  /** Deceleration easing curve */
95
  decelerate: string;
96
  /** Acceleration easing curve */
97
  accelerate: string;
98
  /** Sharp easing curve */
99
  sharp: string;
100
  /** Linear easing curve */
101
  linear: string;
102
  /** Ease in easing curve */
103
  easeIn: string;
104
  /** Ease out easing curve */
105
  easeOut: string;
106
  /** Ease in-out easing curve */
107
  easeInOut: string;
108
};
109

110
/**
111
 * Create CSS animation keyframes
112
 * @param name - Animation name
113
 * @param keyframes - Keyframe definitions
114
 * @returns CSS animation string
115
 */
116
function createAnimation(name: string, keyframes: Record<string, any>): string;
117

118
/**
119
 * Request animation frame with fallback
120
 * @param callback - Function to call on next frame
121
 * @returns Request ID for cancellation
122
 */
123
function requestAnimationFrame(callback: () => void): number;
124

125
/**
126
 * Cancel animation frame request
127
 * @param id - Request ID from requestAnimationFrame
128
 */
129
function cancelAnimationFrame(id: number): void;
130
```
131

132
**Usage Examples:**
133

134
```typescript
135
import { easings, createAnimation } from 'vuetify/util/animation';
136

137
// Use Material Design easing
138
const slideTransition = {
139
  transition: `transform 0.3s ${easings.standard}`,
140
};
141

142
// Create custom animations
143
const fadeInAnimation = createAnimation('fadeIn', {
144
  '0%': { opacity: 0 },
145
  '100%': { opacity: 1 },
146
});
147
```
148

149
### DOM Utilities
150

151
Functions for DOM manipulation, element queries, and browser compatibility.
152

153
```typescript { .api }
154
/**
155
 * Check if code is running in browser environment
156
 */
157
const IN_BROWSER: boolean;
158

159
/**
160
 * Get element's scroll parent
161
 * @param element - Target element
162
 * @param includeHidden - Include elements with hidden overflow
163
 * @returns Scroll parent element
164
 */
165
function getScrollParent(element: Element, includeHidden?: boolean): Element;
166

167
/**
168
 * Check if element has fixed positioning
169
 * @param element - Element to check
170
 * @returns True if element or ancestor is fixed positioned
171
 */
172
function isFixedPosition(element: Element): boolean;
173

174
/**
175
 * Get element's computed style property
176
 * @param element - Target element
177
 * @param property - CSS property name
178
 * @returns Computed style value
179
 */
180
function getComputedStyle(element: Element, property: string): string;
181

182
/**
183
 * Convert pixels to rem units
184
 * @param px - Pixel value
185
 * @returns Rem value string
186
 */
187
function convertToUnit(px: number | string): string;
188

189
/**
190
 * Check if element is in viewport
191
 * @param element - Element to check
192
 * @param rootMargin - Root margin for intersection
193
 * @returns True if element is visible
194
 */
195
function isInViewport(element: Element, rootMargin?: string): boolean;
196
```
197

198
**Usage Examples:**
199

200
```typescript
201
import { getScrollParent, isFixedPosition, convertToUnit } from 'vuetify/util/dom';
202

203
// Find scroll parent for positioning
204
const scrollParent = getScrollParent(myElement);
205

206
// Check positioning context
207
const isFixed = isFixedPosition(overlayElement);
208

209
// Convert units
210
const remValue = convertToUnit(16); // "1rem"
211
const pxValue = convertToUnit('24px'); // "24px"
212
```
213

214
### Event Utilities
215

216
Event handling utilities and helper functions.
217

218
```typescript { .api }
219
/**
220
 * Add event listener with options
221
 * @param element - Target element
222
 * @param event - Event name
223
 * @param handler - Event handler function
224
 * @param options - Event listener options
225
 */
226
function addEventListener(
227
  element: Element | Window,
228
  event: string,
229
  handler: EventListener,
230
  options?: AddEventListenerOptions
231
): void;
232

233
/**
234
 * Remove event listener
235
 * @param element - Target element
236
 * @param event - Event name
237
 * @param handler - Event handler function
238
 * @param options - Event listener options
239
 */
240
function removeEventListener(
241
  element: Element | Window,
242
  event: string,
243
  handler: EventListener,
244
  options?: EventListenerOptions
245
): void;
246

247
/**
248
 * Stop event propagation and prevent default
249
 * @param event - Event object
250
 */
251
function stopAndPrevent(event: Event): void;
252

253
/**
254
 * Throttle function calls
255
 * @param func - Function to throttle
256
 * @param delay - Throttle delay in milliseconds
257
 * @returns Throttled function
258
 */
259
function throttle<T extends (...args: any[]) => any>(
260
  func: T,
261
  delay: number
262
): T;
263

264
/**
265
 * Debounce function calls
266
 * @param func - Function to debounce
267
 * @param delay - Debounce delay in milliseconds
268
 * @returns Debounced function
269
 */
270
function debounce<T extends (...args: any[]) => any>(
271
  func: T,
272
  delay: number
273
): T;
274
```
275

276
**Usage Examples:**
277

278
```typescript
279
import { addEventListener, throttle, debounce } from 'vuetify/util/events';
280

281
// Add throttled scroll listener
282
const handleScroll = throttle(() => {
283
  console.log('Scrolled');
284
}, 100);
285

286
addEventListener(window, 'scroll', handleScroll);
287

288
// Debounced search input
289
const handleSearch = debounce((query: string) => {
290
  performSearch(query);
291
}, 300);
292
```
293

294
### Helper Functions
295

296
General utility functions for common operations.
297

298
```typescript { .api }
299
/**
300
 * Deep merge objects
301
 * @param target - Target object
302
 * @param sources - Source objects to merge
303
 * @returns Merged object
304
 */
305
function mergeDeep<T>(target: T, ...sources: Partial<T>[]): T;
306

307
/**
308
 * Clone object deeply
309
 * @param obj - Object to clone
310
 * @returns Deep cloned object
311
 */
312
function deepClone<T>(obj: T): T;
313

314
/**
315
 * Check if value is object
316
 * @param value - Value to check
317
 * @returns True if value is object
318
 */
319
function isObject(value: any): value is object;
320

321
/**
322
 * Convert string to kebab-case
323
 * @param str - String to convert
324
 * @returns Kebab-case string
325
 */
326
function kebabCase(str: string): string;
327

328
/**
329
 * Convert string to camelCase
330
 * @param str - String to convert
331
 * @returns CamelCase string
332
 */
333
function camelCase(str: string): string;
334

335
/**
336
 * Capitalize first letter of string
337
 * @param str - String to capitalize
338
 * @returns Capitalized string
339
 */
340
function capitalize(str: string): string;
341

342
/**
343
 * Generate unique ID
344
 * @param prefix - Optional prefix for ID
345
 * @returns Unique ID string
346
 */
347
function generateId(prefix?: string): string;
348

349
/**
350
 * Wrap text with specified width
351
 * @param text - Text to wrap
352
 * @param width - Maximum line width
353
 * @returns Wrapped text with line breaks
354
 */
355
function wrapText(text: string, width: number): string;
356
```
357

358
**Usage Examples:**
359

360
```typescript
361
import { mergeDeep, deepClone, kebabCase, generateId } from 'vuetify/util/helpers';
362

363
// Merge configuration objects
364
const config = mergeDeep(defaultConfig, userConfig, overrides);
365

366
// Clone data for mutation
367
const clonedData = deepClone(originalData);
368

369
// Convert naming conventions
370
const componentName = kebabCase('MyComponent'); // "my-component"
371

372
// Generate unique IDs
373
const elementId = generateId('input'); // "input-abc123"
374
```
375

376
### Component Utilities
377

378
Utilities for component development and prop handling.
379

380
```typescript { .api }
381
/**
382
 * Create props factory function
383
 * @param props - Default props
384
 * @param source - Source props to extend
385
 * @returns Props factory function
386
 */
387
function propsFactory<T>(props: T, source?: string): () => T;
388

389
/**
390
 * Create simple functional component
391
 * @param name - Component name
392
 * @param tag - HTML tag name
393
 * @param className - CSS class name
394
 * @returns Functional component
395
 */
396
function createSimpleFunctional(
397
  name: string,
398
  tag?: string,
399
  className?: string
400
): Component;
401

402
/**
403
 * Define component with proper typing
404
 * @param options - Component options
405
 * @returns Typed component
406
 */
407
function defineComponent<T>(options: T): T;
408

409
/**
410
 * Bind props to element
411
 * @param props - Props object
412
 * @param element - Target element
413
 */
414
function bindProps(props: Record<string, any>, element: Element): void;
415

416
/**
417
 * Get current Vue instance
418
 * @returns Current component instance
419
 */
420
function getCurrentInstance(): ComponentInternalInstance | null;
421
```
422

423
**Usage Examples:**
424

425
```typescript
426
import { propsFactory, createSimpleFunctional, defineComponent } from 'vuetify/util';
427

428
// Create reusable props
429
const buttonProps = propsFactory({
430
  color: String,
431
  size: String,
432
  disabled: Boolean,
433
});
434

435
// Create simple functional component
436
const VDivider = createSimpleFunctional('v-divider', 'hr', 'v-divider');
437

438
// Define component with utilities
439
export default defineComponent({
440
  name: 'MyComponent',
441
  props: buttonProps(),
442
  setup(props) {
443
    // Component logic
444
  },
445
});
446
```
447

448
## Types
449

450
```typescript { .api }
451
// Color utility types
452
interface RGBColor {
453
  r: number;
454
  g: number;
455
  b: number;
456
}
457

458
interface HSLColor {
459
  h: number;
460
  s: number;
461
  l: number;
462
}
463

464
// Animation types
465
interface AnimationKeyframes {
466
  [key: string]: Record<string, any>;
467
}
468

469
// Event utility types
470
interface ThrottledFunction<T extends (...args: any[]) => any> {
471
  (...args: Parameters<T>): void;
472
  cancel(): void;
473
}
474

475
interface DebouncedFunction<T extends (...args: any[]) => any> {
476
  (...args: Parameters<T>): void;
477
  cancel(): void;
478
  flush(): void;
479
}
480

481
// Component utility types
482
interface ComponentOptions {
483
  name?: string;
484
  props?: Record<string, any>;
485
  emits?: string[];
486
  setup?: Function;
487
}
488

489
interface ComponentInternalInstance {
490
  props: Record<string, any>;
491
  emit: Function;
492
  slots: Record<string, any>;
493
}
494
```