bbell / src / components / Navigation / AppLink.vue

<script setup lang="ts" generic="N extends PageNames">
import { computed } from 'vue'
import type { PageNames, RouteParams } from '@/router'
import { useNavigationStore } from '@/stores/navigation'
import { getPageByName, compileUrl } from '@/router'

type LinkProps<N extends PageNames> = {
	name: N
	ariaLabel?: string
	params?: RouteParams<N>
}

const props = defineProps<LinkProps<N>>()

const nav = useNavigationStore()

const href = computed(() => {
	const page = getPageByName(props.name)
	if (!page) return '#'

	const { url, remainingProps } = compileUrl(page.path, props.params || {})

	let path = url
	if (Object.keys(remainingProps).length > 0) {
		const searchParams = new URLSearchParams()
		Object.entries(remainingProps).forEach(([key, value]) => {
			if (typeof value === 'object') {
				searchParams.set(key, JSON.stringify(value))
			} else {
				searchParams.set(key, String(value))
			}
		})
		path += `?${searchParams.toString()}`
	}

	return path
})

const handleClick = (e: MouseEvent) => {
	if (e.metaKey || e.ctrlKey) return
	e.preventDefault()
	console.log('Navigating to', props.name, props.params)
	nav.push(props.name, {
		props: props.params,
	})
}
</script>

<template>
	<a class="app-link" :href="href" @click.stop="handleClick" :aria-label="ariaLabel">
		<slot />
	</a>
</template>

<style scoped>
.app-link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	display: inline-block;
}
</style>