@dataloop-ai/components 0.17.0 → 0.17.1
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
|
@@ -380,8 +380,7 @@ export default defineComponent({
|
|
|
380
380
|
line-height: 1;
|
|
381
381
|
z-index: 0;
|
|
382
382
|
user-select: none !important;
|
|
383
|
-
|
|
384
|
-
gap: var(--dl-button-gap, 7px);
|
|
383
|
+
gap: var(--dl-button-content-gap, 7px);
|
|
385
384
|
}
|
|
386
385
|
|
|
387
386
|
.dl-chip.first-letter-capitalized {
|
|
@@ -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) {
|
|
@@ -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
|
|