nextcloud-vue/src/components/NcRelatedResourcesPanel/NcResource.vue at 26567e9b8bef08c9a263df10ecd53e0ce7508a13 · nextcloud-libraries/nextcloud-vue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!--
  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<li class="resource">
		<NcButton
			class="resource__button"
			:aria-label="labelTranslated"
			:to="route"
			:href="route ? null : url"
			variant="tertiary">
			<template #icon>
				<div class="resource__icon">
					<img :src="icon">
				</div>
			</template>
			{{ name }}
		</NcButton>
	</li>
</template>

<script>
import { t } from '../../l10n.ts'
import NcButton from '../NcButton/index.ts'
import { getRoute } from '../NcRichText/autolink.ts'

export default {
	name: 'NcResource',

	components: {
		NcButton,
	},

	/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */
	props: {
		icon: {
			type: String,
			required: true,
		},

		name: {
			type: String,
			required: true,
		},

		url: {
			type: String,
			required: true,
		},
	},

	data() {
		return {
			labelTranslated: t('Open link to "{resourceName}"', { resourceName: this.name }),
		}
	},

	computed: {
		route() {
			return getRoute(this.$router, this.url)
		},
	},

	methods: {
		t,
	},
}
</script>

<style lang="scss" scoped>
.resource {
	display: flex;
	align-items: center;
	height: var(--default-clickable-area);

	// Override default NcButton styles
	&__button {
		width: 100% !important;
		justify-content: flex-start !important;
		padding: 0 !important;

		& :deep(.button-vue__wrapper) {
			justify-content: flex-start !important;

			.button-vue__text {
				font-weight: var(--font-weight-default, normal) !important;
				margin-inline-start: 2px !important;
			}
		}
	}

	&__icon {
		width: 32px;
		height: 32px;
		background-color: var(--color-text-maxcontrast);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			width: 16px;
			height: 16px;
			filter: var(--background-invert-if-dark);
		}
	}
}
</style>