-
Notifications
You must be signed in to change notification settings - Fork 7
/
slds-icon.vue
230 lines (189 loc) · 6.33 KB
/
slds-icon.vue
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<template>
<span :class="iconContainerClassNames" :title="title">
<!-- Icon -->
<slds-svg
:class="iconClassNames"
:icon="iconName"
:standard-format="standardFormat"
aria-hidden="true"
/>
<!-- Assistive text -->
<span v-if="assistiveText" class="slds-assistive-text">
{{ assistiveText }}
</span>
</span>
</template>
<script lang="ts">
import SldsSvg from "../slds-svg/slds-svg.vue"
import { IconUtils } from "../../utils"
import { defineComponent } from "vue"
export default defineComponent({
name: "SldsIcon",
components: {
SldsSvg,
},
props: {
/**
* The alternative text used to describe the icon.
* This text should describe what happens when you click the button, for example 'Upload File', not what the
* icon looks like, 'Paperclip'.
*/
alternativeText: String,
/**
* The alternative text used to describe the icon.
* This text should describe what happens when you click the button,
* for example 'Upload File', not what the icon looks like, 'Paperclip'.
*/
assistiveText: String,
/**
* Indicates whether the icon has the brand variant.
*/
brand: Boolean,
/**
* Indicates whether to change the fill of an icon to match the current color of its parent
*/
currentColor: Boolean,
/**
* Indicates whether the icon has the error theme.
*/
error: Boolean,
/**
* The class names to be passed to the icon.
*/
iconClass: [String, Array],
/**
* The Lightning Design System name of the icon.
* Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed.
*/
iconName: { type: String, required: true },
/**
* Indicates whether the icon has the inverse theme.
*/
inverse: Boolean,
/**
* Indicates whether the icon uses the large size.
*/
large: Boolean,
/**
* Indicates whether the icon has the light theme.
*/
light: Boolean,
/**
* Indicates whether the icon uses the medium size.
* If no other size is set, this one will be used by default.
*/
medium: Boolean,
/**
* Indicates whether the icon uses the small size.
*/
small: Boolean,
/**
* Indicates whether the icon uses the standard icon format.
*/
standardFormat: Boolean,
/**
* Indicates whether the icon has the success theme.
*/
success: Boolean,
/**
* Indicates whether the icon uses the xSmall size.
*/
xSmall: Boolean,
/**
* Indicates whether the icon uses the xxSmall size.
*/
xxSmall: Boolean,
/**
* The icon title.
*/
title: String,
/**
* Indicates whether the icon has the warning theme.
*/
warning: Boolean,
},
data() {
return {
/**
* Parsed background class.
*/
backgroundClass: null as string | null,
/**
* Icon category.
*/
category: null as string | null,
/**
* Icon name.
*/
name: null as string | null,
}
},
computed: {
/**
* The CSS class names for the icon container element.
*/
iconContainerClassNames(): string {
let classNames = `slds-icon_container ${this.backgroundClass}`
if (this.currentColor) classNames += " slds-current-color"
return classNames
},
/**
* The CSS class names for the icon element.
*/
iconClassNames(): string {
let classNames = `slds-icon ${this.iconClass || ""}`
// Size
if (this.xxSmall) classNames += " slds-icon_xx-small"
else if (this.xSmall) classNames += " slds-icon_x-small"
else if (this.small) classNames += " slds-icon_small"
else if (this.medium) classNames += " slds-icon_medium"
else if (this.large) classNames += " slds-icon_large"
classNames += " slds-icon_medium"
// Variant
if (IconUtils.isValidName(this.iconName) && IconUtils.getCategory(this.iconName) === "utility") {
if (this.brand) classNames += " slds-icon-text-brand"
else if (this.error) classNames += " slds-icon-text-error"
else if (this.inverse || this.standardFormat) classNames += " slds-icon-text-inverse"
else if (this.light) classNames += " slds-icon-text-light"
else if (this.success) classNames += " slds-icon-text-success"
else if (this.warning) classNames += " slds-icon-text-warning"
else if (this.currentColor) classNames += " "
else classNames += " slds-icon-text-default"
}
return classNames
},
},
watch: {
iconName(newIconName): void {
this.parseBackground(newIconName)
},
},
mounted() {
this.parseBackground(this.iconName)
},
methods: {
/**
* Parses the background class from the icon name.
* @param iconName The icon name.
*/
parseBackground(iconName: string): void {
let classNames = this.$el.classList
if (classNames == null) classNames = []
// Remove old background class if it exists
if (this.backgroundClass) classNames.remove(this.backgroundClass)
// If some custom background class was defined use it
for (const className of classNames) {
if (className.startsWith("slds-icon-")) return
}
// Otherwise compute the default background class for the icon
if (this.iconName == null) return
this.backgroundClass = IconUtils.computeBackgroundClass(iconName)
},
},
})
</script>
<style scoped lang="scss">
.slds-icon-text-brand {
fill: #1589EE;
}
</style>