134 lines
2.7 KiB
Vue
134 lines
2.7 KiB
Vue
<template>
|
|
<a :href="to" :class="active ? activeClass : null" @click.prevent="nav" @contextmenu.prevent.stop="onContextmenu">
|
|
<slot></slot>
|
|
</a>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import * as os from '@/os';
|
|
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
|
import { router } from '@/router';
|
|
import { url } from '@/config';
|
|
import { popout } from '@/scripts/popout';
|
|
import { ColdDeviceStorage } from '@/store';
|
|
|
|
export default defineComponent({
|
|
inject: {
|
|
navHook: {
|
|
default: null
|
|
},
|
|
sideViewHook: {
|
|
default: null
|
|
}
|
|
},
|
|
|
|
props: {
|
|
to: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
activeClass: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
behavior: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
active() {
|
|
if (this.activeClass == null) return false;
|
|
const resolved = router.resolve(this.to);
|
|
if (resolved.path == this.$route.path) return true;
|
|
if (resolved.name == null) return false;
|
|
if (this.$route.name == null) return false;
|
|
return resolved.name == this.$route.name;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onContextmenu(e) {
|
|
if (window.getSelection().toString() !== '') return;
|
|
os.contextMenu([{
|
|
type: 'label',
|
|
text: this.to,
|
|
}, {
|
|
icon: 'fas fa-window-maximize',
|
|
text: this.$ts.openInWindow,
|
|
action: () => {
|
|
os.pageWindow(this.to);
|
|
}
|
|
}, this.sideViewHook ? {
|
|
icon: 'fas fa-columns',
|
|
text: this.$ts.openInSideView,
|
|
action: () => {
|
|
this.sideViewHook(this.to);
|
|
}
|
|
} : undefined, {
|
|
icon: 'fas fa-expand-alt',
|
|
text: this.$ts.showInPage,
|
|
action: () => {
|
|
this.$router.push(this.to);
|
|
}
|
|
}, null, {
|
|
icon: 'fas fa-external-link-alt',
|
|
text: this.$ts.openInNewTab,
|
|
action: () => {
|
|
window.open(this.to, '_blank');
|
|
}
|
|
}, {
|
|
icon: 'fas fa-link',
|
|
text: this.$ts.copyLink,
|
|
action: () => {
|
|
copyToClipboard(`${url}${this.to}`);
|
|
}
|
|
}], e);
|
|
},
|
|
|
|
window() {
|
|
os.pageWindow(this.to);
|
|
},
|
|
|
|
modalWindow() {
|
|
os.modalPageWindow(this.to);
|
|
},
|
|
|
|
popout() {
|
|
popout(this.to);
|
|
},
|
|
|
|
nav() {
|
|
if (this.behavior === 'browser') {
|
|
location.href = this.to;
|
|
return;
|
|
}
|
|
|
|
if (this.behavior) {
|
|
if (this.behavior === 'window') {
|
|
return this.window();
|
|
} else if (this.behavior === 'modalWindow') {
|
|
return this.modalWindow();
|
|
}
|
|
}
|
|
|
|
if (this.navHook) {
|
|
this.navHook(this.to);
|
|
} else {
|
|
if (this.$store.state.defaultSideView && this.sideViewHook && this.to !== '/') {
|
|
return this.sideViewHook(this.to);
|
|
}
|
|
|
|
if (this.$router.currentRoute.value.path === this.to) {
|
|
window.scroll({ top: 0, behavior: 'smooth' });
|
|
} else {
|
|
this.$router.push(this.to);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|