directix 1.0.0-beta.2 → 1.1.0

package/dist/index.d.ts

@@ -4,132 +4,137 @@ import { Plugin as Plugin_2 } from 'vue';
 import { VNode } from 'vue';
 
 /**
- * 添加清理函数到元素
+ * Add cleanup function to element
  */
 export declare function addCleanupVue2(el: Element, fn: () => void): void;
 
 /**
- * 添加清理函数到元素
+ * Add cleanup function to element
  */
 export declare function addCleanupVue3(el: Element, fn: () => void): void;
 
 /**
- * 指令绑定值类型
+ * Directive binding value type
  */
 export declare type ClickOutsideBinding = ClickOutsideHandler | ClickOutsideOptions;
 
 /**
- * 点击外部处理函数
+ * Click outside handler
  */
 export declare type ClickOutsideHandler = (event: MouseEvent | TouchEvent) => void;
 
 /**
- * 点击外部指令选项
+ * Click outside directive options
  */
 export declare interface ClickOutsideOptions {
     /**
-     * 点击外部时的回调函数
+     * Callback when clicking outside
      * @required
      */
     handler: ClickOutsideHandler;
     /**
-     * 排除的元素选择器或元素引用
+     * Excluded element selectors or element references
      */
     exclude?: (string | HTMLElement | (() => HTMLElement | null))[];
     /**
-     * 是否使用捕获模式
+     * Whether to use capture mode
      * @default true
      */
     capture?: boolean;
     /**
-     * 监听的事件类型
+     * Event types to listen for
      * @default ['click']
      */
     events?: ('click' | 'mousedown' | 'mouseup' | 'touchstart' | 'touchend')[];
     /**
-     * 是否禁用
+     * Whether to disable
      * @default false
      */
     disabled?: boolean;
     /**
-     * 停止传播
+     * Stop propagation
      * @default false
      */
     stop?: boolean;
     /**
-     * 阻止默认行为
+     * Prevent default behavior
      * @default false
      */
     prevent?: boolean;
 }
 
 /**
- * 指令绑定值类型
+ * Configure permission directive
+ */
+export declare function configurePermission(config: PermissionConfig): void;
+
+/**
+ * Directive binding value type
  */
 export declare type CopyBinding = string | CopyOptions;
 
 /**
- * 复制失败回调
+ * Copy error callback
  */
 export declare type CopyErrorCallback = (error: Error) => void;
 
 /**
- * 复制指令选项
+ * Copy directive options
  */
 export declare interface CopyOptions {
     /**
-     * 要复制的文本
+     * Text to copy
      * @required
      */
     value: string;
     /**
-     * 复制成功回调
+     * Callback on copy success
      */
     onSuccess?: CopySuccessCallback;
     /**
-     * 复制失败回调
+     * Callback on copy error
      */
     onError?: CopyErrorCallback;
     /**
-     * 复制按钮的提示文本
+     * Tooltip text for the copy button
      */
     title?: string;
     /**
-     * 是否禁用
+     * Whether to disable
      * @default false
      */
     disabled?: boolean;
 }
 
 /**
- * 复制成功回调
+ * Copy success callback
  */
 export declare type CopySuccessCallback = (text: string) => void;
 
 /**
- * Vue 2 指令适配器
+ * Vue 2 directive adapter
  * @returns Vue 2 directive object with bind/inserted/update/unbind hooks
  */
 export declare function createVue2Directive<T, B extends Element>(hooks: DirectiveHooks<T, B>): Record<string, any>;
 
 /**
- * Vue 3 指令适配器
+ * Vue 3 directive adapter
  * @returns Vue 3 directive object with created/mounted/updated/unmounted hooks
  */
 export declare function createVue3Directive<T, B extends Element>(hooks: DirectiveHooks<T, B>): Record<string, any>;
 
 /**
- * 跨版本指令类型（兼容 Vue 2/3）
+ * Cross-version directive type (compatible with Vue 2/3)
  */
 export declare type CrossVersionDirective = Directive | Vue2DirectiveHooks | Vue3DirectiveHooks;
 
 /**
- * 指令绑定值类型
+ * Directive binding value type
  */
 export declare type DebounceBinding<T extends (...args: any[]) => any = any> = T | DebounceOptions<T>;
 
 /**
- * 防抖函数类型
+ * Debounced function type
  */
 export declare interface DebouncedFunction<T extends (...args: any[]) => any> {
     (...args: Parameters<T>): void;
@@ -138,7 +143,7 @@ export declare interface DebouncedFunction<T extends (...args: any[]) => any> {
 }
 
 /**
- * 防抖函数
+ * Debounce function
  */
 export declare function debounceFn<T extends (...args: any[]) => any>(func: T, wait?: number, options?: {
     leading?: boolean;
@@ -149,49 +154,49 @@ export declare function debounceFn<T extends (...args: any[]) => any>(func: T, w
 };
 
 /**
- * 防抖指令选项
+ * Debounce directive options
  */
 export declare interface DebounceOptions<T extends (...args: any[]) => any = any> {
     /**
-     * 要防抖的函数
+     * Function to debounce
      */
     handler: T;
     /**
-     * 延迟时间（毫秒）
+     * Delay time in milliseconds
      * @default 300
      */
     wait?: number;
     /**
-     * 是否在延迟开始前立即调用
+     * Whether to invoke immediately before delay starts
      * @default false
      */
     leading?: boolean;
     /**
-     * 是否在延迟结束后调用
+     * Whether to invoke after delay ends
      * @default true
      */
     trailing?: boolean;
 }
 
 /**
- * 深拷贝
+ * Deep clone an object
  */
 export declare function deepClone<T>(obj: T): T;
 
 /**
- * 深合并
+ * Deep merge objects
  */
 export declare function deepMerge<T extends Record<string, any>>(target: T, ...sources: Partial<T>[]): T;
 
 /**
- * 定义一个跨版本兼容的指令
- * @param definition 指令定义
- * @returns Vue 指令对象
+ * Define a cross-version compatible directive
+ * @param definition The directive definition
+ * @returns Vue directive object
  */
 export declare function defineDirective<T = any, B extends Element = Element>(definition: DirectiveDefinition<T, B>): Directive;
 
 /**
- * 定义指令组
+ * Define a directive group
  */
 export declare function defineDirectiveGroup(name: string, directives: Record<string, any>): {
     name: string;
@@ -200,352 +205,1340 @@ export declare function defineDirectiveGroup(name: string, directives: Record<st
 };
 
 /**
- * 统一的指令绑定对象
+ * Unified directive binding object
  */
 export declare interface DirectiveBinding<T = any> {
-    /** 指令绑定的值 */
+    /** The value passed to the directive */
     value: T;
-    /** 上一次绑定的值 */
+    /** The previous value */
     oldValue: T | null;
-    /** 指令参数 (v-xxx:arg) */
+    /** The directive argument (v-xxx:arg) */
     arg?: string;
-    /** 修饰符对象 (v-xxx.modifier) */
+    /** The modifiers object (v-xxx.modifier) */
     modifiers: Record<string, boolean>;
-    /** 组件实例 */
+    /** The component instance */
     instance: ComponentPublicInstance | null;
 }
 
 /**
- * 指令定义接口
+ * Directive definition interface
  */
 export declare interface DirectiveDefinition<T = any, B extends Element = Element> extends DirectiveHooks<T, B> {
-    /** 指令名称 */
+    /** The directive name */
     name: string;
-    /** 指令版本 */
+    /** The Vue version compatibility */
     version?: '2' | '3' | 'both';
-    /** 是否服务端渲染兼容 */
+    /** Whether SSR compatible */
     ssr?: boolean;
-    /** 默认值 */
+    /** Default values */
     defaults?: Partial<T>;
 }
 
 /**
- * 统一的指令钩子函数
+ * Unified directive hooks
  */
 export declare interface DirectiveHooks<T = any, B extends Element = Element> {
     /**
-     * 指令绑定到元素时调用
-     * @param el 绑定的 DOM 元素
-     * @param binding 绑定对象
-     * @param vnode Vue 虚拟节点
+     * Called when the directive is bound to an element
+     * @param el The bound DOM element
+     * @param binding The binding object
+     * @param vnode The Vue virtual node
      */
     mounted?: (el: B, binding: DirectiveBinding<T>, vnode: VNode) => void;
     /**
-     * 元素更新时调用
-     * @param el 绑定的 DOM 元素
-     * @param binding 新的绑定对象
-     * @param vnode 新的虚拟节点
-     * @param prevBinding 旧的绑定对象
-     * @param prevVnode 旧的虚拟节点
+     * Called when the element is updated
+     * @param el The bound DOM element
+     * @param binding The new binding object
+     * @param vnode The new virtual node
+     * @param prevBinding The previous binding object
+     * @param prevVnode The previous virtual node
      */
     updated?: (el: B, binding: DirectiveBinding<T>, vnode: VNode, prevBinding: DirectiveBinding<T>, prevVnode: VNode) => void;
     /**
-     * 指令卸载时调用
-     * @param el 绑定的 DOM 元素
-     * @param binding 绑定对象
-     * @param vnode 虚拟节点
+     * Called when the directive is unbound
+     * @param el The bound DOM element
+     * @param binding The binding object
+     * @param vnode The virtual node
      */
     unmounted?: (el: B, binding: DirectiveBinding<T>, vnode: VNode) => void;
 }
 
 /**
- * 指令安装选项
+ * Directive installation options
  */
 export declare interface DirectiveInstallOptions {
-    /** 注册的指令名称列表，不传则注册全部 */
+    /** List of directive names to register, registers all if not provided */
     directives?: string[];
-    /** 是否注册全部指令 */
+    /** Whether to register all directives */
     all?: boolean;
-    /** 全局配置 */
+    /** Global configuration */
     config?: Record<string, any>;
 }
 
 /**
- * Directix 插件
+ * Directix plugin
  */
 export declare const Directix: Plugin_2;
 
 /**
- * 指令绑定值类型
+ * Directive binding value type
  */
 export declare type FocusBinding = boolean | FocusOptions_2;
 
 /**
- * 焦点指令选项
+ * Focus directive options
  */
 declare interface FocusOptions_2 {
     /**
-     * 是否自动聚焦
+     * Whether to auto focus
      * @default true
      */
     focus?: boolean;
     /**
-     * 是否在每次更新时重新聚焦
+     * Whether to refocus when binding value changes
      * @default false
      */
     refocus?: boolean;
     /**
-     * 聚焦时的回调
+     * Callback when focused
      */
     onFocus?: (el: HTMLElement) => void;
     /**
-     * 失焦时的回调
+     * Callback when blurred
      */
     onBlur?: (el: HTMLElement) => void;
 }
 export { FocusOptions_2 as FocusOptions }
 
 /**
- * 生成唯一 ID
+ * Generate unique ID
  */
 export declare function generateId(prefix?: string): string;
 
 /**
- * 获取嵌套属性值
+ * Get nested property value by path
  */
 export declare function get<T = any>(obj: Record<string, any>, path: string, defaultValue?: T): T;
 
 /**
- * 获取当前 Vue 版本
+ * Get current configuration
+ */
+export declare function getPermissionConfig(): PermissionConfig | null;
+
+/**
+ * Get current Vue version
+ */
+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 function getVueVersion(): 2 | 3;
+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
  */
 export declare function isArray(value: unknown): value is any[];
 
 /**
- * 检查是否为布尔值
+ * Check if value is a boolean
  */
 export declare function isBoolean(value: unknown): value is boolean;
 
 /**
- * 是否浏览器环境
+ * Check if browser environment
  */
 export declare const isBrowser: () => boolean;
 
 /**
- * 检查是否为空
+ * Check if value is empty
  */
 export declare function isEmpty(value: unknown): boolean;
 
 /**
- * 检查是否为函数
+ * Check if value is a function
  */
 export declare function isFunction(value: unknown): value is (...args: any[]) => any;
 
 /**
- * 检查是否为数字
+ * Check if value is a number
  */
 export declare function isNumber(value: unknown): value is number;
 
 /**
- * 检查是否为对象
+ * Check if value is an object
  */
 export declare function isObject(value: unknown): value is Record<string, any>;
 
 /**
- * 检查是否为 Promise
+ * Check if value is a Promise
  */
 export declare function isPromise<T = any>(value: unknown): value is Promise<T>;
 
 /**
- * 是否服务端渲染
+ * Check if server-side rendering
  */
 export declare const isSSR: () => boolean;
 
 /**
- * 检查是否为字符串
+ * Check if value is a string
  */
 export declare function isString(value: unknown): value is string;
 
 /**
- * 是否 Vue 2
+ * Check if Vue 2 (includes 2.7)
  */
-export declare const isVue2: () => boolean;
+export declare function isVue2(): boolean;
 
 /**
- * 是否 Vue 3
+ * Check if Vue 2.7 (has built-in Composition API support)
  */
-export declare const isVue3: () => boolean;
+export declare function isVue27(): boolean;
 
 /**
- * 解析时间参数
- * 支持格式: "300" | "300ms" | "1s"
+ * Check if Vue 3
  */
-export declare function parseTime(arg?: string): number | null;
+export declare function isVue3(): boolean;
 
 /**
- * 设置嵌套属性值
+ * Directive binding value type
  */
-export declare function set(obj: Record<string, any>, path: string, value: any): void;
+export declare type LazyBinding = string | LazyOptions;
 
 /**
- * 是否支持 Clipboard API
+ * Lazy directive options
  */
-export declare const supportsClipboard: () => 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;
+}
 
 /**
- * 是否支持 IntersectionObserver
+ * Lazy loading state
  */
-export declare const supportsIntersectionObserver: () => boolean;
+export declare type LazyState = 'pending' | 'loading' | 'loaded' | 'error';
 
 /**
- * 是否支持 MutationObserver
+ * Directive binding value type
  */
-export declare const supportsMutationObserver: () => boolean;
+export declare type LoadingBinding = boolean | LoadingOptions;
 
 /**
- * 是否支持 Passive 事件监听
+ * Loading directive options
  */
-export declare const supportsPassive: () => 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;
+}
 
 /**
- * 是否支持 ResizeObserver
+ * Directive binding value type
  */
-export declare const supportsResizeObserver: () => boolean;
+export declare type LongPressBinding = LongPressHandler | LongPressOptions;
 
 /**
- * 指令绑定值类型
+ * Long press handler
  */
-export declare type ThrottleBinding<T extends (...args: any[]) => any = any> = T | ThrottleOptions<T>;
+export declare type LongPressHandler = (event: MouseEvent | TouchEvent) => void;
 
 /**
- * 节流函数类型
+ * Long press directive options
  */
-export declare interface ThrottledFunction<T extends (...args: any[]) => any> {
-    (...args: Parameters<T>): void;
-    cancel: () => void;
+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;
+
 /**
- * 节流函数
+ * Mask directive options
  */
-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 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;
+}
 
 /**
- * 节流指令选项
+ * Directive binding value type
  */
-export declare interface ThrottleOptions<T extends (...args: any[]) => any = any> {
+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: T;
+    handler: MutationHandler;
     /**
-     * 延迟时间（毫秒）
-     * @default 300
+     * Whether to observe attribute changes
+     * @default false
      */
-    wait?: number;
+    attributes?: boolean;
     /**
-     * 是否在延迟开始前立即调用
-     * @default true
+     * Specific attributes to observe
      */
-    leading?: boolean;
+    attributeFilter?: string[];
     /**
-     * 是否在延迟结束后调用
+     * 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 指令
- *
- * @example
- * ```vue
- * <template>
- *   <div v-click-outside="handleClickOutside">
- *     下拉菜单
- *   </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 指令
- *
- * @example
- * ```vue
- * <template>
- *   <button v-copy="textToCopy">复制文本</button>
- * </template>
- * ```
+ * Permission action mode
  */
-declare const vCopy: Directive;
-export { vCopy as copy }
-export { vCopy }
+export declare type PermissionAction = 'remove' | 'disable' | 'hide';
 
 /**
- * v-debounce 指令
- *
- * @example
- * ```vue
- * <template>
- *   <input v-debounce="handleInput" />
- *   <input v-debounce:500ms="handleInput" />
- *   <input v-debounce="{ handler: handleInput, wait: 500 }" />
- *   <div v-debounce.scroll="handleScroll">滚动防抖</div>
- *   <div v-debounce:100.scroll="handleScroll">100ms 滚动防抖</div>
- * </template>
- * ```
+ * Directive binding value type
  */
-declare const vDebounce: Directive;
-export { vDebounce as debounce }
-export { vDebounce }
+export declare type PermissionBinding = string | string[] | PermissionOptions;
 
 /**
- * v-focus 指令
- *
- * @example
- * ```vue
- * <template>
- *   <input v-focus />
- *   <input v-focus="{ focus: true, refocus: true }" />
- * </template>
- * ```
+ * Permission configuration
  */
-declare const vFocus: Directive;
-export { vFocus as focus }
-export { vFocus }
+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[]>;
+}
 
 /**
- * v-throttle 指令
- *
- * @example
- * ```vue
- * <template>
- *   <button v-throttle="handleClick">节流按钮</button>
- *   <button v-throttle:1s="handleClick">1秒节流</button>
- *   <div v-throttle.scroll="handleScroll">滚动节流</div>
- *   <div v-throttle:100.scroll="handleScroll">100ms 滚动节流</div>
- * </template>
- * ```
+ * Permission check mode
  */
-declare const vThrottle: Directive;
-export { vThrottle as throttle }
-export { vThrottle }
+declare type PermissionMode = 'some' | 'every';
 
 /**
- * Vue 2 指令钩子
+ * 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 }
+
+/**
+ * v-debounce directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <input v-debounce="handleInput" />
+ *   <input v-debounce:500ms="handleInput" />
+ *   <input v-debounce="{ handler: handleInput, wait: 500 }" />
+ *   <div v-debounce.scroll="handleScroll">Scroll Debounce</div>
+ *   <div v-debounce:100.scroll="handleScroll">100ms Scroll Debounce</div>
+ * </template>
+ * ```
+ */
+declare const vDebounce: Directive;
+export { vDebounce as debounce }
+export { vDebounce }
+
+/**
+ * v-focus directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <input v-focus />
+ *   <input v-focus="{ focus: true, refocus: true }" />
+ * </template>
+ * ```
+ */
+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
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-throttle="handleClick">Throttled Button</button>
+ *   <button v-throttle:1s="handleClick">1s Throttled</button>
+ *   <div v-throttle.scroll="handleScroll">Scroll Throttle</div>
+ *   <div v-throttle:100.scroll="handleScroll">100ms Scroll Throttle</div>
+ * </template>
+ * ```
+ */
+declare const vThrottle: Directive;
+export { vThrottle as throttle }
+export { vThrottle }
+
+/**
+ * Vue 2 directive hooks
  */
 export declare interface Vue2DirectiveHooks {
     bind?: (el: any, binding: any, vnode: any, oldVnode: any) => void;
@@ -556,7 +1549,7 @@ export declare interface Vue2DirectiveHooks {
 }
 
 /**
- * Vue 3 指令钩子
+ * Vue 3 directive hooks
  */
 export declare interface Vue3DirectiveHooks {
     created?: (el: any, binding: any, vnode: any, prevVnode: any) => void;
@@ -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 { }