@dataloop-ai/components 0.20.223 → 0.20.224-checkchips.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -55,7 +55,8 @@ import {
|
|
|
55
55
|
setPadding,
|
|
56
56
|
setLeftIconColor,
|
|
57
57
|
setMaxWidth,
|
|
58
|
-
setRemoveIconWidth
|
|
58
|
+
setRemoveIconWidth,
|
|
59
|
+
getColorMapping
|
|
59
60
|
} from './utils'
|
|
60
61
|
import { v4 } from 'uuid'
|
|
61
62
|
import { DlTextTransformOptions } from '../../shared/types'
|
|
@@ -136,6 +137,14 @@ export default defineComponent({
|
|
|
136
137
|
return classes
|
|
137
138
|
},
|
|
138
139
|
cssChipVars(): Record<string, string | number> {
|
|
140
|
+
const originalBgColor = setBgColor({
|
|
141
|
+
outlined: this.outlined,
|
|
142
|
+
disabled: this.disabled,
|
|
143
|
+
color: this.color
|
|
144
|
+
})
|
|
145
|
+
|
|
146
|
+
const colorMapping = getColorMapping(originalBgColor)
|
|
147
|
+
|
|
139
148
|
return {
|
|
140
149
|
'--dl-chip-max-width': this.fit
|
|
141
150
|
? 'fit-content'
|
|
@@ -145,22 +154,24 @@ export default defineComponent({
|
|
|
145
154
|
removable: this.removable,
|
|
146
155
|
hasIcon: this.hasIcon
|
|
147
156
|
}),
|
|
148
|
-
'--dl-chip-text-color':
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
'--dl-chip-border':
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
157
|
+
'--dl-chip-text-color': colorMapping
|
|
158
|
+
? colorMapping.text
|
|
159
|
+
: setTextColor({
|
|
160
|
+
outlined: this.outlined,
|
|
161
|
+
filled: this.filled,
|
|
162
|
+
disabled: this.disabled,
|
|
163
|
+
textColor: this.textColor
|
|
164
|
+
}),
|
|
165
|
+
'--dl-chip-bg-color': colorMapping
|
|
166
|
+
? colorMapping.bg
|
|
167
|
+
: originalBgColor,
|
|
168
|
+
'--dl-chip-border': colorMapping
|
|
169
|
+
? `1px solid ${colorMapping.border}`
|
|
170
|
+
: setBorder({
|
|
171
|
+
noBorder: this.noBorder,
|
|
172
|
+
disabled: this.disabled,
|
|
173
|
+
color: this.color
|
|
174
|
+
}),
|
|
164
175
|
'--dl-chip-padding': setPadding({
|
|
165
176
|
hasLabel: this.hasLabel,
|
|
166
177
|
removable: this.removable,
|
|
@@ -12,6 +12,90 @@ export interface DlChipProps {
|
|
|
12
12
|
noBorder: boolean
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
+
export interface ChipColorMapping {
|
|
16
|
+
bg: string
|
|
17
|
+
text: string
|
|
18
|
+
border: string
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const COLOR_MAPPINGS: Record<string, ChipColorMapping> = {
|
|
22
|
+
'#f3d9d9': {
|
|
23
|
+
bg: 'var(--dell-red-500)',
|
|
24
|
+
text: 'var(--dell-white)',
|
|
25
|
+
border: 'var(--dell-red-500)'
|
|
26
|
+
},
|
|
27
|
+
'#fff7d9': {
|
|
28
|
+
bg: 'var(--dell-yellow-500)',
|
|
29
|
+
text: 'var(--dell-yellow-800)',
|
|
30
|
+
border: 'var(--dell-yellow-500)'
|
|
31
|
+
},
|
|
32
|
+
'#757575': {
|
|
33
|
+
bg: 'var(--dell-white)',
|
|
34
|
+
text: 'var(--dell-gray-500)',
|
|
35
|
+
border: 'var(--dell-gray-500)'
|
|
36
|
+
},
|
|
37
|
+
'#ddedd9': {
|
|
38
|
+
bg: 'var(--dell-white)',
|
|
39
|
+
text: 'var(--dell-gray-500)',
|
|
40
|
+
border: 'var(--dell-gray-500)'
|
|
41
|
+
},
|
|
42
|
+
'#1b8500': {
|
|
43
|
+
bg: 'var(--dell-green-500)',
|
|
44
|
+
text: 'var(--dell-white)',
|
|
45
|
+
border: 'var(--dell-green-500)'
|
|
46
|
+
},
|
|
47
|
+
'#ffc700': {
|
|
48
|
+
bg: 'var(--dell-yellow-500)',
|
|
49
|
+
text: 'var(--dell-yellow-800)',
|
|
50
|
+
border: 'var(--dell-yellow-500)'
|
|
51
|
+
},
|
|
52
|
+
'#af0000': {
|
|
53
|
+
bg: 'var(--dell-red-500)',
|
|
54
|
+
text: 'var(--dell-white)',
|
|
55
|
+
border: 'var(--dell-red-500)'
|
|
56
|
+
},
|
|
57
|
+
'#bebc5d': {
|
|
58
|
+
bg: 'var(--dell-white)',
|
|
59
|
+
text: 'var(--dell-gray-500)',
|
|
60
|
+
border: 'var(--dell-gray-500)'
|
|
61
|
+
},
|
|
62
|
+
'#32766e': {
|
|
63
|
+
bg: 'var(--dell-green-100)',
|
|
64
|
+
text: 'var(--dell-gray-800)',
|
|
65
|
+
border: 'var(--dell-green-500)'
|
|
66
|
+
},
|
|
67
|
+
'#c5c5c5': {
|
|
68
|
+
bg: 'var(--dell-gray-500)',
|
|
69
|
+
text: 'var(--dell-gray-700)',
|
|
70
|
+
border: 'var(--dell-gray-500)'
|
|
71
|
+
},
|
|
72
|
+
'#0076ce': {
|
|
73
|
+
bg: 'var(--dell-blue-500)',
|
|
74
|
+
text: 'var(--dell-white)',
|
|
75
|
+
border: 'var(--dell-blue-500)'
|
|
76
|
+
},
|
|
77
|
+
transparent: {
|
|
78
|
+
bg: 'var(--dell-white)',
|
|
79
|
+
text: 'var(--dell-gray-700)',
|
|
80
|
+
border: 'var(--dell-gray-500)'
|
|
81
|
+
},
|
|
82
|
+
'#00000000': {
|
|
83
|
+
bg: 'var(--dell-white)',
|
|
84
|
+
text: 'var(--dell-gray-700)',
|
|
85
|
+
border: 'var(--dell-gray-500)'
|
|
86
|
+
},
|
|
87
|
+
'#f4f4f4': {
|
|
88
|
+
bg: 'var(--dell-white)',
|
|
89
|
+
text: 'var(--dell-gray-700)',
|
|
90
|
+
border: 'var(--dell-gray-500)'
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
export const getColorMapping = (bgColor: string): ChipColorMapping | null => {
|
|
95
|
+
const normalizedColor = bgColor.toLowerCase().trim()
|
|
96
|
+
return COLOR_MAPPINGS[normalizedColor] || null
|
|
97
|
+
}
|
|
98
|
+
|
|
15
99
|
export const setTextColor = ({
|
|
16
100
|
disabled,
|
|
17
101
|
outlined,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="kpi_box" :style="cssVars">
|
|
3
3
|
<div class="kpi_box__counter">
|
|
4
4
|
<dl-typography
|
|
5
|
-
:color="hasValue ? 'dell-gray-800' : 'dell-gray-
|
|
5
|
+
:color="hasValue ? 'dell-gray-800' : 'dell-gray-500'"
|
|
6
6
|
variant="h1"
|
|
7
7
|
:size="counterFontSizeComputed"
|
|
8
8
|
:style="typographyStyles"
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<div class="kpi_box__title__text">
|
|
15
15
|
<div>
|
|
16
16
|
<dl-typography
|
|
17
|
-
color="
|
|
17
|
+
color="dell-gray-600"
|
|
18
18
|
variant="h3"
|
|
19
19
|
:size="titleFontSizeComputed"
|
|
20
20
|
>
|