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
|
<template>
<input
v-if="name"
type="image"
:name="name"
:src="url"
:width="size"
:height="size"
:role="ariaRole"
v-bind="$attrs"
v-on="$listeners"
:alt="$attrs.alt ?? ''"
/>
<img v-else
:src="url"
:width="size"
:height="size"
:role="ariaRole"
v-bind="$attrs"
v-on="$listeners"
:alt="$attrs.alt ?? ''"
/>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'studip-icon',
props: {
ariaRole: {
type: String,
required: false,
},
name: {
type: String,
required: false,
},
role: {
type: String,
required: false,
default: 'clickable',
},
shape: String,
size: {
type: Number,
required: false,
default: 16,
},
},
computed: {
url(): string {
if (this.shape.indexOf('http') === 0) {
return this.shape;
}
var path = this.shape.split('+').reverse().join('/');
return `${window.STUDIP.ASSETS_URL}images/icons/${this.color}/${path}.svg`;
},
color(): string {
switch (this.role) {
case 'info':
return 'black';
case 'inactive':
return 'grey';
case 'accept':
case 'status-green':
return 'green';
case 'attention':
case 'new':
case 'status-red':
return 'red';
case 'info_alt':
return 'white';
case 'status-yellow':
return 'yellow';
case 'sort':
case 'clickable':
case 'navigation':
default:
return 'blue';
}
},
},
});
</script>
|
