@dataloop-ai/components 0.18.118 → 0.18.120
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/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +30 -6
- package/src/components/compound/DlSearches/DlSmartSearch/types.ts +10 -0
- 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
|
@@ -349,7 +349,7 @@ export default defineComponent({
|
|
|
349
349
|
stringValue = value + ' '
|
|
350
350
|
}
|
|
351
351
|
|
|
352
|
-
|
|
352
|
+
debouncedSetInputValue(
|
|
353
353
|
clearPartlyTypedSuggestion(input.value.innerText, stringValue)
|
|
354
354
|
)
|
|
355
355
|
setCaret(input.value)
|
|
@@ -452,10 +452,38 @@ export default defineComponent({
|
|
|
452
452
|
}
|
|
453
453
|
}
|
|
454
454
|
|
|
455
|
+
const endsWithOperator = computed(() => {
|
|
456
|
+
const operators = ['>=', '<=', '!=', '=', '>', '<', 'IN', 'NOT-IN']
|
|
457
|
+
|
|
458
|
+
for (const op of operators) {
|
|
459
|
+
if (
|
|
460
|
+
searchQuery.value.endsWith(op) ||
|
|
461
|
+
searchQuery.value.endsWith(`${op} `)
|
|
462
|
+
) {
|
|
463
|
+
return true
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
return false
|
|
468
|
+
})
|
|
469
|
+
|
|
455
470
|
const onKeyPress = (e: KeyboardEvent) => {
|
|
456
|
-
if (e.key === 'Enter') {
|
|
471
|
+
if (e.code === 'Enter' || e.key === 'Enter') {
|
|
457
472
|
e.preventDefault()
|
|
458
473
|
e.stopPropagation()
|
|
474
|
+
|
|
475
|
+
if (showSuggestions.value || showDatePicker.value) {
|
|
476
|
+
return
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
if (endsWithOperator.value) {
|
|
480
|
+
return
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
if (!input.value.innerHTML.length) {
|
|
484
|
+
return
|
|
485
|
+
}
|
|
486
|
+
|
|
459
487
|
emit('search', updateJSONQuery())
|
|
460
488
|
showSuggestions.value = false
|
|
461
489
|
return
|
|
@@ -467,10 +495,6 @@ export default defineComponent({
|
|
|
467
495
|
}
|
|
468
496
|
|
|
469
497
|
const onInput = (e: Event) => {
|
|
470
|
-
if ((e as KeyboardEvent).key === 'Enter') {
|
|
471
|
-
return
|
|
472
|
-
}
|
|
473
|
-
|
|
474
498
|
const text = (e.target as HTMLElement).textContent
|
|
475
499
|
debouncedSetInputValue(text)
|
|
476
500
|
}
|
|
@@ -36,6 +36,16 @@ export type SyntaxColorSchema = {
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
export type DLSmartSearchOperators =
|
|
40
|
+
| '>='
|
|
41
|
+
| '<='
|
|
42
|
+
| '!='
|
|
43
|
+
| '='
|
|
44
|
+
| '>'
|
|
45
|
+
| '<'
|
|
46
|
+
| 'IN'
|
|
47
|
+
| 'NOT-IN'
|
|
48
|
+
|
|
39
49
|
import {
|
|
40
50
|
Alias as DlSmartSearchAlias,
|
|
41
51
|
Schema as DlSmartSearchSchema
|
|
@@ -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',
|