vue-intercept-plugin 1.0.1 → 1.1.0

package/dist/index.d.ts

@@ -1,24 +1,32 @@
 /**
- * 解析指令值，生成实际的事件处理函数
- * 支持两种格式：
- *   1. 函数：v-intercept="handleDelete"
- *   2. 数组：v-intercept="[handleDelete, 1001]"
+ * Resolves the directive value into an actual event listener.
+ * Supports two formats:
+ *   1. Function: v-intercept="handleDelete"
+ *   2. Array:     v-intercept="[handleDelete, 1001]"
  */
 declare function resolveHandler(value: unknown): EventListener | null;
 /**
- * 在元素上绑定事件
+ * Binds an event listener on the element.
+ * Removes the old listener before binding a new one to prevent duplicates.
  */
-declare function bindHandler(el: HTMLElement, eventType: string, handler: EventListener): void;
+declare function bindHandler(el: HTMLElement, eventType: string, handler: EventListener, options?: AddEventListenerOptions): void;
 /**
- * 移除元素上的事件监听
+ * Removes an event listener from the element.
  */
 declare function unbindHandler(el: HTMLElement, eventType: string): void;
 /**
- * Vue 事件拦截插件
+ * Vue event interception plugin.
  *
- * 提供 v-intercept 自定义指令，用于拦截事件。
- * 默认拦截 click 事件，可通过指令参数指定其他事件类型。
- * 开发者在使用时，在函数内部自行判断权限并决定是否放行。
+ * Provides the v-intercept custom directive for intercepting DOM events.
+ * Defaults to click; specify other events via directive argument.
+ * Supports modifiers: .capture, .once, .passive.
+ *
+ * @example
+ * v-intercept="handleClick"                   // click (default)
+ * v-intercept:change="handleChange"           // change event
+ * v-intercept:click.capture="handleClick"      // click with capture
+ * v-intercept:scroll.passive="handleScroll"    // scroll with passive
+ * v-intercept:click.once="handleOnce"          // click with once
  */
 declare const VueInterceptPlugin: {
     install(app: any): void;

package/dist/vue-intercept-plugin.cjs.js

@@ -3,19 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * 用 WeakMap 存储元素 → 事件类型 → 监听函数的映射
- * 避免在 DOM 元素上挂载自定义属性（el._intcpt_xxx）
+ * Stores element → event type → listener mapping via WeakMap.
+ * Avoids attaching custom properties (el._intcpt_xxx) to DOM elements.
  */
 const handlerMap = new WeakMap();
 /**
- * 获取元素上指定事件类型的监听函数
+ * Stores element → event type → options mapping via WeakMap.
+ */
+const optionsMap = new WeakMap();
+/**
+ * Gets the listener for a specific event type on an element.
  */
 function getHandler(el, eventType) {
     var _a;
     return (_a = handlerMap.get(el)) === null || _a === void 0 ? void 0 : _a.get(eventType);
 }
 /**
- * 设置元素上指定事件类型的监听函数
+ * Sets the listener for a specific event type on an element.
  */
 function setHandler(el, eventType, handler) {
     let typeMap = handlerMap.get(el);
@@ -26,20 +30,53 @@ function setHandler(el, eventType, handler) {
     typeMap.set(eventType, handler);
 }
 /**
- * 删除元素上指定事件类型的监听函数
+ * Deletes the listener for a specific event type on an element.
+ * Cleans up the WeakMap entry when no types remain.
  */
 function deleteHandler(el, eventType) {
-    var _a, _b;
-    (_a = handlerMap.get(el)) === null || _a === void 0 ? void 0 : _a.delete(eventType);
-    if (((_b = handlerMap.get(el)) === null || _b === void 0 ? void 0 : _b.size) === 0) {
+    const typeMap = handlerMap.get(el);
+    if (!typeMap)
+        return;
+    typeMap.delete(eventType);
+    if (typeMap.size === 0) {
         handlerMap.delete(el);
     }
 }
 /**
- * 解析指令值，生成实际的事件处理函数
- * 支持两种格式：
- *   1. 函数：v-intercept="handleDelete"
- *   2. 数组：v-intercept="[handleDelete, 1001]"
+ * Gets the event options for a specific event type on an element.
+ */
+function getOptions(el, eventType) {
+    var _a;
+    return (_a = optionsMap.get(el)) === null || _a === void 0 ? void 0 : _a.get(eventType);
+}
+/**
+ * Sets the event options for a specific event type on an element.
+ */
+function setOptions(el, eventType, options) {
+    let typeMap = optionsMap.get(el);
+    if (!typeMap) {
+        typeMap = new Map();
+        optionsMap.set(el, typeMap);
+    }
+    typeMap.set(eventType, options);
+}
+/**
+ * Deletes the event options for a specific event type on an element.
+ */
+function deleteOptions(el, eventType) {
+    const typeMap = optionsMap.get(el);
+    if (!typeMap)
+        return;
+    typeMap.delete(eventType);
+    if (typeMap.size === 0) {
+        optionsMap.delete(el);
+    }
+}
+/**
+ * Resolves the directive value into an actual event listener.
+ * Supports two formats:
+ *   1. Function: v-intercept="handleDelete"
+ *   2. Array:     v-intercept="[handleDelete, 1001]"
  */
 function resolveHandler(value) {
     if (typeof value === 'function') {
@@ -48,45 +85,59 @@ function resolveHandler(value) {
     if (Array.isArray(value)) {
         const [fn, ...args] = value;
         if (typeof fn !== 'function') {
-            console.warn('[vue-intercept-plugin] 数组第一项必须是一个函数');
+            console.warn('[vue-intercept-plugin] The first item in the array must be a function');
             return null;
         }
         return (event) => { fn(...args, event); };
     }
-    console.warn('[vue-intercept-plugin] v-intercept 的值必须是函数或 [函数, ...参数] 数组');
+    console.warn('[vue-intercept-plugin] v-intercept value must be a function or [function, ...args] array');
     return null;
 }
 /**
- * 在元素上绑定事件
+ * Binds an event listener on the element.
+ * Removes the old listener before binding a new one to prevent duplicates.
  */
-function bindHandler(el, eventType, handler) {
+function bindHandler(el, eventType, handler, options) {
     const oldHandler = getHandler(el, eventType);
+    const oldOptions = getOptions(el, eventType);
     if (oldHandler) {
-        el.removeEventListener(eventType, oldHandler);
+        el.removeEventListener(eventType, oldHandler, oldOptions);
     }
-    el.addEventListener(eventType, handler);
+    el.addEventListener(eventType, handler, options);
     setHandler(el, eventType, handler);
+    if (options) {
+        setOptions(el, eventType, options);
+    }
 }
 /**
- * 移除元素上的事件监听
+ * Removes an event listener from the element.
  */
 function unbindHandler(el, eventType) {
     const handler = getHandler(el, eventType);
+    const options = getOptions(el, eventType);
     if (handler) {
-        el.removeEventListener(eventType, handler);
+        el.removeEventListener(eventType, handler, options);
         deleteHandler(el, eventType);
+        deleteOptions(el, eventType);
     }
 }
 /**
- * Vue 事件拦截插件
+ * Vue event interception plugin.
+ *
+ * Provides the v-intercept custom directive for intercepting DOM events.
+ * Defaults to click; specify other events via directive argument.
+ * Supports modifiers: .capture, .once, .passive.
  *
- * 提供 v-intercept 自定义指令，用于拦截事件。
- * 默认拦截 click 事件，可通过指令参数指定其他事件类型。
- * 开发者在使用时，在函数内部自行判断权限并决定是否放行。
+ * @example
+ * v-intercept="handleClick"                   // click (default)
+ * v-intercept:change="handleChange"           // change event
+ * v-intercept:click.capture="handleClick"      // click with capture
+ * v-intercept:scroll.passive="handleScroll"    // scroll with passive
+ * v-intercept:click.once="handleOnce"          // click with once
  */
 const VueInterceptPlugin = {
     install(app) {
-        // SSR 安全：非浏览器环境直接跳过
+        // SSR safety: skip in non-browser environments
         if (typeof window === 'undefined') {
             return;
         }
@@ -96,7 +147,16 @@ const VueInterceptPlugin = {
             if (!handler)
                 return;
             const eventType = binding.arg || 'click';
-            bindHandler(el, eventType, handler);
+            const options = {};
+            if (binding.modifiers) {
+                if (binding.modifiers.capture)
+                    options.capture = true;
+                if (binding.modifiers.once)
+                    options.once = true;
+                if (binding.modifiers.passive)
+                    options.passive = true;
+            }
+            bindHandler(el, eventType, handler, Object.keys(options).length > 0 ? options : undefined);
         }
         function unbind(el, binding) {
             const eventType = binding.arg || 'click';

package/dist/vue-intercept-plugin.esm.js

@@ -1,17 +1,21 @@
 /**
- * 用 WeakMap 存储元素 → 事件类型 → 监听函数的映射
- * 避免在 DOM 元素上挂载自定义属性（el._intcpt_xxx）
+ * Stores element → event type → listener mapping via WeakMap.
+ * Avoids attaching custom properties (el._intcpt_xxx) to DOM elements.
  */
 const handlerMap = new WeakMap();
 /**
- * 获取元素上指定事件类型的监听函数
+ * Stores element → event type → options mapping via WeakMap.
+ */
+const optionsMap = new WeakMap();
+/**
+ * Gets the listener for a specific event type on an element.
  */
 function getHandler(el, eventType) {
     var _a;
     return (_a = handlerMap.get(el)) === null || _a === void 0 ? void 0 : _a.get(eventType);
 }
 /**
- * 设置元素上指定事件类型的监听函数
+ * Sets the listener for a specific event type on an element.
  */
 function setHandler(el, eventType, handler) {
     let typeMap = handlerMap.get(el);
@@ -22,20 +26,53 @@ function setHandler(el, eventType, handler) {
     typeMap.set(eventType, handler);
 }
 /**
- * 删除元素上指定事件类型的监听函数
+ * Deletes the listener for a specific event type on an element.
+ * Cleans up the WeakMap entry when no types remain.
  */
 function deleteHandler(el, eventType) {
-    var _a, _b;
-    (_a = handlerMap.get(el)) === null || _a === void 0 ? void 0 : _a.delete(eventType);
-    if (((_b = handlerMap.get(el)) === null || _b === void 0 ? void 0 : _b.size) === 0) {
+    const typeMap = handlerMap.get(el);
+    if (!typeMap)
+        return;
+    typeMap.delete(eventType);
+    if (typeMap.size === 0) {
         handlerMap.delete(el);
     }
 }
 /**
- * 解析指令值，生成实际的事件处理函数
- * 支持两种格式：
- *   1. 函数：v-intercept="handleDelete"
- *   2. 数组：v-intercept="[handleDelete, 1001]"
+ * Gets the event options for a specific event type on an element.
+ */
+function getOptions(el, eventType) {
+    var _a;
+    return (_a = optionsMap.get(el)) === null || _a === void 0 ? void 0 : _a.get(eventType);
+}
+/**
+ * Sets the event options for a specific event type on an element.
+ */
+function setOptions(el, eventType, options) {
+    let typeMap = optionsMap.get(el);
+    if (!typeMap) {
+        typeMap = new Map();
+        optionsMap.set(el, typeMap);
+    }
+    typeMap.set(eventType, options);
+}
+/**
+ * Deletes the event options for a specific event type on an element.
+ */
+function deleteOptions(el, eventType) {
+    const typeMap = optionsMap.get(el);
+    if (!typeMap)
+        return;
+    typeMap.delete(eventType);
+    if (typeMap.size === 0) {
+        optionsMap.delete(el);
+    }
+}
+/**
+ * Resolves the directive value into an actual event listener.
+ * Supports two formats:
+ *   1. Function: v-intercept="handleDelete"
+ *   2. Array:     v-intercept="[handleDelete, 1001]"
  */
 function resolveHandler(value) {
     if (typeof value === 'function') {
@@ -44,45 +81,59 @@ function resolveHandler(value) {
     if (Array.isArray(value)) {
         const [fn, ...args] = value;
         if (typeof fn !== 'function') {
-            console.warn('[vue-intercept-plugin] 数组第一项必须是一个函数');
+            console.warn('[vue-intercept-plugin] The first item in the array must be a function');
             return null;
         }
         return (event) => { fn(...args, event); };
     }
-    console.warn('[vue-intercept-plugin] v-intercept 的值必须是函数或 [函数, ...参数] 数组');
+    console.warn('[vue-intercept-plugin] v-intercept value must be a function or [function, ...args] array');
     return null;
 }
 /**
- * 在元素上绑定事件
+ * Binds an event listener on the element.
+ * Removes the old listener before binding a new one to prevent duplicates.
  */
-function bindHandler(el, eventType, handler) {
+function bindHandler(el, eventType, handler, options) {
     const oldHandler = getHandler(el, eventType);
+    const oldOptions = getOptions(el, eventType);
     if (oldHandler) {
-        el.removeEventListener(eventType, oldHandler);
+        el.removeEventListener(eventType, oldHandler, oldOptions);
     }
-    el.addEventListener(eventType, handler);
+    el.addEventListener(eventType, handler, options);
     setHandler(el, eventType, handler);
+    if (options) {
+        setOptions(el, eventType, options);
+    }
 }
 /**
- * 移除元素上的事件监听
+ * Removes an event listener from the element.
  */
 function unbindHandler(el, eventType) {
     const handler = getHandler(el, eventType);
+    const options = getOptions(el, eventType);
     if (handler) {
-        el.removeEventListener(eventType, handler);
+        el.removeEventListener(eventType, handler, options);
         deleteHandler(el, eventType);
+        deleteOptions(el, eventType);
     }
 }
 /**
- * Vue 事件拦截插件
+ * Vue event interception plugin.
+ *
+ * Provides the v-intercept custom directive for intercepting DOM events.
+ * Defaults to click; specify other events via directive argument.
+ * Supports modifiers: .capture, .once, .passive.
  *
- * 提供 v-intercept 自定义指令，用于拦截事件。
- * 默认拦截 click 事件，可通过指令参数指定其他事件类型。
- * 开发者在使用时，在函数内部自行判断权限并决定是否放行。
+ * @example
+ * v-intercept="handleClick"                   // click (default)
+ * v-intercept:change="handleChange"           // change event
+ * v-intercept:click.capture="handleClick"      // click with capture
+ * v-intercept:scroll.passive="handleScroll"    // scroll with passive
+ * v-intercept:click.once="handleOnce"          // click with once
  */
 const VueInterceptPlugin = {
     install(app) {
-        // SSR 安全：非浏览器环境直接跳过
+        // SSR safety: skip in non-browser environments
         if (typeof window === 'undefined') {
             return;
         }
@@ -92,7 +143,16 @@ const VueInterceptPlugin = {
             if (!handler)
                 return;
             const eventType = binding.arg || 'click';
-            bindHandler(el, eventType, handler);
+            const options = {};
+            if (binding.modifiers) {
+                if (binding.modifiers.capture)
+                    options.capture = true;
+                if (binding.modifiers.once)
+                    options.once = true;
+                if (binding.modifiers.passive)
+                    options.passive = true;
+            }
+            bindHandler(el, eventType, handler, Object.keys(options).length > 0 ? options : undefined);
         }
         function unbind(el, binding) {
             const eventType = binding.arg || 'click';

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "vue-intercept-plugin",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A lightweight Vue plugin providing v-intercept custom directive — intercept DOM events with a single line of code, supports any event type, compatible with Vue 2 & Vue 3.",
   "main": "dist/vue-intercept-plugin.cjs.js",
   "module": "dist/vue-intercept-plugin.esm.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],