@daks.dev/svelte.sdk
Version:
DAKS.DEV Svelte SDK
67 lines (66 loc) • 2.23 kB
JavaScript
import { page } from '$app/state';
class Nav {
href;
target;
rel;
role;
itemprop;
base;
disallow;
pointer = false;
disabled = false;
pathname = $derived(page.url.pathname);
constructor(args, opts = {}) {
Object.assign(this, args);
if (this.href) {
this.base && this.href && (this.href = `${this.base}${this.href}`);
this.external && (this.target ??= '_blank');
(this.external || this.disallow) && (this.rel ??= 'nofollow');
}
Object.assign(this, opts);
}
get external() {
return this.href?.includes('//');
}
get active() {
return this.pathname === this.href;
}
get tag() {
return this.href ? (this.active ? 'span' : 'a') : 'button';
}
get current() {
return this.active
? 'page'
: this.href && this.href !== '/' && this.pathname.startsWith(this.href)
? 'step'
: undefined;
}
get props() {
return {
rel: this.active ? undefined : this.href && this.rel,
role: this.active && !this.pointer ? 'none' : this.active || !this.href ? 'button' : this.role,
href: this.active ? undefined : this.href,
type: this.href ? undefined : 'button',
target: this.active ? undefined : this.href && this.target,
'aria-current': this.current,
itemprop: this.active || this.external ? undefined : (this.itemprop ?? (this.href && 'relatedLink'))
};
}
static props = function (item) {
const { class: _0, base: _1, disallow: _2, handle: _3, links: _4, ...props } = item;
return props;
};
static map = function (items, fully = false, base = '') {
return items?.length
? items.reduce((map, item) => {
if (!item.disallow || fully) {
const href = `${item.base ?? base}${item.href ?? ''}`;
item.href && map.push(href);
item.links && map.push(...Nav.map(item.links, fully, href));
}
return map;
}, Array(0))
: [];
};
}
export default Nav;