@esmx/router-vue 3.0.0-rc.103

package/dist/router-link.d.ts

@@ -0,0 +1,220 @@
+import type { RouterLinkProps } from '@esmx/router';
+import { type PropType } from 'vue';
+/**
+ * RouterLink component for navigation.
+ * Renders an anchor tag with proper navigation behavior and active state management.
+ *
+ * @param props - Component properties
+ * @param props.to - Target route location to navigate to
+ * @param props.type - Navigation type ('push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer')
+ * @param props.replace - Use type='replace' instead
+ * @param props.exact - How to match the active state ('include' | 'exact' | 'route')
+ * @param props.activeClass - CSS class to apply when link is active
+ * @param props.event - Event(s) that trigger navigation
+ * @param props.tag - Custom tag to render instead of 'a'
+ * @param props.layerOptions - Layer options for layer-based navigation
+ * @param slots - Component slots
+ * @param slots.default - Default slot content
+ * @returns Vue component instance
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <nav>
+ *     <!-- Basic navigation -->
+ *     <RouterLink to="/home">Home</RouterLink>
+ *     <RouterLink to="/about">About</RouterLink>
+ *
+ *     <!-- With custom styling -->
+ *     <RouterLink
+ *       to="/dashboard"
+ *       active-class="nav-active"
+ *     >
+ *       Dashboard
+ *     </RouterLink>
+ *
+ *     <!-- Replace navigation -->
+ *     <RouterLink to="/login" type="replace">Login</RouterLink>
+ *
+ *     <!-- Custom tag and exact matching -->
+ *     <RouterLink
+ *       to="/contact"
+ *       exact="exact"
+ *       tag="button"
+ *       class="btn"
+ *     >
+ *       Contact
+ *     </RouterLink>
+ *   </nav>
+ * </template>
+ * ```
+ */
+export declare const RouterLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * Target route location to navigate to.
+     * Can be a string path or route location object.
+     * @example '/home' | { path: '/user', query: { id: '123' } }
+     */
+    to: {
+        type: PropType<RouterLinkProps["to"]>;
+        required: true;
+    };
+    /**
+     * Navigation type for the link.
+     * @default 'push'
+     * @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
+     */
+    type: {
+        type: PropType<RouterLinkProps["type"]>;
+        default: string;
+    };
+    /**
+     * @deprecated Use 'type="replace"' instead
+     * @example :replace={true} → type="replace"
+     */
+    replace: {
+        type: PropType<RouterLinkProps["replace"]>;
+        default: boolean;
+    };
+    /**
+     * How to match the active state.
+     * - 'include': Match if current route includes this path
+     * - 'exact': Match only if routes are exactly the same
+     * - 'route': Match based on route configuration
+     * @default 'include'
+     */
+    exact: {
+        type: PropType<RouterLinkProps["exact"]>;
+        default: string;
+    };
+    /**
+     * CSS class to apply when link is active (route matches).
+     * @example 'nav-active' | 'selected'
+     */
+    activeClass: {
+        type: PropType<RouterLinkProps["activeClass"]>;
+    };
+    /**
+     * Event(s) that trigger navigation. Can be string or array of strings.
+     * @default 'click'
+     * @example 'click' | ['click', 'mouseenter']
+     */
+    event: {
+        type: PropType<RouterLinkProps["event"]>;
+        default: string;
+    };
+    /**
+     * Custom tag to render instead of 'a'.
+     * @default 'a'
+     * @example 'button' | 'div' | 'span'
+     */
+    tag: {
+        type: PropType<RouterLinkProps["tag"]>;
+        default: string;
+    };
+    /**
+     * Layer options for layer-based navigation.
+     * Only used when type='pushLayer'.
+     * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
+     */
+    layerOptions: {
+        type: PropType<RouterLinkProps["layerOptions"]>;
+    };
+    /**
+     * Custom navigation handler called before navigation.
+     * Receives the event object and the event name that triggered navigation.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     */
+    beforeNavigate: {
+        type: PropType<RouterLinkProps["beforeNavigate"]>;
+    };
+}>, () => 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<{
+    /**
+     * Target route location to navigate to.
+     * Can be a string path or route location object.
+     * @example '/home' | { path: '/user', query: { id: '123' } }
+     */
+    to: {
+        type: PropType<RouterLinkProps["to"]>;
+        required: true;
+    };
+    /**
+     * Navigation type for the link.
+     * @default 'push'
+     * @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
+     */
+    type: {
+        type: PropType<RouterLinkProps["type"]>;
+        default: string;
+    };
+    /**
+     * @deprecated Use 'type="replace"' instead
+     * @example :replace={true} → type="replace"
+     */
+    replace: {
+        type: PropType<RouterLinkProps["replace"]>;
+        default: boolean;
+    };
+    /**
+     * How to match the active state.
+     * - 'include': Match if current route includes this path
+     * - 'exact': Match only if routes are exactly the same
+     * - 'route': Match based on route configuration
+     * @default 'include'
+     */
+    exact: {
+        type: PropType<RouterLinkProps["exact"]>;
+        default: string;
+    };
+    /**
+     * CSS class to apply when link is active (route matches).
+     * @example 'nav-active' | 'selected'
+     */
+    activeClass: {
+        type: PropType<RouterLinkProps["activeClass"]>;
+    };
+    /**
+     * Event(s) that trigger navigation. Can be string or array of strings.
+     * @default 'click'
+     * @example 'click' | ['click', 'mouseenter']
+     */
+    event: {
+        type: PropType<RouterLinkProps["event"]>;
+        default: string;
+    };
+    /**
+     * Custom tag to render instead of 'a'.
+     * @default 'a'
+     * @example 'button' | 'div' | 'span'
+     */
+    tag: {
+        type: PropType<RouterLinkProps["tag"]>;
+        default: string;
+    };
+    /**
+     * Layer options for layer-based navigation.
+     * Only used when type='pushLayer'.
+     * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
+     */
+    layerOptions: {
+        type: PropType<RouterLinkProps["layerOptions"]>;
+    };
+    /**
+     * Custom navigation handler called before navigation.
+     * Receives the event object and the event name that triggered navigation.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     */
+    beforeNavigate: {
+        type: PropType<RouterLinkProps["beforeNavigate"]>;
+    };
+}>> & Readonly<{}>, {
+    type: import("@esmx/router").RouterLinkType | undefined;
+    replace: boolean | undefined;
+    exact: import("@esmx/router").RouteMatchType | undefined;
+    event: string | string[] | undefined;
+    tag: string | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/router-link.mjs

@@ -0,0 +1,119 @@
+import { defineComponent, h } from "vue";
+import { useLink } from "./use.mjs";
+import { isVue2 } from "./util.mjs";
+export const RouterLink = defineComponent({
+  name: "RouterLink",
+  props: {
+    /**
+     * Target route location to navigate to.
+     * Can be a string path or route location object.
+     * @example '/home' | { path: '/user', query: { id: '123' } }
+     */
+    to: {
+      type: [String, Object],
+      required: true
+    },
+    /**
+     * Navigation type for the link.
+     * @default 'push'
+     * @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
+     */
+    type: {
+      type: String,
+      default: "push"
+    },
+    /**
+     * @deprecated Use 'type="replace"' instead
+     * @example :replace={true} → type="replace"
+     */
+    replace: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * How to match the active state.
+     * - 'include': Match if current route includes this path
+     * - 'exact': Match only if routes are exactly the same
+     * - 'route': Match based on route configuration
+     * @default 'include'
+     */
+    exact: {
+      type: String,
+      default: "include"
+    },
+    /**
+     * CSS class to apply when link is active (route matches).
+     * @example 'nav-active' | 'selected'
+     */
+    activeClass: {
+      type: String
+    },
+    /**
+     * Event(s) that trigger navigation. Can be string or array of strings.
+     * @default 'click'
+     * @example 'click' | ['click', 'mouseenter']
+     */
+    event: {
+      type: [String, Array],
+      default: "click"
+    },
+    /**
+     * Custom tag to render instead of 'a'.
+     * @default 'a'
+     * @example 'button' | 'div' | 'span'
+     */
+    tag: { type: String, default: "a" },
+    /**
+     * Layer options for layer-based navigation.
+     * Only used when type='pushLayer'.
+     * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
+     */
+    layerOptions: {
+      type: Object
+    },
+    /**
+     * Custom navigation handler called before navigation.
+     * Receives the event object and the event name that triggered navigation.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     */
+    beforeNavigate: {
+      type: Function
+    }
+  },
+  setup(props, context) {
+    const link = useLink(props);
+    if (isVue2) {
+      return () => {
+        var _a, _b;
+        const { class: className, ...attributes } = link.value.attributes;
+        return h(
+          link.value.tag,
+          {
+            attrs: {
+              ...attributes,
+              ...context.attrs
+            },
+            class: className,
+            on: link.value.createEventHandlers()
+          },
+          (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)
+        );
+      };
+    }
+    return () => {
+      var _a, _b;
+      return h(
+        link.value.tag,
+        {
+          ...link.value.attributes,
+          ...context.attrs,
+          ...link.value.createEventHandlers(
+            (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1))
+          )
+        },
+        (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)
+      );
+    };
+  }
+});

package/dist/router-link.test.d.ts

@@ -0,0 +1 @@
+export {};