@itfin/components 1.3.50 → 1.3.52
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
CHANGED
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
:close="() => closePanel(panel)"
|
|
24
24
|
:expand="() => expandPanel(panel)"
|
|
25
25
|
:fullsize="() => fullsizePanel(panel)">
|
|
26
|
-
<component :is="panels[panel.type]" :panel="panel" :payload="panel.payload" />
|
|
26
|
+
<component :is="panels[panel.type].default || panels[panel.type]" :panel="panel" :payload="panel.payload" />
|
|
27
27
|
</slot>
|
|
28
|
-
<template v-if="$scopedSlots[`${panel.type}.title`]" #title>
|
|
28
|
+
<template v-if="$scopedSlots[`${panel.type}.title`] || panels[panel.type].title" #title>
|
|
29
29
|
<slot
|
|
30
30
|
:name="`${panel.type}.title`"
|
|
31
31
|
:panel="panel"
|
|
@@ -35,9 +35,10 @@
|
|
|
35
35
|
:close="() => closePanel(panel)"
|
|
36
36
|
:expand="() => expandPanel(panel)"
|
|
37
37
|
:fullsize="() => fullsizePanel(panel)">
|
|
38
|
+
<component v-if="panels[panel.type].title" :is="panels[panel.type].title" :panel="panel" :payload="panel.payload" />
|
|
38
39
|
</slot>
|
|
39
40
|
</template>
|
|
40
|
-
<template v-if="$scopedSlots[`${panel.type}.buttons`]" #buttons>
|
|
41
|
+
<template v-if="$scopedSlots[`${panel.type}.buttons`] || panels[panel.type].buttons" #buttons>
|
|
41
42
|
<slot
|
|
42
43
|
:name="`${panel.type}.buttons`"
|
|
43
44
|
:panel="panel"
|
|
@@ -47,6 +48,20 @@
|
|
|
47
48
|
:close="() => closePanel(panel)"
|
|
48
49
|
:expand="() => expandPanel(panel)"
|
|
49
50
|
:fullsize="() => fullsizePanel(panel)">
|
|
51
|
+
<component v-if="panels[panel.type].buttons" :is="panels[panel.type].buttons" :panel="panel" :payload="panel.payload" />
|
|
52
|
+
</slot>
|
|
53
|
+
</template>
|
|
54
|
+
<template v-if="$scopedSlots[`${panel.type}.header`] || panels[panel.type].header" #header>
|
|
55
|
+
<slot
|
|
56
|
+
:name="`${panel.type}.header`"
|
|
57
|
+
:panel="panel"
|
|
58
|
+
:payload="panel.payload"
|
|
59
|
+
:multiple="isOpenMultiple"
|
|
60
|
+
:open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
|
|
61
|
+
:close="() => closePanel(panel)"
|
|
62
|
+
:expand="() => expandPanel(panel)"
|
|
63
|
+
:fullsize="() => fullsizePanel(panel)">
|
|
64
|
+
<component v-if="panels[panel.type].header" :is="panels[panel.type].header" :panel="panel" :payload="panel.payload" />
|
|
50
65
|
</slot>
|
|
51
66
|
</template>
|
|
52
67
|
</panel>
|
|
@@ -27,6 +27,9 @@
|
|
|
27
27
|
:no-select-all="noSelectAll"
|
|
28
28
|
:currencies="currencies"
|
|
29
29
|
:currency="currency"
|
|
30
|
+
:subrows-property="subrowsProperty"
|
|
31
|
+
:indicator-type="indicatorType"
|
|
32
|
+
:expanded-all="expandedAll"
|
|
30
33
|
@new="$emit('new', $event)"
|
|
31
34
|
@add-column="$emit('add-column', $event)"
|
|
32
35
|
>
|
|
@@ -70,6 +73,8 @@ class itfTable2 extends Vue {
|
|
|
70
73
|
@Prop({ required: true, type: Array }) rows;
|
|
71
74
|
@Prop({ type: String, default: null }) groupBy;
|
|
72
75
|
@Prop({ type: String, default: null }) idProperty;
|
|
76
|
+
@Prop({ type: String, default: null }) subrowsProperty;
|
|
77
|
+
@Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
|
|
73
78
|
@Prop({ type: String, default: null }) stateName; // save state to storage
|
|
74
79
|
@Prop({ type: Object, default: () => ({}) }) schema;
|
|
75
80
|
@Prop() currency;
|
|
@@ -84,6 +89,7 @@ class itfTable2 extends Vue {
|
|
|
84
89
|
@Prop(Boolean) noColumnMenu;
|
|
85
90
|
@Prop(Boolean) noSelectAll;
|
|
86
91
|
@Prop(Boolean) editable;
|
|
92
|
+
@Prop(Boolean) expandedAll;
|
|
87
93
|
|
|
88
94
|
state = {
|
|
89
95
|
selectedIds: [],
|
|
@@ -1,76 +1,31 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
:
|
|
2
|
+
<div>
|
|
3
|
+
<itf-table-rows
|
|
4
|
+
class="scroller"
|
|
5
|
+
:rows="rows"
|
|
6
|
+
:selected-ids="selectedIds"
|
|
7
|
+
:columns="columns"
|
|
8
|
+
:id-property="idProperty"
|
|
9
|
+
:subrows-property="subrowsProperty"
|
|
10
|
+
:show-add-column="showAddColumn"
|
|
11
|
+
:no-select-all="noSelectAll"
|
|
12
|
+
:editable="editable"
|
|
13
|
+
:currency="currency"
|
|
14
|
+
:currencies="currencies"
|
|
15
|
+
:indicatorType="indicatorType"
|
|
16
|
+
:expanded-ids="expandedIds"
|
|
17
|
+
:expanded-all="expandedAll"
|
|
18
|
+
@row-click="$emit('row-click', $event)"
|
|
19
|
+
@update="$emit('update', $event)"
|
|
20
|
+
@toggle="onToggle"
|
|
11
21
|
>
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<i data-test="table-item-options" class="ic-drag"></i>
|
|
20
|
-
</div>
|
|
21
|
-
</a>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
<div class="indicator sticky">
|
|
25
|
-
<div class="fill table-view-row-count" :class="{'on-rest': !noSelectAll}">
|
|
26
|
-
<span v-if="idProperty">{{ item[idProperty] }}</span>
|
|
27
|
-
<span v-else>{{ (n + 1) }}</span>
|
|
28
|
-
</div>
|
|
29
|
-
<div v-if="!noSelectAll" class="fill on-hover">
|
|
30
|
-
<itf-checkbox :value="item[idProperty]" />
|
|
31
|
-
</div>
|
|
32
|
-
</div>
|
|
33
|
-
<div accept-group="items" class="table-item-inner" @click="$emit('row-click', item)">
|
|
34
|
-
<template v-for="(column, k) in visibleAttributes">
|
|
35
|
-
<div
|
|
36
|
-
v-if="column.visible !== false"
|
|
37
|
-
:data-column="k"
|
|
38
|
-
:style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
|
|
39
|
-
:class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
|
|
40
|
-
class="table-view-item-value d-flex h-100">
|
|
41
|
-
<slot :name="`column.${column.property}`" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
|
|
42
|
-
<template v-if="column.editable && editable">
|
|
43
|
-
<slot :name="`edit.${column.type}`" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
|
|
44
|
-
<itf-text-field class="w-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
45
|
-
<itf-hours-field
|
|
46
|
-
class="w-100"
|
|
47
|
-
placeholder="00h 00m"
|
|
48
|
-
v-else-if="column.type === 'time'"
|
|
49
|
-
:hours="getValue(item, column)"
|
|
50
|
-
@update:hours="updateValue(item, $event, n, column)"
|
|
51
|
-
/>
|
|
52
|
-
<itf-textarea class="w-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
53
|
-
<itf-money-field class="w-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
54
|
-
<itf-select class="w-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
|
|
55
|
-
</slot>
|
|
56
|
-
</template>
|
|
57
|
-
<div v-else class="h-100 align-items-center d-flex w-100">
|
|
58
|
-
<slot :name="`format.${column.type}`" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
|
|
59
|
-
{{getValue(item, column)}}
|
|
60
|
-
</slot>
|
|
61
|
-
</div>
|
|
62
|
-
</slot>
|
|
63
|
-
</div>
|
|
64
|
-
</template>
|
|
65
|
-
<div v-if="showAddColumn" class="table-view-item-value extra bg-light"></div>
|
|
66
|
-
<div class="boundary top"></div>
|
|
67
|
-
<div class="boundary right"></div>
|
|
68
|
-
<div class="boundary bottom"></div>
|
|
69
|
-
<div class="boundary left"></div>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
|
|
22
|
+
<template v-for="(_, name) in $slots" #[name]="slotData">
|
|
23
|
+
<slot :name="name" v-bind="slotData || {}"/>
|
|
24
|
+
</template>
|
|
25
|
+
<template v-for="(_, name) in $scopedSlots" #[name]="slotData">
|
|
26
|
+
<slot :name="name" v-bind="slotData || {}"/>
|
|
27
|
+
</template>
|
|
28
|
+
</itf-table-rows>
|
|
74
29
|
<div v-if="!rows.length" data-test="table-no-results" class="table-view-item">
|
|
75
30
|
<div class="table-row-template">
|
|
76
31
|
<div accept-group="items" class="table-view-body-space"></div>
|
|
@@ -208,63 +163,34 @@
|
|
|
208
163
|
</style>
|
|
209
164
|
<script>
|
|
210
165
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
211
|
-
import
|
|
212
|
-
import set from 'lodash/set';
|
|
213
|
-
// import { RecycleScroller } from 'vue-virtual-scroller'
|
|
214
|
-
import itfCheckbox from '../checkbox/Checkbox.vue';
|
|
215
|
-
import itfTextField from '../text-field/TextField.vue';
|
|
216
|
-
import itfMoneyField from '../text-field/MoneyField.vue';
|
|
217
|
-
import itfTextarea from '../text-field/Textarea.vue';
|
|
218
|
-
import itfHoursField from '../text-field/HoursField.vue';
|
|
219
|
-
import itfSelect from '../select/Select.vue';
|
|
220
|
-
// import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
|
|
166
|
+
import itfTableRows from './TableRows.vue';
|
|
221
167
|
|
|
222
168
|
export default @Component({
|
|
223
169
|
name: 'itfTableBody',
|
|
224
170
|
components: {
|
|
225
|
-
|
|
226
|
-
itfMoneyField,
|
|
227
|
-
itfHoursField,
|
|
228
|
-
itfTextarea,
|
|
229
|
-
itfTextField,
|
|
230
|
-
itfSelect,
|
|
231
|
-
// RecycleScroller
|
|
171
|
+
itfTableRows
|
|
232
172
|
}
|
|
233
173
|
})
|
|
234
174
|
class itfTableBody extends Vue {
|
|
235
175
|
@Prop() columns;
|
|
236
176
|
@Prop() rows;
|
|
237
177
|
@Prop() idProperty;
|
|
178
|
+
@Prop() subrowsProperty;
|
|
238
179
|
@Prop(Boolean) showAddColumn;
|
|
239
180
|
@Prop(Boolean) noSelectAll;
|
|
240
181
|
@Prop(Boolean) editable;
|
|
182
|
+
@Prop(Boolean) expandedAll;
|
|
241
183
|
@Prop() selectedIds;
|
|
242
184
|
@Prop() currency;
|
|
243
185
|
@Prop() currencies;
|
|
186
|
+
@Prop({ type: String, default: null }) indicatorType;
|
|
244
187
|
|
|
245
|
-
|
|
246
|
-
return get(item, column.property);
|
|
247
|
-
}
|
|
188
|
+
expandedIds = [];
|
|
248
189
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
get lastPinnedIndex() {
|
|
254
|
-
return this.columns.findIndex((column) => column.lastPinned);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
updateValue(item, value, index, column) {
|
|
258
|
-
const newItem = { ...item };
|
|
259
|
-
if (newItem[column.property] !== value) {
|
|
260
|
-
set(newItem, column.property, value);
|
|
261
|
-
this.$emit('update', {
|
|
262
|
-
index,
|
|
263
|
-
item,
|
|
264
|
-
value: newItem,
|
|
265
|
-
column
|
|
266
|
-
});
|
|
267
|
-
}
|
|
190
|
+
onToggle(item) {
|
|
191
|
+
this.expandedIds = this.expandedIds.includes(item[this.idProperty])
|
|
192
|
+
? this.expandedIds.filter((id) => id !== item[this.idProperty])
|
|
193
|
+
: [...this.expandedIds, item[this.idProperty]];
|
|
268
194
|
}
|
|
269
195
|
}
|
|
270
196
|
</script>
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
@update="$emit('update', $event)"
|
|
56
56
|
@row-click="$emit('row-click', $event)"
|
|
57
57
|
:id-property="idProperty"
|
|
58
|
+
:subrows-property="subrowsProperty"
|
|
58
59
|
:rows="rows"
|
|
59
60
|
:editable="editable"
|
|
60
61
|
:currency="currency"
|
|
@@ -62,6 +63,8 @@
|
|
|
62
63
|
:columns="visibleColumns"
|
|
63
64
|
:no-select-all="noSelectAll"
|
|
64
65
|
:selected-ids="selectedIds"
|
|
66
|
+
:indicatorType="indicatorType"
|
|
67
|
+
:expanded-all="expandedAll"
|
|
65
68
|
:show-add-column="showAddColumn">
|
|
66
69
|
<template v-for="(_, name) in $slots" #[name]="slotData">
|
|
67
70
|
<slot :name="name" v-bind="slotData || {}"/>
|
|
@@ -323,6 +326,7 @@ class itfTableGroup extends Vue {
|
|
|
323
326
|
@Prop() selectedIds;
|
|
324
327
|
@Prop() title;
|
|
325
328
|
@Prop() idProperty;
|
|
329
|
+
@Prop() subrowsProperty;
|
|
326
330
|
@Prop() currency;
|
|
327
331
|
@Prop() currencies;
|
|
328
332
|
@Prop(Boolean) showGrouping;
|
|
@@ -335,6 +339,8 @@ class itfTableGroup extends Vue {
|
|
|
335
339
|
@Prop(Boolean) noColumnMenu;
|
|
336
340
|
@Prop(Boolean) noSelectAll;
|
|
337
341
|
@Prop(Boolean) editable;
|
|
342
|
+
@Prop(Boolean) expandedAll;
|
|
343
|
+
@Prop({ type: String, default: null }) indicatorType;
|
|
338
344
|
@Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
|
|
339
345
|
@Prop({type: Object, default: () => ({})}) schema;
|
|
340
346
|
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<template v-for="(item, n) in rows">
|
|
4
|
+
<div
|
|
5
|
+
:key="n"
|
|
6
|
+
group="items"
|
|
7
|
+
data-test="table-item"
|
|
8
|
+
class="table-view-item grouped draggable-item"
|
|
9
|
+
:class="{'selected': selectedIds.includes(item[idProperty])}"
|
|
10
|
+
>
|
|
11
|
+
<div class="table-row-template">
|
|
12
|
+
<div accept-group="items" class="table-view-body-space"></div>
|
|
13
|
+
<div class="shadow-area">
|
|
14
|
+
<div class="toggler-wrapper"></div>
|
|
15
|
+
<div class="handle-wrapper hover-only">
|
|
16
|
+
<a href="" class="context-menu-toggle table-item-options-menu">
|
|
17
|
+
<div class="v-popper--has-tooltip drag-handle">
|
|
18
|
+
<i data-test="table-item-options" class="ic-drag"></i>
|
|
19
|
+
</div>
|
|
20
|
+
</a>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="indicator sticky">
|
|
24
|
+
<div class="fill table-view-row-count" :class="{'on-rest': !noSelectAll}">
|
|
25
|
+
<span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
|
|
26
|
+
<span v-else-if="indicatorType === 'property'">{{ item[idProperty] }}</span>
|
|
27
|
+
<a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
|
|
28
|
+
<template v-if="subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length">
|
|
29
|
+
<template v-if="item[subrowsProperty] && item[subrowsProperty].length && !isExpanded(item)">
|
|
30
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
31
|
+
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
|
|
32
|
+
</svg>
|
|
33
|
+
</template>
|
|
34
|
+
<template v-else>
|
|
35
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
|
|
36
|
+
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
|
|
37
|
+
</svg>
|
|
38
|
+
</template>
|
|
39
|
+
</template>
|
|
40
|
+
</a>
|
|
41
|
+
</div>
|
|
42
|
+
<div v-if="!noSelectAll" class="fill on-hover">
|
|
43
|
+
<itf-checkbox :value="item[idProperty]" />
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
<div accept-group="items" class="table-item-inner" @click="$emit('row-click', item)">
|
|
47
|
+
<template v-for="(column, k) in visibleAttributes">
|
|
48
|
+
<div
|
|
49
|
+
v-if="column.visible !== false"
|
|
50
|
+
:data-column="k"
|
|
51
|
+
:style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
|
|
52
|
+
:class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
|
|
53
|
+
class="table-view-item-value d-flex h-100">
|
|
54
|
+
<slot :name="`column.${column.property}`" :toggle="() => $emit('toggle', item)" :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
|
|
55
|
+
<template v-if="column.editable && editable">
|
|
56
|
+
<slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
|
|
57
|
+
<itf-text-field class="w-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
58
|
+
<itf-hours-field
|
|
59
|
+
class="w-100"
|
|
60
|
+
placeholder="00h 00m"
|
|
61
|
+
v-else-if="column.type === 'time'"
|
|
62
|
+
:hours="getValue(item, column)"
|
|
63
|
+
@update:hours="updateValue(item, $event, n, column)"
|
|
64
|
+
/>
|
|
65
|
+
<itf-textarea class="w-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
66
|
+
<itf-money-field class="w-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
|
|
67
|
+
<itf-select class="w-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
|
|
68
|
+
</slot>
|
|
69
|
+
</template>
|
|
70
|
+
<div v-else class="h-100 align-items-center d-flex w-100">
|
|
71
|
+
<slot :name="`format.${column.type}`" :toggle="() => $emit('toggle', item)" :level="level" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
|
|
72
|
+
{{getValue(item, column)}}
|
|
73
|
+
</slot>
|
|
74
|
+
</div>
|
|
75
|
+
</slot>
|
|
76
|
+
</div>
|
|
77
|
+
</template>
|
|
78
|
+
<div v-if="showAddColumn" class="table-view-item-value extra bg-light"></div>
|
|
79
|
+
<div class="boundary top"></div>
|
|
80
|
+
<div class="boundary right"></div>
|
|
81
|
+
<div class="boundary bottom"></div>
|
|
82
|
+
<div class="boundary left"></div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<template v-if="subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length">
|
|
87
|
+
<itf-table-rows
|
|
88
|
+
v-show="isExpanded(item)"
|
|
89
|
+
:selected-ids="selectedIds"
|
|
90
|
+
:rows="item[subrowsProperty]"
|
|
91
|
+
:columns="columns"
|
|
92
|
+
:id-property="idProperty"
|
|
93
|
+
:subrows-property="subrowsProperty"
|
|
94
|
+
:show-add-column="showAddColumn"
|
|
95
|
+
:no-select-all="noSelectAll"
|
|
96
|
+
:editable="editable"
|
|
97
|
+
:currency="currency"
|
|
98
|
+
:currencies="currencies"
|
|
99
|
+
:indicator-type="indicatorType"
|
|
100
|
+
:level="level + 1"
|
|
101
|
+
:expanded-ids="expandedIds"
|
|
102
|
+
:expanded-all="expandedAll"
|
|
103
|
+
@toggle="$emit('toggle', $event)"
|
|
104
|
+
>
|
|
105
|
+
<template v-for="(_, name) in $slots" #[name]="slotData">
|
|
106
|
+
<slot :name="name" v-bind="slotData || {}" />
|
|
107
|
+
</template>
|
|
108
|
+
<template v-for="(_, name) in $scopedSlots" #[name]="slotData">
|
|
109
|
+
<slot :name="name" v-bind="slotData || {}" />
|
|
110
|
+
</template>
|
|
111
|
+
</itf-table-rows>
|
|
112
|
+
</template>
|
|
113
|
+
</template>
|
|
114
|
+
</div>
|
|
115
|
+
</template>
|
|
116
|
+
<script>
|
|
117
|
+
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
118
|
+
import get from 'lodash/get';
|
|
119
|
+
import set from 'lodash/set';
|
|
120
|
+
// import { RecycleScroller } from 'vue-virtual-scroller'
|
|
121
|
+
import itfCheckbox from '../checkbox/Checkbox.vue';
|
|
122
|
+
import itfTextField from '../text-field/TextField.vue';
|
|
123
|
+
import itfMoneyField from '../text-field/MoneyField.vue';
|
|
124
|
+
import itfTextarea from '../text-field/Textarea.vue';
|
|
125
|
+
import itfHoursField from '../text-field/HoursField.vue';
|
|
126
|
+
import itfSelect from '../select/Select.vue';
|
|
127
|
+
import itfTableBody from '@itfin/components/src/components/table/TableBody.vue';
|
|
128
|
+
// import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
|
|
129
|
+
|
|
130
|
+
export default @Component({
|
|
131
|
+
name: 'itfTableRows',
|
|
132
|
+
components: {
|
|
133
|
+
itfTableBody,
|
|
134
|
+
itfCheckbox,
|
|
135
|
+
itfMoneyField,
|
|
136
|
+
itfHoursField,
|
|
137
|
+
itfTextarea,
|
|
138
|
+
itfTextField,
|
|
139
|
+
itfSelect,
|
|
140
|
+
// RecycleScroller
|
|
141
|
+
}
|
|
142
|
+
})
|
|
143
|
+
class itfTableRows extends Vue {
|
|
144
|
+
@Prop() columns;
|
|
145
|
+
@Prop() rows;
|
|
146
|
+
@Prop() idProperty;
|
|
147
|
+
@Prop() subrowsProperty;
|
|
148
|
+
@Prop(Boolean) showAddColumn;
|
|
149
|
+
@Prop(Boolean) noSelectAll;
|
|
150
|
+
@Prop(Boolean) editable;
|
|
151
|
+
@Prop(Boolean) expandedAll;
|
|
152
|
+
@Prop() selectedIds;
|
|
153
|
+
@Prop() expandedIds;
|
|
154
|
+
@Prop() currency;
|
|
155
|
+
@Prop() currencies;
|
|
156
|
+
@Prop({ type: Number, default: 0 }) level;
|
|
157
|
+
@Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
|
|
158
|
+
|
|
159
|
+
getValue(item, column) {
|
|
160
|
+
return get(item, column.property);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
get visibleAttributes() {
|
|
164
|
+
return this.columns;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
get lastPinnedIndex() {
|
|
168
|
+
return this.columns.findIndex((column) => column.lastPinned);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
updateValue(item, value, index, column) {
|
|
172
|
+
const newItem = { ...item };
|
|
173
|
+
if (newItem[column.property] !== value) {
|
|
174
|
+
set(newItem, column.property, value);
|
|
175
|
+
this.$emit('update', {
|
|
176
|
+
index,
|
|
177
|
+
item,
|
|
178
|
+
value: newItem,
|
|
179
|
+
column
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
isExpanded(item) {
|
|
185
|
+
const isExpanded = this.expandedIds.includes(item[this.idProperty]);
|
|
186
|
+
console.info(isExpanded, this.expandedAll)
|
|
187
|
+
return this.expandedAll ? !isExpanded : isExpanded;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
</script>
|