@itfin/components 1.4.14 → 1.4.15

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/view/View.vue +51 -48
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itfin/components",
3
- "version": "1.4.14",
3
+ "version": "1.4.15",
4
4
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/view/View.vue CHANGED
@@ -2,16 +2,16 @@
2
2
 
3
3
  <div v-loading="loading || loadingData" class="flex-grow-1 w-100 d-flex flex-column">
4
4
  <itf-filter-panel
5
- :search-placeholder="searchPlaceholder"
6
- :search="currentTab !== 'list'"
7
- :show-filter="currentTab !== 'list'"
8
- class="py-2 px-3"
9
- :static-filters="filters"
10
- :endpoint="filtersEndpoint"
11
- :panel="panel"
12
- v-model="filter"
13
- @input="onFilterSet"
14
- @set-table-schema="setTableSchema"
5
+ :search-placeholder="searchPlaceholder"
6
+ :search="currentTab !== 'list'"
7
+ :show-filter="currentTab !== 'list'"
8
+ class="py-2 px-3"
9
+ :static-filters="filters"
10
+ :endpoint="filtersEndpoint"
11
+ :panel="panel"
12
+ v-model="filter"
13
+ @input="onFilterSet"
14
+ @set-table-schema="setTableSchema"
15
15
  >
16
16
  <template #after-filter-btn>
17
17
  <itf-dropdown v-if="$refs.table && tableSchema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
@@ -42,12 +42,12 @@
42
42
  </itf-dropdown>
43
43
 
44
44
  <itf-segmented-control
45
- v-if="tabs.length > 1"
46
- class="small"
47
- :value="currentTab"
48
- item-key="value"
49
- :items="tabs"
50
- @input="updateTabs"
45
+ v-if="tabs.length > 1"
46
+ class="small"
47
+ :value="currentTab"
48
+ item-key="value"
49
+ :items="tabs"
50
+ @input="updateTabs"
51
51
  >
52
52
  <template #item="{ item }">
53
53
  <div class="d-flex align-items-center">
@@ -66,28 +66,28 @@
66
66
  <div class="flex-grow-1 px-3 d-flex flex-column">
67
67
  <div class="position-relative flex-grow-1">
68
68
  <itf-table
69
- ref="table"
70
- style="--shadow-area-width: 0px;"
71
- absolute
72
- striped
73
- clickable
74
- column-sorting
75
- column-resizing
76
- :indicator-type="indicatorType"
77
- class="permanent-checkboxes"
78
- :state-name="stateName"
79
- id-property="id"
80
- :sort-as-string="sortAsString"
81
- :rows="items"
82
- :schema="tableSchema"
83
- :sorting="sorting"
84
- :active="activeIds"
85
- :no-select-all="noSelectAll"
86
- :show-actions="showActions"
87
- :indicator-width="indicatorWidth"
88
- v-model="selectedIds"
89
- @row-click="$emit('open', $event)"
90
- @update:sorting="updateSorting($event)"
69
+ ref="table"
70
+ style="--shadow-area-width: 0px;"
71
+ absolute
72
+ striped
73
+ clickable
74
+ column-sorting
75
+ column-resizing
76
+ :indicator-type="indicatorType"
77
+ class="permanent-checkboxes"
78
+ :state-name="stateName"
79
+ id-property="id"
80
+ :sort-as-string="sortAsString"
81
+ :rows="items"
82
+ :schema="tableSchema"
83
+ :sorting="sorting"
84
+ :active="activeIds"
85
+ :no-select-all="noSelectAll"
86
+ :show-actions="showActions"
87
+ :indicator-width="indicatorWidth"
88
+ v-model="selectedIds"
89
+ @row-click="$emit('open', $event)"
90
+ @update:sorting="updateSorting($event)"
91
91
  >
92
92
  <template v-for="(_, name) in $slots" #[name]="slotData">
93
93
  <slot :name="name" v-bind="slotData || {}"/>
@@ -101,18 +101,18 @@
101
101
  </slot>
102
102
 
103
103
  <itf-pagination
104
- class="my-2 px-3"
105
- v-if="showPagination"
106
- show-size
107
- :size="size"
108
- :items="items"
109
- :pages="countPages"
110
- :value="page"
111
- @input="updatePage($event)"
112
- @per-page="updateSizePerPage($event)"
104
+ class="my-2 px-3"
105
+ v-if="showPagination"
106
+ show-size
107
+ :size="size"
108
+ :items="items"
109
+ :pages="countPages"
110
+ :value="page"
111
+ @input="updatePage($event)"
112
+ @per-page="updateSizePerPage($event)"
113
113
  >
114
114
  <template #center>
115
- <slot name="pagination-center" />
115
+ <slot name="pagination-center" :totals="totals" />
116
116
  </template>
117
117
  </itf-pagination>
118
118
  </div>
@@ -154,6 +154,7 @@ class itfView extends Vue {
154
154
  @Prop(String) endpoint;
155
155
  @Prop(String) filtersEndpoint;
156
156
  @Prop(String) itemsKey;
157
+ @Prop({ type: String, default: 'totals' }) totalsKey;
157
158
  @Prop(String) panelKey;
158
159
  @Prop(String) stateName;
159
160
  @Prop({ type: String, default: 'checkbox' }) indicatorType;
@@ -182,6 +183,7 @@ class itfView extends Vue {
182
183
  activeIds = [];
183
184
  tableColumns = undefined;
184
185
  _currentTab = null;
186
+ totals = null;
185
187
 
186
188
  @Watch('selectedIds', { deep: true, immediate: true })
187
189
  updateSelectedIds() {
@@ -275,6 +277,7 @@ class itfView extends Vue {
275
277
  this.size = Number(headers['x-size'] ?? 20);
276
278
  } else {
277
279
  this.items = data[this.itemsKey];
280
+ this.totals = data[this.totalsKey];
278
281
  this.page = data.meta.page;
279
282
  this.total = data.meta.total;
280
283
  this.size = data.meta.size;