Vue Material Component Framework implementing Google's Material Design specification with comprehensive UI components, theming system, and accessibility features.
—
Helper functions and utility modules for common operations, styling, and component development.
Functions for color manipulation, conversion, and Material Design color operations.
/**
* Parse color string into RGB components
* @param color - Color string in various formats (hex, rgb, hsl, named)
* @returns Object with r, g, b numeric values
*/
function parseColor(color: string): { r: number; g: number; b: number };
/**
* Convert color to hexadecimal format
* @param color - Color in any supported format
* @returns Hex color string (e.g., "#FF0000")
*/
function colorToHex(color: string): string;
/**
* Convert color to RGB format
* @param color - Color in any supported format
* @returns RGB object with r, g, b values
*/
function colorToRgb(color: string): { r: number; g: number; b: number };
/**
* Convert color to HSL format
* @param color - Color in any supported format
* @returns HSL object with h, s, l values
*/
function colorToHsl(color: string): { h: number; s: number; l: number };
/**
* Get contrasting text color for background
* @param backgroundColor - Background color
* @returns 'white' or 'black' for optimal contrast
*/
function getContrast(backgroundColor: string): 'white' | 'black';
/**
* Lighten a color by specified percentage
* @param color - Base color
* @param amount - Percentage to lighten (0-1)
* @returns Lightened color string
*/
function lighten(color: string, amount: number): string;
/**
* Darken a color by specified percentage
* @param color - Base color
* @param amount - Percentage to darken (0-1)
* @returns Darkened color string
*/
function darken(color: string, amount: number): string;Usage Examples:
import { parseColor, colorToHex, getContrast, lighten } from 'vuetify/util/colors';
// Parse different color formats
const rgbColor = parseColor('#FF5722'); // { r: 255, g: 87, b: 34 }
const namedColor = parseColor('red'); // { r: 255, g: 0, b: 0 }
// Convert colors
const hexColor = colorToHex('rgb(255, 87, 34)'); // "#FF5722"
// Get contrasting text color
const textColor = getContrast('#FF5722'); // "white"
// Adjust color brightness
const lightColor = lighten('#FF5722', 0.2); // Lighter shade
const darkColor = darken('#FF5722', 0.3); // Darker shadeAnimation helper functions and easing definitions for smooth transitions.
/**
* Standard Material Design easing functions
*/
const easings: {
/** Standard easing curve */
standard: string;
/** Deceleration easing curve */
decelerate: string;
/** Acceleration easing curve */
accelerate: string;
/** Sharp easing curve */
sharp: string;
/** Linear easing curve */
linear: string;
/** Ease in easing curve */
easeIn: string;
/** Ease out easing curve */
easeOut: string;
/** Ease in-out easing curve */
easeInOut: string;
};
/**
* Create CSS animation keyframes
* @param name - Animation name
* @param keyframes - Keyframe definitions
* @returns CSS animation string
*/
function createAnimation(name: string, keyframes: Record<string, any>): string;
/**
* Request animation frame with fallback
* @param callback - Function to call on next frame
* @returns Request ID for cancellation
*/
function requestAnimationFrame(callback: () => void): number;
/**
* Cancel animation frame request
* @param id - Request ID from requestAnimationFrame
*/
function cancelAnimationFrame(id: number): void;Usage Examples:
import { easings, createAnimation } from 'vuetify/util/animation';
// Use Material Design easing
const slideTransition = {
transition: `transform 0.3s ${easings.standard}`,
};
// Create custom animations
const fadeInAnimation = createAnimation('fadeIn', {
'0%': { opacity: 0 },
'100%': { opacity: 1 },
});Functions for DOM manipulation, element queries, and browser compatibility.
/**
* Check if code is running in browser environment
*/
const IN_BROWSER: boolean;
/**
* Get element's scroll parent
* @param element - Target element
* @param includeHidden - Include elements with hidden overflow
* @returns Scroll parent element
*/
function getScrollParent(element: Element, includeHidden?: boolean): Element;
/**
* Check if element has fixed positioning
* @param element - Element to check
* @returns True if element or ancestor is fixed positioned
*/
function isFixedPosition(element: Element): boolean;
/**
* Get element's computed style property
* @param element - Target element
* @param property - CSS property name
* @returns Computed style value
*/
function getComputedStyle(element: Element, property: string): string;
/**
* Convert pixels to rem units
* @param px - Pixel value
* @returns Rem value string
*/
function convertToUnit(px: number | string): string;
/**
* Check if element is in viewport
* @param element - Element to check
* @param rootMargin - Root margin for intersection
* @returns True if element is visible
*/
function isInViewport(element: Element, rootMargin?: string): boolean;Usage Examples:
import { getScrollParent, isFixedPosition, convertToUnit } from 'vuetify/util/dom';
// Find scroll parent for positioning
const scrollParent = getScrollParent(myElement);
// Check positioning context
const isFixed = isFixedPosition(overlayElement);
// Convert units
const remValue = convertToUnit(16); // "1rem"
const pxValue = convertToUnit('24px'); // "24px"Event handling utilities and helper functions.
/**
* Add event listener with options
* @param element - Target element
* @param event - Event name
* @param handler - Event handler function
* @param options - Event listener options
*/
function addEventListener(
element: Element | Window,
event: string,
handler: EventListener,
options?: AddEventListenerOptions
): void;
/**
* Remove event listener
* @param element - Target element
* @param event - Event name
* @param handler - Event handler function
* @param options - Event listener options
*/
function removeEventListener(
element: Element | Window,
event: string,
handler: EventListener,
options?: EventListenerOptions
): void;
/**
* Stop event propagation and prevent default
* @param event - Event object
*/
function stopAndPrevent(event: Event): void;
/**
* Throttle function calls
* @param func - Function to throttle
* @param delay - Throttle delay in milliseconds
* @returns Throttled function
*/
function throttle<T extends (...args: any[]) => any>(
func: T,
delay: number
): T;
/**
* Debounce function calls
* @param func - Function to debounce
* @param delay - Debounce delay in milliseconds
* @returns Debounced function
*/
function debounce<T extends (...args: any[]) => any>(
func: T,
delay: number
): T;Usage Examples:
import { addEventListener, throttle, debounce } from 'vuetify/util/events';
// Add throttled scroll listener
const handleScroll = throttle(() => {
console.log('Scrolled');
}, 100);
addEventListener(window, 'scroll', handleScroll);
// Debounced search input
const handleSearch = debounce((query: string) => {
performSearch(query);
}, 300);General utility functions for common operations.
/**
* Deep merge objects
* @param target - Target object
* @param sources - Source objects to merge
* @returns Merged object
*/
function mergeDeep<T>(target: T, ...sources: Partial<T>[]): T;
/**
* Clone object deeply
* @param obj - Object to clone
* @returns Deep cloned object
*/
function deepClone<T>(obj: T): T;
/**
* Check if value is object
* @param value - Value to check
* @returns True if value is object
*/
function isObject(value: any): value is object;
/**
* Convert string to kebab-case
* @param str - String to convert
* @returns Kebab-case string
*/
function kebabCase(str: string): string;
/**
* Convert string to camelCase
* @param str - String to convert
* @returns CamelCase string
*/
function camelCase(str: string): string;
/**
* Capitalize first letter of string
* @param str - String to capitalize
* @returns Capitalized string
*/
function capitalize(str: string): string;
/**
* Generate unique ID
* @param prefix - Optional prefix for ID
* @returns Unique ID string
*/
function generateId(prefix?: string): string;
/**
* Wrap text with specified width
* @param text - Text to wrap
* @param width - Maximum line width
* @returns Wrapped text with line breaks
*/
function wrapText(text: string, width: number): string;Usage Examples:
import { mergeDeep, deepClone, kebabCase, generateId } from 'vuetify/util/helpers';
// Merge configuration objects
const config = mergeDeep(defaultConfig, userConfig, overrides);
// Clone data for mutation
const clonedData = deepClone(originalData);
// Convert naming conventions
const componentName = kebabCase('MyComponent'); // "my-component"
// Generate unique IDs
const elementId = generateId('input'); // "input-abc123"Utilities for component development and prop handling.
/**
* Create props factory function
* @param props - Default props
* @param source - Source props to extend
* @returns Props factory function
*/
function propsFactory<T>(props: T, source?: string): () => T;
/**
* Create simple functional component
* @param name - Component name
* @param tag - HTML tag name
* @param className - CSS class name
* @returns Functional component
*/
function createSimpleFunctional(
name: string,
tag?: string,
className?: string
): Component;
/**
* Define component with proper typing
* @param options - Component options
* @returns Typed component
*/
function defineComponent<T>(options: T): T;
/**
* Bind props to element
* @param props - Props object
* @param element - Target element
*/
function bindProps(props: Record<string, any>, element: Element): void;
/**
* Get current Vue instance
* @returns Current component instance
*/
function getCurrentInstance(): ComponentInternalInstance | null;Usage Examples:
import { propsFactory, createSimpleFunctional, defineComponent } from 'vuetify/util';
// Create reusable props
const buttonProps = propsFactory({
color: String,
size: String,
disabled: Boolean,
});
// Create simple functional component
const VDivider = createSimpleFunctional('v-divider', 'hr', 'v-divider');
// Define component with utilities
export default defineComponent({
name: 'MyComponent',
props: buttonProps(),
setup(props) {
// Component logic
},
});// Color utility types
interface RGBColor {
r: number;
g: number;
b: number;
}
interface HSLColor {
h: number;
s: number;
l: number;
}
// Animation types
interface AnimationKeyframes {
[key: string]: Record<string, any>;
}
// Event utility types
interface ThrottledFunction<T extends (...args: any[]) => any> {
(...args: Parameters<T>): void;
cancel(): void;
}
interface DebouncedFunction<T extends (...args: any[]) => any> {
(...args: Parameters<T>): void;
cancel(): void;
flush(): void;
}
// Component utility types
interface ComponentOptions {
name?: string;
props?: Record<string, any>;
emits?: string[];
setup?: Function;
}
interface ComponentInternalInstance {
props: Record<string, any>;
emit: Function;
slots: Record<string, any>;
}Install with Tessl CLI
npx tessl i tessl/npm-vuetify