@dataloop-ai/components 0.20.188 → 0.20.190
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
package/src/assets/constants.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* Constants */
|
|
3
|
-
--dl-color-alert-success: #
|
|
4
|
-
--dl-color-alert-success-background: #
|
|
5
|
-
--dl-color-alert-success-bg: #
|
|
6
|
-
--dl-color-alert-warn: #
|
|
7
|
-
--dl-color-alert-warn-background: #
|
|
8
|
-
--dl-color-alert-warn-bg: #
|
|
9
|
-
--dl-color-alert-error: #
|
|
10
|
-
--dl-color-alert-error-background: #
|
|
11
|
-
--dl-color-alert-error-bg: #
|
|
12
|
-
--dl-color-alert-info: #
|
|
13
|
-
--dl-color-alert-info-background: #
|
|
14
|
-
--dl-color-alert-info-bg: #
|
|
15
|
-
--dl-color-alert-text: #
|
|
3
|
+
--dl-color-alert-success: #1B8500; /* replace to --dell-green-500: #1B8500 */
|
|
4
|
+
--dl-color-alert-success-background: #DDEDD9; /* replace to --dell-green-200: #DDEDD9 */
|
|
5
|
+
--dl-color-alert-success-bg: #DDEDD9; /* replace to --dell-green-200: #DDEDD9 */
|
|
6
|
+
--dl-color-alert-warn: #FFC700; /* replace to --dell-yellow-500: #FFC700 */
|
|
7
|
+
--dl-color-alert-warn-background: #FFF7D9; /* replace to --dell-yellow-200: #FFF7D9 */
|
|
8
|
+
--dl-color-alert-warn-bg: #FFF7D9; /* replace to --dell-yellow-200: #FFF7D9 */
|
|
9
|
+
--dl-color-alert-error: #AF0000; /* replace to --dell-red-500: #AF0000 */
|
|
10
|
+
--dl-color-alert-error-background: #F3D9D9; /* replace to --dell-red-200: #F3D9D9 */
|
|
11
|
+
--dl-color-alert-error-bg: #F3D9D9; /* replace to --dell-red-200: #F3D9D9 */
|
|
12
|
+
--dl-color-alert-info: #0076CE; /* replace to --dell-blue-500: #0076CE */
|
|
13
|
+
--dl-color-alert-info-background: #D9EAF8; /* replace to --dell-blue-200: #D9EAF8 */
|
|
14
|
+
--dl-color-alert-info-bg: #D9EAF8; /* replace to --dell-blue-200: #D9EAF8 */
|
|
15
|
+
--dl-color-alert-text: #333333; /* replace to --dell-gray-800: #333333 */
|
|
16
16
|
|
|
17
17
|
/* Z-Index */
|
|
18
18
|
--dl-z-index-toast: 1052;
|
|
@@ -47,4 +47,39 @@
|
|
|
47
47
|
--dl-color-chart-16: #575567;
|
|
48
48
|
--dl-color-chart-17: #979797;
|
|
49
49
|
--dl-color-chart-18: #d9d9d9;
|
|
50
|
+
|
|
51
|
+
/* Dell Tokens */
|
|
52
|
+
--dell-white: #ffffff;
|
|
53
|
+
--dell-gray-100: #F4F4F4;
|
|
54
|
+
--dell-gray-200: #eaeaea;
|
|
55
|
+
--dell-gray-300: #C5C5C5;
|
|
56
|
+
--dell-gray-500: #757575;
|
|
57
|
+
--dell-gray-600: #616161;
|
|
58
|
+
--dell-gray-700: #4D4D4D;
|
|
59
|
+
--dell-gray-800: #333333;
|
|
60
|
+
--dell-gray-900: #252525;
|
|
61
|
+
--dell-blue-100: #ebf4fb;
|
|
62
|
+
--dell-blue-200: #D9EAF8;
|
|
63
|
+
--dell-blue-400: #4C9FDD;
|
|
64
|
+
--dell-blue-500: #0076CE;
|
|
65
|
+
--dell-blue-600: #0062AB;
|
|
66
|
+
--dell-blue-700: #004E88;
|
|
67
|
+
--dell-green-200: #DDEDD9;
|
|
68
|
+
--dell-green-500: #1B8500;
|
|
69
|
+
--dell-green-600: #166e00;
|
|
70
|
+
--dell-yellow-200: #FFF7D9;
|
|
71
|
+
--dell-yellow-500: #FFC700;
|
|
72
|
+
--dell-yellow-600: #E5A51A;
|
|
73
|
+
--dell-yellow-800: #9C622E;
|
|
74
|
+
--dell-orange-200: #FCE8D9;
|
|
75
|
+
--dell-orange-500: #ED6400;
|
|
76
|
+
--dell-orange-600: #C55300;
|
|
77
|
+
--dell-red-200: #F3D9D9;
|
|
78
|
+
--dell-red-500: #AF0000;
|
|
79
|
+
--dell-red-600: #910000;
|
|
80
|
+
--dell-red-700: #730000;
|
|
81
|
+
--dell-overlay: rgba(0, 0, 0, 0.6);
|
|
82
|
+
--dell-shadow: rgba(0, 0, 0, 0.14);
|
|
83
|
+
--dell-color-discovery: #7F3EE0;
|
|
84
|
+
--dell-color-discovery-bg: #F6F2FD;
|
|
50
85
|
}
|
package/src/assets/theme.css
CHANGED
|
@@ -23,10 +23,10 @@ body {
|
|
|
23
23
|
|
|
24
24
|
:root {
|
|
25
25
|
/* common */
|
|
26
|
-
--dl-color-white: #
|
|
26
|
+
--dl-color-white: #FFFFFF; /* replace to --dell-white: #FFFFFF */
|
|
27
27
|
--dl-color-black: #000;
|
|
28
|
-
--dl-color-bg: #
|
|
29
|
-
--dl-color-background:
|
|
28
|
+
--dl-color-bg: #FFFFFF; /* replace to --dell-white: #FFFFFF */
|
|
29
|
+
--dl-color-background: #FFFFFF; /* replace to --dell-white: #FFFFFF */
|
|
30
30
|
--dl-color-transparent: transparent;
|
|
31
31
|
|
|
32
32
|
/* fontSizes */
|
|
@@ -44,55 +44,55 @@ body {
|
|
|
44
44
|
|
|
45
45
|
/* colors */
|
|
46
46
|
--dl-color-tooltip-text: #fefefe;
|
|
47
|
-
--dl-color-tooltip-background: #
|
|
48
|
-
--dl-color-text-darker-buttons: #
|
|
49
|
-
--dl-color-secondary: #
|
|
50
|
-
--dl-color-secondary-opaque: #
|
|
51
|
-
--dl-color-text-buttons: #
|
|
52
|
-
--dl-color-darker: #
|
|
53
|
-
--dl-color-medium: #
|
|
54
|
-
--dl-color-lighter: #
|
|
55
|
-
--dl-color-hover: #
|
|
56
|
-
--dl-color-disabled: #
|
|
47
|
+
--dl-color-tooltip-background: #333333; /* base color replace to --dell-gray-800: #333333 */
|
|
48
|
+
--dl-color-text-darker-buttons: #333333; /* replace to --dell-gray-800: #333333 */
|
|
49
|
+
--dl-color-secondary: #0076CE; /* replace to --dell-blue-500: #0076CE */
|
|
50
|
+
--dl-color-secondary-opaque: #0076CE; /* base color replace to --dell-blue-500: #0076CE */
|
|
51
|
+
--dl-color-text-buttons: #FFFFFF; /* replace to --dell-white: #FFFFFF */
|
|
52
|
+
--dl-color-darker: #333333; /* replace to --dell-gray-800: #333333 */
|
|
53
|
+
--dl-color-medium: #616161; /* replace to --dell-gray-600: #616161 */
|
|
54
|
+
--dl-color-lighter: #757575; /* replace to --dell-gray-500: #757575 */
|
|
55
|
+
--dl-color-hover: #0062AB; /* replace to --dell-blue-600: #0062AB */
|
|
56
|
+
--dl-color-disabled: #757575; /* replace to --dell-gray-500: #757575 */
|
|
57
57
|
--dl-color-fill: #0000001e;
|
|
58
58
|
--dl-color-fill-hover: #f8f8f8;
|
|
59
|
-
--dl-color-separator: #
|
|
60
|
-
--dl-color-component: #
|
|
61
|
-
--dl-color-scrollbar: #
|
|
62
|
-
--dl-color-body-background: #
|
|
63
|
-
--dl-color-panel-background: #
|
|
59
|
+
--dl-color-separator: #C5C5C5; /* replace to --dell-gray-300: #C5C5C5 */
|
|
60
|
+
--dl-color-component: #FFFFFF; /* replace to --dell-white: #FFFFFF */
|
|
61
|
+
--dl-color-scrollbar: #C5C5C5; /* replace to --dell-gray-300: #C5C5C5 */
|
|
62
|
+
--dl-color-body-background: #F4F4F4; /* replace to --dell-gray-100: #F4F4F4 */
|
|
63
|
+
--dl-color-panel-background: #FFFFFF; /* replace to --dell-white: #FFFFFF */
|
|
64
64
|
--dl-color-side-panel: #18195c;
|
|
65
|
-
--dl-color-shadow: #
|
|
66
|
-
--dl-color-icon-default: #
|
|
65
|
+
--dl-color-shadow: #FFFFFF; /* replace to --dell-white: #FFFFFF */
|
|
66
|
+
--dl-color-icon-default: #333333; /* replace to --dell-gray-800: #333333 */
|
|
67
67
|
--dl-color-fill-secondary: #fbf8f8;
|
|
68
68
|
--dl-color-fill-third: #fbfbfb;
|
|
69
69
|
--dl-color-link: #20abfa;
|
|
70
70
|
--dl-color-cell-background: #fffae2;
|
|
71
|
-
--dl-color-disabled-slider: #
|
|
72
|
-
--dl-color-text-800: #
|
|
71
|
+
--dl-color-disabled-slider: #757575; /* replace to --dell-gray-500: #757575 */
|
|
72
|
+
--dl-color-text-800: #252525; /* replace to --dell-gray-900: #252525 */
|
|
73
73
|
--q-color-positive: #38d079;
|
|
74
74
|
--q-color-warning: #e1b75b;
|
|
75
75
|
|
|
76
76
|
/* alert colors */
|
|
77
|
-
--dl-color-negative:
|
|
78
|
-
--dl-color-negative-background:
|
|
79
|
-
--dl-color-negative-bg:
|
|
80
|
-
--dl-color-warning:
|
|
81
|
-
--dl-color-warning-background:
|
|
82
|
-
--dl-color-warning-bg:
|
|
83
|
-
--dl-color-positive:
|
|
84
|
-
--dl-color-positive-background:
|
|
85
|
-
--dl-color-positive-bg:
|
|
86
|
-
--dl-color-info:
|
|
87
|
-
--dl-color-info-background:
|
|
88
|
-
--dl-color-info-bg:
|
|
89
|
-
--dl-color-info-base: #
|
|
90
|
-
--dl-color-info-highlight: #
|
|
77
|
+
--dl-color-negative: #AF0000; /* replace to --dell-red-500: #AF0000 */
|
|
78
|
+
--dl-color-negative-background: #F3D9D9; /* replace to --dell-red-200: #F3D9D9 */
|
|
79
|
+
--dl-color-negative-bg: #F3D9D9; /* replace to --dell-red-200: #F3D9D9 */
|
|
80
|
+
--dl-color-warning: #FFC700; /* replace to --dell-yellow-500: #FFC700 */
|
|
81
|
+
--dl-color-warning-background: #FFF7D9; /* replace to --dell-yellow-200: #FFF7D9 */
|
|
82
|
+
--dl-color-warning-bg: #FFF7D9; /* replace to --dell-yellow-200: #FFF7D9 */
|
|
83
|
+
--dl-color-positive: #1B8500; /* replace to --dell-green-500: #1B8500 */
|
|
84
|
+
--dl-color-positive-background: #DDEDD9; /* replace to --dell-green-200: #DDEDD9 */
|
|
85
|
+
--dl-color-positive-bg: #DDEDD9; /* replace to --dell-green-200: #DDEDD9 */
|
|
86
|
+
--dl-color-info: #0076CE; /* replace to --dell-blue-500: #0076CE */
|
|
87
|
+
--dl-color-info-background: #D9EAF8; /* replace to --dell-blue-200: #D9EAF8 */
|
|
88
|
+
--dl-color-info-bg: #D9EAF8; /* replace to --dell-blue-200: #D9EAF8 */
|
|
89
|
+
--dl-color-info-base: #EBF4FB; /* replace to --dell-blue-100: #EBF4FB */
|
|
90
|
+
--dl-color-info-highlight: #FFFFFF; /* replace to --dell-white: #FFFFFF */
|
|
91
91
|
|
|
92
92
|
--dl-color-chart-brush: #eef1ff;
|
|
93
93
|
|
|
94
94
|
--dl-date-picker-shadow: 0px 3px 6px #101e7326;
|
|
95
|
-
--dl-date-picker-selected-strip:
|
|
95
|
+
--dl-date-picker-selected-strip: #0076CE; /* base color replace to --dell-blue-500: #0076CE */
|
|
96
96
|
--dl-date-picker-selected-date: #8fa0ff;
|
|
97
97
|
|
|
98
98
|
/* DlJsonEditor based on atom one themes */
|
|
@@ -103,8 +103,8 @@ body {
|
|
|
103
103
|
--dl-json-editor-value-color-number: #c18401;
|
|
104
104
|
--dl-json-editor-value-color-string: #50a14f;
|
|
105
105
|
|
|
106
|
-
--dl-color-discovery: #7F3EE0;
|
|
107
|
-
--dl-color-discovery-bg: #F6F2FD;
|
|
106
|
+
--dl-color-discovery: #7F3EE0; /* replace to --dell-color-discovery: #7F3EE0 */
|
|
107
|
+
--dl-color-discovery-bg: #F6F2FD; /* replace to --dell-color-discovery-bg: #F6F2FD */
|
|
108
108
|
|
|
109
109
|
}
|
|
110
110
|
|
|
@@ -16,8 +16,12 @@
|
|
|
16
16
|
@click="onClick"
|
|
17
17
|
@dblclick="onDblClick"
|
|
18
18
|
@mousedown="onMouseDown"
|
|
19
|
+
@mouseup="mouseDown = false"
|
|
19
20
|
@mouseenter="mouseOver = true"
|
|
20
|
-
@mouseleave="
|
|
21
|
+
@mouseleave="
|
|
22
|
+
mouseOver = false;
|
|
23
|
+
mouseDown = false
|
|
24
|
+
"
|
|
21
25
|
>
|
|
22
26
|
<dl-tooltip
|
|
23
27
|
v-if="!tooltip && overflow && isOverflowing && hasLabel"
|
|
@@ -219,6 +223,7 @@ export default defineComponent({
|
|
|
219
223
|
const buttonLabelRef = ref(null)
|
|
220
224
|
const { hasEllipsis } = useSizeObserver(buttonLabelRef)
|
|
221
225
|
const mouseOver = ref(false)
|
|
226
|
+
const mouseDown = ref(false)
|
|
222
227
|
|
|
223
228
|
const buttonClass = computed(() => {
|
|
224
229
|
const classes = ['dl-button']
|
|
@@ -239,6 +244,7 @@ export default defineComponent({
|
|
|
239
244
|
isOverflowing: hasEllipsis,
|
|
240
245
|
buttonClass,
|
|
241
246
|
mouseOver,
|
|
247
|
+
mouseDown,
|
|
242
248
|
buttonTimeout
|
|
243
249
|
}
|
|
244
250
|
},
|
|
@@ -264,6 +270,21 @@ export default defineComponent({
|
|
|
264
270
|
textColor: this.iconColor ?? this.textColor
|
|
265
271
|
})
|
|
266
272
|
}
|
|
273
|
+
|
|
274
|
+
if (this.mouseDown) {
|
|
275
|
+
if (this.colorsObject?.PRESSED?.TEXT) {
|
|
276
|
+
return this.colorsObject.PRESSED.TEXT
|
|
277
|
+
}
|
|
278
|
+
if (!this.flat) {
|
|
279
|
+
return 'var(--dl-button-text-color)'
|
|
280
|
+
}
|
|
281
|
+
return setTextOnPressed({
|
|
282
|
+
disabled: this.disabled,
|
|
283
|
+
flat: this.flat,
|
|
284
|
+
textColor: this.iconColor ?? this.textColor
|
|
285
|
+
})
|
|
286
|
+
}
|
|
287
|
+
|
|
267
288
|
if (this.mouseOver) {
|
|
268
289
|
return (
|
|
269
290
|
this.hoverTextColor ??
|
|
@@ -416,8 +437,10 @@ export default defineComponent({
|
|
|
416
437
|
color: this.color
|
|
417
438
|
}),
|
|
418
439
|
'--dl-button-text-color-pressed': setTextOnPressed({
|
|
419
|
-
|
|
420
|
-
|
|
440
|
+
disabled: this.disabled,
|
|
441
|
+
flat: this.flat,
|
|
442
|
+
color: this.color,
|
|
443
|
+
textColor: this.textColor
|
|
421
444
|
}),
|
|
422
445
|
'--dl-button-bg-pressed':
|
|
423
446
|
this.pressedBgColor ??
|
|
@@ -497,6 +520,7 @@ export default defineComponent({
|
|
|
497
520
|
}
|
|
498
521
|
}
|
|
499
522
|
|
|
523
|
+
this.mouseDown = true
|
|
500
524
|
this.$emit('mousedown', e)
|
|
501
525
|
}
|
|
502
526
|
}
|
|
@@ -542,6 +566,7 @@ export default defineComponent({
|
|
|
542
566
|
transition: var(--dl-button-text-transition-duration);
|
|
543
567
|
}
|
|
544
568
|
}
|
|
569
|
+
outline: none;
|
|
545
570
|
|
|
546
571
|
&--dense {
|
|
547
572
|
border: none;
|
|
@@ -562,6 +587,11 @@ export default defineComponent({
|
|
|
562
587
|
color: var(--dl-button-text-color-hover) !important;
|
|
563
588
|
}
|
|
564
589
|
}
|
|
590
|
+
&:focus-visible {
|
|
591
|
+
outline: 1px solid var(--dell-blue-500);
|
|
592
|
+
outline-offset: 2px;
|
|
593
|
+
border-radius: var(--dl-button-border-radius);
|
|
594
|
+
}
|
|
565
595
|
}
|
|
566
596
|
|
|
567
597
|
.dl-button-content {
|
|
@@ -213,10 +213,14 @@ export const setBgOnPressed = ({ shaded }: Partial<DlButtonProps>) => {
|
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
export const setTextOnPressed = ({
|
|
216
|
-
|
|
217
|
-
|
|
216
|
+
disabled,
|
|
217
|
+
flat,
|
|
218
|
+
textColor
|
|
218
219
|
}: Partial<DlButtonProps>) => {
|
|
219
|
-
return '
|
|
220
|
+
if (textColor) return getColor(textColor, 'dl-color-secondary')
|
|
221
|
+
if (disabled) return getColor('', 'dl-color-disabled')
|
|
222
|
+
if (!flat) return 'var(--dl-button-text-color)'
|
|
223
|
+
return 'var(--dl-color-secondary)'
|
|
220
224
|
}
|
|
221
225
|
|
|
222
226
|
export const setBorderOnPressed = ({
|