@nexxtmove/ui 0.1.66 → 0.1.68
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/dist/index.d.ts +2 -0
- package/dist/index.js +420 -412
- package/package.json +1 -1
- package/src/components/Table/Table.vue +18 -2
package/package.json
CHANGED
|
@@ -18,6 +18,8 @@ export interface NexxtTableProps<
|
|
|
18
18
|
columns: TableColumn<TKey>[]
|
|
19
19
|
rows: TRow[]
|
|
20
20
|
selectable?: boolean
|
|
21
|
+
selectionMode?: 'single' | 'multiple'
|
|
22
|
+
selectOnRowClick?: boolean
|
|
21
23
|
loading?: boolean
|
|
22
24
|
}
|
|
23
25
|
|
|
@@ -31,7 +33,9 @@ defineSlots<
|
|
|
31
33
|
}
|
|
32
34
|
>()
|
|
33
35
|
|
|
34
|
-
const props = defineProps<NexxtTableProps<TKey, TRow>>()
|
|
36
|
+
const props = withDefaults(defineProps<NexxtTableProps<TKey, TRow>>(), {
|
|
37
|
+
selectionMode: 'multiple',
|
|
38
|
+
})
|
|
35
39
|
const emit = defineEmits<{
|
|
36
40
|
'row-click': [row: TRow]
|
|
37
41
|
}>()
|
|
@@ -52,10 +56,15 @@ const someSelected = computed(
|
|
|
52
56
|
const isRowSelected = (row: TRow) => selected.value.includes(row)
|
|
53
57
|
|
|
54
58
|
const toggleAll = () => {
|
|
59
|
+
if (props.selectionMode === 'single') return
|
|
55
60
|
selected.value = allSelected.value ? [] : [...props.rows]
|
|
56
61
|
}
|
|
57
62
|
|
|
58
63
|
const toggleRow = (row: TRow) => {
|
|
64
|
+
if (props.selectionMode === 'single') {
|
|
65
|
+
selected.value = isRowSelected(row) ? [] : [row]
|
|
66
|
+
return
|
|
67
|
+
}
|
|
59
68
|
selected.value = isRowSelected(row)
|
|
60
69
|
? selected.value.filter((r) => r !== row)
|
|
61
70
|
: [...selected.value, row]
|
|
@@ -84,7 +93,12 @@ const handleRowClick = (event: MouseEvent, rowIndex: number) => {
|
|
|
84
93
|
(el) => el.tagName && INTERACTIVE.includes(el.tagName.toLowerCase()),
|
|
85
94
|
)
|
|
86
95
|
if (isInteractive) return
|
|
87
|
-
|
|
96
|
+
|
|
97
|
+
if (props.selectable && props.selectOnRowClick) {
|
|
98
|
+
toggleRow(props.rows[rowIndex])
|
|
99
|
+
} else {
|
|
100
|
+
emit('row-click', props.rows[rowIndex])
|
|
101
|
+
}
|
|
88
102
|
}
|
|
89
103
|
|
|
90
104
|
const getRowRoundedClass = (rowIndex: number) => {
|
|
@@ -136,6 +150,7 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
|
|
|
136
150
|
aria-colindex="1"
|
|
137
151
|
>
|
|
138
152
|
<Checkbox
|
|
153
|
+
v-if="selectionMode === 'multiple'"
|
|
139
154
|
:model-value="allSelected"
|
|
140
155
|
:indeterminate="someSelected"
|
|
141
156
|
aria-label="Select all rows"
|
|
@@ -193,6 +208,7 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
|
|
|
193
208
|
class="grid border-b border-gray-100 transition-colors duration-150 hover:bg-cornflower-blue-50 focus-visible:bg-slate-50 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset"
|
|
194
209
|
:class="[
|
|
195
210
|
{
|
|
211
|
+
'cursor-pointer': selectable && selectOnRowClick,
|
|
196
212
|
'hover:rounded-md': !isRowSelected(rows[rowIndex]),
|
|
197
213
|
'border-white/80 bg-cornflower-blue-100': selectable && isRowSelected(rows[rowIndex]),
|
|
198
214
|
'border-transparent': selectable && isRowSelected(rows[rowIndex + 1]),
|