@dataloop-ai/components 0.18.48 → 0.18.50

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.18.48",
3
+ "version": "0.18.50",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -27,7 +27,7 @@
27
27
  v-if="hasIcon"
28
28
  class="dl-button-icon"
29
29
  :size="iconSizePX"
30
- :color="iconColor || textColor"
30
+ :color="getIconColor"
31
31
  :icon="icon"
32
32
  :style="cssButtonVars"
33
33
  />
@@ -194,6 +194,17 @@ export default defineComponent({
194
194
  }
195
195
  },
196
196
  computed: {
197
+ getIconColor(): string {
198
+ if (this.iconColor) {
199
+ return this.iconColor
200
+ }
201
+
202
+ if (this.textColor) {
203
+ return this.textColor
204
+ }
205
+
206
+ return 'dl-color-secondary'
207
+ },
197
208
  capitalizeFirst(): string {
198
209
  if (this.transform === 'default') {
199
210
  return 'first-letter-capitalized'
@@ -69,13 +69,7 @@
69
69
  :class="iconClass"
70
70
  :icon="dropdownIcon"
71
71
  :size="iconSize"
72
- :color="
73
- disabled
74
- ? 'dl-color-disabled'
75
- : outlined && !textColor
76
- ? 'dl-color-secondary'
77
- : textColor || 'dl-color-white'
78
- "
72
+ :color="getIconColor"
79
73
  />
80
74
  </dl-button>
81
75
  <dl-menu
@@ -134,13 +128,7 @@
134
128
  :class="iconClass"
135
129
  :icon="dropdownIcon"
136
130
  :size="iconSize"
137
- :color="
138
- disabled
139
- ? 'dl-color-disabled'
140
- : outlined && !textColor
141
- ? 'dl-color-secondary'
142
- : textColor || 'dl-color-white'
143
- "
131
+ :color="getIconColor"
144
132
  />
145
133
  </div>
146
134
 
@@ -404,6 +392,26 @@ export default defineComponent({
404
392
  )
405
393
  })
406
394
 
395
+ const getIconColor = computed(() => {
396
+ if (props.disabled) {
397
+ return 'dl-color-disabled'
398
+ }
399
+
400
+ if (props.textColor) {
401
+ return props.textColor
402
+ }
403
+
404
+ if (props.outlined) {
405
+ return 'dl-color-secondary'
406
+ }
407
+
408
+ if (props.color) {
409
+ return props.color
410
+ }
411
+
412
+ return 'dl-color-medium'
413
+ })
414
+
407
415
  return {
408
416
  uuid: `dl-dropdown-button-${v4()}`,
409
417
  identifierClass,
@@ -425,7 +433,8 @@ export default defineComponent({
425
433
  props,
426
434
  setHighlightedIndex,
427
435
  handleSelectedItem,
428
- cssVars
436
+ cssVars,
437
+ getIconColor
429
438
  }
430
439
  }
431
440
  })
@@ -40,13 +40,15 @@
40
40
  name="actions"
41
41
  />
42
42
  </div>
43
- <dl-icon
44
- v-if="hint"
45
- class="dl-label__suffix-icon"
46
- icon="icon-dl-info"
47
- >
48
- <dl-tooltip>{{ hint }}</dl-tooltip>
49
- </dl-icon>
43
+ <slot name="hint">
44
+ <dl-icon
45
+ v-if="hint"
46
+ class="dl-label__suffix-icon"
47
+ icon="icon-dl-info"
48
+ >
49
+ <dl-tooltip>{{ hint }}</dl-tooltip>
50
+ </dl-icon>
51
+ </slot>
50
52
  </div>
51
53
  </div>
52
54
  </div>
@@ -1,6 +1,31 @@
1
1
  <template>
2
2
  <div>
3
3
  <div style="display: flex; gap: 20px; flex-direction: column">
4
+ <h2>without text-color prop</h2>
5
+ <dl-dropdown-button
6
+ v-model="showing"
7
+ flat
8
+ :label="outlinedLabel"
9
+ :no-wrap="false"
10
+ :overflow="false"
11
+ auto-close
12
+ fit-content
13
+ icon="icon-dl-sdk-documentation"
14
+ :color="'secondary'"
15
+ size="s"
16
+ >
17
+ <dl-list>
18
+ <dl-list-item
19
+ v-for="val in ['Photos', 'Videos', 'Articles']"
20
+ :key="val"
21
+ clickable
22
+ @click="handleOutlinedSelect(val)"
23
+ >
24
+ <dl-item-section> {{ val }} </dl-item-section>
25
+ </dl-list-item>
26
+ </dl-list>
27
+ </dl-dropdown-button>
28
+
4
29
  <h2>Splitted</h2>
5
30
  <dl-dropdown-button
6
31
  auto-close