directix 1.7.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)**
 
@@ -1789,6 +1791,11 @@ Each directive accepts different options. See the [documentation](https://github
 
 ## 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
@@ -1798,7 +1805,7 @@ Each directive accepts different options. See the [documentation](https://github
 - **Monaco Editor** - CDN-loaded code editor with syntax highlighting
 - **Live Preview** - Real-time directive effect preview
 
-### v1.8.0 (Planned - 2026-04-22) - Quality & Ecosystem
+### 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

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * directix v1.7.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.7.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,