directix 1.0.0 → 1.2.0

package/dist/index.d.ts

@@ -13,6 +13,32 @@ export declare function addCleanupVue2(el: Element, fn: () => void): void;
  */
 export declare function addCleanupVue3(el: Element, fn: () => void): void;
 
+/**
+ * Directive binding value type
+ */
+export declare type CapitalcaseBinding = boolean | CapitalcaseOptions;
+
+/**
+ * Capitalcase directive options
+ */
+export declare interface CapitalcaseOptions {
+    /**
+     * Whether to capitalize each word or just the first word
+     * @default true
+     */
+    every?: boolean;
+    /**
+     * Words to keep lowercase (articles, prepositions, etc.)
+     * @default ['a', 'an', 'the', 'and', 'but', 'or', 'for', 'nor', 'on', 'at', 'to', 'from', 'by']
+     */
+    keepLower?: string[];
+    /**
+     * Whether to transform on input (for input elements)
+     * @default true
+     */
+    onInput?: boolean;
+}
+
 /**
  * Directive binding value type
  */
@@ -63,6 +89,11 @@ export declare interface ClickOutsideOptions {
     prevent?: boolean;
 }
 
+/**
+ * Configure permission directive
+ */
+export declare function configurePermission(config: PermissionConfig): void;
+
 /**
  * Directive binding value type
  */
