@dataloop-ai/components 0.18.118 → 0.18.119
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/compound/DlTable/DlTable.vue +138 -28
- package/src/components/compound/DlTable/hooks/tableColumnSelection.ts +3 -1
- package/src/components/compound/DlTable/types.ts +1 -0
- package/src/components/compound/DlTable/utils/props.ts +0 -1
- package/src/demos/DlTableDemo.vue +9 -4
package/package.json
CHANGED
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
|
|
112
112
|
<slot
|
|
113
113
|
v-for="col in computedCols"
|
|
114
|
-
v-bind="getHeaderScope({ col })"
|
|
114
|
+
v-bind="getHeaderScope({ col, onThClick })"
|
|
115
115
|
:name="
|
|
116
116
|
hasSlotByName(`header-cell-${col.name}`)
|
|
117
117
|
? `header-cell-${col.name}`
|
|
@@ -121,12 +121,58 @@
|
|
|
121
121
|
<DlTh
|
|
122
122
|
:key="col.name"
|
|
123
123
|
:props="getHeaderScope({ col })"
|
|
124
|
+
@click="onThClick($event, col.name)"
|
|
124
125
|
>
|
|
125
|
-
|
|
126
|
+
<div
|
|
127
|
+
style="
|
|
128
|
+
width: 100%;
|
|
129
|
+
display: flex;
|
|
130
|
+
align-items: center;
|
|
131
|
+
gap: 2px;
|
|
132
|
+
"
|
|
133
|
+
>
|
|
134
|
+
{{ col.label }}
|
|
135
|
+
<dl-icon
|
|
136
|
+
v-if="col.hint"
|
|
137
|
+
icon="icon-dl-info"
|
|
138
|
+
size="10px"
|
|
139
|
+
>
|
|
140
|
+
<dl-tooltip>
|
|
141
|
+
{{ col.hint }}
|
|
142
|
+
</dl-tooltip>
|
|
143
|
+
</dl-icon>
|
|
144
|
+
</div>
|
|
126
145
|
</DlTh>
|
|
127
146
|
</slot>
|
|
147
|
+
<DlTh
|
|
148
|
+
v-if="hasVisibleColumns"
|
|
149
|
+
key="header-cell-visible-columns"
|
|
150
|
+
>
|
|
151
|
+
<dl-button
|
|
152
|
+
text-color="dl-color-medium"
|
|
153
|
+
flat
|
|
154
|
+
icon="icon-dl-column"
|
|
155
|
+
>
|
|
156
|
+
<dl-menu>
|
|
157
|
+
<dl-list separator>
|
|
158
|
+
<dl-option-group
|
|
159
|
+
:model-value="
|
|
160
|
+
computedVisibleCols
|
|
161
|
+
"
|
|
162
|
+
:options="groupOptions"
|
|
163
|
+
:left-label="true"
|
|
164
|
+
max-width="250px"
|
|
165
|
+
type="switch"
|
|
166
|
+
class="table-options"
|
|
167
|
+
@update:model-value="
|
|
168
|
+
handleVisibleColumnsUpdate
|
|
169
|
+
"
|
|
170
|
+
/>
|
|
171
|
+
</dl-list>
|
|
172
|
+
</dl-menu>
|
|
173
|
+
</dl-button>
|
|
174
|
+
</DlTh>
|
|
128
175
|
</DlTr>
|
|
129
|
-
|
|
130
176
|
<tr
|
|
131
177
|
v-if="loading && !hasLoadingSlot"
|
|
132
178
|
class="dl-table__progress"
|
|
@@ -241,31 +287,54 @@
|
|
|
241
287
|
/>
|
|
242
288
|
</slot>
|
|
243
289
|
</td>
|
|
244
|
-
|
|
245
|
-
<
|
|
290
|
+
|
|
291
|
+
<DlTd
|
|
246
292
|
v-for="col in computedCols"
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
row: props.item,
|
|
251
|
-
pageIndex: props.pageIndex,
|
|
252
|
-
col
|
|
253
|
-
})
|
|
254
|
-
"
|
|
255
|
-
:name="
|
|
256
|
-
hasSlotByName(`body-cell-${col.name}`)
|
|
257
|
-
? `body-cell-${col.name}`
|
|
258
|
-
: 'body-cell'
|
|
259
|
-
"
|
|
293
|
+
:key="col.name"
|
|
294
|
+
:class="col.tdClass(props.item)"
|
|
295
|
+
:style="col.tdStyle(props.item)"
|
|
260
296
|
>
|
|
261
|
-
<
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
297
|
+
<slot
|
|
298
|
+
v-bind="
|
|
299
|
+
getBodyCellScope({
|
|
300
|
+
key: getRowKey(props.item),
|
|
301
|
+
row: props.item,
|
|
302
|
+
pageIndex: props.pageIndex,
|
|
303
|
+
col
|
|
304
|
+
})
|
|
305
|
+
"
|
|
306
|
+
:name="
|
|
307
|
+
hasSlotByName(
|
|
308
|
+
`body-cell-${col.name}`
|
|
309
|
+
)
|
|
310
|
+
? `body-cell-${col.name}`
|
|
311
|
+
: 'body-cell'
|
|
312
|
+
"
|
|
265
313
|
>
|
|
266
314
|
{{ getCellValue(col, props.item) }}
|
|
267
|
-
</
|
|
268
|
-
</
|
|
315
|
+
</slot>
|
|
316
|
+
</DlTd>
|
|
317
|
+
<DlTd
|
|
318
|
+
v-if="hasVisibleColumns"
|
|
319
|
+
key="body-cell-row-actions"
|
|
320
|
+
>
|
|
321
|
+
<slot
|
|
322
|
+
v-bind="
|
|
323
|
+
getBodyCellScope({
|
|
324
|
+
key: getRowKey(props.item),
|
|
325
|
+
row: props.item,
|
|
326
|
+
pageIndex: props.pageIndex
|
|
327
|
+
})
|
|
328
|
+
"
|
|
329
|
+
:name="
|
|
330
|
+
hasSlotByName(
|
|
331
|
+
`body-cell-row-actions`
|
|
332
|
+
)
|
|
333
|
+
? `body-cell-row-actions`
|
|
334
|
+
: 'body-cell'
|
|
335
|
+
"
|
|
336
|
+
/>
|
|
337
|
+
</DlTd>
|
|
269
338
|
</DlTr>
|
|
270
339
|
</slot>
|
|
271
340
|
</template>
|
|
@@ -353,12 +422,30 @@
|
|
|
353
422
|
:props="getHeaderScope({ col })"
|
|
354
423
|
@click="onThClick($event, col.name)"
|
|
355
424
|
>
|
|
356
|
-
|
|
425
|
+
<div
|
|
426
|
+
style="
|
|
427
|
+
width: 100%;
|
|
428
|
+
display: flex;
|
|
429
|
+
align-items: center;
|
|
430
|
+
gap: 2px;
|
|
431
|
+
"
|
|
432
|
+
>
|
|
433
|
+
{{ col.label }}
|
|
434
|
+
<dl-icon
|
|
435
|
+
v-if="col.hint"
|
|
436
|
+
icon="icon-dl-info"
|
|
437
|
+
size="10px"
|
|
438
|
+
>
|
|
439
|
+
<dl-tooltip>
|
|
440
|
+
{{ col.hint }}
|
|
441
|
+
</dl-tooltip>
|
|
442
|
+
</dl-icon>
|
|
443
|
+
</div>
|
|
357
444
|
</DlTh>
|
|
358
445
|
</slot>
|
|
359
446
|
<DlTh
|
|
360
|
-
v-if="
|
|
361
|
-
key="
|
|
447
|
+
v-if="hasVisibleColumns"
|
|
448
|
+
key="header-cell-visible-columns"
|
|
362
449
|
>
|
|
363
450
|
<dl-button
|
|
364
451
|
text-color="dl-color-medium"
|
|
@@ -511,6 +598,27 @@
|
|
|
511
598
|
{{ getCellValue(col, row) }}
|
|
512
599
|
</slot>
|
|
513
600
|
</DlTd>
|
|
601
|
+
<DlTd
|
|
602
|
+
v-if="hasVisibleColumns"
|
|
603
|
+
key="body-cell-row-actions"
|
|
604
|
+
>
|
|
605
|
+
<slot
|
|
606
|
+
v-bind="
|
|
607
|
+
getBodyCellScope({
|
|
608
|
+
key: getRowKey(row),
|
|
609
|
+
row,
|
|
610
|
+
pageIndex
|
|
611
|
+
})
|
|
612
|
+
"
|
|
613
|
+
:name="
|
|
614
|
+
hasSlotByName(
|
|
615
|
+
`body-cell-row-actions`
|
|
616
|
+
)
|
|
617
|
+
? `body-cell-row-actions`
|
|
618
|
+
: 'body-cell'
|
|
619
|
+
"
|
|
620
|
+
/>
|
|
621
|
+
</DlTd>
|
|
514
622
|
</DlTr>
|
|
515
623
|
</slot>
|
|
516
624
|
</slot>
|
|
@@ -639,6 +747,7 @@ import {
|
|
|
639
747
|
DlMenu,
|
|
640
748
|
DlList
|
|
641
749
|
} from '../../essential'
|
|
750
|
+
import { DlTooltip } from '../../shared'
|
|
642
751
|
import { ResizableManager } from './utils'
|
|
643
752
|
import { DlButton } from '../../basic'
|
|
644
753
|
import DlOptionGroup from '../DlOptionGroup/DlOptionGroup.vue'
|
|
@@ -668,7 +777,8 @@ export default defineComponent({
|
|
|
668
777
|
DlButton,
|
|
669
778
|
DlOptionGroup,
|
|
670
779
|
DlMenu,
|
|
671
|
-
DlList
|
|
780
|
+
DlList,
|
|
781
|
+
DlTooltip
|
|
672
782
|
},
|
|
673
783
|
props,
|
|
674
784
|
emits,
|
|
@@ -5,7 +5,9 @@ import { DlTableProps, DlTableColumn, DlTableRow } from '../types'
|
|
|
5
5
|
import { TablePagination } from './tablePagination'
|
|
6
6
|
|
|
7
7
|
export const useTableColumnSelectionProps = {
|
|
8
|
-
|
|
8
|
+
// todo: fix later the
|
|
9
|
+
visibleColumns: { type: Array, required: false, default: null as any },
|
|
10
|
+
hasVisibleColumns: Boolean
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
export function useTableColumnSelection(
|
|
@@ -409,13 +409,17 @@
|
|
|
409
409
|
</DlTable>
|
|
410
410
|
</div>
|
|
411
411
|
<div>
|
|
412
|
-
<p>With
|
|
412
|
+
<p>With visible columns</p>
|
|
413
413
|
<DlTable
|
|
414
414
|
:rows="tableRows"
|
|
415
415
|
:columns="tableColumns"
|
|
416
416
|
title="Editable Columns"
|
|
417
|
-
has-
|
|
418
|
-
|
|
417
|
+
has-visible-columns
|
|
418
|
+
>
|
|
419
|
+
<template #body-cell-row-actions="{ row }">
|
|
420
|
+
{{ row }} actiosnsss
|
|
421
|
+
</template>
|
|
422
|
+
</DlTable>
|
|
419
423
|
</div>
|
|
420
424
|
</div>
|
|
421
425
|
<div>
|
|
@@ -451,7 +455,8 @@ const columns = [
|
|
|
451
455
|
align: 'left',
|
|
452
456
|
field: 'name',
|
|
453
457
|
sortable: true,
|
|
454
|
-
textTransform: 'uppercase'
|
|
458
|
+
textTransform: 'uppercase',
|
|
459
|
+
hint: 'test hint'
|
|
455
460
|
},
|
|
456
461
|
{
|
|
457
462
|
name: 'calories',
|