@itfin/components 2.0.46 → 2.0.47

package/package.json

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

package/src/components/filter/FilterFacetsList.vue

@@ -20,18 +20,16 @@
       </div>
     </div>
     <div class="facets-list">
-      <div v-for="(val, g) of groupedList" :key="g" :style="{paddingLeft: `${((val.level || 0) + 0.5) * 1}rem`}"
-           class="dropdown-item" :class="{'active': val.isSelected, 'active': isGroupSelected(val)}" @click="onFilterClick(val)">
-        <span class="facet-name text-dark d-flex align-items-center">
-          <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
-          <itf-icon new v-if="val.isGroup && groupIcon" :name="groupIcon" class="me-1" />
-          <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="(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>
 
     <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
@@ -113,12 +111,8 @@
 }
 </style>
 <script>
-import uniq from 'lodash/uniq';
-import sortBy from 'lodash/sortBy';
-import groupBy from 'lodash/groupBy';
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
-import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 import itfCheckbox from '../checkbox/Checkbox.vue';
 
@@ -126,7 +120,6 @@ export default @Component({
   name: 'FilterFacetsList',
   components: {
     itfCheckbox,
-    itfIcon,
     itfButton,
     itfTextField
   }
@@ -136,7 +129,6 @@ class FilterFacetsList extends Vue {
   @Prop() items;
   @Prop() item;
   @Prop() total;
-  @Prop() options;
   @Prop({ type: Number, default: 5 }) limit;
   @Prop(Boolean) multiple;
   @Prop(Boolean) showAll;
@@ -150,44 +142,6 @@ class FilterFacetsList extends Vue {
     this.showMore = !this.showMore;
   }
 
-  get groupIcon() {
-    return this.options?.groupIcon;
-  }
-
-  get flatList() {
-    return treeToFlat(this.items || []);
-
-    function getIdsDeep(items, mapFunc) {
-      return (items ?? []).reduce((acc, item) => {
-        const id = mapFunc(item);
-        if (id) {
-          acc.push(id);
-        }
-        if (item.items && item.items.length) {
-          acc.push(...getIdsDeep(item.items, mapFunc));
-        }
-        return acc;
-      }, []);
-    }
-    function treeToFlat(items, level = 0) {
-      return (items ?? []).reduce((acc, item) => {
-        acc.push({
-          ...item,
-          level,
-          ids: [item.isGroup ? `g:${item.value}` : item.value].concat(
-            getIdsDeep(item.items, (item) => item.isGroup ? `g:${item.value}` : item.value)
-          )
-            .filter(Boolean),
-        });
-        if (item.items && item.items.length) {
-          // acc.push({ ...item, group: item.label, level });
-          acc.push(...treeToFlat(item.items, level + 1));
-        }
-        return acc;
-      }, []);
-    }
-  }
-
   get hasMore() {
     if (this.showAll) {
       return false;
@@ -195,36 +149,8 @@ class FilterFacetsList extends Vue {
     return this.visibleList.length > this.limit;
   }
 
-  get hasGroups() {
-    const groups = uniq(this.flatList && this.flatList.map(item => item.group).filter(Boolean));
-    return groups.length > 1
-  }
-
-  isGroupSelected(val) {
-    return (val.ids ?? []).every(id => this.value.includes(`${id}`));
-  }
-
-  groupSelected(value, ids) {
-    let newVal = this.value ? [...Array.isArray(this.value) ? this.value : [this.value]] : [];
-    console.info(value, ids);
-    if (value) {
-      ids.forEach((id) => {
-        const itemValue = `${id}`;
-        if (!newVal.includes(itemValue)) {
-          newVal.push(itemValue);
-        }
-      });
-    } else {
-      ids.forEach((id) => {
-        const itemValue = `${id}`;
-        newVal = newVal.filter(val => val !== itemValue);
-      });
-    }
-    this.$emit('input', this.multiple ? newVal : (newVal.length > 0 ? newVal[0] : null));
-  }
-
   get visibleList() {
-    let list = this.flatList.map(val => {
+    let list = this.items.map(val => {
       const isSelected = this.multiple
         ? Array.isArray(this.value) && this.value.map(String).includes(`${val.value}`)
         : `${this.value}` === `${val.value}`;
@@ -237,15 +163,7 @@ class FilterFacetsList extends Vue {
     if (this.isShowSelected) {
       return list.filter((val) => val.isSelected);
     }
-    return this.hasGroups ? sortBy(list, (item) => item.group || item.label) : list;//sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
-  }
-
-  get groupedList() {
-    if (!this.hasGroups) {
-      return this.mappedValues;
-    }
-    const groups = groupBy(this.mappedValues, (item) => item.group || '');
-    return Object.entries(groups).reduce((acc, [group, items]) => [...acc, { label: group, isGroup: true }, ...(items.map(item => ({ ...item, level: 1 })))], []);
+    return list;
   }
 
   get mappedValues() {
@@ -261,10 +179,6 @@ class FilterFacetsList extends Vue {
   }
 
   onFilterClick(val) {
-    if (val.isGroup) {
-      this.groupSelected(!val.isSelected, val.ids);
-      return;
-    }
     const value = `${val.value}`;
     if (!this.multiple) {
       return this.$emit('input', `${this.value}` === value ? null : value);