@@ -275,6 +306,70 @@ export declare interface DirectiveInstallOptions {
  */
 export declare const Directix: Plugin_2;
 
+/**
+ * Draggable axis
+ */
+export declare type DraggableAxis = 'x' | 'y' | 'both';
+
+/**
+ * Directive binding value type
+ */
+export declare type DraggableBinding = boolean | DraggableOptions;
+
+/**
+ * Draggable directive options
+ */
+export declare interface DraggableOptions {
+    /**
+     * Drag axis
+     * @default 'both'
+     */
+    axis?: DraggableAxis;
+    /**
+     * Constrain to parent element
+     * @default false
+     */
+    constrain?: boolean;
+    /**
+     * Boundary element selector or element
+     */
+    boundary?: string | HTMLElement | (() => HTMLElement | null);
+    /**
+     * Handle element selector
+     */
+    handle?: string;
+    /**
+     * Whether dragging is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Grid snapping [x, y]
+     */
+    grid?: [number, number];
+    /**
+     * Start drag callback
+     */
+    onStart?: (position: {
+        x: number;
+        y: number;
+    }, event: MouseEvent | TouchEvent) => void;
+    /**
+     * Drag callback
+     */
+    onDrag?: (position: {
+        x: number;
+        y: number;
+    }, event: MouseEvent | TouchEvent) => void;
+    /**
+     * End drag callback
+     */
+    onEnd?: (position: {
+        x: number;
+        y: number;
+    }, event: MouseEvent | TouchEvent) => void;
+}
+
 /**
  * Directive binding value type
  */
@@ -315,10 +410,201 @@ export declare function generateId(prefix?: string): string;
  */
 export declare function get<T = any>(obj: Record<string, any>, path: string, defaultValue?: T): T;
 
+/**
+ * Get current configuration
+ */
+export declare function getPermissionConfig(): PermissionConfig | null;
+
 /**
  * Get current Vue version
  */
-export declare function getVueVersion(): 2 | 3;
+export declare function getVueVersion(): VueVersion;
+
+/**
+ * Directive binding value type
+ */
+export declare type HoverBinding = HoverHandler | HoverOptions;
+
+/**
+ * Hover state change handler
+ */
+export declare type HoverHandler = (isHovering: boolean, event: MouseEvent) => void;
+
+/**
+ * Hover directive options
+ */
+export declare interface HoverOptions {
+    /**
+     * Callback when hover state changes
+     */
+    handler?: HoverHandler;
+    /**
+     * Callback when mouse enters
+     */
+    onEnter?: (event: MouseEvent) => void;
+    /**
+     * Callback when mouse leaves
+     */
+    onLeave?: (event: MouseEvent) => void;
+    /**
+     * CSS class to add when hovering
+     * @default 'v-hover'
+     */
+    class?: string;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Delay in milliseconds before triggering enter
+     * @default 0
+     */
+    enterDelay?: number;
+    /**
+     * Delay in milliseconds before triggering leave
+     * @default 0
+     */
+    leaveDelay?: number;
+}
+
+export declare type ImagePreviewBinding = string | ImagePreviewOptions;
+
+/**
+ * Image preview options
+ */
+export declare interface ImagePreviewOptions {
+    /** Image source URL */
+    src?: string;
+    /** Preview image source URL (higher resolution) */
+    previewSrc?: string;
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Whether preview is disabled @default false */
+    disabled?: boolean;
+    /** Close on click outside @default true */
+    closeOnClickOutside?: boolean;
+    /** Close on escape key @default true */
+    closeOnEsc?: boolean;
+    /** Show close button @default true */
+    showCloseButton?: boolean;
+    /** Z-index of the preview overlay @default 9999 */
+    zIndex?: number;
+    /** Custom class for the preview overlay */
+    class?: string;
+    /** Enable pinch zoom on mobile @default true */
+    enablePinchZoom?: boolean;
+    /** Enable double tap to zoom @default true */
+    enableDoubleTap?: boolean;
+    /** Enable swipe up to close @default true */
+    enableSwipeClose?: boolean;
+    /** Show zoom indicator @default true */
+    showZoomIndicator?: boolean;
+    /** Minimum zoom scale @default 0.5 */
+    minScale?: number;
+    /** Maximum zoom scale @default 5 */
+    maxScale?: number;
+    /** Callback when preview opens */
+    onOpen?: () => void;
+    /** Callback when preview closes */
+    onClose?: () => void;
+}
+
+/**
+ * Directive binding value type
+ */
+export declare type InfiniteScrollBinding = InfiniteScrollHandler | InfiniteScrollOptions;
+
+/**
+ * Infinite scroll handler
+ */
+export declare type InfiniteScrollHandler = () => void | Promise<void>;
+
+/**
+ * Infinite scroll directive options
+ */
+export declare interface InfiniteScrollOptions {
+    /**
+     * Handler to call when scrolling to bottom
+     * @required
+     */
+    handler: InfiniteScrollHandler;
+    /**
+     * Distance from bottom to trigger load (in pixels)
+     * @default 0
+     */
+    distance?: number;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether currently loading
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether to use IntersectionObserver (more efficient)
+     * @default true
+     */
+    useIntersection?: boolean;
+    /**
+     * Throttle time in milliseconds
+     * @default 200
+     */
+    throttle?: number;
+    /**
+     * Custom scroll container
+     */
+    container?: string | Element | null;
+    /**
+     * Callback when load starts
+     */
+    onLoadStart?: () => void;
+    /**
+     * Callback when load completes
+     */
+    onLoadEnd?: () => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+
+/**
+ * Directive binding value type
+ */
+export declare type IntersectBinding = IntersectHandler | IntersectOptions;
+
+/**
+ * Intersect event handler
+ */
+export declare type IntersectHandler = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
+
+/**
+ * Intersect directive options
+ */
+export declare interface IntersectOptions {
+    /** Callback when element intersects */
+    handler?: IntersectHandler;
+    /** Callback when element enters viewport */
+    onEnter?: (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
+    /** Callback when element leaves viewport */
+    onLeave?: (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
+    /** Callback when element changes intersection */
+    onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
+    /** Root element for intersection @default null (viewport) */
+    root?: Element | null;
+    /** Margin around the root @default '0px' */
+    rootMargin?: string;
+    /** Threshold(s) at which to trigger callback @default 0 */
+    threshold?: number | number[];
+    /** Whether to disable @default false */
+    disabled?: boolean;
+    /** Whether to trigger only once @default false */
+    once?: boolean;
+}
 
 /**
  * Check if value is an array
@@ -371,103 +657,941 @@ export declare const isSSR: () => boolean;
 export declare function isString(value: unknown): value is string;
 
 /**
- * Check if Vue 2
- */
-export declare const isVue2: () => boolean;
-
-/**
- * Check if Vue 3
+ * Check if Vue 2 (includes 2.7)
  */
-export declare const isVue3: () => boolean;
+export declare function isVue2(): boolean;
 
 /**
- * Parse time argument
- * Supports formats: "300" | "300ms" | "1s"
+ * Check if Vue 2.7 (has built-in Composition API support)
  */
-export declare function parseTime(arg?: string): number | null;
+export declare function isVue27(): boolean;
 
 /**
- * Set nested property value by path
+ * Check if Vue 3
  */
-export declare function set(obj: Record<string, any>, path: string, value: any): void;
+export declare function isVue3(): boolean;
 
 /**
- * Check if Clipboard API is supported
+ * Directive binding value type
  */
-export declare const supportsClipboard: () => boolean;
+export declare type LazyBinding = string | LazyOptions;
 
 /**
- * Check if IntersectionObserver is supported
+ * Lazy directive options
  */
-export declare const supportsIntersectionObserver: () => boolean;
+export declare interface LazyOptions {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Placeholder image URL
+     */
+    placeholder?: string;
+    /**
+     * Error image URL (shown when loading fails)
+     */
+    error?: string;
+    /**
+     * Preload distance in pixels
+     * @default 0
+     */
+    preload?: number;
+    /**
+     * Callback when image loads successfully
+     */
+    onLoad?: (el: HTMLElement) => void;
+    /**
+     * Callback when image fails to load
+     */
+    onError?: (el: HTMLElement, error: Error) => void;
+    /**
+     * Number of retry attempts
+     * @default 1
+     */
+    attempt?: number;
+    /**
+     * Filter function, return false to skip loading
+     */
+    filter?: (src: string) => boolean;
+    /**
+     * Custom IntersectionObserver
+     */
+    observer?: IntersectionObserver;
+    /**
+     * Whether to disable lazy loading
+     * @default false
+     */
+    disabled?: boolean;
+}
 
 /**
- * Check if MutationObserver is supported
+ * Lazy loading state
  */
-export declare const supportsMutationObserver: () => boolean;
+export declare type LazyState = 'pending' | 'loading' | 'loaded' | 'error';
 
 /**
- * Check if passive event listening is supported
+ * Directive binding value type
  */
-export declare const supportsPassive: () => boolean;
+export declare type LoadingBinding = boolean | LoadingOptions;
 
 /**
- * Check if ResizeObserver is supported
+ * Loading directive options
  */
-export declare const supportsResizeObserver: () => boolean;
+export declare interface LoadingOptions {
+    /**
+     * Loading state
+     * @default true
+     */
+    value?: boolean;
+    /**
+     * Loading text to display
+     */
+    text?: string;
+    /**
+     * CSS class for loading overlay
+     * @default 'v-loading'
+     */
+    loadingClass?: string;
+    /**
+     * CSS class for loading spinner
+     * @default 'v-loading__spinner'
+     */
+    spinnerClass?: string;
+    /**
+     * CSS class for loading text
+     * @default 'v-loading__text'
+     */
+    textClass?: string;
+    /**
+     * Custom spinner HTML
+     */
+    spinner?: string;
+    /**
+     * Background color
+     * @default 'rgba(255, 255, 255, 0.9)'
+     */
+    background?: string;
+    /**
+     * Whether to lock scroll while loading
+     * @default false
+     */
+    lock?: boolean;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+}
 
 /**
  * Directive binding value type
  */
-export declare type ThrottleBinding<T extends (...args: any[]) => any = any> = T | ThrottleOptions<T>;
-
-/**
- * Throttled function type
- */
-export declare interface ThrottledFunction<T extends (...args: any[]) => any> {
-    (...args: Parameters<T>): void;
-    cancel: () => void;
-}
+export declare type LongPressBinding = LongPressHandler | LongPressOptions;
 
 /**
- * Throttle function
+ * Long press handler
  */
-export declare function throttleFn<T extends (...args: any[]) => any>(func: T, wait?: number, options?: {
-    leading?: boolean;
-    trailing?: boolean;
-}): ((...args: Parameters<T>) => void) & {
-    cancel: () => void;
-};
+export declare type LongPressHandler = (event: MouseEvent | TouchEvent) => void;
 
 /**
- * Throttle directive options
+ * Long press directive options
  */
-export declare interface ThrottleOptions<T extends (...args: any[]) => any = any> {
+export declare interface LongPressOptions {
     /**
-     * Function to throttle
+     * Callback when long press is triggered
+     * @required
      */
-    handler: T;
+    handler: LongPressHandler;
     /**
-     * Delay time in milliseconds
-     * @default 300
+     * Duration in milliseconds to trigger long press
+     * @default 500
      */
-    wait?: number;
+    duration?: number;
     /**
-     * Whether to invoke immediately before delay starts
-     * @default true
+     * Whether to disable
+     * @default false
      */
-    leading?: boolean;
+    disabled?: boolean;
     /**
-     * Whether to invoke after delay ends
+     * Maximum movement distance before canceling
+     * @default 10
+     */
+    distance?: number;
+    /**
+     * Callback when long press starts (on mousedown/touchstart)
+     */
+    onStart?: (event: MouseEvent | TouchEvent) => void;
+    /**
+     * Callback when long press is canceled
+     */
+    onCancel?: (event: MouseEvent | TouchEvent) => void;
+    /**
+     * Callback on each tick during long press
+     */
+    onTick?: (remaining: number) => void;
+    /**
+     * Interval for onTick callback in milliseconds
+     * @default 100
+     */
+    tickInterval?: number;
+    /**
+     * Whether to prevent default behavior
      * @default true
      */
-    trailing?: boolean;
+    prevent?: boolean;
+    /**
+     * Whether to stop propagation
+     * @default false
+     */
+    stop?: boolean;
 }
 
 /**
- * v-click-outside directive
- *
- * @example
+ * Directive binding value type
+ */
+export declare type LowercaseBinding = boolean | LowercaseOptions;
+
+/**
+ * Lowercase directive options
+ */
+export declare interface LowercaseOptions {
+    /**
+     * Transform only the first character
+     * @default false
+     */
+    first?: boolean;
+    /**
+     * Transform on input event (for input elements)
+     * @default true
+     */
+    onInput?: boolean;
+}
+
+export declare type MaskBinding = string | MaskOptions;
+
+/**
+ * Mask directive options
+ */
+export declare interface MaskOptions {
+    /** Mask pattern: # digit, A letter, N alphanumeric, X any, others as literals */
+    mask: string;
+    /** Placeholder character @default '_' */
+    placeholder?: string;
+    /** Show mask placeholder on focus @default true */
+    showPlaceholder?: boolean;
+    /** Show mask on blur @default false */
+    showMaskOnBlur?: boolean;
+    /** Clear incomplete on blur @default false */
+    clearIncomplete?: boolean;
+    /** Disable @default false */
+    disabled?: boolean;
+    /** Callback when value changes */
+    onChange?: (value: string, rawValue: string) => void;
+    /** Callback when mask is complete */
+    onComplete?: (value: string) => void;
+}
+
+export declare type MoneyBinding = string | MoneyOptions;
+
+/**
+ * Money directive options
+ */
+export declare interface MoneyOptions extends NumberFormatOptions {
+    /** Currency symbol @default '$' */
+    symbol?: string;
+    /** Symbol position @default 'before' */
+    symbolPosition?: 'before' | 'after';
+}
+
+/**
+ * Directive binding value type
+ */
+export declare type MutationBinding = MutationHandler | MutationOptions;
+
+/**
+ * Mutation change handler
+ */
+export declare type MutationHandler = (mutations: MutationRecord[], observer: MutationObserver) => void;
+
+/**
+ * Mutation directive options
+ */
+export declare interface MutationOptions {
+    /**
+     * Callback when mutations occur
+     * @required
+     */
+    handler: MutationHandler;
+    /**
+     * Whether to observe attribute changes
+     * @default false
+     */
+    attributes?: boolean;
+    /**
+     * Specific attributes to observe
+     */
+    attributeFilter?: string[];
+    /**
+     * Whether to observe child node additions/removals
+     * @default true
+     */
+    childList?: boolean;
+    /**
+     * Whether to observe all descendants, not just direct children
+     * @default false
+     */
+    subtree?: boolean;
+    /**
+     * Whether to observe character data changes
+     * @default false
+     */
+    characterData?: boolean;
+    /**
+     * Whether to record old attribute values
+     * @default false
+     */
+    attributeOldValue?: boolean;
+    /**
+     * Whether to record old character data
+     * @default false
+     */
+    characterDataOldValue?: boolean;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+export declare type NumberBinding = number | NumberOptions;
+
+/**
+ * Shared utilities for number and money formatting directives
+ */
+/**
+ * Base options shared by number and money formatting
+ */
+declare interface NumberFormatOptions {
+    /** Number of decimal places */
+    precision?: number;
+    /** Thousands separator */
+    separator?: string;
+    /** Decimal separator */
+    decimal?: string;
+    /** Whether to allow negative numbers @default true */
+    allowNegative?: boolean;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+}
+
+/**
+ * Number directive options
+ */
+export declare interface NumberOptions extends NumberFormatOptions {
+    /** Prefix string (e.g., '$') */
+    prefix?: string;
+    /** Suffix string (e.g., '%') */
+    suffix?: string;
+}
+
+/**
+ * Parse time argument
+ * Supports formats: "300" | "300ms" | "1s"
+ */
+export declare function parseTime(arg?: string): number | null;
+
+/**
+ * Permission action mode
+ */
+export declare type PermissionAction = 'remove' | 'disable' | 'hide';
+
+/**
+ * Directive binding value type
+ */
+export declare type PermissionBinding = string | string[] | PermissionOptions;
+
+/**
+ * Permission configuration
+ */
+export declare interface PermissionConfig {
+    /** Get current user's permissions */
+    getPermissions: () => string[];
+    /** Get current user's roles */
+    getRoles?: () => string[];
+    /** Role to permission mapping */
+    roleMap?: Record<string, string[]>;
+}
+
+/**
+ * Permission check mode
+ */
+declare type PermissionMode = 'some' | 'every';
+
+/**
+ * Permission directive options
+ */
+export declare interface PermissionOptions {
+    /** Permission value(s) to check */
+    value: string | string[];
+    /** Logic for multiple permissions: 'some' (OR) or 'every' (AND). Default: 'some' */
+    mode?: PermissionMode;
+    /** Action when permission denied. Default: 'remove' */
+    action?: PermissionAction;
+    /** Custom permission check function */
+    check?: (permission: string | string[], mode: PermissionMode) => boolean;
+    /** Callback when permission state changes */
+    onChange?: (hasPermission: boolean) => void;
+}
+
+/**
+ * Reset Vue version (useful for testing)
+ */
+export declare function resetVueVersion(): void;
+
+/**
+ * Directive binding value type
+ */
+export declare type ResizeBinding = ResizeHandler | ResizeOptions;
+
+/**
+ * Resize event handler
+ */
+export declare type ResizeHandler = (entry: ResizeObserverEntry) => void;
+
+/**
+ * Resize information
+ */
+export declare interface ResizeInfo {
+    /** New width */
+    width: number;
+    /** New height */
+    height: number;
+    /** Content rect */
+    contentRect: DOMRectReadOnly;
+    /** Border box size */
+    borderBoxSize: ReadonlyArray<ResizeObserverSize>;
+    /** Content box size */
+    contentBoxSize: ReadonlyArray<ResizeObserverSize>;
+    /** Device pixel content box size */
+    devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
+}
+
+/**
+ * Resize directive options
+ */
+export declare interface ResizeOptions {
+    /**
+     * Resize event handler
+     * @required
+     */
+    handler: ResizeHandler;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to use box model
+     * - 'content-box': size of content area
+     * - 'border-box': size of border box
+     * - 'device-pixel-content-box': size in device pixels
+     * @default 'content-box'
+     */
+    box?: 'content-box' | 'border-box' | 'device-pixel-content-box';
+    /**
+     * Debounce time in milliseconds
+     * @default 0 (no debounce)
+     */
+    debounce?: number;
+    /**
+     * Callback for browsers without ResizeObserver (uses object fallback)
+     */
+    onFallback?: (info: ResizeInfo) => void;
+}
+
+/**
+ * Directive binding value type
+ */
+export declare type RippleBinding = boolean | string | RippleOptions;
+
+/**
+ * Ripple directive options
+ */
+export declare interface RippleOptions {
+    /**
+     * Ripple color
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Ripple duration in milliseconds
+     * @default 600
+     */
+    duration?: number;
+    /**
+     * Whether to disable ripple
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Initial scale of ripple
+     * @default 0
+     */
+    initialScale?: number;
+    /**
+     * Final scale of ripple
+     * @default 2
+     */
+    finalScale?: number;
+}
+
+/**
+ * Directive binding value type
+ */
+export declare type SanitizeBinding = boolean | SanitizeOptions;
+
+/**
+ * Sanitize handler
+ */
+export declare type SanitizeHandler = (value: string) => string;
+
+/**
+ * Sanitize directive options
+ */
+export declare interface SanitizeOptions {
+    /**
+     * Tags to allow (whitelist)
+     * @default []
+     */
+    allowedTags?: string[];
+    /**
+     * Attributes to allow (whitelist)
+     * @default []
+     */
+    allowedAttributes?: string[];
+    /**
+     * Whether to allow data URLs
+     * @default false
+     */
+    allowDataUrls?: boolean;
+    /**
+     * Whether to allow inline styles
+     * @default false
+     */
+    allowStyles?: boolean;
+    /**
+     * Whether to allow class attribute
+     * @default false
+     */
+    allowClass?: boolean;
+    /**
+     * Whether to allow id attribute
+     * @default false
+     */
+    allowId?: boolean;
+    /**
+     * Custom sanitize function
+     */
+    handler?: SanitizeHandler;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to sanitize on update
+     * @default true
+     */
+    sanitizeOnUpdate?: boolean;
+}
+
+/**
+ * Directive binding value type
+ */
+export declare type ScrollBinding = ScrollHandler | ScrollOptions_2;
+
+/**
+ * Scroll event handler
+ */
+export declare type ScrollHandler = (event: Event, info: ScrollInfo) => void;
+
+/**
+ * Scroll information
+ */
+export declare interface ScrollInfo {
+    /** Current scroll left position */
+    scrollLeft: number;
+    /** Current scroll top position */
+    scrollTop: number;
+    /** Maximum scroll left */
+    scrollLeftMax: number;
+    /** Maximum scroll top */
+    scrollTopMax: number;
+    /** Horizontal scroll progress (0-1) */
+    progressX: number;
+    /** Vertical scroll progress (0-1) */
+    progressY: number;
+    /** Direction of horizontal scroll (-1: left, 1: right, 0: none) */
+    directionX: -1 | 0 | 1;
+    /** Direction of vertical scroll (-1: up, 1: down, 0: none) */
+    directionY: -1 | 0 | 1;
+    /** Scroll container element or window */
+    container: Element | Window;
+}
+
+/**
+ * Scroll directive options
+ */
+declare interface ScrollOptions_2 {
+    /**
+     * Scroll event handler
+     * @required
+     */
+    handler: ScrollHandler;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to use passive event listener
+     * @default true
+     */
+    passive?: boolean;
+    /**
+     * Throttle time in milliseconds
+     * @default 0 (no throttle)
+     */
+    throttle?: number;
+    /**
+     * Custom scroll container selector or element
+     */
+    container?: string | Element | Window | null;
+}
+export { ScrollOptions_2 as ScrollOptions }
+
+/**
+ * Set nested property value by path
+ */
+export declare function set(obj: Record<string, any>, path: string, value: any): void;
+
+/**
+ * Set Vue version explicitly (for cases where auto-detection fails)
+ */
+export declare function setVueVersion(version: VueVersion): void;
+
+export declare type StickyBinding = boolean | number | StickyOptions;
+
+/**
+ * Sticky directive options
+ */
+export declare interface StickyOptions {
+    /** Top offset when sticky @default 0 */
+    top?: number | string;
+    /** Bottom offset when sticky */
+    bottom?: number | string;
+    /** Z-index when sticky @default 100 */
+    zIndex?: number;
+    /** CSS class to add when sticky @default 'v-sticky--fixed' */
+    stickyClass?: string;
+    /** Whether to disable @default false */
+    disabled?: boolean;
+    /** Callback when sticky state changes */
+    onChange?: (isSticky: boolean) => void;
+    /** Custom scroll container */
+    container?: string | Element | null;
+}
+
+/**
+ * Check if Clipboard API is supported
+ */
+export declare const supportsClipboard: () => boolean;
+
+/**
+ * Check if IntersectionObserver is supported
+ */
+export declare const supportsIntersectionObserver: () => boolean;
+
+/**
+ * Check if MutationObserver is supported
+ */
+export declare const supportsMutationObserver: () => boolean;
+
+/**
+ * Check if passive event listening is supported
+ */
+export declare const supportsPassive: () => boolean;
+
+/**
+ * Check if ResizeObserver is supported
+ */
+export declare const supportsResizeObserver: () => boolean;
+
+/**
+ * Swipe direction
+ */
+export declare type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+
+/**
+ * Directive binding value type
+ */
+export declare type ThrottleBinding<T extends (...args: any[]) => any = any> = T | ThrottleOptions<T>;
+
+/**
+ * Throttled function type
+ */
+export declare interface ThrottledFunction<T extends (...args: any[]) => any> {
+    (...args: Parameters<T>): void;
+    cancel: () => void;
+}
+
+/**
+ * Throttle function
+ */
+export declare function throttleFn<T extends (...args: any[]) => any>(func: T, wait?: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}): ((...args: Parameters<T>) => void) & {
+    cancel: () => void;
+};
+
+/**
+ * Throttle directive options
+ */
+export declare interface ThrottleOptions<T extends (...args: any[]) => any = any> {
+    /**
+     * Function to throttle
+     */
+    handler: T;
+    /**
+     * Delay time in milliseconds
+     * @default 300
+     */
+    wait?: number;
+    /**
+     * Whether to invoke immediately before delay starts
+     * @default true
+     */
+    leading?: boolean;
+    /**
+     * Whether to invoke after delay ends
+     * @default true
+     */
+    trailing?: boolean;
+}
+
+export declare type TooltipBinding = string | TooltipOptions;
+
+/**
+ * Tooltip directive options
+ */
+export declare interface TooltipOptions {
+    /** Tooltip content */
+    content: string;
+    /** Tooltip placement @default 'top' */
+    placement?: TooltipPlacement;
+    /** Trigger type @default 'hover' */
+    trigger?: TooltipTrigger;
+    /** Show delay in milliseconds @default 0 */
+    delay?: number;
+    /** Hide delay in milliseconds @default 0 */
+    hideDelay?: number;
+    /** Offset from the element in pixels @default 8 */
+    offset?: number;
+    /** Custom class for the tooltip */
+    class?: string;
+    /** Whether to show arrow @default true */
+    arrow?: boolean;
+    /** Whether the tooltip is disabled @default false */
+    disabled?: boolean;
+    /** Maximum width of the tooltip */
+    maxWidth?: number | string;
+    /** Z-index of the tooltip @default 9999 */
+    zIndex?: number;
+    /** Callback when tooltip is shown */
+    onShow?: () => void;
+    /** Callback when tooltip is hidden */
+    onHide?: () => void;
+}
+
+/**
+ * Tooltip placement
+ */
+export declare type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Tooltip trigger
+ */
+export declare type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual';
+
+/**
+ * Touch gesture options
+ */
+export declare interface TouchOptions {
+    /** Minimum swipe distance in pixels @default 30 */
+    swipeThreshold?: number;
+    /** Maximum time for a swipe in milliseconds @default 500 */
+    swipeTimeout?: number;
+    /** Minimum pinch scale change @default 0.1 */
+    pinchThreshold?: number;
+    /** Enable swipe detection @default true */
+    enableSwipe?: boolean;
+    /** Enable pinch detection @default true */
+    enablePinch?: boolean;
+    /** Enable rotate detection @default true */
+    enableRotate?: boolean;
+    /** Enable tap detection @default true */
+    enableTap?: boolean;
+    /** Maximum time for a tap in milliseconds @default 250 */
+    tapTimeout?: number;
+    /** Maximum movement for a tap in pixels @default 10 */
+    tapThreshold?: number;
+    /** Enable long press detection @default true */
+    enableLongPress?: boolean;
+    /** Long press timeout in milliseconds @default 500 */
+    longPressTimeout?: number;
+    /** Enable mouse event simulation for desktop @default true */
+    enableMouse?: boolean;
+    onSwipe?: (direction: SwipeDirection, event: TouchEvent | MouseEvent) => void;
+    onSwipeLeft?: (event: TouchEvent | MouseEvent) => void;
+    onSwipeRight?: (event: TouchEvent | MouseEvent) => void;
+    onSwipeUp?: (event: TouchEvent | MouseEvent) => void;
+    onSwipeDown?: (event: TouchEvent | MouseEvent) => void;
+    onPinch?: (scale: number, event: TouchEvent) => void;
+    onRotate?: (angle: number, event: TouchEvent) => void;
+    onTap?: (event: TouchEvent | MouseEvent) => void;
+    onLongPress?: (event: TouchEvent | MouseEvent) => void;
+    onTouchStart?: (event: TouchEvent | MouseEvent) => void;
+    onTouchMove?: (event: TouchEvent | MouseEvent) => void;
+    onTouchEnd?: (event: TouchEvent | MouseEvent) => void;
+}
+
+/**
+ * Directive binding value type
+ */
+export declare type TrimBinding = boolean | TrimPosition | TrimOptions;
+
+/**
+ * Trim directive options
+ */
+export declare interface TrimOptions {
+    /**
+     * Trim position
+     * @default 'both'
+     */
+    position?: TrimPosition;
+    /**
+     * Whether to trim on input (for input elements)
+     * @default true
+     */
+    onInput?: boolean;
+    /**
+     * Whether to trim on blur
+     * @default true
+     */
+    onBlur?: boolean;
+    /**
+     * Custom characters to trim (in addition to whitespace)
+     */
+    chars?: string;
+}
+
+/**
+ * Trim position
+ */
+export declare type TrimPosition = 'start' | 'end' | 'both';
+
+/**
+ * Directive binding value type
+ */
+export declare type TruncateBinding = number | TruncateOptions;
+
+/**
+ * Truncate directive options
+ */
+export declare interface TruncateOptions {
+    /**
+     * Maximum length of text
+     * @default 100
+     */
+    length?: number;
+    /**
+     * Truncation position
+     * @default 'end'
+     */
+    position?: TruncatePosition;
+    /**
+     * Ellipsis string
+     * @default '...'
+     */
+    ellipsis?: string;
+    /**
+     * Whether to use CSS truncation (use text-overflow: ellipsis)
+     * When true, length and position options are ignored
+     * @default false
+     */
+    useCss?: boolean;
+    /**
+     * Show full text on hover (as title attribute)
+     * @default true
+     */
+    showTitle?: boolean;
+}
+
+/**
+ * Truncate position
+ */
+export declare type TruncatePosition = 'start' | 'middle' | 'end';
+
+/**
+ * Directive binding value type
+ */
+export declare type UppercaseBinding = boolean | UppercaseOptions;
+
+/**
+ * Uppercase directive options
+ */
+export declare interface UppercaseOptions {
+    /**
+     * Transform only the first character
+     * @default false
+     */
+    first?: boolean;
+    /**
+     * Transform on input event (for input elements)
+     * @default true
+     */
+    onInput?: boolean;
+}
+
+/**
+ * v-capitalcase directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple usage: capitalize each word -->
+ *   <input v-capitalcase v-model="title" />
+ *
+ *   <!-- Capitalize only first word -->
+ *   <span v-capitalcase="{ every: false }">{{ text }}</span>
+ *
+ *   <!-- With custom lowercase words -->
+ *   <input v-capitalcase="{ keepLower: ['a', 'the'] }" v-model="title" />
+ * </template>
+ * ```
+ */
+declare const vCapitalcase: Directive;
+export { vCapitalcase as capitalcase }
+export { vCapitalcase }
+
+/**
+ * v-click-outside directive
+ *
+ * @example
  * ```vue
  * <template>
  *   <div v-click-outside="handleClickOutside">
@@ -512,6 +1636,33 @@ declare const vDebounce: Directive;
 export { vDebounce as debounce }
 export { vDebounce }
 
+/**
+ * v-draggable directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple usage -->
+ *   <div v-draggable>Drag me</div>
+ *
+ *   <!-- Constrain to parent -->
+ *   <div v-draggable="{ constrain: true }">Drag me</div>
+ *
+ *   <!-- With handle -->
+ *   <div v-draggable="{ handle: '.drag-handle' }">
+ *     <div class="drag-handle">Drag here</div>
+ *     <div>Content</div>
+ *   </div>
+ *
+ *   <!-- With callbacks -->
+ *   <div v-draggable="{ onDrag: handleDrag }">Drag me</div>
+ * </template>
+ * ```
+ */
+declare const vDraggable: Directive;
+export { vDraggable as draggable }
+export { vDraggable }
+
 /**
  * v-focus directive
  *
@@ -527,6 +1678,330 @@ declare const vFocus: Directive;
 export { vFocus as focus }
 export { vFocus }
 
+/**
+ * v-hover directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-hover="handleHover">Hover me</div>
+ *   <div v-hover="{ onEnter: handleEnter, onLeave: handleLeave, class: 'is-hovering' }">Hover me</div>
+ * </template>
+ * ```
+ */
+declare const vHover: Directive;
+export { vHover as hover }
+export { vHover }
+
+/**
+ * v-image-preview directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple usage -->
+ *   <img v-image-preview src="thumbnail.jpg" data-preview="full.jpg" />
+ *
+ *   <!-- With options -->
+ *   <img v-image-preview="{ src: 'thumbnail.jpg', previewSrc: 'full.jpg' }" />
+ *
+ *   <!-- On non-img element -->
+ *   <div v-image-preview="{ src: 'image.jpg' }">Click to preview</div>
+ * </template>
+ * ```
+ */
+declare const vImagePreview: Directive;
+export { vImagePreview as imagePreview }
+export { vImagePreview }
+
+/**
+ * v-infinite-scroll directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-infinite-scroll="loadMore" class="scroll-container">
+ *     <div v-for="item in items" :key="item.id">{{ item.name }}</div>
+ *   </div>
+ *
+ *   <div v-infinite-scroll="{ handler: loadMore, distance: 100, disabled: isLoading }">
+ *     <div v-for="item in items" :key="item.id">{{ item.name }}</div>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare const vInfiniteScroll: Directive;
+export { vInfiniteScroll as infiniteScroll }
+export { vInfiniteScroll }
+
+/**
+ * v-intersect directive
+ *
+ * @example
+ * ```vue
+ * <div v-intersect="handleIntersect">Observe me</div>
+ * <div v-intersect="{ onEnter: handleEnter, onLeave: handleLeave }">Track visibility</div>
+ * <div v-intersect="{ threshold: 0.5, once: true }">Trigger once at 50%</div>
+ * ```
+ */
+declare const vIntersect: Directive;
+export { vIntersect as intersect }
+export { vIntersect }
+
+/**
+ * Directive binding value type
+ */
+export declare type VisibleBinding = boolean | VisibleOptions;
+
+/**
+ * Visible change handler
+ */
+export declare type VisibleHandler = (isVisible: boolean) => void;
+
+/**
+ * Visible directive options
+ */
+export declare interface VisibleOptions {
+    /**
+     * Callback when visibility changes
+     */
+    handler?: VisibleHandler;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to set visibility: hidden instead of display: none
+     * @default false
+     */
+    useHidden?: boolean;
+    /**
+     * Initial visibility
+     * @default true
+     */
+    initial?: boolean;
+}
+
+/**
+ * v-lazy directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <img v-lazy="imageUrl" />
+ *   <img v-lazy="{ src: imageUrl, placeholder: 'placeholder.jpg' }" />
+ *   <div v-lazy="backgroundImageUrl"></div>
+ * </template>
+ * ```
+ */
+declare const vLazy: Directive;
+export { vLazy as lazy }
+export { vLazy }
+
+/**
+ * v-loading directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-loading="isLoading">Content</div>
+ *   <div v-loading="{ value: isLoading, text: 'Loading...' }">Content</div>
+ *   <div v-loading="{ value: isLoading, lock: true }">Locked scroll while loading</div>
+ * </template>
+ * ```
+ */
+declare const vLoading: Directive;
+export { vLoading as loading }
+export { vLoading }
+
+/**
+ * v-long-press directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-long-press="handleLongPress">Long Press Me</button>
+ *   <button v-long-press="{ handler: handleLongPress, duration: 1000 }">1 Second Press</button>
+ * </template>
+ * ```
+ */
+declare const vLongPress: Directive;
+export { vLongPress as longPress }
+export { vLongPress }
+
+/**
+ * v-lowercase directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Transform all characters to lowercase -->
+ *   <input v-lowercase v-model="text" />
+ *
+ *   <!-- Transform only first character -->
+ *   <span v-lowercase="{ first: true }">{{ text }}</span>
+ * </template>
+ * ```
+ */
+declare const vLowercase: Directive;
+export { vLowercase as lowercase }
+export { vLowercase }
+
+/**
+ * v-mask directive
+ *
+ * @example
+ * ```vue
+ * <input v-mask="'###-##-####'" placeholder="SSN" />
+ * <input v-mask="'(###) ###-####'" placeholder="Phone" />
+ * <input v-mask="{ mask: '##/##/####' }" placeholder="Date" />
+ * ```
+ */
+declare const vMask: Directive;
+export { vMask as mask }
+export { vMask }
+
+declare const vMoney: Directive;
+export { vMoney as money }
+export { vMoney }
+
+/**
+ * v-mutation directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-mutation="handleMutation">Observe my changes</div>
+ *   <div v-mutation="{ handler: handleMutation, attributes: true, subtree: true }">
+ *     Observe attributes and subtree
+ *   </div>
+ * </template>
+ *
+ * <script setup>
+ * function handleMutation(mutations: MutationRecord[], observer: MutationObserver) {
+ *   mutations.forEach(mutation => {
+ *     console.log('Type:', mutation.type)
+ *     console.log('Target:', mutation.target)
+ *   })
+ * }
+ * </script>
+ * ```
+ */
+declare const vMutation: Directive;
+export { vMutation as mutation }
+export { vMutation }
+
+declare const vNumber: Directive;
+export { vNumber as number }
+export { vNumber }
+
+/**
+ * v-permission directive
+ *
+ * Controls element visibility and state based on user permissions.
+ * Supports role-based and permission-based access control with wildcard support.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-permission="'admin'">Admin Only</button>
+ *   <button v-permission="['admin', 'editor']">Admin or Editor</button>
+ *   <button v-permission="{ value: ['read', 'write'], mode: 'every' }">Read & Write</button>
+ *   <button v-permission="{ value: 'admin', action: 'disable' }">Disabled for non-admin</button>
+ * </template>
+ *
+ * <script setup>
+ * import { configurePermission } from 'directix'
+ *
+ * configurePermission({
+ *   getPermissions: () => store.getters.permissions,
+ *   getRoles: () => store.getters.roles,
+ *   roleMap: { admin: ['*'], editor: ['read', 'write'] }
+ * })
+ * </script>
+ * ```
+ */
+declare const vPermission: Directive;
+export { vPermission as permission }
+export { vPermission }
+
+/**
+ * v-resize directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-resize="handleResize">Resize me</div>
+ *   <div v-resize="{ handler: handleResize, debounce: 200 }">Debounced resize</div>
+ * </template>
+ * ```
+ */
+declare const vResize: Directive;
+export { vResize as resize }
+export { vResize }
+
+/**
+ * v-ripple directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-ripple>Click me</button>
+ *   <button v-ripple="'rgba(255, 255, 255, 0.3)'">Custom color</button>
+ *   <button v-ripple="{ color: 'red', duration: 800 }">Custom options</button>
+ * </template>
+ * ```
+ */
+declare const vRipple: Directive;
+export { vRipple as ripple }
+export { vRipple }
+
+/**
+ * v-sanitize directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-sanitize v-html="userContent"></div>
+ *   <div v-sanitize="{ allowedTags: ['b', 'i', 'p'] }" v-html="userContent"></div>
+ *   <div v-sanitize="{ handler: customSanitizer }" v-html="userContent"></div>
+ * </template>
+ * ```
+ */
+declare const vSanitize: Directive;
+export { vSanitize as sanitize }
+export { vSanitize }
+
+/**
+ * v-scroll directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-scroll="handleScroll">Scroll container</div>
+ *   <div v-scroll="{ handler: handleScroll, throttle: 100 }">Throttled scroll</div>
+ * </template>
+ * ```
+ */
+declare const vScroll: Directive;
+export { vScroll as scroll }
+export { vScroll }
+
+/**
+ * v-sticky directive
+ *
+ * @example
+ * ```vue
+ * <div v-sticky>Sticky header</div>
+ * <div v-sticky="50">Sticky with 50px top offset</div>
+ * <div v-sticky="{ top: 60, zIndex: 1000 }">Custom sticky</div>
+ * ```
+ */
+declare const vSticky: Directive;
+export { vSticky as sticky }
+export { vSticky }
+
 /**
  * v-throttle directive
  *
@@ -544,6 +2019,62 @@ declare const vThrottle: Directive;
 export { vThrottle as throttle }
 export { vThrottle }
 
+declare const vTooltip: Directive;
+export { vTooltip as tooltip }
+export { vTooltip }
+
+declare const vTouch: Directive;
+export { vTouch as touch }
+export { vTouch }
+
+/**
+ * v-trim directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple usage: trim both sides -->
+ *   <input v-trim v-model="text" />
+ *
+ *   <!-- Trim only start -->
+ *   <input v-trim="'start'" v-model="text" />
+ *
+ *   <!-- Trim only end -->
+ *   <input v-trim="'end'" v-model="text" />
+ *
+ *   <!-- With options -->
+ *   <input v-trim="{ position: 'both', onBlur: true }" v-model="text" />
+ *
+ *   <!-- For display only -->
+ *   <span v-trim>  Text with spaces  </span>
+ * </template>
+ * ```
+ */
+declare const vTrim: Directive;
+export { vTrim as trim }
+export { vTrim }
+
+/**
+ * v-truncate directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple usage: truncate to 50 characters -->
+ *   <p v-truncate="50">Long text here...</p>
+ *
+ *   <!-- With options -->
+ *   <p v-truncate="{ length: 100, position: 'middle' }">Long text here...</p>
+ *
+ *   <!-- CSS truncation -->
+ *   <p v-truncate="{ useCss: true }">Long text here...</p>
+ * </template>
+ * ```
+ */
+declare const vTruncate: Directive;
+export { vTruncate as truncate }
+export { vTruncate }
+
 /**
  * Vue 2 directive hooks
  */
@@ -568,4 +2099,46 @@ export declare interface Vue3DirectiveHooks {
     unmounted?: (el: any, binding: any, vnode: any, prevVnode: any) => void;
 }
 
+/**
+ * Vue version type
+ * - 2: Vue 2.6.x (requires @vue/composition-api for Composition API)
+ * - 2.7: Vue 2.7.x (has built-in Composition API support)
+ * - 3: Vue 3.x
+ */
+export declare type VueVersion = 2 | 2.7 | 3;
+
+/**
+ * v-uppercase directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Transform all characters to uppercase -->
+ *   <input v-uppercase v-model="text" />
+ *
+ *   <!-- Transform only first character -->
+ *   <span v-uppercase="{ first: true }">{{ text }}</span>
+ * </template>
+ * ```
+ */
+declare const vUppercase: Directive;
+export { vUppercase as uppercase }
+export { vUppercase }
+
+/**
+ * v-visible directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-visible="showElement">Show/Hide</div>
+ *   <div v-visible="{ handler: onVisibleChange }">Track visibility</div>
+ *   <div v-visible="{ useHidden: true, initial: false }">Uses visibility: hidden</div>
+ * </template>
+ * ```
+ */
+declare const vVisible: Directive;
+export { vVisible }
+export { vVisible as visible }
+
 export { }