@itfin/components 2.0.75 → 2.0.76

package/package.json

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

package/src/components/table/Table2.vue

@@ -19,7 +19,7 @@
       </div>
     </itf-notice-popout>
     <div class="scrollable scrollable-x">
-      <itf-checkbox-group v-model="selectedIds">
+      <itf-checkbox-group v-model="selectedIds" class="d-flex flex-column" style="min-width: 100%; width: max-content">
         <template v-for="(group, index) in groups">
           <div class="table-view-body">
             <itf-table-group
@@ -60,7 +60,9 @@
               :sorting.sync="_sorting"
               :active="active"
               :new-label="newLabel"
+              :collapsed-group-ids="collapsedGroupIds"
               @update:expanded-ids="$emit('update:expanded-ids', $event)"
+              @update:collapsed-group-ids="$emit('update:collapsed-group-ids', $event)"
               @new="$emit('new', $event)"
               @filter="$emit('filter', $event)"
               @add-column="$emit('add-column', $event)"
@@ -121,6 +123,7 @@ class itfTable2 extends Vue {
   @ModelSync('value', 'input', { type: Array, default: () => ([]) }) selectedIds;
   @PropSync('sorting') _sorting;
   @Prop({ type: Array, default: () => [] }) expandedIds;
+  @Prop({ type: Array }) collapsedGroupIds;
   @Prop() currency;
   @Prop() currencies;
   @Prop(Boolean) stickyHeader;

package/src/components/table/TableGroup.vue

@@ -15,14 +15,14 @@
             <div class="table-row-template d-flex align-items-stretch"
                  style="min-height: var(--group-title-height)">
               <div class="shadow-area"></div>
-              <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
+              <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="() => toggleGroup(!isShowTable)">
                 <a class="header-content position-sticky d-flex align-items-center">
                   <itf-button squircle icon small secondary class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
                   </itf-button>
                   <span class="d-flex align-items-center line-overflow group-header-value text-primary"
                         data-test="group-value-group-label-value">
-                    <slot name="group-title" :rows="rows" :title="title">{{ title }}</slot>
+                    <slot name="group-title" :rows="rows" :title="title" :collapsed="!isShowTable">{{ title }}</slot>
                   </span>
                 </a>
               </div>
@@ -392,10 +392,14 @@ class itfTableGroup extends Vue {
   @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;
   @Prop() expandedIds;
+  @Prop() collapsedGroupIds;
 
-  isShowTable = true;
   persistSummary = false;
 
+  get isShowTable() {
+    return typeof this.collapsedGroupIds !== 'undefined' ? !this.collapsedGroupIds.includes(this.title) : true;
+  }
+
   get visibleColumns() {
     let list = this.columns;
     list = sortBy(list, (column) => column.index);
@@ -416,8 +420,17 @@ class itfTableGroup extends Vue {
     this.$emit('update:columns', columns);
   }
 
-  toggleGroup() {
-    this.isShowTable = !this.isShowTable;
+  toggleGroup(val) {
+    let expanded = this.collapsedGroupIds ? [...this.collapsedGroupIds] : [];
+    if (!val) {
+      if (!expanded.includes(this.title)) {
+        expanded.push(this.title);
+      }
+    } else {
+      expanded = expanded.filter(id => id !== this.title);
+    }
+    console.info(expanded, this.title, val);
+    this.$emit('update:collapsed-group-ids', expanded);
   }
 
   get stickyId() {