directix 1.6.0 → 1.8.0

package/README.md

@@ -3,6 +3,8 @@
 [![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)**
 
@@ -29,6 +31,19 @@ Try it online with StackBlitz or 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
@@ -1774,6 +1789,56 @@ interface DirectiveInstallOptions {
 
 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 |

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * directix v1.6.0
+ * directix v1.8.0
  * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
  * (c) 2021-present saqqdy <https://github.com/saqqdy>
  * Released under the MIT License.
@@ -78,7 +78,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 /*!
- * directix v1.6.0
+ * directix v1.8.0
  * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
  * (c) 2021-present saqqdy <https://github.com/saqqdy>
  * Released under the MIT License.
@@ -2528,14 +2528,16 @@ const vFade = defineDirective({
       el.style.opacity = String(options.minOpacity || 0);
       el.style.display = "";
       String(el.offsetHeight);
-      requestAnimationFrame(() => {
+      state.animationFrame = requestAnimationFrame(() => {
+        state.animationFrame = null;
         el.style.opacity = String(options.maxOpacity || 1);
         state.currentOpacity = options.maxOpacity || 1;
       });
     } else if (options.direction === "out") {
       el.style.opacity = String(options.maxOpacity || 1);
       el.style.display = "";
-      requestAnimationFrame(() => {
+      state.animationFrame = requestAnimationFrame(() => {
+        state.animationFrame = null;
         el.style.opacity = String(options.minOpacity || 0);
         setTimeout(() => {
           el.style.display = "none";
@@ -6679,8 +6681,8 @@ const vSanitize = defineDirective({
   mounted(el, binding) {
     if (!isBrowser()) return;
     const options = normalizeOptions$e(binding.value);
-    if (options.disabled) return;
     el.__sanitize = { options };
+    if (options.disabled) return;
     const content = el.innerHTML;
     if (content) {
       el.innerHTML = sanitizeHtml(content, options);
@@ -6689,8 +6691,17 @@ const vSanitize = defineDirective({
   updated(el, binding) {
     const state = el.__sanitize;
     if (!state) return;
+    const prevDisabled = state.options.disabled;
     state.options = normalizeOptions$e(binding.value);
-    if (state.options.disabled || !state.options.sanitizeOnUpdate) return;
+    if (state.options.disabled || !state.options.sanitizeOnUpdate) {
+      if (prevDisabled && !state.options.disabled) {
+        const content2 = el.innerHTML;
+        if (content2) {
+          el.innerHTML = sanitizeHtml(content2, state.options);
+        }
+      }
+      return;
+    }
     const content = el.innerHTML;
     if (content) {
       el.innerHTML = sanitizeHtml(content, state.options);
@@ -7339,12 +7350,13 @@ const TOOLTIP_STYLES = {
 };
 let tooltipContainer = null;
 function getTooltipContainer() {
-  if (!tooltipContainer && typeof document !== "undefined") {
-    tooltipContainer = document.createElement("div");
-    tooltipContainer.id = "directix-tooltip-container";
-    tooltipContainer.style.cssText = "position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;";
-    document.body.appendChild(tooltipContainer);
+  if (tooltipContainer && document.body.contains(tooltipContainer)) {
+    return tooltipContainer;
   }
+  tooltipContainer = document.createElement("div");
+  tooltipContainer.id = "directix-tooltip-container";
+  tooltipContainer.style.cssText = "position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;";
+  document.body.appendChild(tooltipContainer);
   return tooltipContainer;
 }
 function createTooltip(options) {
@@ -7574,6 +7586,7 @@ const vTooltip = defineDirective({
         const newState = createState(newOptions);
         el.__tooltip = newState;
         setupTriggerHandlers(el, newState);
+        el.setAttribute("aria-describedby", "v-tooltip");
         if (newOptions.trigger === "manual") {
           showTooltip(el, newState);
         }
@@ -9714,7 +9727,7 @@ function useDraggable(options = {}) {
     if (!isDragging.value || vue.unref(disabled)) return;
     e.preventDefault();
     const { clientX, clientY } = getClientCoords(e);
-    let deltaX = clientX - startX, deltaY = clientY - startY, newX = offsetX + deltaX, newY = offsetY + deltaY;
+    let deltaX = clientX - startX, deltaY = clientY - startY;
     const currentAxis = vue.unref(axis);
     if (currentAxis === "x") {
       deltaY = 0;
@@ -9726,6 +9739,7 @@ function useDraggable(options = {}) {
       deltaX = Math.round(deltaX / currentGrid[0]) * currentGrid[0];
       deltaY = Math.round(deltaY / currentGrid[1]) * currentGrid[1];
     }
+    let newX = offsetX + deltaX, newY = offsetY + deltaY;
     if (vue.unref(constrain) || boundary) {
       const newLeft = initialLeft + deltaX;
       const newTop = initialTop + deltaY;
@@ -12212,6 +12226,7 @@ function getDistance(touches) {
   return Math.sqrt(dx * dx + dy * dy);
 }
 function getCenter$1(touches) {
+  if (touches.length === 0) return { x: 0, y: 0 };
   if (touches.length < 2) return { x: touches[0].clientX, y: touches[0].clientY };
   return {
     x: (touches[0].clientX + touches[1].clientX) / 2,
@@ -12989,6 +13004,7 @@ function getAngle(touches) {
   return Math.atan2(dy, dx) * (180 / Math.PI);
 }
 function getCenter(touches) {
+  if (touches.length === 0) return { x: 0, y: 0 };
   if (touches.length < 2) return { x: touches[0].clientX, y: touches[0].clientY };
   return {
     x: (touches[0].clientX + touches[1].clientX) / 2,