@itfin/components 1.3.34 → 1.3.35
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 +2 -1
- package/src/ITFSettings.js +8 -0
- package/src/assets/fonts/bootstrap-icons.woff +0 -0
- package/src/assets/fonts/bootstrap-icons.woff2 +0 -0
- package/src/assets/scss/icons.scss +2085 -0
- package/src/assets/scss/main.scss +1 -0
- package/src/components/avatar/index.stories.js +0 -1
- package/src/components/button/1.html +30 -0
- package/src/components/button/NativeButton.js +116 -0
- package/src/components/button/index.stories.js +10 -6
- package/src/components/checkbox/Checkbox.vue +5 -1
- package/src/components/dropdown/Dropdown.vue +5 -4
- package/src/components/dropdown/DropdownMenu.vue +7 -0
- package/src/components/sortable/sortable-shopify.js +1 -1
- package/src/components/table/Table2.vue +108 -33
- package/src/components/table/TableBody.vue +58 -36
- package/src/components/table/TableGroup.vue +166 -114
- package/src/components/table/TableHeader.vue +153 -36
- package/src/components/table/index.stories.js +152 -4
- package/src/components/table/sticky.js +439 -0
|
@@ -7,31 +7,19 @@
|
|
|
7
7
|
</div-->
|
|
8
8
|
|
|
9
9
|
<div data-test="table-group-wrapper" class="table-group-wrapper flex-grow-1 w-100 d-block"
|
|
10
|
-
:style="`--row-count: ${isShowTable ? rows.length : 0}`">
|
|
11
|
-
<div class="">
|
|
12
|
-
<div
|
|
13
|
-
<itf-table-header
|
|
14
|
-
v-if="showHeader"
|
|
15
|
-
:columns="visibleColumns"
|
|
16
|
-
@sort:columns="onColumnsSorted"
|
|
17
|
-
:column-resizing="columnResizing"
|
|
18
|
-
:column-sorting="columnSorting"
|
|
19
|
-
:show-add-column="showAddColumn"
|
|
20
|
-
:row-height="rowHeight"
|
|
21
|
-
@update:columns="$emit('update:columns', $event)"
|
|
22
|
-
@add-column="$emit('add-column', $event)"
|
|
23
|
-
/>
|
|
24
|
-
|
|
10
|
+
:style="`--row-count: ${isShowTable ? rows.length : 0}`" data-sticky-container>
|
|
11
|
+
<div data-test="table-group" class="position-relative">
|
|
12
|
+
<div :class="stickyId" class="sticky-group">
|
|
25
13
|
<div v-if="title" group="tablegroups" class="draggable-item"
|
|
26
14
|
data-draggable-mirror="{"xAxis":false}">
|
|
27
15
|
<div class="table-row-template d-flex align-items-stretch"
|
|
28
|
-
style="height: var(--group-title-height)">
|
|
16
|
+
style="min-height: var(--group-title-height)">
|
|
29
17
|
<div class="shadow-area"></div>
|
|
30
|
-
<div class="header-wrapper">
|
|
31
|
-
<
|
|
32
|
-
<
|
|
18
|
+
<div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
|
|
19
|
+
<a class="header-content position-sticky d-flex align-items-center">
|
|
20
|
+
<span class="collapse-arrow">
|
|
33
21
|
<itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
|
|
34
|
-
</
|
|
22
|
+
</span>
|
|
35
23
|
<span class="d-flex align-items-center line-overflow group-header-value"
|
|
36
24
|
data-test="group-value-group-label-value">
|
|
37
25
|
{{ title }}
|
|
@@ -39,97 +27,113 @@
|
|
|
39
27
|
<div data-test="table-group-item-count" class="table-group-item-count">
|
|
40
28
|
{{ rows.length }}
|
|
41
29
|
</div>
|
|
42
|
-
</
|
|
30
|
+
</a>
|
|
43
31
|
</div>
|
|
44
32
|
</div>
|
|
45
33
|
</div>
|
|
46
34
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
35
|
+
<itf-table-header
|
|
36
|
+
v-if="isShowTable"
|
|
37
|
+
:visible-header="showHeader"
|
|
38
|
+
:columns="visibleColumns"
|
|
39
|
+
@sort:columns="onColumnsSorted"
|
|
40
|
+
:column-resizing="columnResizing"
|
|
41
|
+
:column-sorting="columnSorting"
|
|
42
|
+
:show-add-column="showAddColumn"
|
|
43
|
+
:rows="rows"
|
|
44
|
+
:schema="schema"
|
|
45
|
+
:selected-ids="selectedIds"
|
|
46
|
+
@update:selectedIds="$emit('update:selectedIds', $event)"
|
|
47
|
+
@update:columns="$emit('update:columns', $event)"
|
|
48
|
+
@add-column="$emit('add-column', $event)"
|
|
49
|
+
/>
|
|
50
|
+
</div>
|
|
62
51
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
52
|
+
<!-- Сама таблиця -->
|
|
53
|
+
<div v-if="isShowTable">
|
|
54
|
+
<itf-table-body
|
|
55
|
+
:id-property="idProperty"
|
|
56
|
+
:rows="rows"
|
|
57
|
+
:columns="visibleColumns"
|
|
58
|
+
:show-add-column="showAddColumn">
|
|
59
|
+
<template v-for="(_, name) in $slots" #[name]="slotData">
|
|
60
|
+
<slot :name="name" v-bind="slotData || {}"/>
|
|
61
|
+
</template>
|
|
62
|
+
<template v-for="(_, name) in $scopedSlots" #[name]="slotData">
|
|
63
|
+
<slot :name="name" v-bind="slotData || {}"/>
|
|
64
|
+
</template>
|
|
65
|
+
</itf-table-body>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<!-- Лінія додати нову -->
|
|
69
|
+
<div v-if="isShowTable && addNewRows"
|
|
70
|
+
class="table-row-template d-flex align-items-stretch">
|
|
71
|
+
<div class="shadow-area"></div>
|
|
72
|
+
<a href="" @click.prevent="$emit('new', title)" data-test="table-add-new-item"
|
|
73
|
+
class="d-flex align-items-center flex-grow-1 table-add-new-item py-1 text-decoration-none">
|
|
74
|
+
<span class="d-sticky d-flex align-items-center">
|
|
75
|
+
<itf-icon name="plus"/>
|
|
76
|
+
<span>{{ newLabel }}</span>
|
|
77
|
+
</span>
|
|
78
|
+
</a>
|
|
79
|
+
</div>
|
|
75
80
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</span>
|
|
81
|
+
<!-- Групування -->
|
|
82
|
+
<div v-if="isShowTable && showSummary" class="table-row-template d-flex align-items-stretch table-summary">
|
|
83
|
+
<div class="shadow-area"></div>
|
|
84
|
+
|
|
85
|
+
<div class="table-summary-columns d-flex tw-flex-row align-items-center">
|
|
86
|
+
<span
|
|
87
|
+
v-for="(column, n) in visibleColumns"
|
|
88
|
+
:key="n"
|
|
89
|
+
:data-column="n"
|
|
90
|
+
class="table-summary-column position-relative line-overflow"
|
|
91
|
+
:style="`width: ${column.width}px;`">
|
|
92
|
+
<itf-dropdown text>
|
|
93
|
+
<template #button>
|
|
94
|
+
<span data-test="summary-column" class="invisible-summary d-flex align-items-center justify-content-end flex-auto">
|
|
95
|
+
<span class="summary-placeholder align-items-center justify-content-center">
|
|
96
|
+
Summary
|
|
97
|
+
<itf-icon name="chevron_down" />
|
|
94
98
|
</span>
|
|
95
|
-
</
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
</
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
</
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
</
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
</
|
|
122
|
-
</
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
</
|
|
129
|
-
</
|
|
130
|
-
</
|
|
131
|
-
</
|
|
132
|
-
</
|
|
99
|
+
</span>
|
|
100
|
+
</template>
|
|
101
|
+
|
|
102
|
+
<ul class="dropdown-menu show ps-0" aria-labelledby="dropdownMenuOffset">
|
|
103
|
+
<li v-if="column.sortable">
|
|
104
|
+
<a class="dropdown-item d-flex align-items-center" href="javascript:;">
|
|
105
|
+
<itf-icon name="arrow_up" :size="16" class="me-1" />
|
|
106
|
+
Sort By Asc
|
|
107
|
+
</a>
|
|
108
|
+
</li>
|
|
109
|
+
<li v-if="column.sortable">
|
|
110
|
+
<a class="dropdown-item d-flex align-items-center" href="javascript:;">
|
|
111
|
+
<itf-icon name="arrow_down" :size="16" class="me-1" />
|
|
112
|
+
Sort By Desc
|
|
113
|
+
</a>
|
|
114
|
+
</li>
|
|
115
|
+
<li v-if="column.groupable">
|
|
116
|
+
<a class="dropdown-item d-flex align-items-center" href="javascript:;">
|
|
117
|
+
<itf-icon name="episodes" :size="16" class="me-1" />
|
|
118
|
+
Group By
|
|
119
|
+
</a>
|
|
120
|
+
</li>
|
|
121
|
+
<li>
|
|
122
|
+
<a class="dropdown-item d-flex align-items-center" href="javascript:;" @click="togglePinned(n)">
|
|
123
|
+
<itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
|
|
124
|
+
<span v-if="column.pinned">Unpin Column</span>
|
|
125
|
+
<span v-else>Pin Column</span>
|
|
126
|
+
</a>
|
|
127
|
+
</li>
|
|
128
|
+
<li>
|
|
129
|
+
<a class="dropdown-item d-flex align-items-center" href="javascript:;" @click="hideColumn(n)">
|
|
130
|
+
<itf-icon name="eye_no" :size="16" class="me-1" />
|
|
131
|
+
Hide
|
|
132
|
+
</a>
|
|
133
|
+
</li>
|
|
134
|
+
</ul>
|
|
135
|
+
</itf-dropdown>
|
|
136
|
+
</span>
|
|
133
137
|
</div>
|
|
134
138
|
</div>
|
|
135
139
|
</div>
|
|
@@ -144,6 +148,7 @@
|
|
|
144
148
|
--table-small-row-size: var(--table-row-height);
|
|
145
149
|
--shadow-area-width: 12px;
|
|
146
150
|
--indicator-area-width: 38px;
|
|
151
|
+
--hover-bg: var(--bs-tertiary-bg);
|
|
147
152
|
|
|
148
153
|
flex-direction: column;
|
|
149
154
|
min-width: 100%;
|
|
@@ -162,15 +167,31 @@
|
|
|
162
167
|
border-bottom: 4px solid rgb(71 190 255 / 1);
|
|
163
168
|
}
|
|
164
169
|
}
|
|
170
|
+
.sticky-group {
|
|
171
|
+
transition: transform 0.02s;
|
|
172
|
+
}
|
|
173
|
+
.sticky-group.sticky {
|
|
174
|
+
z-index: 5;
|
|
175
|
+
|
|
176
|
+
&:before {
|
|
177
|
+
content: '';
|
|
178
|
+
position: absolute;
|
|
179
|
+
left: 0;
|
|
180
|
+
right: 0;
|
|
181
|
+
top: -50px;
|
|
182
|
+
height: 50px;
|
|
183
|
+
background: var(--bs-body-bg);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
165
186
|
|
|
166
187
|
.table-group-wrapper {
|
|
167
188
|
display: flex;
|
|
168
|
-
height: calc(var(--group-title-height) + var(--table-small-row-size) * 1 + var(--row-count) * var(--table-row-height));
|
|
189
|
+
//height: calc(var(--group-title-height) + var(--table-small-row-size) * 1 + var(--row-count) * var(--table-row-height));
|
|
169
190
|
}
|
|
170
191
|
|
|
171
192
|
.shadow-area {
|
|
172
193
|
z-index: 4;
|
|
173
|
-
height: 100%;
|
|
194
|
+
//height: 100%;
|
|
174
195
|
width: var(--shadow-area-width);
|
|
175
196
|
justify-content: center;
|
|
176
197
|
align-items: center;
|
|
@@ -180,7 +201,7 @@
|
|
|
180
201
|
position: sticky;
|
|
181
202
|
left: 0;
|
|
182
203
|
background: var(--bs-body-bg);
|
|
183
|
-
border-right: 1px solid var(--bs-border-color);
|
|
204
|
+
//border-right: 1px solid var(--bs-border-color);
|
|
184
205
|
}
|
|
185
206
|
|
|
186
207
|
.header-wrapper:not(.collapsed *) {
|
|
@@ -190,6 +211,7 @@
|
|
|
190
211
|
}
|
|
191
212
|
|
|
192
213
|
.header-wrapper {
|
|
214
|
+
cursor: pointer;
|
|
193
215
|
background-color: var(--bs-body-bg);
|
|
194
216
|
left: var(--shadow-area-width);
|
|
195
217
|
align-items: center;
|
|
@@ -197,13 +219,23 @@
|
|
|
197
219
|
position: -webkit-sticky;
|
|
198
220
|
position: sticky;
|
|
199
221
|
border-radius: 0.1875rem;
|
|
200
|
-
border-bottom-width: 1px;
|
|
201
|
-
border-bottom-style: solid;
|
|
202
222
|
font-weight: 500;
|
|
203
223
|
font-size: 1.25rem;
|
|
204
|
-
border-
|
|
224
|
+
border-left: 0;
|
|
225
|
+
border-bottom: 0;
|
|
226
|
+
border-right: 1px solid var(--bs-border-color);
|
|
227
|
+
|
|
228
|
+
&.header-additional-column {
|
|
229
|
+
border-radius: 0;
|
|
230
|
+
}
|
|
231
|
+
&:hover {
|
|
232
|
+
background: var(--hover-bg);
|
|
233
|
+
}
|
|
205
234
|
}
|
|
206
235
|
|
|
236
|
+
.header-content {
|
|
237
|
+
text-decoration: none;
|
|
238
|
+
}
|
|
207
239
|
.header-content:not(.draggable-mirror *) {
|
|
208
240
|
left: var(--shadow-area-width);
|
|
209
241
|
padding-left: 0.75rem;
|
|
@@ -227,7 +259,7 @@
|
|
|
227
259
|
}
|
|
228
260
|
|
|
229
261
|
.table-row-template {
|
|
230
|
-
height: var(--table-small-row-size);
|
|
262
|
+
min-height: var(--table-small-row-size);
|
|
231
263
|
}
|
|
232
264
|
|
|
233
265
|
.table-add-new-item {
|
|
@@ -237,6 +269,10 @@
|
|
|
237
269
|
& > span {
|
|
238
270
|
left: var(--shadow-area-width);
|
|
239
271
|
position: sticky;
|
|
272
|
+
padding-left: var(--shadow-area-width);
|
|
273
|
+
}
|
|
274
|
+
&:hover {
|
|
275
|
+
background: var(--hover-bg);
|
|
240
276
|
}
|
|
241
277
|
}
|
|
242
278
|
|
|
@@ -263,12 +299,13 @@
|
|
|
263
299
|
</style>
|
|
264
300
|
<script>
|
|
265
301
|
import sortBy from 'lodash/sortBy';
|
|
266
|
-
import {Vue, Component, Prop} from 'vue-property-decorator';
|
|
302
|
+
import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
|
|
267
303
|
import itfDropdown from '../dropdown/Dropdown.vue';
|
|
268
304
|
import itfButton from '../button/Button.vue';
|
|
269
305
|
import itfIcon from '../icon/Icon.vue';
|
|
270
306
|
import itfTableBody from './TableBody.vue';
|
|
271
307
|
import itfTableHeader from './TableHeader.vue';
|
|
308
|
+
import Sticky from "@/components/table/sticky";
|
|
272
309
|
|
|
273
310
|
export default @Component({
|
|
274
311
|
name: 'itfTableGroup',
|
|
@@ -283,7 +320,9 @@ export default @Component({
|
|
|
283
320
|
class itfTableGroup extends Vue {
|
|
284
321
|
@Prop() columns;
|
|
285
322
|
@Prop() rows;
|
|
323
|
+
@Prop() selectedIds;
|
|
286
324
|
@Prop() title;
|
|
325
|
+
@Prop() idProperty;
|
|
287
326
|
@Prop(Boolean) showGrouping;
|
|
288
327
|
@Prop(Boolean) showSummary;
|
|
289
328
|
@Prop(Boolean) addNewRows;
|
|
@@ -291,13 +330,14 @@ class itfTableGroup extends Vue {
|
|
|
291
330
|
@Prop(Boolean) columnResizing;
|
|
292
331
|
@Prop(Boolean) showAddColumn;
|
|
293
332
|
@Prop(Boolean) showHeader;
|
|
294
|
-
@Prop({type:
|
|
333
|
+
@Prop({type: String, default: function() { return this.$t('components.new'); } }) newLabel;
|
|
334
|
+
@Prop({type: Object, default: () => ({})}) schema;
|
|
295
335
|
|
|
296
336
|
isShowTable = true;
|
|
297
337
|
|
|
298
338
|
get visibleColumns() {
|
|
299
339
|
let list = this.columns;
|
|
300
|
-
list = sortBy(list, (column) => column.
|
|
340
|
+
list = sortBy(list, (column) => column.index);
|
|
301
341
|
let left = 57; // sum of first 2 cells
|
|
302
342
|
const pinned = list.filter((column) => column.pinned && column.visible !== false);
|
|
303
343
|
list = list.map((column, index) => {
|
|
@@ -318,5 +358,17 @@ class itfTableGroup extends Vue {
|
|
|
318
358
|
toggleGroup() {
|
|
319
359
|
this.isShowTable = !this.isShowTable;
|
|
320
360
|
}
|
|
361
|
+
|
|
362
|
+
get stickyId() {
|
|
363
|
+
return `sticky-group-${this._uid}`;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
mounted() {
|
|
367
|
+
this.sticky = new Sticky(`.${this.stickyId}`, {
|
|
368
|
+
wrap: true,
|
|
369
|
+
stickyClass: 'sticky',
|
|
370
|
+
});
|
|
371
|
+
console.info(this.sticky);
|
|
372
|
+
}
|
|
321
373
|
}
|
|
322
374
|
</script>
|