@esmx/router-vue 3.0.0-rc.25 → 3.0.0-rc.26

package/dist/router-link.d.ts

@@ -70,7 +70,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
     };
     /**
      * @deprecated Use 'type="replace"' instead
-     * @example replace={true} → type="replace"
+     * @example :replace={true} → type="replace"
      */
     replace: {
         type: BooleanConstructor;
@@ -120,6 +120,33 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
     layerOptions: {
         type: PropType<RouteLayerOptions>;
     };
+    /**
+     * Custom event handler to control navigation behavior.
+     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     * @default
+     *
+     * (event: Event & Partial<MouseEvent>): boolean => {
+     *   // don't redirect with control keys
+     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+     *   // don't redirect when preventDefault called
+     *   if (e.defaultPrevented) return false;
+     *   // don't redirect on right click
+     *   if (e.button !== undefined && e.button !== 0) return false;
+     *   // don't redirect if `target="_blank"`
+     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
+     *   if (/\b_blank\b/i.test(target)) return false;
+     *   // Prevent default browser navigation to enable SPA routing
+     *   // Note: this may be a Weex event which doesn't have this method
+     *   if (e.preventDefault) e.preventDefault();
+     *
+     *  return true;
+     * }
+     */
+    eventHandler: {
+        type: PropType<(event: Event) => boolean | undefined | void>;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -143,7 +170,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
     };
     /**
      * @deprecated Use 'type="replace"' instead
-     * @example replace={true} → type="replace"
+     * @example :replace={true} → type="replace"
      */
     replace: {
         type: BooleanConstructor;
@@ -193,6 +220,33 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
     layerOptions: {
         type: PropType<RouteLayerOptions>;
     };
+    /**
+     * Custom event handler to control navigation behavior.
+     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     * @default
+     *
+     * (event: Event & Partial<MouseEvent>): boolean => {
+     *   // don't redirect with control keys
+     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+     *   // don't redirect when preventDefault called
+     *   if (e.defaultPrevented) return false;
+     *   // don't redirect on right click
+     *   if (e.button !== undefined && e.button !== 0) return false;
+     *   // don't redirect if `target="_blank"`
+     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
+     *   if (/\b_blank\b/i.test(target)) return false;
+     *   // Prevent default browser navigation to enable SPA routing
+     *   // Note: this may be a Weex event which doesn't have this method
+     *   if (e.preventDefault) e.preventDefault();
+     *
+     *  return true;
+     * }
+     */
+    eventHandler: {
+        type: PropType<(event: Event) => boolean | undefined | void>;
+    };
 }>> & Readonly<{}>, {
     type: RouterLinkType;
     replace: boolean;

package/dist/router-link.mjs

@@ -21,7 +21,7 @@ export const RouterLink = defineComponent({
     type: { type: String, default: "push" },
     /**
      * @deprecated Use 'type="replace"' instead
-     * @example replace={true} → type="replace"
+     * @example :replace={true} → type="replace"
      */
     replace: { type: Boolean, default: false },
     /**
@@ -57,28 +57,84 @@ export const RouterLink = defineComponent({
      * Only used when type='pushLayer'.
      * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
      */
-    layerOptions: { type: Object }
+    layerOptions: { type: Object },
+    /**
+     * Custom event handler to control navigation behavior.
+     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     * @default
+     *
+     * (event: Event & Partial<MouseEvent>): boolean => {
+     *   // don't redirect with control keys
+     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+     *   // don't redirect when preventDefault called
+     *   if (e.defaultPrevented) return false;
+     *   // don't redirect on right click
+     *   if (e.button !== undefined && e.button !== 0) return false;
+     *   // don't redirect if `target="_blank"`
+     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
+     *   if (/\b_blank\b/i.test(target)) return false;
+     *   // Prevent default browser navigation to enable SPA routing
+     *   // Note: this may be a Weex event which doesn't have this method
+     *   if (e.preventDefault) e.preventDefault();
+     *
+     *  return true;
+     * }
+     */
+    eventHandler: {
+      type: Function
+    }
   },
-  setup(props, { slots }) {
+  setup(props, context) {
+    const { slots, attrs } = context;
     const link = useLink(props);
-    return () => {
+    const wrapHandler = (externalHandler, internalHandler) => !internalHandler ? externalHandler : async (e) => {
+      try {
+        await externalHandler(e);
+      } finally {
+        await internalHandler(e);
+      }
+    };
+    const vue3renderer = () => {
       var _a;
       const data = link.value;
-      const eventHandlers = data.getEventHandlers(
-        isVue3 ? (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1)) : void 0
+      const genEventName = (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1));
+      const eventHandlers = data.getEventHandlers(genEventName);
+      Object.entries(attrs).forEach(([key, listener]) => {
+        if (!key.startsWith("on") || typeof listener !== "function")
+          return;
+        eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
+      });
+      return h(
+        data.tag,
+        {
+          ...data.attributes,
+          ...eventHandlers
+        },
+        (_a = slots.default) == null ? void 0 : _a.call(slots)
       );
-      const props2 = {};
-      if (isVue3) {
-        Object.assign(props2, data.attributes, eventHandlers);
-      } else {
-        const { class: className, ...attrs } = data.attributes;
-        Object.assign(props2, {
-          attrs,
+    };
+    const vue2renderer = () => {
+      var _a;
+      const data = link.value;
+      const eventHandlers = data.getEventHandlers();
+      const $listeners = context.listeners || {};
+      Object.entries($listeners).forEach(([key, listener]) => {
+        if (typeof listener !== "function") return;
+        eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
+      });
+      const { class: className, ...attrs2 } = data.attributes;
+      return h(
+        data.tag,
+        {
+          attrs: attrs2,
           class: className,
           on: eventHandlers
-        });
-      }
-      return h(data.tag, props2, (_a = slots.default) == null ? void 0 : _a.call(slots));
+        },
+        (_a = slots.default) == null ? void 0 : _a.call(slots)
+      );
     };
+    return isVue3 ? vue3renderer : vue2renderer;
   }
 });

package/package.json

@@ -50,11 +50,11 @@
         "vue": "^3.5.0 || ^2.7.0"
     },
     "dependencies": {
-        "@esmx/router": "3.0.0-rc.25"
+        "@esmx/router": "3.0.0-rc.26"
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
-        "@esmx/lint": "3.0.0-rc.25",
+        "@esmx/lint": "3.0.0-rc.26",
         "@types/node": "^24.0.10",
         "@vitest/coverage-v8": "3.2.4",
         "stylelint": "16.21.0",
@@ -64,7 +64,7 @@
         "vue": "3.5.13",
         "vue2": "npm:vue@2.7.16"
     },
-    "version": "3.0.0-rc.25",
+    "version": "3.0.0-rc.26",
     "type": "module",
     "private": false,
     "exports": {
@@ -83,5 +83,5 @@
         "template",
         "public"
     ],
-    "gitHead": "da6576d7505ad48cb78905b18e17940d43510250"
+    "gitHead": "2f52f94c8ac27aca32ef3148afd109d0f0470d52"
 }

