directix 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -63,6 +63,11 @@ export declare interface ClickOutsideOptions {
     prevent?: boolean;
 }
 
+/**
+ * Configure permission directive
+ */
+export declare function configurePermission(config: PermissionConfig): void;
+
 /**
  * Directive binding value type
  */
@@ -315,10 +320,159 @@ 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;
+}
+
+/**
+ * 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,127 +525,689 @@ export declare const isSSR: () => boolean;
 export declare function isString(value: unknown): value is string;
 
 /**
- * Check if Vue 2
+ * Check if Vue 2 (includes 2.7)
+ */
+export declare function isVue2(): boolean;
+
+/**
+ * Check if Vue 2.7 (has built-in Composition API support)
  */
-export declare const isVue2: () => boolean;
+export declare function isVue27(): boolean;
 
 /**
  * Check if Vue 3
  */
-export declare const isVue3: () => boolean;
+export declare function isVue3(): boolean;
 
 /**
- * Parse time argument
- * Supports formats: "300" | "300ms" | "1s"
+ * Directive binding value type
  */
-export declare function parseTime(arg?: string): number | null;
+export declare type LazyBinding = string | LazyOptions;
 
 /**
- * Set nested property value by path
+ * Lazy directive options
  */
-export declare function set(obj: Record<string, any>, path: string, value: any): void;
+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 Clipboard API is supported
+ * Lazy loading state
  */
-export declare const supportsClipboard: () => boolean;
+export declare type LazyState = 'pending' | 'loading' | 'loaded' | 'error';
 
 /**
- * Check if IntersectionObserver is supported
+ * Directive binding value type
  */
-export declare const supportsIntersectionObserver: () => boolean;
+export declare type LoadingBinding = boolean | LoadingOptions;
 
 /**
- * Check if MutationObserver is supported
+ * Loading directive options
  */
-export declare const supportsMutationObserver: () => 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;
+}
 
 /**
- * Check if passive event listening is supported
+ * Directive binding value type
  */
-export declare const supportsPassive: () => boolean;
+export declare type LongPressBinding = LongPressHandler | LongPressOptions;
 
 /**
- * Check if ResizeObserver is supported
+ * Long press handler
  */
-export declare const supportsResizeObserver: () => boolean;
+export declare type LongPressHandler = (event: MouseEvent | TouchEvent) => void;
 
 /**
- * Directive binding value type
+ * Long press directive options
  */
-export declare type ThrottleBinding<T extends (...args: any[]) => any = any> = T | ThrottleOptions<T>;
+export declare interface LongPressOptions {
+    /**
+     * Callback when long press is triggered
+     * @required
+     */
+    handler: LongPressHandler;
+    /**
+     * Duration in milliseconds to trigger long press
+     * @default 500
+     */
+    duration?: number;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 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
+     */
+    prevent?: boolean;
+    /**
+     * Whether to stop propagation
+     * @default false
+     */
+    stop?: boolean;
+}
+
+export declare type MaskBinding = string | MaskOptions;
 
 /**
- * Throttled function type
+ * Mask directive options
  */
-export declare interface ThrottledFunction<T extends (...args: any[]) => any> {
-    (...args: Parameters<T>): void;
-    cancel: () => void;
+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;
 }
 
 /**
- * Throttle function
+ * Directive binding value type
  */
-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 MutationBinding = MutationHandler | MutationOptions;
 
 /**
- * Throttle directive options
+ * Mutation change handler
  */
-export declare interface ThrottleOptions<T extends (...args: any[]) => any = any> {
+export declare type MutationHandler = (mutations: MutationRecord[], observer: MutationObserver) => void;
+
+/**
+ * Mutation directive options
+ */
+export declare interface MutationOptions {
     /**
-     * Function to throttle
+     * Callback when mutations occur
+     * @required
      */
-    handler: T;
+    handler: MutationHandler;
     /**
-     * Delay time in milliseconds
-     * @default 300
+     * Whether to observe attribute changes
+     * @default false
      */
-    wait?: number;
+    attributes?: boolean;
     /**
-     * Whether to invoke immediately before delay starts
-     * @default true
+     * Specific attributes to observe
      */
-    leading?: boolean;
+    attributeFilter?: string[];
     /**
-     * Whether to invoke after delay ends
+     * Whether to observe child node additions/removals
      * @default true
      */
-    trailing?: boolean;
+    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;
 }
 
 /**
- * v-click-outside directive
- *
- * @example
- * ```vue
- * <template>
- *   <div v-click-outside="handleClickOutside">
- *     Dropdown menu
- *   </div>
- * </template>
- * ```
+ * Parse time argument
+ * Supports formats: "300" | "300ms" | "1s"
  */
-declare const vClickOutside: Directive;
-export { vClickOutside as clickOutside }
-export { vClickOutside }
+export declare function parseTime(arg?: string): number | null;
 
 /**
- * v-copy directive
- *
- * @example
- * ```vue
- * <template>
- *   <button v-copy="textToCopy">Copy Text</button>
- * </template>
- * ```
+ * Permission action mode
  */
-declare const vCopy: Directive;
-export { vCopy as copy }
+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;
+
+/**
+ * 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;
+}
+
+/**
+ * v-click-outside directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-click-outside="handleClickOutside">
+ *     Dropdown menu
+ *   </div>
+ * </template>
+ * ```
+ */
+declare const vClickOutside: Directive;
+export { vClickOutside as clickOutside }
+export { vClickOutside }
+
+/**
+ * v-copy directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-copy="textToCopy">Copy Text</button>
+ * </template>
+ * ```
+ */
+declare const vCopy: Directive;
+export { vCopy as copy }
 export { vCopy }
 
 /**
@@ -527,6 +1243,283 @@ 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-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-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 }
+
+/**
+ * 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 }
+
+/**
+ * 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
  *
@@ -568,4 +1561,28 @@ 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-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 { }