@v1nt1248/3nclient-lib 0.1.38 → 0.1.40
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/components/ui3n-table/types.d.ts +4 -2
- package/dist/style.css +1 -1
- package/dist/ui3n-components.js +85 -91
- package/package.json +1 -1
- package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue +5 -0
- package/src/components/ui3n-table/types.ts +4 -2
- package/src/components/ui3n-table/ui3n-table.vue +175 -180
|
@@ -1,45 +1,46 @@
|
|
|
1
1
|
<script setup lang="ts" generic="T extends Ui3nTableBodyBaseItem">
|
|
2
|
-
import { useTable } from './composables/useTable';
|
|
3
|
-
import type {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Ui3nTableSlots,
|
|
8
|
-
} from './types';
|
|
9
|
-
import Ui3nButton from '../ui3n-button/ui3n-button.vue';
|
|
10
|
-
import Ui3nCheckbox from '../ui3n-checkbox/ui3n-checkbox.vue';
|
|
11
|
-
import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
|
|
2
|
+
import { useTable } from './composables/useTable';
|
|
3
|
+
import type { Ui3nTableBodyBaseItem, Ui3nTableEmits, Ui3nTableProps, Ui3nTableSlots } from './types';
|
|
4
|
+
import Ui3nButton from '../ui3n-button/ui3n-button.vue';
|
|
5
|
+
import Ui3nCheckbox from '../ui3n-checkbox/ui3n-checkbox.vue';
|
|
6
|
+
import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
|
|
12
7
|
|
|
13
|
-
const props = defineProps<Ui3nTableProps<T>>();
|
|
14
|
-
const emits = defineEmits<Ui3nTableEmits<T>>();
|
|
15
|
-
defineSlots<Ui3nTableSlots<T, string & keyof T>>();
|
|
8
|
+
const props = defineProps<Ui3nTableProps<T>>();
|
|
9
|
+
const emits = defineEmits<Ui3nTableEmits<T>>();
|
|
10
|
+
defineSlots<Ui3nTableSlots<T, string & keyof T>>();
|
|
16
11
|
|
|
17
|
-
const {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} = useTable(props, emits);
|
|
12
|
+
const {
|
|
13
|
+
tableEl,
|
|
14
|
+
currentConfig,
|
|
15
|
+
visibleColumns,
|
|
16
|
+
showGroupActionsRow,
|
|
17
|
+
selectedRowsArray,
|
|
18
|
+
selectedRowsSize,
|
|
19
|
+
closeGroupActionsRow,
|
|
20
|
+
getRowKey,
|
|
21
|
+
isRowSelected,
|
|
22
|
+
getRowStyle,
|
|
23
|
+
processSelection,
|
|
24
|
+
toggleSelectedRows,
|
|
25
|
+
changeSortOrder,
|
|
26
|
+
} = useTable(props, emits);
|
|
32
27
|
|
|
33
|
-
const eventsHandlers = {
|
|
34
|
-
|
|
35
|
-
};
|
|
28
|
+
const eventsHandlers = {
|
|
29
|
+
select: processSelection,
|
|
30
|
+
};
|
|
36
31
|
</script>
|
|
37
32
|
|
|
38
33
|
<template>
|
|
39
|
-
<div
|
|
34
|
+
<div
|
|
35
|
+
ref="tableEl"
|
|
36
|
+
:class="$style.ui3nTable"
|
|
37
|
+
>
|
|
40
38
|
<div :class="[$style.header, showGroupActionsRow && $style.withGroupActions]">
|
|
41
39
|
<!-- group actions -->
|
|
42
|
-
<div
|
|
40
|
+
<div
|
|
41
|
+
v-if="showGroupActionsRow"
|
|
42
|
+
:class="$style.groupActions"
|
|
43
|
+
>
|
|
43
44
|
<ui3n-checkbox
|
|
44
45
|
:indeterminate="selectedRowsSize < body.content.length && selectedRowsSize !== 0"
|
|
45
46
|
:model-value="selectedRowsSize === body.content.length"
|
|
@@ -49,7 +50,10 @@ const eventsHandlers = {
|
|
|
49
50
|
</ui3n-checkbox>
|
|
50
51
|
|
|
51
52
|
<div :class="$style.groupActionsBody">
|
|
52
|
-
<slot
|
|
53
|
+
<slot
|
|
54
|
+
name="group-actions"
|
|
55
|
+
:selected-rows="selectedRowsArray"
|
|
56
|
+
/>
|
|
53
57
|
</div>
|
|
54
58
|
|
|
55
59
|
<ui3n-button
|
|
@@ -60,10 +64,7 @@ const eventsHandlers = {
|
|
|
60
64
|
</ui3n-button>
|
|
61
65
|
</div>
|
|
62
66
|
<!-- table header -->
|
|
63
|
-
<template
|
|
64
|
-
v-for="h in visibleColumns"
|
|
65
|
-
:key="h.key"
|
|
66
|
-
>
|
|
67
|
+
<template v-for="h in visibleColumns" :key="h.key">
|
|
67
68
|
<div
|
|
68
69
|
:class="[
|
|
69
70
|
$style.headerItemWrapper,
|
|
@@ -75,7 +76,7 @@ const eventsHandlers = {
|
|
|
75
76
|
<div
|
|
76
77
|
:class="$style.headerItem"
|
|
77
78
|
:style="h.headCellStyle"
|
|
78
|
-
v-on="h.sortable ? { click: () => changeSortOrder(h.key) }: {}"
|
|
79
|
+
v-on="h.sortable ? { click: () => changeSortOrder(h.key) } : {}"
|
|
79
80
|
>
|
|
80
81
|
<slot :name="`header-cell-${h.key as string & keyof T}`">
|
|
81
82
|
<span :class="$style.headerText">
|
|
@@ -97,18 +98,15 @@ const eventsHandlers = {
|
|
|
97
98
|
<template v-if="$slots['row']">
|
|
98
99
|
<div
|
|
99
100
|
v-for="(row, rowIndex) in body.content"
|
|
100
|
-
:class="[
|
|
101
|
-
$style.row,
|
|
102
|
-
isRowSelected(row) && $style.selected,
|
|
103
|
-
config.selectable && $style.selectable,
|
|
104
|
-
]"
|
|
105
101
|
:key="getRowKey(row, rowIndex)"
|
|
102
|
+
:class="[$style.row, isRowSelected(row) && $style.selected, config.selectable && $style.selectable]"
|
|
106
103
|
>
|
|
107
104
|
<slot
|
|
108
|
-
name="
|
|
105
|
+
name="row"
|
|
109
106
|
:row="row"
|
|
110
107
|
:row-style="getRowStyle(row)"
|
|
111
108
|
:row-index="rowIndex"
|
|
109
|
+
:is-row-selected="isRowSelected(row)"
|
|
112
110
|
:events="eventsHandlers"
|
|
113
111
|
/>
|
|
114
112
|
</div>
|
|
@@ -117,12 +115,8 @@ const eventsHandlers = {
|
|
|
117
115
|
<template v-else>
|
|
118
116
|
<div
|
|
119
117
|
v-for="(row, rowIndex) in body.content"
|
|
120
|
-
:class="[
|
|
121
|
-
$style.row,
|
|
122
|
-
isRowSelected(row) && $style.selected,
|
|
123
|
-
config.selectable && $style.selectable,
|
|
124
|
-
]"
|
|
125
118
|
:key="getRowKey(row, rowIndex)"
|
|
119
|
+
:class="[$style.row, isRowSelected(row) && $style.selected, config.selectable && $style.selectable]"
|
|
126
120
|
:style="getRowStyle(row)"
|
|
127
121
|
>
|
|
128
122
|
<div
|
|
@@ -141,9 +135,10 @@ const eventsHandlers = {
|
|
|
141
135
|
>
|
|
142
136
|
<div :class="[$style.bodyItem, colIndex === 0 && $style.bodyItemFirst]">
|
|
143
137
|
<slot
|
|
144
|
-
:name="`
|
|
138
|
+
:name="`row-cell-${col.key as string & keyof T}`"
|
|
145
139
|
:row="row"
|
|
146
140
|
:row-index="rowIndex"
|
|
141
|
+
:is-row-selected="isRowSelected(row)"
|
|
147
142
|
:cell="row[col.key]"
|
|
148
143
|
>
|
|
149
144
|
<span :class="$style.cell">
|
|
@@ -159,161 +154,161 @@ const eventsHandlers = {
|
|
|
159
154
|
</template>
|
|
160
155
|
|
|
161
156
|
<style lang="scss" module>
|
|
162
|
-
@use '../../assets/styles/mixins' as mixins;
|
|
157
|
+
@use '../../assets/styles/mixins' as mixins;
|
|
163
158
|
|
|
164
|
-
.ui3nTable {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
159
|
+
.ui3nTable {
|
|
160
|
+
--ui3n-table-columns-width: auto;
|
|
161
|
+
--ui3n-table-base-head-height: 36px;
|
|
162
|
+
--ui3n-table-group-actions-height: 48px;
|
|
163
|
+
--ui3n-table-body-row-height: 28px;
|
|
164
|
+
--ui3n-table-group-actions-bg-color: var(--color-bg-block-primary-default);
|
|
170
165
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
}
|
|
166
|
+
position: relative;
|
|
167
|
+
width: 100%;
|
|
168
|
+
height: 100%;
|
|
169
|
+
background-color: transparent;
|
|
170
|
+
overflow-y: auto;
|
|
171
|
+
}
|
|
177
172
|
|
|
178
|
-
.header {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
173
|
+
.header {
|
|
174
|
+
position: sticky;
|
|
175
|
+
top: 0;
|
|
176
|
+
width: 100%;
|
|
177
|
+
min-height: var(--ui3n-table-header-height);
|
|
178
|
+
height: var(--ui3n-table-base-head-height);
|
|
179
|
+
display: grid;
|
|
180
|
+
grid-template-columns: var(--ui3n-table-columns-width);
|
|
181
|
+
background-color: var(--color-bg-table-header-default);
|
|
182
|
+
padding-left: var(--spacing-m);
|
|
183
|
+
z-index: 5;
|
|
189
184
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
185
|
+
&.withGroupActions {
|
|
186
|
+
height: calc(var(--ui3n-table-base-head-height) + var(--ui3n-table-group-actions-height));
|
|
187
|
+
padding-top: var(--ui3n-table-group-actions-height);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.headerItemWrapper:not(:first-child) {
|
|
191
|
+
padding: 0 var(--spacing-xs);
|
|
192
|
+
}
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
-
.headerItemWrapper
|
|
196
|
-
|
|
195
|
+
.headerItemWrapper {
|
|
196
|
+
position: relative;
|
|
197
|
+
display: flex;
|
|
198
|
+
justify-content: flex-start;
|
|
199
|
+
align-items: center;
|
|
197
200
|
}
|
|
198
|
-
}
|
|
199
201
|
|
|
200
|
-
.
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
202
|
+
.headerItem {
|
|
203
|
+
position: relative;
|
|
204
|
+
display: flex;
|
|
205
|
+
justify-content: flex-start;
|
|
206
|
+
align-items: center;
|
|
207
|
+
width: fit-content;
|
|
208
|
+
max-width: 100%;
|
|
209
|
+
user-select: none;
|
|
210
|
+
}
|
|
206
211
|
|
|
207
|
-
.
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
width: fit-content;
|
|
213
|
-
max-width: 100%;
|
|
214
|
-
user-select: none;
|
|
215
|
-
}
|
|
212
|
+
.sortable {
|
|
213
|
+
.headerItem {
|
|
214
|
+
cursor: pointer;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
216
217
|
|
|
217
|
-
.
|
|
218
|
-
|
|
219
|
-
|
|
218
|
+
.headerText {
|
|
219
|
+
display: block;
|
|
220
|
+
font-size: var(--font-14);
|
|
221
|
+
font-weight: 500;
|
|
222
|
+
color: var(--color-text-table-primary-default);
|
|
223
|
+
@include mixins.text-overflow-ellipsis();
|
|
220
224
|
}
|
|
221
|
-
}
|
|
222
225
|
|
|
223
|
-
.
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
@include mixins.text-overflow-ellipsis();
|
|
229
|
-
}
|
|
226
|
+
.sortableActive {
|
|
227
|
+
.headerItem {
|
|
228
|
+
gap: var(--spacing-s);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
230
231
|
|
|
231
|
-
.
|
|
232
|
-
|
|
233
|
-
|
|
232
|
+
.groupActions {
|
|
233
|
+
position: absolute;
|
|
234
|
+
top: 0;
|
|
235
|
+
left: 0;
|
|
236
|
+
display: flex;
|
|
237
|
+
width: 100%;
|
|
238
|
+
height: var(--ui3n-table-group-actions-height);
|
|
239
|
+
padding: 0 var(--spacing-m);
|
|
240
|
+
justify-content: space-between;
|
|
241
|
+
align-items: center;
|
|
242
|
+
background-color: var(--ui3n-table-group-actions-bg-color);
|
|
243
|
+
border-left: 1px solid var(--color-border-block-primary-default);
|
|
244
|
+
border-top: 1px solid var(--color-border-block-primary-default);
|
|
245
|
+
border-right: 1px solid var(--color-border-block-primary-default);
|
|
234
246
|
}
|
|
235
|
-
}
|
|
236
247
|
|
|
237
|
-
.
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
height: var(--ui3n-table-group-actions-height);
|
|
244
|
-
padding: 0 var(--spacing-m);
|
|
245
|
-
justify-content: space-between;
|
|
246
|
-
align-items: center;
|
|
247
|
-
background-color: var(--ui3n-table-group-actions-bg-color);
|
|
248
|
-
border-left: 1px solid var(--color-border-block-primary-default);
|
|
249
|
-
border-top: 1px solid var(--color-border-block-primary-default);
|
|
250
|
-
border-right: 1px solid var(--color-border-block-primary-default);
|
|
251
|
-
}
|
|
248
|
+
.groupActionsBody {
|
|
249
|
+
display: flex;
|
|
250
|
+
height: 100%;
|
|
251
|
+
padding: 0 var(--spacing-s);
|
|
252
|
+
flex-grow: 1;
|
|
253
|
+
}
|
|
252
254
|
|
|
253
|
-
.
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
flex-grow: 1;
|
|
258
|
-
}
|
|
255
|
+
.body {
|
|
256
|
+
position: relative;
|
|
257
|
+
width: 100%;
|
|
258
|
+
}
|
|
259
259
|
|
|
260
|
-
.
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
260
|
+
.row {
|
|
261
|
+
position: relative;
|
|
262
|
+
width: 100%;
|
|
263
|
+
min-height: var(--ui3n-table-body-row-height);
|
|
264
|
+
display: grid;
|
|
265
|
+
grid-template-columns: var(--ui3n-table-columns-width);
|
|
266
|
+
padding-left: var(--spacing-m);
|
|
267
|
+
border-left: 1px solid var(--color-border-table-primary-default);
|
|
268
|
+
border-right: 1px solid var(--color-border-table-primary-default);
|
|
269
|
+
border-bottom: 1px solid var(--color-border-block-primary-default);
|
|
270
|
+
background-color: transparent;
|
|
264
271
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
min-height: var(--ui3n-table-body-row-height);
|
|
269
|
-
display: grid;
|
|
270
|
-
grid-template-columns: var(--ui3n-table-columns-width);
|
|
271
|
-
padding-left: var(--spacing-m);
|
|
272
|
-
border-left: 1px solid var(--color-border-table-primary-default);
|
|
273
|
-
border-right: 1px solid var(--color-border-table-primary-default);
|
|
274
|
-
border-bottom: 1px solid var(--color-border-block-primary-default);
|
|
275
|
-
background-color: transparent;
|
|
272
|
+
&.selectable {
|
|
273
|
+
cursor: pointer;
|
|
274
|
+
}
|
|
276
275
|
|
|
277
|
-
|
|
278
|
-
|
|
276
|
+
&:hover {
|
|
277
|
+
background-color: var(--color-bg-control-primary-hover);
|
|
278
|
+
}
|
|
279
279
|
}
|
|
280
280
|
|
|
281
|
-
|
|
281
|
+
.selected {
|
|
282
282
|
background-color: var(--color-bg-control-primary-hover);
|
|
283
283
|
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.selected {
|
|
287
|
-
background-color: var(--color-bg-control-primary-hover);
|
|
288
|
-
}
|
|
289
284
|
|
|
290
|
-
.rowCheckbox {
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
}
|
|
285
|
+
.rowCheckbox {
|
|
286
|
+
position: absolute;
|
|
287
|
+
top: 0;
|
|
288
|
+
left: 16px;
|
|
289
|
+
width: var(--spacing-m);
|
|
290
|
+
height: 100%;
|
|
291
|
+
display: flex;
|
|
292
|
+
justify-content: flex-start;
|
|
293
|
+
align-items: center;
|
|
294
|
+
z-index: 1;
|
|
295
|
+
}
|
|
301
296
|
|
|
302
|
-
.bodyItem {
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
297
|
+
.bodyItem {
|
|
298
|
+
position: relative;
|
|
299
|
+
height: 100%;
|
|
300
|
+
display: flex;
|
|
301
|
+
justify-content: flex-start;
|
|
302
|
+
align-items: center;
|
|
308
303
|
|
|
309
|
-
|
|
310
|
-
|
|
304
|
+
&.bodyItemFirst {
|
|
305
|
+
padding-left: var(--spacing-ml);
|
|
306
|
+
}
|
|
311
307
|
}
|
|
312
|
-
}
|
|
313
308
|
|
|
314
|
-
.cell {
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
}
|
|
309
|
+
.cell {
|
|
310
|
+
font-size: var(--font-12);
|
|
311
|
+
font-weight: 400;
|
|
312
|
+
color: var(--color-text-table-primary-default);
|
|
313
|
+
}
|
|
319
314
|
</style>
|