CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vuetify

Vue Material Component Framework implementing Google's Material Design specification with comprehensive UI components, theming system, and accessibility features.

Pending
Overview
Eval results
Files

utilities.mddocs/

Utilities

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

Capabilities

Color Utilities

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 shade

Animation Utilities

Animation 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 },
});

DOM Utilities

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 Utilities

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);

Helper Functions

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"

Component Utilities

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
  },
});

Types

// 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

docs

components.md

composables.md

data-display.md

directives.md

feedback.md

forms.md

framework-core.md

icons.md

index.md

internationalization.md

lab-components.md

navigation.md

theming.md

transitions.md

utilities.md

tile.json