aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdLink.vue
diff options
context:
space:
mode:
authorpacien2022-09-03 01:34:26 +0200
committerpacien2022-09-03 01:34:26 +0200
commita8452594c6571e8003baa2aca14747eeeee08152 (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/components/LdLink.vue
parentdd9c9804e9e3da9880c711f53edb9c4a19d782f8 (diff)
parent00510820a2794efcadbc83f7f8b54318fe198ecb (diff)
downloadldgallery-a8452594c6571e8003baa2aca14747eeeee08152.tar.gz
Merge branch 'vue3-refactoring-staging' into develop
Reviewed-by: pacien <pacien.trangirard@pacien.net>
Diffstat (limited to 'viewer/src/components/LdLink.vue')
-rw-r--r--viewer/src/components/LdLink.vue75
1 files changed, 75 insertions, 0 deletions
diff --git a/viewer/src/components/LdLink.vue b/viewer/src/components/LdLink.vue
new file mode 100644
index 0000000..a5fd4d5
--- /dev/null
+++ b/viewer/src/components/LdLink.vue
@@ -0,0 +1,75 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18-->
19
20<template>
21 <router-link
22 v-if="props.to"
23 :to="props.to"
24 :class="$style.link"
25 v-bind="attrs"
26 @keypress.space="pushTo"
27 >
28 <slot />
29 </router-link>
30 <a
31 v-else
32 :class="$style.link"
33 v-bind="attrs"
34 @click="click"
35 @keypress.space.enter="click"
36 >
37 <slot />
38 </a>
39</template>
40
41<script setup lang="ts">
42import { PropType, useAttrs } from 'vue';
43import { RouteLocationRaw, useRouter } from 'vue-router';
44
45const props = defineProps({
46 to: { type: [String, Object] as PropType<RouteLocationRaw>, default: null },
47});
48const emit = defineEmits(['click']);
49const attrs = useAttrs();
50const router = useRouter();
51
52function click() {
53 emit('click');
54}
55function pushTo() {
56 router.push(props.to);
57}
58</script>
59
60<style lang="scss" module>
61@import "~@/assets/scss/theme";
62
63a, .link {
64 color: $link;
65 text-decoration: none;
66 cursor: pointer;
67 &:hover {
68 color: $link-hover;
69 }
70 &:focus {
71 color: $link-hover;
72 outline: 1px solid $button-active-color;
73 }
74}
75</style>