@dataloop-ai/components 0.20.198 → 0.20.200
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 +2 -2
- package/src/components/basic/DlListItem/utils.ts +1 -1
- package/src/components/compound/DlInput/DlInput.vue +17 -5
- package/src/components/compound/DlSelect/DlSelect.vue +5 -5
- package/src/components/compound/DlSelect/components/DlSelectOption.vue +2 -2
- package/src/components/compound/DlTable/DlTable.vue +2 -2
- package/src/components/essential/DlCheckbox/DlCheckbox.vue +4 -4
- package/src/components/essential/DlLink/DlLink.vue +6 -2
- package/src/components/essential/DlList/DlList.vue +4 -8
- package/src/components/essential/DlProgressBar/DlProgressBar.vue +1 -1
- package/src/components/essential/DlTrend/DlTrend.vue +22 -7
- package/src/utils/getColor.ts +2 -2
- package/src/utils/splitByQuotes.ts +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataloop-ai/components",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.200",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": "./index.ts",
|
|
6
6
|
"./models": "./models.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@dataloop-ai/icons": "^3.1.
|
|
26
|
+
"@dataloop-ai/icons": "^3.1.59",
|
|
27
27
|
"@monaco-editor/loader": "^1.4.0",
|
|
28
28
|
"@types/flat": "^5.0.2",
|
|
29
29
|
"@types/lodash": "^4.14.184",
|
|
@@ -8,4 +8,4 @@ export const itemCursor = (actionable: boolean, disabled: boolean) =>
|
|
|
8
8
|
actionable ? 'pointer' : disabled ? 'not-allowed' : 'cursor'
|
|
9
9
|
|
|
10
10
|
export const itemColor = (disabled: boolean) =>
|
|
11
|
-
disabled ? 'var(--
|
|
11
|
+
disabled ? 'var(--dell-gray-500)' : 'var(--dell-gray-800)'
|
|
@@ -985,11 +985,11 @@ export default defineComponent({
|
|
|
985
985
|
},
|
|
986
986
|
getBorderColor(): string {
|
|
987
987
|
if (this.error) {
|
|
988
|
-
return `var(--
|
|
988
|
+
return `var(--dell-red-500)`
|
|
989
989
|
} else if (this.warning) {
|
|
990
|
-
return `var(--
|
|
990
|
+
return `var(--dell-yellow-500)`
|
|
991
991
|
} else {
|
|
992
|
-
return `var(--
|
|
992
|
+
return `var(--dell-blue-500)`
|
|
993
993
|
}
|
|
994
994
|
},
|
|
995
995
|
cssVars(): Record<string, any> {
|
|
@@ -1034,6 +1034,12 @@ export default defineComponent({
|
|
|
1034
1034
|
classes.push('dl-input__input--disabled')
|
|
1035
1035
|
}
|
|
1036
1036
|
|
|
1037
|
+
if (this.inputLength) {
|
|
1038
|
+
classes.push('dl-input__input--text-color')
|
|
1039
|
+
} else {
|
|
1040
|
+
classes.push('dl-input__input--placeholder-color')
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1037
1043
|
return classes
|
|
1038
1044
|
},
|
|
1039
1045
|
asteriskClasses(): string[] {
|
|
@@ -1366,7 +1372,7 @@ export default defineComponent({
|
|
|
1366
1372
|
[contenteditable='true']:empty:before {
|
|
1367
1373
|
content: attr(placeholder);
|
|
1368
1374
|
display: inline;
|
|
1369
|
-
opacity:
|
|
1375
|
+
opacity: 1;
|
|
1370
1376
|
-webkit-text-security: none;
|
|
1371
1377
|
}
|
|
1372
1378
|
|
|
@@ -1480,7 +1486,6 @@ export default defineComponent({
|
|
|
1480
1486
|
font-family: Arial, Helvetica, sans-serif;
|
|
1481
1487
|
border-right: none;
|
|
1482
1488
|
border-radius: 0px;
|
|
1483
|
-
color: var(--dl-color-darker);
|
|
1484
1489
|
white-space: var(--dl-input-white-space);
|
|
1485
1490
|
font-size: var(--dl-font-size-body);
|
|
1486
1491
|
overflow: hidden scroll;
|
|
@@ -1496,6 +1501,13 @@ export default defineComponent({
|
|
|
1496
1501
|
line-height: 10px;
|
|
1497
1502
|
width: 100%;
|
|
1498
1503
|
|
|
1504
|
+
&--text-color {
|
|
1505
|
+
color: var(--dell-gray-800);
|
|
1506
|
+
}
|
|
1507
|
+
&--placeholder-color {
|
|
1508
|
+
color: var(--dell-gray-500);
|
|
1509
|
+
}
|
|
1510
|
+
|
|
1499
1511
|
&--prepend {
|
|
1500
1512
|
width: calc(100% - 10px - 28px);
|
|
1501
1513
|
}
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
v-if="searchable"
|
|
64
64
|
icon="icon-dl-search"
|
|
65
65
|
:size="iconSize"
|
|
66
|
-
color="
|
|
66
|
+
color="dell-gray-500"
|
|
67
67
|
/>
|
|
68
68
|
</slot>
|
|
69
69
|
</div>
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
@selected-item="handleSelectedItem"
|
|
167
167
|
>
|
|
168
168
|
<dl-list-item v-if="hasBeforeOptions && !noOptions">
|
|
169
|
-
<dl-item-section color="
|
|
169
|
+
<dl-item-section color="dell-gray-600">
|
|
170
170
|
<slot name="before-options" />
|
|
171
171
|
</dl-item-section>
|
|
172
172
|
</dl-list-item>
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
:style="computedNoOptionsStyle"
|
|
176
176
|
:padding="noOptionsPadding"
|
|
177
177
|
>
|
|
178
|
-
<dl-item-section color="
|
|
178
|
+
<dl-item-section color="dell-gray-600">
|
|
179
179
|
<slot name="no-options"> No options </slot>
|
|
180
180
|
</dl-item-section>
|
|
181
181
|
</dl-list-item>
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
v-if="error && !!errorMessage.length"
|
|
356
356
|
:icon="errorIcon"
|
|
357
357
|
:inline="false"
|
|
358
|
-
color="
|
|
358
|
+
color="dell-red-500"
|
|
359
359
|
:size="iconSize"
|
|
360
360
|
>
|
|
361
361
|
<dl-tooltip>
|
|
@@ -816,7 +816,7 @@ export default defineComponent({
|
|
|
816
816
|
'--placeholder-color': getColor(
|
|
817
817
|
this.modelValueLength > 0 || this.selectedIndex !== -1
|
|
818
818
|
? 'dell-gray-800'
|
|
819
|
-
: '
|
|
819
|
+
: 'dell-gray-500'
|
|
820
820
|
)
|
|
821
821
|
}
|
|
822
822
|
},
|
|
@@ -222,7 +222,7 @@ export default defineComponent({
|
|
|
222
222
|
return `dl-select-option-${this.value}`.replaceAll(' ', '-')
|
|
223
223
|
},
|
|
224
224
|
color(): string | null {
|
|
225
|
-
return this.defaultStyles ? '
|
|
225
|
+
return this.defaultStyles ? 'dell-gray-800' : null
|
|
226
226
|
},
|
|
227
227
|
isSelected(): boolean {
|
|
228
228
|
return (
|
|
@@ -268,7 +268,7 @@ export default defineComponent({
|
|
|
268
268
|
|
|
269
269
|
highlightedHtml = label.replace(
|
|
270
270
|
toReplace,
|
|
271
|
-
`<span style="background: var(--
|
|
271
|
+
`<span style="background: var(--dell-yellow-500)">${getCaseInsensitiveInput(
|
|
272
272
|
label,
|
|
273
273
|
this.filterTerm
|
|
274
274
|
)}</span>`
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
style="width: 100%; display: flex"
|
|
168
168
|
>
|
|
169
169
|
<dl-button
|
|
170
|
-
:
|
|
170
|
+
:icon-color="
|
|
171
171
|
isVisibleColumnsOpen
|
|
172
172
|
? 'dell-blue-600'
|
|
173
173
|
: 'dell-gray-600'
|
|
@@ -571,7 +571,7 @@
|
|
|
571
571
|
style="width: 100%; display: flex"
|
|
572
572
|
>
|
|
573
573
|
<dl-button
|
|
574
|
-
:
|
|
574
|
+
:icon-color="
|
|
575
575
|
isVisibleColumnsOpen
|
|
576
576
|
? 'dl-color-secondary'
|
|
577
577
|
: 'dl-color-medium'
|
|
@@ -234,10 +234,10 @@ export default defineComponent({
|
|
|
234
234
|
}
|
|
235
235
|
.container.disabled {
|
|
236
236
|
cursor: not-allowed;
|
|
237
|
-
color: var(--
|
|
237
|
+
color: var(--dell-gray-500);
|
|
238
238
|
& * {
|
|
239
239
|
pointer-events: auto;
|
|
240
|
-
color: var(--
|
|
240
|
+
color: var(--dell-gray-500);
|
|
241
241
|
}
|
|
242
242
|
}
|
|
243
243
|
.checkbox-wrapper {
|
|
@@ -245,7 +245,7 @@ export default defineComponent({
|
|
|
245
245
|
position: relative;
|
|
246
246
|
width: 12px;
|
|
247
247
|
height: 12px;
|
|
248
|
-
border: 1px solid var(--
|
|
248
|
+
border: 1px solid var(--dell-gray-300);
|
|
249
249
|
border-radius: 2px;
|
|
250
250
|
& svg {
|
|
251
251
|
transition: fill 100ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
@@ -278,7 +278,7 @@ input {
|
|
|
278
278
|
|
|
279
279
|
.checkbox-label {
|
|
280
280
|
font-size: var(--dl-font-size-body);
|
|
281
|
-
color: var(--
|
|
281
|
+
color: var(--dell-gray-800);
|
|
282
282
|
overflow-wrap: break-word;
|
|
283
283
|
width: 100%;
|
|
284
284
|
}
|
|
@@ -43,8 +43,12 @@ export default defineComponent({
|
|
|
43
43
|
: `${window.origin}/${this.href}`
|
|
44
44
|
},
|
|
45
45
|
linkStyles(): Record<string, string> {
|
|
46
|
-
const textColor = this.color ?? '
|
|
47
|
-
const hoverTextColor = this.hoverColor
|
|
46
|
+
const textColor = this.color ?? 'dell-blue-600'
|
|
47
|
+
const hoverTextColor = this.hoverColor
|
|
48
|
+
? this.hoverColor
|
|
49
|
+
: this.color
|
|
50
|
+
? this.color
|
|
51
|
+
: 'dell-blue-700'
|
|
48
52
|
return {
|
|
49
53
|
'--link-color': `var(--${textColor})`,
|
|
50
54
|
'--link-hover-color': `var(--${hoverTextColor})`
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<component
|
|
3
|
-
:is="type"
|
|
4
|
-
:id="uuid"
|
|
5
|
-
:class="classes"
|
|
6
|
-
>
|
|
2
|
+
<component :is="type" :id="uuid" :class="classes">
|
|
7
3
|
<slot :clickable="clickable" />
|
|
8
4
|
</component>
|
|
9
5
|
</template>
|
|
@@ -44,12 +40,12 @@ export default defineComponent({
|
|
|
44
40
|
<style scoped lang="scss">
|
|
45
41
|
.dl-list {
|
|
46
42
|
padding: 6px 0;
|
|
47
|
-
background-color: var(--
|
|
43
|
+
background-color: var(--dell-white);
|
|
48
44
|
&--bordered {
|
|
49
|
-
border: 1px solid var(--
|
|
45
|
+
border: 1px solid var(--dell-gray-300);
|
|
50
46
|
}
|
|
51
47
|
&--separator {
|
|
52
|
-
border-top: 1px solid var(--
|
|
48
|
+
border-top: 1px solid var(--dell-gray-300);
|
|
53
49
|
& > .dl-list-item {
|
|
54
50
|
padding: 5px 10px;
|
|
55
51
|
}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
:id="uuid"
|
|
4
|
-
class="trend-wrapper"
|
|
5
|
-
>
|
|
2
|
+
<div :id="uuid" class="trend-wrapper">
|
|
6
3
|
<span
|
|
7
4
|
v-if="withArrow"
|
|
8
5
|
class="direction-arrow"
|
|
@@ -25,6 +22,24 @@ import { getColor } from '../../../utils'
|
|
|
25
22
|
const colorValidator = (val: string | null) =>
|
|
26
23
|
val === 'negative' || val === 'positive' || val === null
|
|
27
24
|
|
|
25
|
+
const getColorByName = (name: string) => {
|
|
26
|
+
if (name === 'negative') {
|
|
27
|
+
return 'dell-red-500'
|
|
28
|
+
} else if (name === 'positive') {
|
|
29
|
+
return 'dell-green-500'
|
|
30
|
+
} else {
|
|
31
|
+
return 'dell-gray-800'
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const getColorByDirection = (direction: string) => {
|
|
36
|
+
if (direction === 'up') {
|
|
37
|
+
return 'dell-green-500'
|
|
38
|
+
} else {
|
|
39
|
+
return 'dell-red-500'
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
28
43
|
export default defineComponent({
|
|
29
44
|
name: 'DlTrend',
|
|
30
45
|
props: {
|
|
@@ -63,9 +78,9 @@ export default defineComponent({
|
|
|
63
78
|
},
|
|
64
79
|
computedColor(): string {
|
|
65
80
|
if (this.color !== null || !colorValidator(this.color)) {
|
|
66
|
-
return getColor(
|
|
81
|
+
return getColor(getColorByName(this.color))
|
|
67
82
|
}
|
|
68
|
-
return getColor(
|
|
83
|
+
return getColor(getColorByDirection(this.direction))
|
|
69
84
|
},
|
|
70
85
|
withArrow(): boolean {
|
|
71
86
|
return !(this.value === 0 || this.value === '0')
|
|
@@ -83,7 +98,7 @@ export default defineComponent({
|
|
|
83
98
|
font-size: var(--dl-font-size-body);
|
|
84
99
|
line-height: 1;
|
|
85
100
|
padding: 2px 0;
|
|
86
|
-
color: var(--
|
|
101
|
+
color: var(--dell-gray-800);
|
|
87
102
|
}
|
|
88
103
|
.direction-arrow {
|
|
89
104
|
width: 8px;
|
package/src/utils/getColor.ts
CHANGED
|
@@ -9,10 +9,10 @@ const getColor = (color: string, fallback?: string) => {
|
|
|
9
9
|
return color
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
if (!color) return `var(--${fallback || '
|
|
12
|
+
if (!color) return `var(--${fallback || 'dell-gray-800'})`
|
|
13
13
|
if (color.includes('var(--')) return color
|
|
14
14
|
|
|
15
|
-
return `var(--${color}, var(--${fallback || '
|
|
15
|
+
return `var(--${color}, var(--${fallback || 'dell-gray-800'}))`
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export { getColor }
|