@dataloop-ai/components 0.20.265 → 0.20.267

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/basic/DlButton/DlButton.vue +1 -1
  3. package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue +21 -18
  4. package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +10 -4
  5. package/src/components/compound/DlToast/components/ToastComponent.vue +16 -8
  6. package/src/demos/DlDialogBoxDemo.vue +62 -37
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.265",
3
+ "version": "0.20.267",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/basic/DlButton/DlButton.vue CHANGED
@@ -570,7 +570,7 @@ export default defineComponent({
570
570
  margin: var(--dl-button-margin);
571
571
  border-radius: var(--dl-button-border-radius);
572
572
  font-family: var(--dl-typography-body-body2-font-family);
573
- font-size: var(--dl-button-font-size);
573
+ font-size: var(--dl-typography-body-body2-font-size);
574
574
  font-weight: var(--dl-typography-body-body2-font-weight);
575
575
  cursor: var(--dl-button-cursor);
576
576
  color: var(--dl-button-text-color);
package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue CHANGED
@@ -22,23 +22,25 @@
22
22
  </slot>
23
23
  </p>
24
24
  </div>
25
- <dl-button
26
- v-if="closeButton"
27
- class="close-button"
28
- icon="icon-dl-close"
29
- icon-size="16px"
30
- flat
31
- size="m"
32
- text-color="var(--dell-gray-600)"
33
- hover-bg-color="var(--dell-gray-100)"
34
- pressed-bg-color="var(--dell-gray-200)"
35
- hover-text-color="var(--dell-gray-800)"
36
- pressed-text-color="var(--dell-gray-800)"
37
- :padding="closeIconSizePadding"
38
- @click="$emit('onClose')"
39
- >
40
- <dl-tooltip :delay="800"> Close </dl-tooltip>
41
- </dl-button>
25
+ <div class="actions-container">
26
+ <slot name="actions" />
27
+ <dl-button
28
+ v-if="closeButton"
29
+ icon="icon-dl-close"
30
+ icon-size="16px"
31
+ flat
32
+ size="m"
33
+ text-color="var(--dell-gray-600)"
34
+ hover-bg-color="var(--dell-gray-100)"
35
+ pressed-bg-color="var(--dell-gray-200)"
36
+ hover-text-color="var(--dell-gray-800)"
37
+ pressed-text-color="var(--dell-gray-800)"
38
+ :padding="closeIconSizePadding"
39
+ @click="$emit('onClose')"
40
+ >
41
+ <dl-tooltip :delay="800"> Close </dl-tooltip>
42
+ </dl-button>
43
+ </div>
42
44
  </div>
43
45
  </template>
44
46
 
@@ -98,9 +100,10 @@ export default defineComponent({
98
100
  margin: 0;
99
101
  }
100
102
 
101
- .close-button {
103
+ .actions-container {
102
104
  margin-top: 5px;
103
105
  display: flex;
106
+ gap: var(--dl-dialog-box-header-actions-gap, 4px);
104
107
  align-items: flex-start;
105
108
  ::v-deep button.dl-button {
106
109
  --dl-button-border-radius: 0;
package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue CHANGED
@@ -1277,7 +1277,9 @@ export default defineComponent({
1277
1277
  background-color: var(--dl-color-panel-background);
1278
1278
  cursor: text;
1279
1279
 
1280
- font-size: 12px;
1280
+ font-family: var(--dl-typography-body-body2-font-family);
1281
+ font-size: var(--dl-typography-body-body2-font-size);
1282
+ font-weight: var(--dl-typography-body-body2-font-weight);
1281
1283
  line-height: 14px;
1282
1284
 
1283
1285
  border: 1px solid var(--dl-color-separator);
@@ -1338,10 +1340,10 @@ export default defineComponent({
1338
1340
  }
1339
1341
 
1340
1342
  &__textarea {
1341
- font-size: 12px;
1342
- font-weight: 400;
1343
+ font-size: var(--dl-typography-body-body2-font-size);
1344
+ font-weight: var(--dl-typography-body-body2-font-weight);
1343
1345
  line-height: 14px;
1344
- font-family: 'Roboto', sans-serif;
1346
+ font-family: var(--dl-typography-body-body2-font-family);
1345
1347
  width: 100%;
1346
1348
  border: none;
1347
1349
  outline: none;
@@ -1366,6 +1368,10 @@ export default defineComponent({
1366
1368
  color: var(--dl-color-lighter);
1367
1369
  /* In case this causes render shadowing move to use html/injection approach */
1368
1370
  content: attr(placeholder);
1371
+ display: inline-block;
1372
+ max-width: 100%;
1373
+ overflow: hidden;
1374
+ text-overflow: ellipsis;
1369
1375
  }
1370
1376
  & > * {
1371
1377
  display: flex;
package/src/components/compound/DlToast/components/ToastComponent.vue CHANGED
@@ -71,6 +71,7 @@
71
71
  </template>
72
72
  <dl-badge
73
73
  v-if="count"
74
+ class="toast-counter"
74
75
  with-border
75
76
  floating
76
77
  align="top"
@@ -80,14 +81,6 @@
80
81
  ? 'var(--dl-color-alert-text)'
81
82
  : 'var(--dl-color-text-buttons)'
82
83
  "
83
- style="
84
- display: grid;
85
- text-align: center;
86
- width: fit-content;
87
- padding: 3px;
88
- min-width: 1em;
89
- top: -5px;
90
- "
91
84
  >
92
85
  {{ count + 1 }}
93
86
  </dl-badge>
@@ -358,6 +351,21 @@ export default defineComponent({
358
351
  font-size: inherit;
359
352
  }
360
353
 
354
+ .toast-counter.toast-counter {
355
+ display: grid;
356
+ text-align: center;
357
+ width: fit-content;
358
+ padding: 1px 3px;
359
+ min-width: 20px;
360
+ min-height: 20px;
361
+ top: -5px;
362
+ right: -8px;
363
+ font-family: var(--dl-typography-body-body3-font-family);
364
+ font-size: var(--dl-typography-body-body3-font-size);
365
+ line-height: var(--dl-typography-body-body3-line-height);
366
+ font-weight: var(--dl-typography-body-body3-font-weight);
367
+ }
368
+
361
369
  .toast-message--pre-line {
362
370
  white-space: pre-line;
363
371
  }
package/src/demos/DlDialogBoxDemo.vue CHANGED
@@ -1,20 +1,9 @@
1
1
  <template>
2
2
  <div>
3
- <dl-switch
4
- v-model="draggable"
5
- left-label="Draggable"
6
- />
7
- <dl-switch
8
- v-model="fullscreen"
9
- left-label="Full screen"
10
- />
11
- <dl-switch
12
- v-model="fullHeight"
13
- left-label="Full height"
14
- />
15
- <dl-button @click="openModal">
16
- Open modal
17
- </dl-button>
3
+ <dl-switch v-model="draggable" left-label="Draggable" />
4
+ <dl-switch v-model="fullscreen" left-label="Full screen" />
5
+ <dl-switch v-model="fullHeight" left-label="Full height" />
6
+ <dl-button @click="openModal"> Open modal </dl-button>
18
7
  <dl-dialog-box
19
8
  ref="modalOne"
20
9
  v-model="isOpenedFirstModal"
@@ -27,7 +16,58 @@
27
16
  title="Dialog Box Title"
28
17
  subtitle="updated by rotemshaham@dataloop.ai"
29
18
  @on-close="closeModal"
30
- />
19
+ >
20
+ <template #actions>
21
+ <dl-button
22
+ icon="icon-dl-edit"
23
+ icon-size="16px"
24
+ size="m"
25
+ flat
26
+ text-color="var(--dell-gray-600)"
27
+ hover-bg-color="var(--dell-gray-100)"
28
+ pressed-bg-color="var(--dell-gray-200)"
29
+ hover-text-color="var(--dell-gray-800)"
30
+ pressed-text-color="var(--dell-gray-800)"
31
+ padding="0 0 0 0"
32
+ />
33
+ <dl-button
34
+ icon="icon-dl-delete"
35
+ icon-size="16px"
36
+ size="m"
37
+ flat
38
+ text-color="var(--dell-gray-600)"
39
+ hover-bg-color="var(--dell-gray-100)"
40
+ pressed-bg-color="var(--dell-gray-200)"
41
+ hover-text-color="var(--dell-gray-800)"
42
+ pressed-text-color="var(--dell-gray-800)"
43
+ padding="0 0 0 0"
44
+ />
45
+ <dl-button
46
+ icon="icon-dl-download"
47
+ icon-size="16px"
48
+ size="m"
49
+ flat
50
+ text-color="var(--dell-gray-600)"
51
+ hover-bg-color="var(--dell-gray-100)"
52
+ pressed-bg-color="var(--dell-gray-200)"
53
+ hover-text-color="var(--dell-gray-800)"
54
+ pressed-text-color="var(--dell-gray-800)"
55
+ padding="0 0 0 0"
56
+ />
57
+ <dl-button
58
+ icon="icon-dl-settings"
59
+ icon-size="16px"
60
+ size="m"
61
+ flat
62
+ text-color="var(--dell-gray-600)"
63
+ hover-bg-color="var(--dell-gray-100)"
64
+ pressed-bg-color="var(--dell-gray-200)"
65
+ hover-text-color="var(--dell-gray-800)"
66
+ pressed-text-color="var(--dell-gray-800)"
67
+ padding="0 0 0 0"
68
+ />
69
+ </template>
70
+ </dl-dialog-box-header>
31
71
  </template>
32
72
  <template #body>
33
73
  <div
@@ -95,24 +135,17 @@
95
135
  </template>
96
136
  <template #footer>
97
137
  <dl-dialog-box-footer>
98
- <dl-button
99
- outlined
100
- @click="openSecondModal"
101
- >
138
+ <dl-button outlined @click="openSecondModal">
102
139
  Open empty modal
103
140
  </dl-button>
104
- <dl-button @click="closeModal">
105
- Close
106
- </dl-button>
141
+ <dl-button @click="closeModal"> Close </dl-button>
107
142
  </dl-dialog-box-footer>
108
143
  </template>
109
144
  </dl-dialog-box>
110
145
 
111
146
  <div>
112
147
  Styled Tooltip using a class
113
- <dl-button @click="openModal2">
114
- Open modal
115
- </dl-button>
148
+ <dl-button @click="openModal2"> Open modal </dl-button>
116
149
  <dl-dialog-box
117
150
  ref="modalTwo"
118
151
  v-model="isOpenedSecondModal"
@@ -162,10 +195,7 @@
162
195
  </template>
163
196
  <template #footer>
164
197
  <dl-dialog-box-footer>
165
- <dl-button
166
- outlined
167
- @click="openSecondModal"
168
- >
198
+ <dl-button outlined @click="openSecondModal">
169
199
  Open empty modal
170
200
  </dl-button>
171
201
  <dl-button @click="isOpenedSecondModal = false">
@@ -177,9 +207,7 @@
177
207
  </div>
178
208
  <div>
179
209
  Styled Tooltip using an id
180
- <dl-button @click="openModal3">
181
- Open modal
182
- </dl-button>
210
+ <dl-button @click="openModal3"> Open modal </dl-button>
183
211
  <dl-dialog-box
184
212
  ref="modalThree"
185
213
  v-model="isOpenedThirdModal"
@@ -228,10 +256,7 @@
228
256
  </template>
229
257
  <template #footer>
230
258
  <dl-dialog-box-footer>
231
- <dl-button
232
- outlined
233
- @click="openSecondModal"
234
- >
259
+ <dl-button outlined @click="openSecondModal">
235
260
  Open empty modal
236
261
  </dl-button>
237
262
  <dl-button @click="isOpenedThirdModal = false">