@dataloop-ai/components 0.19.255 → 0.19.257
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,5 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<dl-menu
|
|
3
|
+
:id="uuid"
|
|
3
4
|
ref="menuRef"
|
|
4
5
|
v-bind="menuProps"
|
|
5
6
|
:model-value="modelV"
|
|
@@ -27,16 +28,10 @@
|
|
|
27
28
|
:with-close-button="withCloseButton"
|
|
28
29
|
@close-button-click="handleCloseClick"
|
|
29
30
|
>
|
|
30
|
-
<template
|
|
31
|
-
v-if="hasHeaderSlot"
|
|
32
|
-
#header
|
|
33
|
-
>
|
|
31
|
+
<template v-if="hasHeaderSlot" #header>
|
|
34
32
|
<slot name="header" />
|
|
35
33
|
</template>
|
|
36
|
-
<template
|
|
37
|
-
v-if="hasCloseButtonSlot"
|
|
38
|
-
#close-button
|
|
39
|
-
>
|
|
34
|
+
<template v-if="hasCloseButtonSlot" #close-button>
|
|
40
35
|
<slot name="close-button" />
|
|
41
36
|
</template>
|
|
42
37
|
</popup-header>
|
|
@@ -46,21 +41,12 @@
|
|
|
46
41
|
v-if="isEmpty && emptyStateProps"
|
|
47
42
|
v-bind="emptyStateProps"
|
|
48
43
|
>
|
|
49
|
-
<template
|
|
50
|
-
v-
|
|
51
|
-
#[slot]="props"
|
|
52
|
-
>
|
|
53
|
-
<slot
|
|
54
|
-
:name="slot"
|
|
55
|
-
v-bind="props"
|
|
56
|
-
/>
|
|
44
|
+
<template v-for="(_, slot) in $slots" #[slot]="props">
|
|
45
|
+
<slot :name="slot" v-bind="props" />
|
|
57
46
|
</template>
|
|
58
47
|
</dl-empty-state>
|
|
59
48
|
</div>
|
|
60
|
-
<div
|
|
61
|
-
v-if="hasFooterSlot"
|
|
62
|
-
class="popup-footer"
|
|
63
|
-
>
|
|
49
|
+
<div v-if="hasFooterSlot" class="popup-footer">
|
|
64
50
|
<slot name="footer" />
|
|
65
51
|
</div>
|
|
66
52
|
</dl-menu>
|
|
@@ -110,6 +110,7 @@
|
|
|
110
110
|
:tooltip="tooltip"
|
|
111
111
|
:max-width="maxWidth"
|
|
112
112
|
:hover-text-color="mainButtonHoverColor"
|
|
113
|
+
:size="mainButtonFontSize"
|
|
113
114
|
@click="onClick"
|
|
114
115
|
>
|
|
115
116
|
<div class="dl-button-dropdown--simple__title">
|
|
@@ -117,7 +118,7 @@
|
|
|
117
118
|
:class="{
|
|
118
119
|
'dl-button-no-wrap': noWrap
|
|
119
120
|
}"
|
|
120
|
-
style="margin-right:
|
|
121
|
+
style="margin-right: 6px"
|
|
121
122
|
>
|
|
122
123
|
{{ label }}
|
|
123
124
|
</span>
|
|
@@ -259,6 +260,11 @@ export default defineComponent({
|
|
|
259
260
|
type: String,
|
|
260
261
|
required: false,
|
|
261
262
|
default: null
|
|
263
|
+
},
|
|
264
|
+
mainButtonFontSize: {
|
|
265
|
+
type: String,
|
|
266
|
+
required: false,
|
|
267
|
+
default: 'm'
|
|
262
268
|
}
|
|
263
269
|
},
|
|
264
270
|
emits: [
|
package/src/demos/DlMenuDemo.vue
CHANGED
|
@@ -2,17 +2,10 @@
|
|
|
2
2
|
<div>
|
|
3
3
|
<dl-button label="Basic Menu">
|
|
4
4
|
<dl-menu>
|
|
5
|
-
<dl-list
|
|
6
|
-
bordered
|
|
7
|
-
separator
|
|
8
|
-
>
|
|
5
|
+
<dl-list bordered separator>
|
|
9
6
|
<dl-list-item> Default list item </dl-list-item>
|
|
10
|
-
<dl-list-item disabled>
|
|
11
|
-
|
|
12
|
-
</dl-list-item>
|
|
13
|
-
<dl-list-item clickable>
|
|
14
|
-
Clickable list item
|
|
15
|
-
</dl-list-item>
|
|
7
|
+
<dl-list-item disabled> Disabled list item </dl-list-item>
|
|
8
|
+
<dl-list-item clickable> Clickable list item </dl-list-item>
|
|
16
9
|
<dl-list-item
|
|
17
10
|
clickable
|
|
18
11
|
disabled
|
|
@@ -28,9 +21,7 @@
|
|
|
28
21
|
start-icon="icon-dl-search"
|
|
29
22
|
end-icon="icon-dl-id"
|
|
30
23
|
>
|
|
31
|
-
<dl-item-section side>
|
|
32
|
-
Left text
|
|
33
|
-
</dl-item-section>
|
|
24
|
+
<dl-item-section side> Left text </dl-item-section>
|
|
34
25
|
<dl-item-section no-wrap>
|
|
35
26
|
main content
|
|
36
27
|
</dl-item-section>
|
|
@@ -47,10 +38,7 @@
|
|
|
47
38
|
item with custom icon colors
|
|
48
39
|
</dl-item-section>
|
|
49
40
|
</dl-list-item>
|
|
50
|
-
<dl-list-item
|
|
51
|
-
clickable
|
|
52
|
-
bordered
|
|
53
|
-
>
|
|
41
|
+
<dl-list-item clickable bordered>
|
|
54
42
|
<dl-item-section side>
|
|
55
43
|
<dl-icon icon="icon-dl-id" />
|
|
56
44
|
</dl-item-section>
|
|
@@ -60,14 +48,8 @@
|
|
|
60
48
|
<dl-item-section side>
|
|
61
49
|
<dl-icon icon="icon-dl-id" />
|
|
62
50
|
</dl-item-section>
|
|
63
|
-
<dl-menu
|
|
64
|
-
|
|
65
|
-
self="top start"
|
|
66
|
-
>
|
|
67
|
-
<dl-list
|
|
68
|
-
bordered
|
|
69
|
-
separator
|
|
70
|
-
>
|
|
51
|
+
<dl-menu anchor="top end" self="top start">
|
|
52
|
+
<dl-list bordered separator>
|
|
71
53
|
<dl-list-item
|
|
72
54
|
v-for="n in 3"
|
|
73
55
|
:key="n"
|
|
@@ -109,17 +91,10 @@
|
|
|
109
91
|
<dl-button label="Basic Menu With SubText">
|
|
110
92
|
This is a menu button
|
|
111
93
|
<dl-menu>
|
|
112
|
-
<dl-list
|
|
113
|
-
bordered
|
|
114
|
-
separator
|
|
115
|
-
>
|
|
94
|
+
<dl-list bordered separator>
|
|
116
95
|
<dl-list-item> Default list item </dl-list-item>
|
|
117
|
-
<dl-list-item disabled>
|
|
118
|
-
|
|
119
|
-
</dl-list-item>
|
|
120
|
-
<dl-list-item clickable>
|
|
121
|
-
Clickable list item
|
|
122
|
-
</dl-list-item>
|
|
96
|
+
<dl-list-item disabled> Disabled list item </dl-list-item>
|
|
97
|
+
<dl-list-item clickable> Clickable list item </dl-list-item>
|
|
123
98
|
<dl-list-item
|
|
124
99
|
clickable
|
|
125
100
|
disabled
|
|
@@ -135,9 +110,7 @@
|
|
|
135
110
|
start-icon="icon-dl-search"
|
|
136
111
|
end-icon="icon-dl-id"
|
|
137
112
|
>
|
|
138
|
-
<dl-item-section side>
|
|
139
|
-
Left text
|
|
140
|
-
</dl-item-section>
|
|
113
|
+
<dl-item-section side> Left text </dl-item-section>
|
|
141
114
|
<dl-item-section no-wrap>
|
|
142
115
|
main content
|
|
143
116
|
</dl-item-section>
|
|
@@ -154,10 +127,7 @@
|
|
|
154
127
|
item with custom icon colors
|
|
155
128
|
</dl-item-section>
|
|
156
129
|
</dl-list-item>
|
|
157
|
-
<dl-list-item
|
|
158
|
-
clickable
|
|
159
|
-
bordered
|
|
160
|
-
>
|
|
130
|
+
<dl-list-item clickable bordered>
|
|
161
131
|
<dl-item-section side>
|
|
162
132
|
<dl-icon icon="icon-dl-id" />
|
|
163
133
|
</dl-item-section>
|
|
@@ -167,14 +137,8 @@
|
|
|
167
137
|
<dl-item-section side>
|
|
168
138
|
<dl-icon icon="icon-dl-id" />
|
|
169
139
|
</dl-item-section>
|
|
170
|
-
<dl-menu
|
|
171
|
-
|
|
172
|
-
self="top start"
|
|
173
|
-
>
|
|
174
|
-
<dl-list
|
|
175
|
-
bordered
|
|
176
|
-
separator
|
|
177
|
-
>
|
|
140
|
+
<dl-menu anchor="top end" self="top start">
|
|
141
|
+
<dl-list bordered separator>
|
|
178
142
|
<dl-list-item
|
|
179
143
|
v-for="n in 3"
|
|
180
144
|
:key="n"
|
|
@@ -214,24 +178,12 @@
|
|
|
214
178
|
</dl-button>
|
|
215
179
|
|
|
216
180
|
<div style="width: 300px; height: 50px; background-color: yellow">
|
|
217
|
-
<p style="color: blue">
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
<dl-menu
|
|
221
|
-
max-height="300px"
|
|
222
|
-
context-menu
|
|
223
|
-
>
|
|
224
|
-
<dl-list
|
|
225
|
-
bordered
|
|
226
|
-
separator
|
|
227
|
-
>
|
|
181
|
+
<p style="color: blue">Context-menu</p>
|
|
182
|
+
<dl-menu max-height="300px" context-menu>
|
|
183
|
+
<dl-list bordered separator>
|
|
228
184
|
<dl-list-item> Default list item </dl-list-item>
|
|
229
|
-
<dl-list-item disabled>
|
|
230
|
-
|
|
231
|
-
</dl-list-item>
|
|
232
|
-
<dl-list-item clickable>
|
|
233
|
-
Clickable list item
|
|
234
|
-
</dl-list-item>
|
|
185
|
+
<dl-list-item disabled> Disabled list item </dl-list-item>
|
|
186
|
+
<dl-list-item clickable> Clickable list item </dl-list-item>
|
|
235
187
|
<dl-list-item
|
|
236
188
|
clickable
|
|
237
189
|
disabled
|
|
@@ -247,9 +199,7 @@
|
|
|
247
199
|
start-icon="icon-dl-search"
|
|
248
200
|
end-icon="icon-dl-id"
|
|
249
201
|
>
|
|
250
|
-
<dl-item-section side>
|
|
251
|
-
Left text
|
|
252
|
-
</dl-item-section>
|
|
202
|
+
<dl-item-section side> Left text </dl-item-section>
|
|
253
203
|
<dl-item-section no-wrap>
|
|
254
204
|
main content
|
|
255
205
|
</dl-item-section>
|
|
@@ -266,10 +216,7 @@
|
|
|
266
216
|
item with custom icon colors
|
|
267
217
|
</dl-item-section>
|
|
268
218
|
</dl-list-item>
|
|
269
|
-
<dl-list-item
|
|
270
|
-
clickable
|
|
271
|
-
bordered
|
|
272
|
-
>
|
|
219
|
+
<dl-list-item clickable bordered>
|
|
273
220
|
<dl-item-section side>
|
|
274
221
|
<dl-icon icon="icon-dl-id" />
|
|
275
222
|
</dl-item-section>
|
|
@@ -279,14 +226,8 @@
|
|
|
279
226
|
<dl-item-section side>
|
|
280
227
|
<dl-icon icon="icon-dl-id" />
|
|
281
228
|
</dl-item-section>
|
|
282
|
-
<dl-menu
|
|
283
|
-
|
|
284
|
-
self="top start"
|
|
285
|
-
>
|
|
286
|
-
<dl-list
|
|
287
|
-
bordered
|
|
288
|
-
separator
|
|
289
|
-
>
|
|
229
|
+
<dl-menu anchor="top end" self="top start">
|
|
230
|
+
<dl-list bordered separator>
|
|
290
231
|
<dl-list-item
|
|
291
232
|
v-for="i in 3"
|
|
292
233
|
:key="i"
|
|
@@ -411,10 +352,7 @@
|
|
|
411
352
|
</dl-menu>
|
|
412
353
|
</dl-button>
|
|
413
354
|
|
|
414
|
-
<dl-button
|
|
415
|
-
color="brown"
|
|
416
|
-
label="Max Height Menu"
|
|
417
|
-
>
|
|
355
|
+
<dl-button color="brown" label="Max Height Menu">
|
|
418
356
|
<dl-menu max-height="130px">
|
|
419
357
|
<dl-list style="min-width: 100px">
|
|
420
358
|
<dl-list-item clickable>
|
|
@@ -480,10 +418,7 @@
|
|
|
480
418
|
|
|
481
419
|
<h4>Arrow navigation</h4>
|
|
482
420
|
<dl-button :label="arrowNavigationLabel">
|
|
483
|
-
<dl-menu
|
|
484
|
-
@show="onShow"
|
|
485
|
-
@hide="onHide"
|
|
486
|
-
>
|
|
421
|
+
<dl-menu @show="onShow" @hide="onHide">
|
|
487
422
|
<dl-list style="min-width: 100px">
|
|
488
423
|
<dl-list-item
|
|
489
424
|
v-for="(item, index) in listItems"
|
|
@@ -529,6 +464,7 @@
|
|
|
529
464
|
<h4>With model as button: {{ isOpen }}</h4>
|
|
530
465
|
<dl-button label="test">
|
|
531
466
|
<dl-menu
|
|
467
|
+
id="TestID"
|
|
532
468
|
v-model="isOpen"
|
|
533
469
|
max-height="250px"
|
|
534
470
|
self="bottom middle"
|
|
@@ -736,3 +672,8 @@ export default defineComponent({
|
|
|
736
672
|
}
|
|
737
673
|
})
|
|
738
674
|
</script>
|
|
675
|
+
<style>
|
|
676
|
+
#TestID {
|
|
677
|
+
background-color: red;
|
|
678
|
+
}
|
|
679
|
+
</style>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<div>
|
|
3
3
|
<dl-button label="Controlled Popup">
|
|
4
4
|
<dl-popup
|
|
5
|
+
id="TestID"
|
|
5
6
|
:model-value="showing"
|
|
6
7
|
class="TestID"
|
|
7
8
|
title="Edit Item Description"
|
|
@@ -20,9 +21,7 @@
|
|
|
20
21
|
width="203px"
|
|
21
22
|
/>
|
|
22
23
|
<template #footer>
|
|
23
|
-
<dl-button fluid>
|
|
24
|
-
Save
|
|
25
|
-
</dl-button>
|
|
24
|
+
<dl-button fluid> Save </dl-button>
|
|
26
25
|
</template>
|
|
27
26
|
</dl-popup>
|
|
28
27
|
</dl-button>
|
|
@@ -44,9 +43,7 @@
|
|
|
44
43
|
width="203px"
|
|
45
44
|
/>
|
|
46
45
|
<template #footer>
|
|
47
|
-
<dl-button fluid>
|
|
48
|
-
Save
|
|
49
|
-
</dl-button>
|
|
46
|
+
<dl-button fluid> Save </dl-button>
|
|
50
47
|
</template>
|
|
51
48
|
</dl-popup>
|
|
52
49
|
</dl-button>
|
|
@@ -94,9 +91,7 @@
|
|
|
94
91
|
</div>
|
|
95
92
|
</template>
|
|
96
93
|
<template #footer>
|
|
97
|
-
<dl-button fluid>
|
|
98
|
-
Save
|
|
99
|
-
</dl-button>
|
|
94
|
+
<dl-button fluid> Save </dl-button>
|
|
100
95
|
</template>
|
|
101
96
|
</dl-popup>
|
|
102
97
|
</dl-button>
|
|
@@ -125,9 +120,7 @@
|
|
|
125
120
|
/>
|
|
126
121
|
</template>
|
|
127
122
|
<template #footer>
|
|
128
|
-
<dl-button fluid>
|
|
129
|
-
Save
|
|
130
|
-
</dl-button>
|
|
123
|
+
<dl-button fluid> Save </dl-button>
|
|
131
124
|
</template>
|
|
132
125
|
</dl-popup>
|
|
133
126
|
</dl-button>
|
|
@@ -156,9 +149,7 @@
|
|
|
156
149
|
/>
|
|
157
150
|
</template>
|
|
158
151
|
<template #footer>
|
|
159
|
-
<dl-button fluid>
|
|
160
|
-
Save
|
|
161
|
-
</dl-button>
|
|
152
|
+
<dl-button fluid> Save </dl-button>
|
|
162
153
|
</template>
|
|
163
154
|
</dl-popup>
|
|
164
155
|
</dl-button>
|
|
@@ -187,9 +178,7 @@
|
|
|
187
178
|
/>
|
|
188
179
|
</template>
|
|
189
180
|
<template #footer>
|
|
190
|
-
<dl-button fluid>
|
|
191
|
-
Save
|
|
192
|
-
</dl-button>
|
|
181
|
+
<dl-button fluid> Save </dl-button>
|
|
193
182
|
</template>
|
|
194
183
|
</dl-popup>
|
|
195
184
|
</dl-button>
|
|
@@ -218,9 +207,7 @@
|
|
|
218
207
|
/>
|
|
219
208
|
</template>
|
|
220
209
|
<template #footer>
|
|
221
|
-
<dl-button fluid>
|
|
222
|
-
Save
|
|
223
|
-
</dl-button>
|
|
210
|
+
<dl-button fluid> Save </dl-button>
|
|
224
211
|
</template>
|
|
225
212
|
</dl-popup>
|
|
226
213
|
</dl-button>
|
|
@@ -251,9 +238,7 @@
|
|
|
251
238
|
/>
|
|
252
239
|
</template>
|
|
253
240
|
<template #footer>
|
|
254
|
-
<dl-button fluid>
|
|
255
|
-
Save
|
|
256
|
-
</dl-button>
|
|
241
|
+
<dl-button fluid> Save </dl-button>
|
|
257
242
|
</template>
|
|
258
243
|
</dl-popup>
|
|
259
244
|
</dl-button>
|