<script setup lang="ts">
// https://router.vuejs.org/guide/advanced/extending-router-link.html
// https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/

import { computed } from "vue";
import { RouterLink } from "vue-router";

const props = defineProps({
  // Vue-TypeScript make special things with `defineProps` so it's hard
  // to make this without @ts-ignore...
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  ...RouterLink.props,
  blank: {
    type: Boolean,
    default: false,
  },
});

const isExternalLink = computed(
  () => typeof props.to === "string" && props.to.startsWith("http")
);
</script>

<template>
  <div>
    <a
      v-if="isExternalLink"
      :target="props.blank ? '_blank' : '_self'"
      rel="noopener"
      :href="props.to"
    >
      <slot />
    </a>
    <router-link
      v-else
      :target="props.blank ? '_blank' : '_self'"
      rel="noopener"
      v-bind="props"
      :to="props.to"
    >
      <slot />
    </router-link>
  </div>
</template>