package/src/router-link.ts

@@ -77,7 +77,7 @@ export const RouterLink = defineComponent({
         type: { type: String as PropType<RouterLinkType>, default: 'push' },
         /**
          * @deprecated Use 'type="replace"' instead
-         * @example replace={true} → type="replace"
+         * @example :replace={true} → type="replace"
          */
         replace: { type: Boolean, default: false },
         /**
@@ -113,36 +113,102 @@ export const RouterLink = defineComponent({
          * Only used when type='pushLayer'.
          * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
          */
-        layerOptions: { type: Object as PropType<RouteLayerOptions> }
+        layerOptions: { type: Object as PropType<RouteLayerOptions> },
+        /**
+         * Custom event handler to control navigation behavior.
+         * Should return `true` to allow router to navigate, otherwise to prevent it.
+         *
+         * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+         * @default
+         *
+         * (event: Event & Partial<MouseEvent>): boolean => {
+         *   // don't redirect with control keys
+         *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+         *   // don't redirect when preventDefault called
+         *   if (e.defaultPrevented) return false;
+         *   // don't redirect on right click
+         *   if (e.button !== undefined && e.button !== 0) return false;
+         *   // don't redirect if `target="_blank"`
+         *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
+         *   if (/\b_blank\b/i.test(target)) return false;
+         *   // Prevent default browser navigation to enable SPA routing
+         *   // Note: this may be a Weex event which doesn't have this method
+         *   if (e.preventDefault) e.preventDefault();
+         *
+         *  return true;
+         * }
+         */
+        eventHandler: {
+            type: Function as PropType<
+                (event: Event) => boolean | undefined | void
+            >
+        }
     },
 
-    setup(props, { slots }) {
+    setup(props, context) {
+        const { slots, attrs } = context;
         const link = useLink(props);
 
-        return () => {
+        const wrapHandler = (
+            externalHandler: Function,
+            internalHandler: Function | undefined
+        ) =>
+            !internalHandler
+                ? (externalHandler as (e: Event) => Promise<void>)
+                : async (e: Event) => {
+                      try {
+                          await externalHandler(e);
+                      } finally {
+                          await internalHandler(e);
+                      }
+                  };
+
+        const vue3renderer = () => {
             const data = link.value;
+            const genEventName = (name: string): string =>
+                `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
 
-            // Generate event handlers with proper type transformation for Vue 2/3 compatibility
-            const eventHandlers = data.getEventHandlers(
-                isVue3
-                    ? (name: string): string =>
-                          `on${name.charAt(0).toUpperCase()}${name.slice(1)}`
-                    : undefined
+            const eventHandlers = data.getEventHandlers(genEventName);
+            Object.entries(attrs).forEach(([key, listener]) => {
+                // In Vue 3, external event handlers are in attrs with 'on' prefix
+                if (!key.startsWith('on') || typeof listener !== 'function')
+                    return;
+                eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
+            });
+
+            return h(
+                data.tag,
+                {
+                    ...data.attributes,
+                    ...eventHandlers
+                },
+                slots.default?.()
             );
+        };
 
-            const props = {};
-            if (isVue3) {
-                Object.assign(props, data.attributes, eventHandlers);
-            } else {
-                const { class: className, ...attrs } = data.attributes;
-                Object.assign(props, {
+        const vue2renderer = () => {
+            const data = link.value;
+
+            const eventHandlers = data.getEventHandlers();
+            // Vue 2: get external listeners from context
+            const $listeners = (context as any).listeners || {};
+            Object.entries($listeners).forEach(([key, listener]) => {
+                if (typeof listener !== 'function') return;
+                eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
+            });
+
+            const { class: className, ...attrs } = data.attributes;
+            return h(
+                data.tag,
+                {
                     attrs,
                     class: className,
                     on: eventHandlers
-                });
-            }
-
-            return h(data.tag, props, slots.default?.());
+                },
+                slots.default?.()
+            );
         };
+
+        return isVue3 ? vue3renderer : vue2renderer;
     }
 });