@dataloop-ai/components 0.19.256 → 0.19.258
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 +2 -2
- package/src/components/basic/DlPopup/DlPopup.vue +6 -20
- package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue +11 -4
- package/src/components/essential/DlMenu/DlMenu.vue +3 -1
- package/src/demos/DlMenuDemo.vue +31 -90
- package/src/demos/DlPopupDemo.vue +9 -24
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataloop-ai/components",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.258",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": "./index.ts",
|
|
6
6
|
"./models": "./models.ts",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@dataloop-ai/icons": "^3.0.
|
|
25
|
+
"@dataloop-ai/icons": "^3.0.84",
|
|
26
26
|
"@types/flat": "^5.0.2",
|
|
27
27
|
"@types/lodash": "^4.14.184",
|
|
28
28
|
"@types/sortablejs": "^1.15.7",
|
|
@@ -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>
|
|
@@ -204,7 +204,6 @@ import {
|
|
|
204
204
|
getGradationValues,
|
|
205
205
|
validateMatrix,
|
|
206
206
|
setZoom,
|
|
207
|
-
getCellWidth,
|
|
208
207
|
flattenConfusionMatrix
|
|
209
208
|
} from './utils'
|
|
210
209
|
import { debounce, isObject } from 'lodash'
|
|
@@ -421,7 +420,7 @@ export default defineComponent({
|
|
|
421
420
|
(isObject(el) ? el.title : `${el}`).length
|
|
422
421
|
)
|
|
423
422
|
)
|
|
424
|
-
this.rotateXLabels = longest * 12 >
|
|
423
|
+
this.rotateXLabels = longest * 12 > this.getMatrixCellWidth()
|
|
425
424
|
},
|
|
426
425
|
handleResizeObserver(options: { dispose?: boolean } = {}) {
|
|
427
426
|
if (this.isDisposed) return
|
|
@@ -466,7 +465,7 @@ export default defineComponent({
|
|
|
466
465
|
ctx.matrix.length / (brush.max - brush.min),
|
|
467
466
|
ctx.$refs.matrix
|
|
468
467
|
)
|
|
469
|
-
const scroll = brush.min *
|
|
468
|
+
const scroll = brush.min * ctx.getMatrixCellWidth()
|
|
470
469
|
const container = ctx.$refs.matrixWrapper
|
|
471
470
|
container.scroll(scroll, 0)
|
|
472
471
|
ctx.currentBrushState = brush
|
|
@@ -476,7 +475,15 @@ export default defineComponent({
|
|
|
476
475
|
),
|
|
477
476
|
resizeYAxis() {
|
|
478
477
|
const yAxis = this.$refs.yAxis as HTMLElement
|
|
479
|
-
yAxis.style.height = `${
|
|
478
|
+
yAxis.style.height = `${this.getMatrixWidth()}px`
|
|
479
|
+
},
|
|
480
|
+
getMatrixWidth() {
|
|
481
|
+
const matrixElement = this.$refs.matrix as HTMLElement
|
|
482
|
+
const width = matrixElement.getBoundingClientRect().width
|
|
483
|
+
return width
|
|
484
|
+
},
|
|
485
|
+
getMatrixCellWidth() {
|
|
486
|
+
return this.getMatrixWidth() / this.matrix.length
|
|
480
487
|
},
|
|
481
488
|
handleMatrixScroll(e: MouseEvent | UIEvent) {
|
|
482
489
|
const target = e.target as HTMLElement
|
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>
|