vuestic-ui/dist/esm-node/src/composables/useRouterLink.mjs

Vue 3 UI Framework

import { getCurrentInstance, computed } from "vue";
import { u as useGlobalConfig } from "./useGlobalConfig.mjs";
const useRouterLinkProps = {
  tag: { type: String, default: "span" },
  to: { type: [String, Object], default: void 0 },
  replace: { type: Boolean, default: void 0 },
  append: { type: Boolean, default: void 0 },
  exact: { type: Boolean, default: void 0 },
  activeClass: { type: String, default: void 0 },
  exactActiveClass: { type: String, default: void 0 },
  href: { type: String, default: void 0 },
  target: { type: String, default: void 0 },
  disabled: { type: Boolean, default: false }
};
const useRouterLink = (props) => {
  const currentInstance = getCurrentInstance();
  const globalProperties = computed(() => currentInstance == null ? void 0 : currentInstance.appContext.config.globalProperties);
  const vueRouter = computed(() => {
    var _a;
    return (_a = globalProperties.value) == null ? void 0 : _a.$router;
  });
  const vueRoute = computed(() => {
    var _a;
    return (_a = globalProperties.value) == null ? void 0 : _a.$route;
  });
  const { getGlobalConfig } = useGlobalConfig();
  const tagComputed = computed(() => {
    if (props.disabled) {
      return props.tag;
    }
    if (props.href && !props.to) {
      return "a";
    }
    const globalConfig = getGlobalConfig();
    if (globalConfig.routerComponent && props.to) {
      return globalConfig.routerComponent;
    }
    if (props.to && vueRouter.value !== void 0) {
      return "router-link";
    }
    if (props.to && vueRouter.value === void 0) {
      return "a";
    }
    return props.tag || "div";
  });
  const isLinkTag = computed(() => {
    if (props.disabled) {
      return false;
    }
    return Boolean(props.href || props.to);
  });
  const linkAttributesComputed = computed(() => {
    if (!isLinkTag.value) {
      return {};
    }
    return tagComputed.value === "a" ? {
      target: props.target,
      href: hrefComputed.value
    } : {
      target: props.target,
      to: props.to,
      replace: props.replace,
      append: props.append,
      activeClass: props.activeClass,
      exact: props.exact,
      exactActiveClass: props.exactActiveClass
    };
  });
  const isActiveRouterLink = computed(() => {
    if (!vueRouter.value || !props.to) {
      return false;
    }
    const to = vueRouter.value.resolve(props.to).href;
    const currentHref = vueRouter.value.currentRoute.value.path;
    return to.replace("#", "") === currentHref.replace("#", "");
  });
  const hrefComputed = computed(() => {
    var _a;
    if (props.href) {
      return props.href;
    }
    if (vueRoute.value === void 0 && props.to) {
      return props.to;
    }
    return props.to ? (_a = vueRouter.value) == null ? void 0 : _a.resolve(props.to, vueRoute.value).href : void 0;
  });
  return {
    isLinkTag,
    tagComputed,
    hrefComputed,
    isActiveRouterLink,
    linkAttributesComputed
  };
};
export {
  useRouterLink as a,
  useRouterLinkProps as u
};
//# sourceMappingURL=useRouterLink.mjs.map