@esmx/router-vue/dist/router-link.mjs

Vue integration for @esmx/router - A universal router that works seamlessly with both Vue 2.7+ and Vue 3

import { defineComponent, h } from "vue";
import { useLink } from "./use.mjs";
import { isVue3 } 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 (isVue3) {
      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)
        );
      };
    }
    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)
      );
    };
  }
});