directix 1.1.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
  */
@@ -280,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
  */
@@ -378,6 +468,48 @@ export declare interface HoverOptions {
     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
  */
@@ -715,6 +847,27 @@ export declare interface LongPressOptions {
     stop?: boolean;
 }
 
+/**
+ * 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;
 
 /**
@@ -739,6 +892,18 @@ export declare interface MaskOptions {
     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
  */
@@ -799,6 +964,39 @@ export declare interface MutationOptions {
     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"
@@ -1132,6 +1330,11 @@ export declare const supportsPassive: () => boolean;
  */
 export declare const supportsResizeObserver: () => boolean;
 
+/**
+ * Swipe direction
+ */
+export declare type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+
 /**
  * Directive binding value type
  */
@@ -1180,6 +1383,211 @@ export declare interface ThrottleOptions<T extends (...args: any[]) => any = any
     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
  *
@@ -1228,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
  *
@@ -1258,6 +1693,27 @@ 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
  *
@@ -1374,6 +1830,24 @@ 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
  *
@@ -1388,6 +1862,10 @@ declare const vMask: Directive;
 export { vMask as mask }
 export { vMask }
 
+declare const vMoney: Directive;
+export { vMoney as money }
+export { vMoney }
+
 /**
  * v-mutation directive
  *
@@ -1414,6 +1892,10 @@ declare const vMutation: Directive;
 export { vMutation as mutation }
 export { vMutation }
 
+declare const vNumber: Directive;
+export { vNumber as number }
+export { vNumber }
+
 /**
  * v-permission directive
  *
@@ -1537,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
  */
@@ -1569,6 +2107,24 @@ export declare interface Vue3DirectiveHooks {
  */
 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
  *