@dataloop-ai/components 0.17.72 → 0.17.74
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
|
@@ -15,9 +15,10 @@
|
|
|
15
15
|
<dl-icon
|
|
16
16
|
v-if="showTooltip"
|
|
17
17
|
:size="iconSize"
|
|
18
|
+
:inline="false"
|
|
18
19
|
icon="icon-dl-info"
|
|
19
20
|
class="info-icon"
|
|
20
|
-
color="dl-color-
|
|
21
|
+
color="dl-color-lighter"
|
|
21
22
|
/>
|
|
22
23
|
<dl-tooltip v-if="showTooltip === true">
|
|
23
24
|
{{ tooltip }}
|
|
@@ -57,8 +58,8 @@ export default defineComponent({
|
|
|
57
58
|
},
|
|
58
59
|
computed: {
|
|
59
60
|
iconSize(): string {
|
|
60
|
-
const fontSize =
|
|
61
|
-
return `${fontSize - 2 < 0 ? 0 : fontSize -
|
|
61
|
+
const fontSize = parseInt(this.fontSize)
|
|
62
|
+
return `${fontSize - 2 < 0 ? 0 : fontSize - 6}px`
|
|
62
63
|
},
|
|
63
64
|
cssFontSize(): Record<string, string> {
|
|
64
65
|
return {
|
|
@@ -111,7 +112,6 @@ export default defineComponent({
|
|
|
111
112
|
display: flex;
|
|
112
113
|
align-items: center;
|
|
113
114
|
justify-content: center;
|
|
114
|
-
gap: 5px;
|
|
115
115
|
&--active {
|
|
116
116
|
color: var(--dl-color-secondary);
|
|
117
117
|
border-color: var(--dl-color-secondary) !important;
|
|
@@ -148,4 +148,7 @@ export default defineComponent({
|
|
|
148
148
|
cursor: pointer;
|
|
149
149
|
flex-grow: 1;
|
|
150
150
|
}
|
|
151
|
+
.info-icon {
|
|
152
|
+
margin: 0px 5px;
|
|
153
|
+
}
|
|
151
154
|
</style>
|
|
@@ -6,19 +6,17 @@
|
|
|
6
6
|
auto-close
|
|
7
7
|
outlined
|
|
8
8
|
split
|
|
9
|
-
label="
|
|
9
|
+
:label="outlinedLabel"
|
|
10
|
+
@handleSelectedItem="handleOutlinedSelect"
|
|
10
11
|
>
|
|
11
12
|
<dl-list>
|
|
12
|
-
<dl-list-item
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<dl-list-item clickable>
|
|
21
|
-
<dl-item-section> Articles </dl-item-section>
|
|
13
|
+
<dl-list-item
|
|
14
|
+
v-for="val in ['Photos', 'Videos', 'Articles']"
|
|
15
|
+
:key="val"
|
|
16
|
+
clickable
|
|
17
|
+
@click="handleOutlinedSelect(val)"
|
|
18
|
+
>
|
|
19
|
+
<dl-item-section> {{ val }} </dl-item-section>
|
|
22
20
|
</dl-list-item>
|
|
23
21
|
</dl-list>
|
|
24
22
|
</dl-dropdown-button>
|
|
@@ -47,19 +45,17 @@
|
|
|
47
45
|
|
|
48
46
|
<dl-dropdown-button
|
|
49
47
|
split
|
|
50
|
-
label="
|
|
48
|
+
:label="containedLabel"
|
|
49
|
+
auto-close
|
|
51
50
|
>
|
|
52
51
|
<dl-list>
|
|
53
|
-
<dl-list-item
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<dl-list-item clickable>
|
|
62
|
-
<dl-item-section> Articles </dl-item-section>
|
|
52
|
+
<dl-list-item
|
|
53
|
+
v-for="val in ['Photos', 'Videos', 'Articles']"
|
|
54
|
+
:key="val"
|
|
55
|
+
clickable
|
|
56
|
+
@click="handleContainedSelect(val)"
|
|
57
|
+
>
|
|
58
|
+
<dl-item-section> {{ val }} </dl-item-section>
|
|
63
59
|
</dl-list-item>
|
|
64
60
|
</dl-list>
|
|
65
61
|
</dl-dropdown-button>
|
|
@@ -109,7 +105,7 @@
|
|
|
109
105
|
<dl-dropdown-button
|
|
110
106
|
auto-close
|
|
111
107
|
outlined
|
|
112
|
-
label="
|
|
108
|
+
:label="outlinedLabel"
|
|
113
109
|
>
|
|
114
110
|
<dl-list>
|
|
115
111
|
<dl-list-item clickable>
|
|
@@ -149,7 +145,7 @@
|
|
|
149
145
|
|
|
150
146
|
<dl-dropdown-button
|
|
151
147
|
auto-close
|
|
152
|
-
label="
|
|
148
|
+
:label="containedLabel"
|
|
153
149
|
max-height="210px"
|
|
154
150
|
>
|
|
155
151
|
<dl-list>
|
|
@@ -290,6 +286,7 @@
|
|
|
290
286
|
:label="arrowNavigationLabel"
|
|
291
287
|
main-button-style="width: 150px;"
|
|
292
288
|
:overflow="true"
|
|
289
|
+
disabled
|
|
293
290
|
:no-wrap="true"
|
|
294
291
|
tooltip="Tooltip message"
|
|
295
292
|
:arrow-nav-items="listItems"
|
|
@@ -339,6 +336,8 @@ export default defineComponent({
|
|
|
339
336
|
const name = ref('Dropdown Button Controlled')
|
|
340
337
|
const showing = ref(false)
|
|
341
338
|
const arrowNavigationLabel = ref('Arrow Navigation Label')
|
|
339
|
+
const outlinedLabel = ref('Outlined Label')
|
|
340
|
+
const containedLabel = ref('Contained Label')
|
|
342
341
|
|
|
343
342
|
const listItems = ref([
|
|
344
343
|
'New tab',
|
|
@@ -354,6 +353,12 @@ export default defineComponent({
|
|
|
354
353
|
arrowNavigationLabel.value = value
|
|
355
354
|
showing.value = false
|
|
356
355
|
}
|
|
356
|
+
const handleOutlinedSelect = (value: string) =>
|
|
357
|
+
(outlinedLabel.value = value)
|
|
358
|
+
|
|
359
|
+
const handleContainedSelect = (value: string) =>
|
|
360
|
+
(containedLabel.value = value)
|
|
361
|
+
|
|
357
362
|
const onClose = (newName: string) => {
|
|
358
363
|
name.value = newName
|
|
359
364
|
showing.value = false
|
|
@@ -378,8 +383,12 @@ export default defineComponent({
|
|
|
378
383
|
showing,
|
|
379
384
|
setHighlightedIndex,
|
|
380
385
|
handleSelectedItem,
|
|
386
|
+
handleOutlinedSelect,
|
|
387
|
+
handleContainedSelect,
|
|
381
388
|
highlightedIndex,
|
|
382
|
-
arrowNavigationLabel
|
|
389
|
+
arrowNavigationLabel,
|
|
390
|
+
outlinedLabel,
|
|
391
|
+
containedLabel
|
|
383
392
|
}
|
|
384
393
|
}
|
|
385
394
|
})
|