@itfin/components 1.4.15 → 1.4.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.4.15",
+  "version": "1.4.17",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/view/View.vue

@@ -41,13 +41,14 @@
           </a>
         </itf-dropdown>
 
+        <slot name="before-tabs"></slot>
+
         <itf-segmented-control
           v-if="tabs.length > 1"
           class="small"
-          :value="currentTab"
+          v-model="currentTab"
           item-key="value"
           :items="tabs"
-          @input="updateTabs"
         >
           <template #item="{ item }">
             <div class="d-flex align-items-center">
@@ -79,8 +80,9 @@
             id-property="id"
             :sort-as-string="sortAsString"
             :rows="items"
+            :group-by="groupBy"
             :schema="tableSchema"
-            :sorting="sorting"
+            :sorting.sync="sorting"
             :active="activeIds"
             :no-select-all="noSelectAll"
             :show-actions="showActions"
@@ -133,7 +135,8 @@ export default @Component({
   name: 'itfView',
   components: {
     itfSegmentedControl,
-    itfDropdown, itfIcon,
+    itfDropdown,
+    itfIcon,
     itfPagination,
     itfFilterPanel,
     itfTableBody,
@@ -154,6 +157,7 @@ class itfView extends Vue {
   @Prop(String) endpoint;
   @Prop(String) filtersEndpoint;
   @Prop(String) itemsKey;
+  @Prop({ type: String, default: null }) groupBy;
   @Prop({ type: String, default: 'totals' }) totalsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
@@ -182,7 +186,6 @@ class itfView extends Vue {
   loadingData = false;
   activeIds = [];
   tableColumns = undefined;
-  _currentTab = null;
   totals = null;
 
   @Watch('selectedIds', { deep: true, immediate: true })
@@ -198,6 +201,7 @@ class itfView extends Vue {
 
   set currentTab(val) {
     this.$emit('update:tab', val);
+    this.setPanelPayload({ tab: val });
   }
 
   get tabs() {
@@ -320,10 +324,6 @@ class itfView extends Vue {
     localStorage.setItem('sizePerPage', val);
   }
 
-  updateTabs(val) {
-    this.setPanelPayload({ tab: val });
-  }
-
   setPanelPayload(payload) {
     this.panel.setPayload(assignWithoutUndefined(this.panel.getPayload(), payload));
 
@@ -352,5 +352,9 @@ class itfView extends Vue {
   setTableSchema(tableSchema) {
     this.tableColumns = tableSchema;
   }
+
+  getTableState() {
+    return this.$refs.table.getTableState();
+  }
 }
 </script>