@dataloop-ai/components 0.20.254 → 0.20.256

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.
Files changed (12) hide show
  1. package/package.json +1 -1
  2. package/src/components/basic/DlAlert/DlAlert.vue +4 -3
  3. package/src/components/compound/DlInput/DlInput.vue +16 -2
  4. package/src/components/compound/DlPagination/DlPagination.vue +4 -2
  5. package/src/components/compound/DlPagination/components/PageNavigation.vue +5 -4
  6. package/src/components/compound/DlPagination/components/PaginationLegend.vue +4 -0
  7. package/src/components/compound/DlPagination/components/QuickNavigation.vue +9 -2
  8. package/src/components/compound/DlPagination/components/RowsSelector.vue +4 -0
  9. package/src/components/compound/DlSelect/DlSelect.vue +4 -1
  10. package/src/components/essential/DlTextArea/DlTextArea.vue +16 -5
  11. package/src/components/essential/DlTypography/DlTypography.vue +28 -14
  12. package/src/components/shared/DlTooltip/DlTooltip.vue +4 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.254",
3
+ "version": "0.20.256",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/basic/DlAlert/DlAlert.vue CHANGED
@@ -386,9 +386,10 @@ export default defineComponent({
386
386
  .text {
387
387
  color: var(--dell-gray-800);
388
388
  align-self: center;
389
- font-size: 14px;
390
- line-height: 20px;
391
- font-weight: 400;
389
+ font-family: var(--dl-typography-body-body2-font-family);
390
+ font-size: var(--dl-typography-body-body2-font-size);
391
+ line-height: var(--dl-typography-body-body2-line-height);
392
+ font-weight: var(--dl-typography-body-body2-font-weight);
392
393
  word-break: break-word;
393
394
  min-width: 0;
394
395
  }
package/src/components/compound/DlInput/DlInput.vue CHANGED
@@ -1413,7 +1413,10 @@ export default defineComponent({
1413
1413
 
1414
1414
  &__title {
1415
1415
  color: var(--dl-color-medium);
1416
+ font-family: var(--dl-typography-body-body3-font-family);
1416
1417
  font-size: var(--dl-typography-body-body3-font-size);
1418
+ line-height: var(--dl-typography-body-body3-line-height);
1419
+ font-weight: var(--dl-typography-body-body3-font-weight);
1417
1420
  text-align: left;
1418
1421
  margin-right: 5px;
1419
1422
  white-space: nowrap;
@@ -1421,7 +1424,10 @@ export default defineComponent({
1421
1424
 
1422
1425
  &__asterisk {
1423
1426
  color: var(--dl-color-medium);
1427
+ font-family: var(--dl-typography-body-body3-font-family);
1424
1428
  font-size: var(--dl-typography-body-body3-font-size);
1429
+ line-height: var(--dl-typography-body-body3-line-height);
1430
+ font-weight: var(--dl-typography-body-body3-font-weight);
1425
1431
  user-select: none;
1426
1432
 
1427
1433
  &--red {
@@ -1467,6 +1473,10 @@ export default defineComponent({
1467
1473
  ::v-deep .dl-icon {
1468
1474
  color: var(--dell-blue-500);
1469
1475
  }
1476
+
1477
+ .dl-input__adornment-container--clear ::v-deep .dl-icon {
1478
+ color: var(--dl-icon-color);
1479
+ }
1470
1480
  }
1471
1481
 
1472
1482
  &--error {
@@ -1493,11 +1503,12 @@ export default defineComponent({
1493
1503
 
1494
1504
  &__input {
1495
1505
  display: inline-block;
1496
- font-family: var(--dl-typography-font-family-body);
1506
+ font-family: var(--dl-typography-body-body2-font-family);
1497
1507
  border-right: none;
1498
1508
  border-radius: 0px;
1499
1509
  white-space: var(--dl-input-white-space);
1500
- font-size: var(--dl-typography-body-body3-font-size);
1510
+ font-size: var(--dl-typography-body-body2-font-size);
1511
+ font-weight: var(--dl-typography-body-body2-font-weight);
1501
1512
  overflow: hidden scroll;
1502
1513
  text-overflow: ellipsis;
1503
1514
  box-sizing: content-box;
@@ -1618,7 +1629,10 @@ export default defineComponent({
1618
1629
 
1619
1630
  &__counter {
1620
1631
  margin-left: 10px;
1632
+ font-family: var(--dl-typography-body-body3-font-family);
1621
1633
  font-size: var(--dl-typography-body-body3-font-size);
1634
+ line-height: var(--dl-typography-body-body3-line-height);
1635
+ font-weight: var(--dl-typography-body-body3-font-weight);
1622
1636
  color: var(--dl-color-darker);
1623
1637
  }
1624
1638
 
package/src/components/compound/DlPagination/DlPagination.vue CHANGED
@@ -190,8 +190,10 @@ export default defineComponent({
190
190
  .dl-pagination {
191
191
  width: 100%;
192
192
  height: 40px;
193
- font-size: 12px;
194
- font-weight: 400;
193
+ font-family: var(--dl-typography-body-body3-font-family);
194
+ font-size: var(--dl-typography-body-body3-font-size);
195
+ line-height: var(--dl-typography-body-body3-line-height);
196
+ font-weight: var(--dl-typography-body-body3-font-weight);
195
197
 
196
198
  &--container {
197
199
  height: 100%;
package/src/components/compound/DlPagination/components/PageNavigation.vue CHANGED
@@ -169,7 +169,7 @@ export default defineComponent({
169
169
  return this.value === this.max
170
170
  },
171
171
  buttonMinWidth(): string {
172
- return `3em`
172
+ return `20px`
173
173
  },
174
174
  cssVars(): Record<string, any> {
175
175
  return {
@@ -297,9 +297,10 @@ export default defineComponent({
297
297
  text-align: center;
298
298
  width: 20px;
299
299
  height: 20px;
300
- font-size: 12px;
301
- line-height: 14px;
302
- font-weight: 400;
300
+ font-family: var(--dl-typography-body-body2-font-family);
301
+ font-size: var(--dl-typography-body-body2-font-size);
302
+ line-height: var(--dl-typography-body-body2-line-height);
303
+ font-weight: var(--dl-typography-body-body2-font-weight);
303
304
  white-space: nowrap;
304
305
  }
305
306
 
package/src/components/compound/DlPagination/components/PaginationLegend.vue CHANGED
@@ -86,5 +86,9 @@ export default defineComponent({
86
86
  min-width: min-content;
87
87
  overflow-y: scroll;
88
88
  align-items: center;
89
+ font-family: var(--dl-typography-body-body3-font-family);
90
+ font-size: var(--dl-typography-body-body3-font-size);
91
+ line-height: var(--dl-typography-body-body3-line-height);
92
+ font-weight: var(--dl-typography-body-body3-font-weight);
89
93
  }
90
94
  </style>
package/src/components/compound/DlPagination/components/QuickNavigation.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="dl-pagination--quick_navigation">
3
- <dl-typography> Go to page </dl-typography>
3
+ <dl-typography size="body3"> Go to page </dl-typography>
4
4
  <input
5
5
  v-model="inputValue"
6
6
  type="number"
@@ -111,7 +111,10 @@ export default defineComponent({
111
111
  padding-bottom: 3px;
112
112
  padding-left: 5px;
113
113
  padding-right: 5px;
114
- font-size: 10px;
114
+ font-family: var(--dl-typography-body-body2-font-family);
115
+ font-size: var(--dl-typography-body-body2-font-size);
116
+ line-height: var(--dl-typography-body-body2-line-height);
117
+ font-weight: var(--dl-typography-body-body2-font-weight);
115
118
  max-width: 30px; // 40px - 10px (paddings)
116
119
  -moz-appearance: textfield;
117
120
  &::-webkit-outer-spin-button,
@@ -139,6 +142,10 @@ export default defineComponent({
139
142
  }
140
143
  &--quick_nav_link {
141
144
  margin-left: 5px;
145
+ font-family: var(--dl-typography-body-body2-font-family);
146
+ font-size: var(--dl-typography-body-body2-font-size);
147
+ line-height: var(--dl-typography-body-body2-line-height);
148
+ font-weight: var(--dl-typography-body-body2-font-weight);
142
149
  }
143
150
  }
144
151
 
package/src/components/compound/DlPagination/components/RowsSelector.vue CHANGED
@@ -77,6 +77,10 @@ export default defineComponent({
77
77
  &--rows_per_page_label {
78
78
  white-space: nowrap;
79
79
  padding-right: 4px;
80
+ font-family: var(--dl-typography-body-body3-font-family);
81
+ font-size: var(--dl-typography-body-body3-font-size);
82
+ line-height: var(--dl-typography-body-body3-line-height);
83
+ font-weight: var(--dl-typography-body-body3-font-weight);
80
84
  &::first-letter {
81
85
  text-transform: uppercase;
82
86
  }
package/src/components/compound/DlSelect/DlSelect.vue CHANGED
@@ -1356,7 +1356,10 @@ export default defineComponent({
1356
1356
  padding: 10px;
1357
1357
  outline: none;
1358
1358
  background: none;
1359
- font-size: 12px;
1359
+ font-family: var(--dl-typography-body-body2-font-family);
1360
+ font-size: var(--dl-typography-body-body2-font-size);
1361
+ line-height: var(--dl-typography-body-body2-line-height);
1362
+ font-weight: var(--dl-typography-body-body2-font-weight);
1360
1363
  position: relative;
1361
1364
  display: flex;
1362
1365
  align-items: center;
package/src/components/essential/DlTextArea/DlTextArea.vue CHANGED
@@ -356,8 +356,10 @@ export default defineComponent({
356
356
  border: 1px solid var(--dl-color-separator);
357
357
  border-radius: 2px;
358
358
  padding: 10px;
359
- font-family: 'Roboto', sans-serif;
360
- font-size: var(--dl-font-size-body);
359
+ font-family: var(--dl-typography-body-body2-font-family);
360
+ font-size: var(--dl-typography-body-body2-font-size);
361
+ line-height: var(--dl-typography-body-body2-line-height);
362
+ font-weight: var(--dl-typography-body-body2-font-weight);
361
363
  width: 100%;
362
364
  min-width: 100px;
363
365
  max-width: 100%;
@@ -371,7 +373,10 @@ export default defineComponent({
371
373
  }
372
374
  &__asterisk {
373
375
  color: var(--dl-color-medium);
374
- font-size: var(--dl-font-size-body);
376
+ font-family: var(--dl-typography-body-body3-font-family);
377
+ font-size: var(--dl-typography-body-body3-font-size);
378
+ line-height: var(--dl-typography-body-body3-line-height);
379
+ font-weight: var(--dl-typography-body-body3-font-weight);
375
380
  user-select: none;
376
381
  &--red {
377
382
  color: var(--dl-color-negative);
@@ -394,7 +399,10 @@ export default defineComponent({
394
399
  }
395
400
  &__title {
396
401
  color: var(--dl-color-medium);
397
- font-size: var(--dl-font-size-body);
402
+ font-family: var(--dl-typography-body-body3-font-family);
403
+ font-size: var(--dl-typography-body-body3-font-size);
404
+ line-height: var(--dl-typography-body-body3-line-height);
405
+ font-weight: var(--dl-typography-body-body3-font-weight);
398
406
  text-align: left;
399
407
  margin-right: 5px;
400
408
  white-space: nowrap;
@@ -465,7 +473,10 @@ export default defineComponent({
465
473
 
466
474
  span {
467
475
  margin-top: 3px;
468
- font-size: var(--dl-font-size-body);
476
+ font-family: var(--dl-typography-body-body3-font-family);
477
+ font-size: var(--dl-typography-body-body3-font-size);
478
+ line-height: var(--dl-typography-body-body3-line-height);
479
+ font-weight: var(--dl-typography-body-body3-font-weight);
469
480
  color: var(--dl-color-darker);
470
481
  }
471
482
  </style>
package/src/components/essential/DlTypography/DlTypography.vue CHANGED
@@ -112,93 +112,107 @@ export default defineComponent({
112
112
  text-transform: var(--dl-typography-text-transform);
113
113
  font-weight: var(--dl-typography-font-weight);
114
114
 
115
- // important needed below for sizing of h tags.. quasar conflict
116
- // to deal with quasar conflicts.
117
- line-height: initial !important;
115
+ line-height: initial;
118
116
 
119
117
  &--h1 {
120
118
  font-size: var(--dl-font-size-h1);
119
+ line-height: 40px;
121
120
  }
122
121
  &--h2 {
123
122
  font-size: var(--dl-font-size-h2);
123
+ line-height: 28px;
124
124
  }
125
125
  &--h3 {
126
+ font-family: var(--dl-typography-body-body1-font-family);
126
127
  font-size: var(--dl-font-size-h3);
128
+ line-height: var(--dl-typography-body-body1-line-height);
129
+ font-weight: var(--dl-typography-body-body1-font-weight);
127
130
  }
128
131
  &--h4 {
132
+ font-family: var(--dl-typography-body-body2-font-family);
129
133
  font-size: var(--dl-font-size-h4);
134
+ line-height: var(--dl-typography-body-body2-line-height);
135
+ font-weight: var(--dl-typography-body-body2-font-weight);
130
136
  }
131
137
  &--h5 {
138
+ font-family: var(--dl-typography-body-body3-font-family);
132
139
  font-size: var(--dl-font-size-h5);
140
+ line-height: var(--dl-typography-body-body3-line-height);
141
+ font-weight: var(--dl-typography-body-body3-font-weight);
133
142
  }
134
143
  &--h6 {
135
144
  font-size: var(--dl-font-size-h6);
145
+ line-height: 14px;
136
146
  }
137
147
  &--body {
138
- font-size: var(--dl-font-size-body);
148
+ font-family: var(--dl-typography-body-body2-font-family);
149
+ font-size: var(--dl-typography-body-body2-font-size);
150
+ line-height: var(--dl-typography-body-body2-line-height);
151
+ font-weight: var(--dl-typography-body-body2-font-weight);
139
152
  }
140
153
  &--small {
141
154
  font-size: var(--dl-font-size-small);
155
+ line-height: 14px;
142
156
  }
143
157
 
144
158
  &--header1 {
145
159
  font-family: var(--dl-typography-header-h1-font-family);
146
160
  font-size: var(--dl-typography-header-h1-font-size);
147
- line-height: var(--dl-typography-header-h1-line-height) !important;
161
+ line-height: var(--dl-typography-header-h1-line-height);
148
162
  font-weight: var(--dl-typography-header-h1-font-weight);
149
163
  }
150
164
  &--header4 {
151
165
  font-family: var(--dl-typography-header-h4-font-family);
152
166
  font-size: var(--dl-typography-header-h4-font-size);
153
- line-height: var(--dl-typography-header-h4-line-height) !important;
167
+ line-height: var(--dl-typography-header-h4-line-height);
154
168
  font-weight: var(--dl-typography-header-h4-font-weight);
155
169
  }
156
170
  &--header5 {
157
171
  font-family: var(--dl-typography-header-h5-font-family);
158
172
  font-size: var(--dl-typography-header-h5-font-size);
159
- line-height: var(--dl-typography-header-h5-line-height) !important;
173
+ line-height: var(--dl-typography-header-h5-line-height);
160
174
  font-weight: var(--dl-typography-header-h5-font-weight);
161
175
  }
162
176
  &--header6 {
163
177
  font-family: var(--dl-typography-header-h6-font-family);
164
178
  font-size: var(--dl-typography-header-h6-font-size);
165
- line-height: var(--dl-typography-header-h6-line-height) !important;
179
+ line-height: var(--dl-typography-header-h6-line-height);
166
180
  font-weight: var(--dl-typography-header-h6-font-weight);
167
181
  }
168
182
  &--header6-medium {
169
183
  font-family: var(--dl-typography-header-h6-font-family);
170
184
  font-size: var(--dl-typography-header-h6-font-size);
171
- line-height: var(--dl-typography-header-h6-line-height) !important;
185
+ line-height: var(--dl-typography-header-h6-line-height);
172
186
  font-weight: var(--dl-typography-header-h6-medium-font-weight);
173
187
  }
174
188
  &--body1 {
175
189
  font-family: var(--dl-typography-body-body1-font-family);
176
190
  font-size: var(--dl-typography-body-body1-font-size);
177
- line-height: var(--dl-typography-body-body1-line-height) !important;
191
+ line-height: var(--dl-typography-body-body1-line-height);
178
192
  font-weight: var(--dl-typography-body-body1-font-weight);
179
193
  }
180
194
  &--body1-medium {
181
195
  font-family: var(--dl-typography-body-body1-font-family);
182
196
  font-size: var(--dl-typography-body-body1-font-size);
183
- line-height: var(--dl-typography-body-body1-line-height) !important;
197
+ line-height: var(--dl-typography-body-body1-line-height);
184
198
  font-weight: var(--dl-typography-body-body1-medium-font-weight);
185
199
  }
186
200
  &--body2 {
187
201
  font-family: var(--dl-typography-body-body2-font-family);
188
202
  font-size: var(--dl-typography-body-body2-font-size);
189
- line-height: var(--dl-typography-body-body2-line-height) !important;
203
+ line-height: var(--dl-typography-body-body2-line-height);
190
204
  font-weight: var(--dl-typography-body-body2-font-weight);
191
205
  }
192
206
  &--body2-medium {
193
207
  font-family: var(--dl-typography-body-body2-font-family);
194
208
  font-size: var(--dl-typography-body-body2-font-size);
195
- line-height: var(--dl-typography-body-body2-line-height) !important;
209
+ line-height: var(--dl-typography-body-body2-line-height);
196
210
  font-weight: var(--dl-typography-body-body2-medium-font-weight);
197
211
  }
198
212
  &--body3 {
199
213
  font-family: var(--dl-typography-body-body3-font-family);
200
214
  font-size: var(--dl-typography-body-body3-font-size);
201
- line-height: var(--dl-typography-body-body3-line-height) !important;
215
+ line-height: var(--dl-typography-body-body3-line-height);
202
216
  font-weight: var(--dl-typography-body-body3-font-weight);
203
217
  }
204
218
 
package/src/components/shared/DlTooltip/DlTooltip.vue CHANGED
@@ -431,16 +431,16 @@ export default defineComponent({
431
431
  overflow-x: hidden;
432
432
  min-height: 16px;
433
433
  padding: var(--dl-tooltip-padding, 2px 5px);
434
- font-size: var(--dl-font-size-small);
435
- line-height: 16px;
434
+ font-family: var(--dl-typography-body-body3-font-family);
435
+ font-size: var(--dl-typography-body-body3-font-size);
436
+ line-height: var(--dl-typography-body-body3-line-height);
437
+ font-weight: var(--dl-typography-body-body3-font-weight);
436
438
  color: var(--dl-tooltip-color);
437
439
  background: var(--dl-tooltip-background);
438
440
  border: 1px solid var(--dl-tooltip-border, #eaeaea);
439
441
  border-radius: 0px;
440
442
  box-shadow: 0 2px 2px 0 var(--dell-shadow, rgba(0, 0, 0, 0.14));
441
443
  text-transform: none;
442
- font-family: 'Roboto', sans-serif;
443
- font-weight: 400;
444
444
  text-align: var(--dl-tooltip-text-align);
445
445
  white-space: break-spaces;
446
446
  word-break: break-word;