@dataloop-ai/components 0.16.62 → 0.16.64
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 +1 -1
- package/src/components/basic/DlButton/DlButton.vue +1 -2
- package/src/components/compound/DlDialogBox/DlDialogBox.vue +3 -3
- package/src/components/compound/DlSelect/DlSelect.vue +1 -1
- package/src/components/compound/DlTable/DlTable.vue +7 -5
- package/src/demos/DlDialogBoxDemo.vue +15 -1
- package/src/demos/DlSelectDemo.vue +104 -0
package/package.json
CHANGED
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
:style="{
|
|
16
16
|
width: Number(width) ? `${width}px` : width,
|
|
17
17
|
height: Number(height) ? `${height}px` : height,
|
|
18
|
-
transform: `translate(${draggableOptions.draggableX}px, ${draggableOptions.draggableY}px)
|
|
18
|
+
transform: `translate(${draggableOptions.draggableX}px, ${draggableOptions.draggableY}px)`,
|
|
19
|
+
maxHeight: !fullscreen && !fullHeight ? '90vh' : ''
|
|
19
20
|
}"
|
|
20
21
|
:class="{
|
|
21
22
|
'dialog-wrapper--fullscreen': fullscreen,
|
|
@@ -226,7 +227,6 @@ export default defineComponent({
|
|
|
226
227
|
display: flex;
|
|
227
228
|
flex-direction: column;
|
|
228
229
|
z-index: var(--dl-z-index-menu);
|
|
229
|
-
max-height: 90vh;
|
|
230
230
|
|
|
231
231
|
&--fullscreen {
|
|
232
232
|
margin: 0;
|
|
@@ -267,7 +267,7 @@ export default defineComponent({
|
|
|
267
267
|
}
|
|
268
268
|
|
|
269
269
|
.content {
|
|
270
|
-
padding: 10px 16px 30px 16px;
|
|
270
|
+
padding: var(--dl-dialog-box-content-padding, 10px 16px 30px 16px);
|
|
271
271
|
overflow: auto;
|
|
272
272
|
height: 100%;
|
|
273
273
|
|
|
@@ -476,7 +476,8 @@ import {
|
|
|
476
476
|
watch,
|
|
477
477
|
getCurrentInstance,
|
|
478
478
|
ComputedRef,
|
|
479
|
-
onMounted
|
|
479
|
+
onMounted,
|
|
480
|
+
toRef
|
|
480
481
|
} from 'vue-demi'
|
|
481
482
|
import {
|
|
482
483
|
useTablePagination,
|
|
@@ -865,12 +866,13 @@ export default defineComponent({
|
|
|
865
866
|
)
|
|
866
867
|
|
|
867
868
|
const { computedFilterMethod } = useTableFilter(props, setPagination)
|
|
869
|
+
const rowsPropRef = toRef(props, 'rows')
|
|
868
870
|
|
|
869
871
|
const { isRowExpanded, setExpanded, updateExpanded } =
|
|
870
872
|
useTableRowExpand(props, emit)
|
|
871
873
|
|
|
872
874
|
const filteredSortedRows = computed(() => {
|
|
873
|
-
let rows =
|
|
875
|
+
let rows = rowsPropRef.value as DlTableRow[]
|
|
874
876
|
|
|
875
877
|
if (rows.length === 0) {
|
|
876
878
|
return rows
|
|
@@ -889,7 +891,7 @@ export default defineComponent({
|
|
|
889
891
|
|
|
890
892
|
if (columnToSort.value !== null) {
|
|
891
893
|
rows = computedSortMethod.value(
|
|
892
|
-
|
|
894
|
+
rowsPropRef.value === rows ? rows.slice() : rows,
|
|
893
895
|
sortBy,
|
|
894
896
|
descending
|
|
895
897
|
)
|
|
@@ -908,7 +910,7 @@ export default defineComponent({
|
|
|
908
910
|
const { rowsPerPage } = computedPagination.value
|
|
909
911
|
|
|
910
912
|
if (rowsPerPage !== 0) {
|
|
911
|
-
if (firstRowIndex.value === 0 &&
|
|
913
|
+
if (firstRowIndex.value === 0 && rowsPropRef.value !== rows) {
|
|
912
914
|
if (rows.length > lastRowIndex.value) {
|
|
913
915
|
rows = rows.slice(0, lastRowIndex.value)
|
|
914
916
|
}
|
|
@@ -979,7 +981,7 @@ export default defineComponent({
|
|
|
979
981
|
() =>
|
|
980
982
|
multipleSelection.value === true &&
|
|
981
983
|
computedRows.value.length > 0 &&
|
|
982
|
-
computedRows.value.length <
|
|
984
|
+
computedRows.value.length < rowsPropRef.value.length
|
|
983
985
|
)
|
|
984
986
|
|
|
985
987
|
function onMultipleSelectionSet(val: boolean) {
|
|
@@ -4,6 +4,14 @@
|
|
|
4
4
|
v-model="draggable"
|
|
5
5
|
left-label="Draggable"
|
|
6
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
|
+
/>
|
|
7
15
|
<dl-button @click="openModal">
|
|
8
16
|
Open modal
|
|
9
17
|
</dl-button>
|
|
@@ -11,6 +19,8 @@
|
|
|
11
19
|
ref="modalOne"
|
|
12
20
|
v-model="isOpenedFirstModal"
|
|
13
21
|
:draggable="draggable"
|
|
22
|
+
:full-height="fullHeight"
|
|
23
|
+
:fullscreen="fullscreen"
|
|
14
24
|
>
|
|
15
25
|
<template #header>
|
|
16
26
|
<dl-dialog-box-header
|
|
@@ -136,6 +146,8 @@ export default defineComponent({
|
|
|
136
146
|
const modalOne = ref<any>(null)
|
|
137
147
|
const modalTwo = ref<any>(null)
|
|
138
148
|
const draggable = ref(true)
|
|
149
|
+
const fullscreen = ref(false)
|
|
150
|
+
const fullHeight = ref(false)
|
|
139
151
|
const isOpenedFirstModal = ref(false)
|
|
140
152
|
|
|
141
153
|
const openModal = () => {
|
|
@@ -178,7 +190,9 @@ export default defineComponent({
|
|
|
178
190
|
modalOne,
|
|
179
191
|
modalTwo,
|
|
180
192
|
isOpenedFirstModal,
|
|
181
|
-
draggable
|
|
193
|
+
draggable,
|
|
194
|
+
fullscreen,
|
|
195
|
+
fullHeight
|
|
182
196
|
}
|
|
183
197
|
}
|
|
184
198
|
})
|
|
@@ -202,6 +202,110 @@
|
|
|
202
202
|
</div>
|
|
203
203
|
</template>
|
|
204
204
|
</dl-select>
|
|
205
|
+
With tooltip
|
|
206
|
+
<dl-select
|
|
207
|
+
v-model="selectedOption"
|
|
208
|
+
:tooltip="'Test Me'"
|
|
209
|
+
:options="[
|
|
210
|
+
{
|
|
211
|
+
subLabel: 'not so high',
|
|
212
|
+
label: 'High',
|
|
213
|
+
value: 'high',
|
|
214
|
+
bgColor: 'dl-color-negative'
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
subLabel: 'not so medium',
|
|
218
|
+
label: 'Medium',
|
|
219
|
+
value: 'medium',
|
|
220
|
+
bgColor: 'dl-color-warning',
|
|
221
|
+
textColor: 'dl-color-darker'
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
subLabel: 'not so low',
|
|
225
|
+
label: 'Low',
|
|
226
|
+
value: 'low',
|
|
227
|
+
bgColor: 'dl-color-positive',
|
|
228
|
+
textColor: 'dl-color-darker'
|
|
229
|
+
}
|
|
230
|
+
]"
|
|
231
|
+
>
|
|
232
|
+
<template #option="scope">
|
|
233
|
+
<div style="padding: 5px 0px">
|
|
234
|
+
<div>{{ scope.opt.label }}</div>
|
|
235
|
+
<div>{{ scope.opt.subLabel }}</div>
|
|
236
|
+
</div>
|
|
237
|
+
</template>
|
|
238
|
+
</dl-select>
|
|
239
|
+
Small size
|
|
240
|
+
<dl-select
|
|
241
|
+
v-model="selectedOption"
|
|
242
|
+
:size="'s'"
|
|
243
|
+
:options="[
|
|
244
|
+
{
|
|
245
|
+
subLabel: 'not so high',
|
|
246
|
+
label: 'High',
|
|
247
|
+
value: 'high',
|
|
248
|
+
bgColor: 'dl-color-negative'
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
subLabel: 'not so medium',
|
|
252
|
+
label: 'Medium',
|
|
253
|
+
value: 'medium',
|
|
254
|
+
bgColor: 'dl-color-warning',
|
|
255
|
+
textColor: 'dl-color-darker'
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
subLabel: 'not so low',
|
|
259
|
+
label: 'Low',
|
|
260
|
+
value: 'low',
|
|
261
|
+
bgColor: 'dl-color-positive',
|
|
262
|
+
textColor: 'dl-color-darker'
|
|
263
|
+
}
|
|
264
|
+
]"
|
|
265
|
+
>
|
|
266
|
+
<template #option="scope">
|
|
267
|
+
<div style="padding: 5px 0px">
|
|
268
|
+
<div>{{ scope.opt.label }}</div>
|
|
269
|
+
<div>{{ scope.opt.subLabel }}</div>
|
|
270
|
+
</div>
|
|
271
|
+
</template>
|
|
272
|
+
</dl-select>
|
|
273
|
+
Small size with tooltip
|
|
274
|
+
<dl-select
|
|
275
|
+
v-model="selectedOption"
|
|
276
|
+
:size="'s'"
|
|
277
|
+
title="test"
|
|
278
|
+
tooltip="test me"
|
|
279
|
+
:options="[
|
|
280
|
+
{
|
|
281
|
+
subLabel: 'not so high',
|
|
282
|
+
label: 'High',
|
|
283
|
+
value: 'high',
|
|
284
|
+
bgColor: 'dl-color-negative'
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
subLabel: 'not so medium',
|
|
288
|
+
label: 'Medium',
|
|
289
|
+
value: 'medium',
|
|
290
|
+
bgColor: 'dl-color-warning',
|
|
291
|
+
textColor: 'dl-color-darker'
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
subLabel: 'not so low',
|
|
295
|
+
label: 'Low',
|
|
296
|
+
value: 'low',
|
|
297
|
+
bgColor: 'dl-color-positive',
|
|
298
|
+
textColor: 'dl-color-darker'
|
|
299
|
+
}
|
|
300
|
+
]"
|
|
301
|
+
>
|
|
302
|
+
<template #option="scope">
|
|
303
|
+
<div style="padding: 5px 0px">
|
|
304
|
+
<div>{{ scope.opt.label }}</div>
|
|
305
|
+
<div>{{ scope.opt.subLabel }}</div>
|
|
306
|
+
</div>
|
|
307
|
+
</template>
|
|
308
|
+
</dl-select>
|
|
205
309
|
</div>
|
|
206
310
|
</template>
|
|
207
311
|
|