@itfin/components 2.0.37 → 2.0.38

package/package.json

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

package/src/components/filter/FilterFacetsList.vue

@@ -20,16 +20,26 @@
       </div>
     </div>
     <div class="facets-list">
-    <div v-for="(val, n) of mappedValues" :key="n" class="dropdown-item px-2" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
-      <span class="facet-name text-dark d-flex align-items-center">
-        <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
-        <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
-      </span>
-      <span v-if="val.count" class="facet-stat">
-        {{ val.count }}
-        <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
-      </span>
-    </div>
+      <div v-for="(group, g) of groupedList">
+        <div v-if="group.group" class="dropdown-item ps-1 d-flex align-items-center"
+             :class="{'active': isGroupSelected(group.items)}" @click="groupSelected(!isGroupSelected(group.items), group.items)">
+          <span class="facet-name text-dark d-flex align-items-center">
+            <itf-checkbox ungrouped :value="isGroupSelected(group.items)" @input="groupSelected($event, group.items)" class="m-0" />
+            <div class="w-100 text-truncate">{{ group.group }}</div>
+          </span>
+        </div>
+
+        <div v-for="(val, n) of group.items" :key="n" class="dropdown-item ps-1" :class="{'active': val.isSelected, 'ps-4': group.group}" @click="onFilterClick(val)">
+          <span class="facet-name text-dark d-flex align-items-center">
+            <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
+            <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
+          </span>
+          <span v-if="val.count" class="facet-stat">
+            {{ val.count }}
+            <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
+          </span>
+        </div>
+      </div>
     </div>
 
     <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
@@ -111,6 +121,8 @@
 }
 </style>
 <script>
+import uniq from 'lodash/uniq';
+import sortBy from 'lodash/sortBy';
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
 import itfButton from '../button/Button';
@@ -149,6 +161,20 @@ class FilterFacetsList extends Vue {
     return this.visibleList.length > this.limit;
   }
 
+  get hasGroups() {
+    const groups = uniq(this.items && this.items.map(item => item.group).filter(Boolean));
+    return groups.length > 1
+  }
+
+  isGroupSelected(items) {
+    return items.every(item => item.isSelected);
+  }
+
+  groupSelected(value, items) {
+    const newVal = value ? items.map(item => `${item.value}`) : [];
+    this.$emit('input', this.multiple ? newVal : (newVal.length > 0 ? newVal[0] : null));
+  }
+
   get visibleList() {
     let list = this.items.map(val => {
       const isSelected = this.multiple
@@ -163,7 +189,22 @@ class FilterFacetsList extends Vue {
     if (this.isShowSelected) {
       return list.filter((val) => val.isSelected);
     }
-    return list;
+    return sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
+  }
+
+  get groupedList() {
+    if (!this.hasGroups) {
+      return [{ items: this.mappedValues }];
+    }
+    const groups = {};
+    this.mappedValues.forEach((item) => {
+      const group = item.group || '';
+      if (!groups[group]) {
+        groups[group] = [];
+      }
+      groups[group].push(item);
+    });
+    return Object.entries(groups).map(([group, items]) => ({ group, items }));
   }
 
   get mappedValues() {

package/src/components/table/table2.scss

@@ -60,7 +60,7 @@ body[data-theme="dark"] {
     height: 100%;
   }
   .scroller {
-    margin-bottom: .5rem;
+    margin-bottom: 12px;
   }
   .scrollable-x {
     overflow-x: scroll;