Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/saqqdy/directix

A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
https://github.com/saqqdy/directix

directives v-click-delay v-click-outside v-copy v-counter v-fullscreen v-hotkey v-image-preview v-infinite-scroll v-lazy v-loading v-money v-pan v-permission v-pinch v-skeleton v-typewriter vue vue2 vue3

Last synced: about 2 months ago
JSON representation

A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3

Awesome Lists containing this project

README 

          
# Directix



[![npm version](https://img.shields.io/npm/v/directix.svg)](https://www.npmjs.com/package/directix)

[![npm downloads](https://img.shields.io/npm/dm/directix.svg)](https://www.npmjs.com/package/directix)

[![GitHub license](https://img.shields.io/github/license/saqqdy/directix)](https://github.com/saqqdy/directix/blob/master/LICENSE)

[![CI](https://github.com/saqqdy/directix/actions/workflows/ci.yml/badge.svg)](https://github.com/saqqdy/directix/actions/workflows/ci.yml)

[![codecov](https://codecov.io/gh/saqqdy/directix/branch/master/graph/badge.svg)](https://codecov.io/gh/saqqdy/directix)



**English** | **[δΈ­ζ–‡ζ–‡ζ‘£](README_CN.md)**



A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3.



## Features



- 🎯 **Comprehensive** - 57 commonly used directives and 57 composables

- πŸ”„ **Vue 2/3 Compatible** - Single codebase supports both Vue 2 and Vue 3

- πŸ“¦ **Tree-shakable** - Import only what you need

- πŸ”’ **TypeScript** - Full TypeScript support with type definitions

- πŸš€ **SSR Friendly** - Multiple directives support SSR out of the box

- πŸ“¦ **Multiple Formats** - ESM, CJS, and IIFE (CDN) formats available

- ⚑ **Zero Dependencies** - Lightweight with minimal bundle size

- 🎨 **Composables** - Every directive has a corresponding composable for Composition API

- πŸ”§ **Utility Exports** - Export `configurePermission`, `getPermissionConfig` and other utilities for advanced usage

- 🌐 **i18n Support** - Built-in internationalization with Chinese, English, and Japanese translations

- πŸ”Œ **Plugin System** - Extensible plugin architecture for community contributions



## What's New in v1.10.0



### Vue 3 Optimization Preview



Vue 3-specific optimizations leveraging the reactive system for better performance.



```typescript

import { useLazyOptimized, useSuspenseDirective, teleportContent } from 'directix'



// Optimized lazy loading with shallowRef

const { state, observe } = useLazyOptimized({

  onLoad: (entry) => console.log('Visible!')

})



// Suspense-ready async directive

const { state, load } = useSuspenseDirective({

  loader: () => fetchData()

})



// Teleport content to target

teleportContent(element, { to: '#modal-container' })

```



### Mobile Optimization



Enhanced touch gestures with haptic feedback and PWA support.



```typescript

import { useEnhancedTouch, triggerHaptic, usePWA } from 'directix'



// 12+ gesture types with haptic feedback

const { activeGesture, bind } = useEnhancedTouch({

  feedback: { haptic: true, visual: true },

  onSwipe: (e) => console.log(`Swiped ${e.direction}`),

  onPinch: (e) => console.log(`Scale: ${e.scale}`),

})



// PWA support

const { isOnline, needsUpdate } = usePWA({ serviceWorker: { enabled: true } })

```



### Accessibility (A11y)



Comprehensive ARIA support, screen reader announcements, and keyboard navigation.



```typescript

import { 

  applyAriaAttributes, 

  announce, 

  useKeyboardNavigation, 

  useFocusTrap 

} from 'directix'



// Apply ARIA attributes

applyAriaAttributes(element, {

  role: 'button',

  ariaLabel: 'Submit',

  ariaDisabled: true,

})



// Screen reader announcements

announce('Form submitted successfully')



// Keyboard navigation with focus trap

const { bind } = useKeyboardNavigation({ focusTrap: true, rovingTabindex: true })

```



### Security Enhancement



Advanced XSS protection, CSP compatibility, and security audit tools.



```typescript

import { sanitizeHtml, SecurityAudit, getCSPNonce } from 'directix'



// Advanced HTML sanitization

const clean = sanitizeHtml(userInput, {

  allowedTags: ['b', 'i', 'p'],

  detectDangerousPatterns: true,

})



// Security audit

const report = SecurityAudit.generateReport(htmlContent)

console.log(SecurityAudit.formatReport(report, 'json'))



// Check dependencies for vulnerabilities

const vulns = await SecurityAudit.checkDependencies()

```



## What's New in v1.9.0



### Internationalization (i18n)



Full i18n support for directive messages and documentation.



```typescript

import { createI18n, setLocale } from 'directix'



// Initialize with locale

createI18n({

  locale: 'en-US',

  fallbackLocale: 'en-US',

  messages: { 'en-US': enUS, 'zh-CN': zhCN, 'ja-JP': jaJP }

})



// Switch locale at runtime

setLocale('zh-CN')

```



### Unified Warning System



Improved developer experience with structured error messages.



```typescript

import { warn, directiveWarn, assertType } from 'directix'



// Directive-specific warnings

directiveWarn('debounce', 'errors.invalid_wait', { wait: 'abc' })



// Type assertions

assertType(value, 'number', 'debounce', 'wait')

```



### Plugin System



Extensible plugin architecture for community contributions.



```typescript

import { definePlugin, getPluginManager } from 'directix'



const myPlugin = definePlugin({

  meta: { name: 'my-plugin', version: '1.0.0' },

  install(ctx) {

    ctx.registerDirective('my-directive', vMyDirective)

  }

})



getPluginManager().register(myPlugin)

```



### Community Plugin Registry



Discover and install community plugins programmatically.



```typescript

import { getPluginRegistry } from 'directix'



const registry = getPluginRegistry()



// Search plugins

const results = await registry.search('animation')



// Get all plugins

const plugins = await registry.getAll()



// Install a plugin

await registry.install('directix-animate', manager)

```



### Timezone & Locale Utilities



Region-specific formatting for dates, numbers, and currencies.



```typescript

import { getTimezoneInfo, formatDateLocale, formatCurrencyLocale } from 'directix'



// Get timezone info

const tz = getTimezoneInfo() // { id: 'Asia/Shanghai', offset: 8, ... }



// Format date by locale

formatDateLocale(new Date()) // Auto-detects user locale



// Format currency

formatCurrencyLocale(99.99) // '$99.99' (US) or '99,99€' (DE)

```



### Vue DevTools Integration



Debug directives directly in Vue DevTools.



```typescript

import { enableDevtools, trackDirective } from 'directix'



// Enable DevTools integration

enableDevtools()



// Track directive usage

trackDirective('debounce', { element: 'input' })

```



### Performance Monitoring



Measure directive performance with detailed metrics.



```typescript

import { enablePerformance, getPerformanceReport } from 'directix'



// Enable monitoring

enablePerformance()



// Get performance report

const report = getPerformanceReport()

// [{ name: 'debounce', mount: { p50: 0.5ms, p95: 1.2ms }, ... }]

```



### Scenario Examples



10+ real-world examples demonstrating directive combinations:



- **Form Validation** - v-debounce, v-mask, v-trim, v-focus

- **Permission Management** - v-permission, v-click-outside

- **Image Gallery** - v-lazy, v-image-preview, v-swipe

- **Infinite Scroll** - v-infinite-scroll, v-virtual-list, v-loading

- **Rich Text Editor** - v-sanitize, v-highlight, v-emoji

- **Gesture Interaction** - v-touch, v-swipe, v-pan, v-pinch

- **Data Visualization** - v-progress, v-counter, v-countdown

- **Drag & Sort** - v-draggable, v-intersect

- **Print & Export** - v-print, v-export

- **Fullscreen Media** - v-fullscreen, v-lottie



## Online Demo



Try it online with StackBlitz or CodeSandbox:



| Demo | StackBlitz | CodeSandbox |

|------|------------|-------------|

| Vue 3 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/directix/tree/master/examples/vue3) | [![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/saqqdy/directix/tree/master/examples/vue3) |

| Vue 2 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/saqqdy/directix/tree/master/examples/vue2) | [![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/saqqdy/directix/tree/master/examples/vue2) |



## Playground



Try the interactive [Playground](https://saqqdy.github.io/directix/playground/) to configure directives and generate code:



- **57+ Directives** - Full coverage of all Directix directives

- **Vue 2 & Vue 3** - Generate code for either version

- **Composables** - Generate composable API code

- **TypeScript Ready** - Full type definitions included

- **Monaco Editor** - Full-featured code editor with syntax highlighting

- **Live Preview** - See directive effects in real-time



Each directive documentation page also includes a code generator for quick code snippets.



## Installation



```bash

# npm

npm install directix



# yarn

yarn add directix



# pnpm

pnpm add directix

```



### Vue 2 Support



For Vue 2.0-2.6, you need to install `@vue/composition-api`:



```bash

npm install @vue/composition-api

```



Vue 2.7+ has built-in Composition API support, so no additional dependencies are needed.



## CDN



You can also use Directix via CDN:



```html



```



The CDN build works seamlessly with both Vue 2 and Vue 3.



## Requirements



- Vue 2.0+ or Vue 3.0+

- Node.js 12.20+ (for build tools)

- For Vue 2.0-2.6: `@vue/composition-api` is required



## Quick Start



### Global Registration



```typescript

// Vue 3

import { createApp } from 'vue'

import Directix from 'directix'



const app = createApp(App)

app.use(Directix)



// Or register specific directives only

app.use(Directix, {

  directives: ['click-outside', 'copy', 'debounce']

})

```



```typescript

// Vue 2

import Vue from 'vue'

import Directix from 'directix'



Vue.use(Directix)

```



### On-Demand Import



```typescript

import { vClickOutside, vCopy, vDebounce } from 'directix'



// Vue 3

app.directive('click-outside', vClickOutside)

app.directive('copy', vCopy)



// Vue 2

Vue.directive('click-outside', vClickOutside)

```



### Using Composables



Every directive has a corresponding composable for use with the Composition API:



```typescript

import { useClickOutside, useCopy, useDebounce } from 'directix'



// In setup() or 

const { copy, copied } = useCopy({ source: textRef })

const { isHovering, bind } = useHover({ onEnter: handleEnter })

const { run: debouncedSearch } = useDebounce({ handler: search, wait: 500 })

```



See the [Composables](#composables) section below for all available composables.



## Nuxt Integration



Directix provides a Nuxt module for seamless integration with Nuxt 3 applications.



### Installation



The Nuxt module is included in the main package. Simply add it to your `nuxt.config.ts`:



```typescript

// nuxt.config.ts

export default defineNuxtConfig({

  modules: ['directix/nuxt'],

  

  directix: {

    // Enable/disable the module (default: true)

    enabled: true,

    

    // Only include specific directives (optional)

    include: ['v-click-outside', 'v-copy', 'v-debounce'],

    

    // Or exclude specific directives (optional)

    exclude: ['v-ripple'],

    

    // Default options for directives (optional)

    directiveOptions: {

      'v-permission': {

        config: {

          getPermissions: () => ['read', 'write']

        }

      }

    },

    

    // Auto-import composables (default: true)

    autoImportComposables: true

  }

})

```



### Usage in Nuxt



Directives are automatically registered and composables are auto-imported:



```vue

<template>

  <div v-click-outside="handleClose">

    <button v-copy="text">Copy</button>

  </div>

</template>



<script setup>

// Composables are auto-imported, no need to import manually

const { copy, copied } = useCopy({ source: text })

const { isHovering } = useHover({ onEnter: handleEnter })



```



### SSR Compatibility



Directives that are not SSR-compatible will only run on the client side. The Nuxt module handles this automatically.



## Available Directives



### Event Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-click-outside` | Detect clicks outside an element | ❌ |

| `v-click-delay` | Delay click execution to prevent double clicks | βœ… |

| `v-debounce` | Debounce event handlers | βœ… |

| `v-throttle` | Throttle event handlers | βœ… |

| `v-long-press` | Detect long press events | ❌ |

| `v-hover` | Hover state detection | ❌ |

| `v-hotkey` | Keyboard shortcut binding | βœ… |

| `v-touch` | Touch gesture detection (swipe, pinch, rotate) | ❌ |

| `v-swipe` | Swipe gesture detection with mouse support | ❌ |



### Form Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-copy` | Copy text to clipboard | ❌ |

| `v-focus` | Auto focus an element | βœ… |

| `v-mask` | Input masking | ❌ |

| `v-trim` | Trim input whitespace | βœ… |

| `v-money` | Currency format input | ❌ |

| `v-number` | Number format input | ❌ |

| `v-ellipsis` | Text ellipsis overflow | βœ… |



### Format Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-uppercase` | Convert text to uppercase | βœ… |

| `v-lowercase` | Convert text to lowercase | βœ… |

| `v-capitalcase` | Capitalize first letter | βœ… |

| `v-truncate` | Truncate text with ellipsis | βœ… |



### Visibility Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-lazy` | Lazy load images | ❌ |

| `v-intersect` | Detect element intersection | ❌ |

| `v-visible` | Control element visibility | βœ… |

| `v-loading` | Show loading overlay | βœ… |



### Scroll Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-scroll` | Scroll event handling | ❌ |

| `v-infinite-scroll` | Infinite scrolling | ❌ |

| `v-sticky` | Sticky positioning | ❌ |

| `v-pull-refresh` | Pull to refresh functionality | ❌ |

| `v-virtual-list` | Virtual list for large datasets | ❌ |



### Security Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-permission` | Permission-based element control | βœ… |

| `v-sanitize` | Sanitize HTML content | βœ… |



### Effect Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-ripple` | Material design ripple effect | ❌ |

| `v-draggable` | Make elements draggable | ❌ |



### Observer Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-resize` | Element resize observer | ❌ |

| `v-mutation` | DOM mutation observer | ❌ |



### UI Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-tooltip` | Tooltip component | ❌ |

| `v-image-preview` | Image preview with zoom | ❌ |

| `v-countdown` | Countdown timer display | βœ… |

| `v-print` | Print element content | ❌ |

| `v-watermark` | Watermark overlay | βœ… |

| `v-skeleton` | Skeleton loading placeholder | βœ… |

| `v-progress` | Progress bar animation | ❌ |

| `v-counter` | Animated number counter | βœ… |



### Gesture Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-pan` | Pan/drag gesture | ❌ |

| `v-pinch` | Pinch/zoom gesture | ❌ |

| `v-rotate-gesture` | Rotation gesture | ❌ |



### Visual Effect Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-blur` | Background blur overlay | ❌ |

| `v-fade` | Fade in/out transition | βœ… |

| `v-parallax` | Parallax scrolling effect | ❌ |

| `v-lottie` | Lottie animation player | ❌ |

| `v-typewriter` | Typewriter animation | βœ… |

| `v-click-wave` | Click wave effect | ❌ |



### Data Directives



| Directive | Description | SSR |

|-----------|-------------|-----|

| `v-export` | Export data (CSV/JSON/HTML) | ❌ |

| `v-highlight` | Keyword highlighting | βœ… |

| `v-emoji` | Emoji input filter | ❌ |

| `v-context-menu` | Right-click context menu | ❌ |

| `v-fullscreen` | Fullscreen toggle | ❌ |



> βœ… = SSR compatible | ❌ = Not SSR compatible



## Composables



Every directive has a corresponding composable function for use with the Composition API. All composables are exported from `directix`:



### Event Composables



| Composable | Description |

|------------|-------------|

| `useClickOutside` | Detect clicks outside an element |

| `useClickDelay` | Delay click execution |

| `useDebounce` | Debounce function calls |

| `useThrottle` | Throttle function calls |

| `useLongPress` | Detect long press gestures |

| `useHover` | Track hover state |

| `useHotkey` | Handle keyboard shortcuts |

| `useTouch` | Detect touch gestures |

| `useSwipe` | Detect swipe gestures |



### Form Composables



| Composable | Description |

|------------|-------------|

| `useCopy` | Copy text to clipboard |

| `useFocus` | Manage element focus |

| `useMask` | Input masking |

| `useTrim` | Trim input whitespace |

| `useMoney` | Currency formatting |

| `useNumber` | Number formatting |

| `useEllipsis` | Text ellipsis overflow |



### Format Composables



| Composable | Description |

|------------|-------------|

| `useUppercase` | Transform to uppercase |

| `useLowercase` | Transform to lowercase |

| `useCapitalcase` | Capitalize text |

| `useTruncate` | Truncate text |



### Visibility Composables



| Composable | Description |

|------------|-------------|

| `useLazy` | Lazy load images |

| `useIntersect` | Detect element intersection |

| `useVisible` | Control element visibility |

| `useLoading` | Show loading overlay |



### Scroll Composables



| Composable | Description |

|------------|-------------|

| `useScroll` | Track scroll position |

| `useInfiniteScroll` | Infinite scrolling |

| `useSticky` | Sticky positioning |

| `usePullRefresh` | Pull to refresh |

| `useVirtualList` | Virtual list for large datasets |



### Other Composables



| Composable | Description |

|------------|-------------|

| `usePermission` | Permission checking |

| `useSanitize` | Sanitize HTML content |

| `useRipple` | Material design ripple effect |

| `useDraggable` | Make elements draggable |

| `useResize` | Element resize observer |

| `useMutation` | DOM mutation observer |

| `useTooltip` | Tooltip control |

| `useImagePreview` | Image preview with zoom |

| `useCountdown` | Countdown timer |

| `usePrint` | Print content |

| `useWatermark` | Watermark overlay |

| `useSkeleton` | Skeleton loading state |

| `useProgress` | Progress bar control |

| `useCounter` | Animated number counter |

| `usePan` | Pan gesture detection |

| `usePinch` | Pinch gesture detection |

| `useRotateGesture` | Rotation gesture detection |

| `useBlur` | Blur overlay control |

| `useFade` | Fade transition control |

| `useParallax` | Parallax scrolling |

| `useLottie` | Lottie animation control |

| `useTypewriter` | Typewriter effect |

| `useExport` | Data export utilities |

| `useHighlight` | Keyword highlighting |

| `useEmoji` | Emoji filtering |

| `useContextMenu` | Context menu control |

| `useFullscreen` | Fullscreen mode control |

| `useClickWave` | Click wave effect |



### Composable Usage Example



```vue



import { ref } from 'vue'

import { useCopy, useHover, useDebounce } from 'directix'



// useCopy

const text = ref('Hello World')

const { copy, copied } = useCopy({ source: text })



// useHover

const buttonRef = ref()

const { isHovering, bind } = useHover({

  onEnter: () => console.log('Entered'),

  onLeave: () => console.log('Left')

})



// useDebounce

const { run: debouncedSearch } = useDebounce({

  handler: (query) => fetchResults(query),

  wait: 500

})



  

    {{ copied ? 'Copied!' : 'Copy' }}

  



  

    Hover me

  



```



## Usage Examples



### v-click-outside



Detect clicks outside an element, useful for closing dropdowns, modals, etc.



```vue



  


    Toggle

    
Dropdown content


  



import { ref } from 'vue'

import { useClickOutside } from 'directix'



const show = ref(false)



function closeDropdown() {

  show.value = false

}



// Composable usage

const containerRef = ref()

useClickOutside(containerRef, () => {

  show.value = false

})



```



### v-copy



Copy text to clipboard with a simple directive.



```vue



  

  Copy to clipboard



  

  

    Copy with callback

  



import { ref } from 'vue'

import { useCopy } from 'directix'



const textToCopy = 'Hello, World!'



function handleSuccess(text) {

  console.log('Copied:', text)

}



function handleError(error) {

  console.error('Copy failed:', error)

}



// Composable usage

const sourceText = ref('Hello World')

const { copy, copied } = useCopy({ source: sourceText })



```



### v-debounce



Debounce event handlers to limit execution frequency.



```vue



  

  



  

  



  

  



import { useDebounce } from 'directix'



function handleInput(event) {

  console.log('Debounced input:', event.target.value)

}



// Composable usage

const { run: debouncedSearch, cancel } = useDebounce({

  handler: (query) => fetchResults(query),

  wait: 500

})



```



### v-throttle



Throttle event handlers to limit execution frequency.



```vue



  

  Throttled click



  

  1 second throttle



  

  

    Throttle with options

  



import { useThrottle } from 'directix'



function handleClick() {

  console.log('Throttled click')

}



// Composable usage

const { run: throttledScroll, cancel } = useThrottle({

  handler: (position) => updatePosition(position),

  wait: 100

})



```



### v-focus



Auto focus an element when mounted.



```vue



  

  



  

  



import { useFocus } from 'directix'



// Composable usage

const { focus, blur, hasFocus } = useFocus()



```



### v-permission



Control element visibility based on user permissions.



```vue



  

  Admin Only



  

  Admin or Editor



  

  

    Requires both permissions

  



  

  

    Disabled for non-admin

  



import { configurePermission, usePermission } from 'directix'



configurePermission({

  getPermissions: () => ['read', 'write'],

  getRoles: () => ['editor'],

  roleMap: {

    admin: ['*'],

    editor: ['read', 'write', 'edit']

  }

})



// Composable usage

const { hasPermission, hasAnyPermission, hasAllPermissions } = usePermission()

const canEdit = hasPermission('edit')



```



### v-lazy



Lazy load images when they enter the viewport.



```vue



  

  



  

  



import { useLazy } from 'directix'



// Composable usage

const { load, state, loaded } = useLazy({

  src: 'image.jpg',

  preload: 100

})



```



### v-mask



Input masking for formatted input.



```vue



  

  



  

  



  

  



import { useMask } from 'directix'



// Composable usage

const { maskedValue, unmaskedValue, update } = useMask({

  mask: '(###) ###-####',

  value: '1234567890'

})



```



### v-loading



Show loading overlay on elements.



```vue



  

  
Content



  

  


    Content with locked scroll

  



import { ref } from 'vue'

import { useLoading } from 'directix'



const isLoading = ref(true)



// Composable usage

const { show, hide, setText } = useLoading({

  text: 'Loading...',

  lock: true

})



```



### v-sanitize



Sanitize HTML content to prevent XSS attacks.



```vue



  

  



  

  



import { useSanitize } from 'directix'



// Composable usage

const { sanitize, setAllowedTags } = useSanitize({

  allowedTags: ['b', 'i', 'u', 'a']

})

const cleanHtml = sanitize(dirtyHtml)



```



### v-tooltip



Display tooltips on hover or click.



```vue



  

  Hover me



  

  

    Click me

  



import { useTooltip } from 'directix'



// Composable usage

const { show, hide, updateContent, updatePosition } = useTooltip({

  content: 'Tooltip content',

  placement: 'top'

})



```



### v-image-preview



Preview images with zoom and gesture support.



```vue



  

  



  

  



import { useImagePreview } from 'directix'



// Composable usage

const { open, close, zoom, rotate } = useImagePreview({

  enablePinchZoom: true

})



```



### v-draggable



Make elements draggable.



```vue



  

  
Drag me



  

  
Horizontal drag only



import { useDraggable } from 'directix'



// Composable usage

const { position, isDragging, reset } = useDraggable({

  axis: 'x',

  bounds: 'parent'

})



```



### v-uppercase / v-lowercase / v-capitalcase



Transform text case.



```vue



  

  

  



import { useUppercase, useLowercase, useCapitalcase } from 'directix'



// Composable usage

const { transform: toUppercase } = useUppercase()

const { transform: toLowercase } = useLowercase()

const { transform: toCapitalcase } = useCapitalcase()



```



### v-truncate



Truncate text with ellipsis.



```vue



  

  
Long text here...



  

  
Long text...



import { useTruncate } from 'directix'



// Composable usage

const { truncate } = useTruncate({ length: 100, suffix: '...' })

const shortText = truncate(longText)



```



### v-touch



Detect touch gestures.



```vue



  


    Swipe or pinch here

  



import { useTouch } from 'directix'



function handleSwipe(direction) {

  console.log('Swiped:', direction) // 'left', 'right', 'up', 'down'

}



function handlePinch(scale) {

  console.log('Pinched:', scale)

}



// Composable usage

const { onSwipe, onPinch, onRotate } = useTouch({

  onSwipe: handleSwipe

})



```



### v-trim



Trim input whitespace.



```vue



  

  



  

  



import { useTrim } from 'directix'



// Composable usage

const { trim, trimLeft, trimRight } = useTrim({ position: 'both' })



```



### v-money



Currency format input.



```vue



  



import { useMoney } from 'directix'



// Composable usage

const { format, parse } = useMoney({ prefix: '$', precision: 2 })

const formatted = format(1234.56) // "$1,234.56"



```



### v-number



Number format input.



```vue



  



import { useNumber } from 'directix'



// Composable usage

const { format, parse } = useNumber({ precision: 2, min: 0, max: 100 })



```



### v-click-delay



Delay click execution to prevent double clicks.



```vue



  

  Click me



  

  500ms delay



import { useClickDelay } from 'directix'



function handleClick() {

  console.log('Clicked (delayed)')

}



// Composable usage

const { run: delayedClick, cancel } = useClickDelay({

  handler: handleClick,

  delay: 300

})



```



### v-countdown



Countdown timer display.



```vue



  

  



  

  



  

  



import { useCountdown } from 'directix'



function handleTick(remaining) {

  console.log('Remaining:', remaining)

}



function handleComplete() {

  console.log('Countdown complete!')

}



// Composable usage

const { start, pause, reset, remaining } = useCountdown({

  time: 60,

  onTick: handleTick,

  onComplete: handleComplete

})



```



### v-ellipsis



Text ellipsis overflow with tooltip.



```vue



  

  
Long text that will be truncated



  

  
Multi-line text with ellipsis



import { useEllipsis } from 'directix'



// Composable usage

const { isEllipsisActive, checkEllipsis } = useEllipsis({ lines: 1 })



```



### v-hotkey



Keyboard shortcut binding.



```vue



  

  


    Press Ctrl+S to save

  



  

  



import { useHotkey } from 'directix'



function handleSave() {

  console.log('Saving...')

}



function handleCopy() {

  console.log('Copying...')

}



// Composable usage

const { bind, unbind, unbindAll } = useHotkey({

  'ctrl+s': handleSave

})



```



### v-print



Print element content.



```vue



  

  Print

  
Content to print



  

  
Click to print this content



import { ref } from 'vue'

import { usePrint } from 'directix'



const printRef = ref()



// Composable usage

const { print, printElement } = usePrint({

  onBefore: () => console.log('Printing...'),

  onComplete: () => console.log('Printed!')

})



```



### v-pull-refresh



Pull to refresh functionality.



```vue



  


    Pull down to refresh

  



  

  


    Content

  



import { usePullRefresh } from 'directix'



async function handleRefresh() {

  // Fetch new data

  await fetchData()

}



// Composable usage

const { isLoading, disable, enable } = usePullRefresh({

  handler: handleRefresh

})



```



### v-swipe



Swipe gesture detection with mouse support.



```vue



  


    Swipe in any direction

  



  

  


    Swipe or drag with mouse

  



import { useSwipe } from 'directix'



function handleSwipe(direction) {

  console.log('Swiped:', direction) // 'left', 'right', 'up', 'down'

}



// Composable usage

const { direction, lengthX, lengthY } = useSwipe({

  onSwipe: handleSwipe,

  threshold: 50

})



```



### v-virtual-list



Virtual list for rendering large datasets efficiently.



```vue



  


    

      
{{ item.name }}


    

  



const list = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }))



import { useVirtualList } from 'directix'



// Composable usage

const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(

  largeList,

  { itemHeight: 50 }

)



```



### v-watermark



Watermark overlay.



```vue



  

  


    Protected content

  



  

  


    Content with watermark

  



import { useWatermark } from 'directix'



// Composable usage

const { show, hide, update } = useWatermark({

  content: 'Confidential',

  fontSize: 16,

  color: '#ccc'

})



```



### v-blur



Background blur overlay effect.



```vue



  

  
Content behind blur



  

  
Blur with 15px radius



  

  


    Content

  



import { ref } from 'vue'

import { useBlur } from 'directix'



const isBlurred = ref(false)



// Composable usage

const { show, hide, toggle } = useBlur({

  radius: 10,

  overlayColor: 'rgba(0, 0, 0, 0.5)'

})



```



### v-fade



Fade in/out transition effect.



```vue



  

  
Fade content



  

  
Fade in



  

  


    Content

  



import { ref } from 'vue'

import { useFade } from 'directix'



const isVisible = ref(true)



// Composable usage

const { fadeIn, fadeOut, toggle } = useFade({

  duration: 300,

  easing: 'ease'

})



```



### v-parallax



Parallax scrolling effect.



```vue



  

  
Parallax content



  

  
Slower parallax



  

  


    Reverse parallax, disabled on mobile

  



import { useParallax } from 'directix'



// Composable usage

const { offset, progress, enabled } = useParallax({

  speed: 0.5,

  reverse: false

})



```



### v-lottie



Lottie animation player.



```vue



  

  



  

  



  

  



import animationData from './animation.json'

import { useLottie } from 'directix'



// Composable usage

const { play, pause, stop, setSpeed, setDirection } = useLottie({

  animationData,

  autoplay: true,

  loop: true

})



```



### v-typewriter



Typewriter animation effect.



```vue



  

  



  

  



  

  



import { useTypewriter } from 'directix'



// Composable usage

const { start, stop, pause, resume } = useTypewriter({

  text: 'Hello World',

  speed: 50,

  loop: false

})



```



### v-export



Export data (CSV/JSON/HTML/TXT).



```vue



  Export CSV



  

    Export JSON

  



  

    Export with custom columns

  



const tableData = [

  { name: 'John', email: 'john@example.com', age: 30 },

  { name: 'Jane', email: 'jane@example.com', age: 25 }

]



import { useExport } from 'directix'



// Composable usage

const { exportCSV, exportJSON, exportHTML } = useExport()



```



### v-highlight



Keyword highlighting.



```vue



  
This is an important message.



  
Vue and React are popular frameworks.



  


    This will highlight the word.

  



import { useHighlight } from 'directix'



// Composable usage

const { highlight, clear } = useHighlight({

  keywords: ['important', 'key'],

  className: 'highlight'

})



```



### v-emoji



Emoji input filter.



```vue



  

  



  

  



  

  



  

  



import { useEmoji } from 'directix'



// Composable usage

const { stripEmojis, containsEmoji } = useEmoji({

  strip: true,

  allowList: ['😊', 'πŸ‘']

})



```



### v-context-menu



Right-click context menu.



```vue



  
Right click here


  
Custom width



import { useContextMenu } from 'directix'



const menuItems = [

  { label: 'Copy', handler: () => console.log('Copy') },

  { label: 'Paste', handler: () => console.log('Paste') },

  { divider: true, label: '' },

  { label: 'Delete', handler: () => console.log('Delete') }

]



// Composable usage

const { show, hide, setItems } = useContextMenu({

  items: menuItems

})



```



### v-fullscreen



Fullscreen toggle.



```vue



  


    Content to show in fullscreen

    Toggle

  



  


    Custom fullscreen class

  



import { useFullscreen } from 'directix'



// Composable usage

const { isFullscreen, enter, exit, toggle } = useFullscreen({

  onEnter: () => console.log('Entered fullscreen'),

  onExit: () => console.log('Exited fullscreen')

})



```



### v-skeleton



Skeleton loading placeholder.



```vue



  

  
Content here



  

  


    Content here

  



import { ref } from 'vue'

import { useSkeleton } from 'directix'



const isLoading = ref(true)



// Composable usage

const { show, hide, update } = useSkeleton({

  animation: 'wave',

  color: '#e8e8e8'

})



```



### v-progress



Progress bar animation.



```vue



  
Progress at 50%



  


    Content

  



  


    Loading...

  



import { ref } from 'vue'

import { useProgress } from 'directix'



const progressValue = ref(50)



// Composable usage

const { setProgress, start, finish, fail } = useProgress({

  color: '#42b883',

  height: 4

})



```



### v-counter



Animated number counter.



```vue



  0



  0



  0



import { ref } from 'vue'

import { useCounter } from 'directix'



const targetValue = ref(1000)



// Composable usage

const { start, pause, reset, update } = useCounter({

  startValue: 0,

  endValue: 1000,

  duration: 2000,

  formatter: (v) => `$${v.toFixed(2)}`

})



```



### v-click-wave



Click wave effect.



```vue



  Click me

  Custom color

  Custom options



import { ref } from 'vue'

import { useClickWave } from 'directix'



// Composable usage

const buttonRef = ref(null)

const { bind, trigger } = useClickWave({

  color: 'currentColor',

  duration: 500

})



// Bind to element on mount

onMounted(() => bind(buttonRef.value))



```



### v-pan



Pan/drag gesture.



```vue



  
Swipe me



  


    Horizontal only

  



import { usePan } from 'directix'



function handlePan(e) {

  console.log('Direction:', e.direction)

  console.log('Distance:', e.distance)

}



// Composable usage

const { isPanning, deltaX, deltaY } = usePan({

  onPan: handlePan,

  direction: 'horizontal'

})



```



### v-pinch



Pinch/zoom gesture.



```vue



  
Pinch to zoom



  


    Pinch to scale

  



import { usePinch } from 'directix'



function handlePinch(e) {

  console.log('Scale:', e.scale)

  console.log('Center:', e.centerX, e.centerY)

}



// Composable usage

const { scale, isPinching } = usePinch({

  onPinch: handlePinch,

  minScale: 0.5,

  maxScale: 3

})



```



### v-rotate-gesture



Rotation gesture.



```vue



  
Rotate with two fingers



  


    Rotate with transform

  



import { useRotateGesture } from 'directix'



function handleRotate(e) {

  console.log('Rotation:', e.rotation)

  console.log('Angle:', e.angle)

}



// Composable usage

const { angle, isRotating } = useRotateGesture({

  onRotate: handleRotate,

  enableTransform: true

})



```



## API Reference



### DirectiveInstallOptions



```typescript

interface DirectiveInstallOptions {

  /** Register specific directives only */

  directives?: string[]

  /** Register all directives (default: true) */

  all?: boolean

  /** Global configuration for directives */

  config?: Record

}

```



### Directive Options



Each directive accepts different options. See the [documentation](https://github.com/saqqdy/directix#usage-examples) for detailed API.



## Roadmap



### v1.7.1 (2026-04-11) - Bug Fixes & Improvements βœ…



- **Playground Fixes** - Monaco Editor loading, syntax highlighting, Vue version sync

- **UI Improvements** - Removed redundant controls, unified documentation layout



### v1.7.0 (2026-04-15) - Visual Configuration Tool βœ…



- **Online Playground** - Live editing environment with Vue 2/3 support

- **Visual Configurator** - Interactive parameter configuration panel

- **Code Generator** - Generate Vue 2/3/Composable/Nuxt code snippets

- **Configuration Presets** - Quick-start templates for common use cases

- **Monaco Editor** - CDN-loaded code editor with syntax highlighting

- **Live Preview** - Real-time directive effect preview



### v1.8.0 (2026-04-22) - Quality & Ecosystem βœ…



- **Test Coverage** - 90%+ unit test coverage, E2E testing with Playwright

- **Performance Optimization** - Bundle size optimization, tree-shaking improvements

- **VS Code Extension** - Autocompletion, hover documentation, code snippets

- **CLI Tool** - `directix create`, `directix init`, `directix doctor`, `directix migrate`



### v1.9.0 (Planned - 2026-04-29) - Documentation & Community



- **Interactive Documentation** - Live editing with instant preview

- **Real-world Examples** - 10+ practical scenario examples

- **i18n Support** - English, Chinese, Japanese documentation

- **Developer Experience** - Improved error messages, DevTools integration

- **Plugin System** - Community extension support



### v1.10.0 (Planned - 2026-05-06) - Vue 3 Optimization & Security



- **Vue 3 Optimization Preview** - Suspense, Teleport support

- **Mobile Optimization** - Touch gestures, PWA support

- **Accessibility (A11y)** - ARIA attributes, keyboard navigation

- **Security Enhancements** - XSS protection, CSP compatibility



### v1.11.0 (Planned - 2026-05-13) - Stability & Enterprise



- **Stability** - Browser compatibility, edge case fixes

- **Performance Limits** - Bundle ≀ 25KB, memory optimization

- **Enterprise Features** - Permissions, audit logs, config center

- **v2.0 Migration Prep** - Migration tool, breaking changes warnings



### v2.0.0 (Future)



- Vue 3 exclusive optimizations

- Web Components support



## Browser Support



| Browser | Version |

|---------|---------|

| Chrome | Latest |

| Firefox | Latest |

| Safari | Latest |

| Edge | Latest |



## Contributing



Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.



## License



[MIT](LICENSE) Β© 2024-present saqqdy