@itfin/components 2.0.9 → 2.0.10

package/package.json

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

package/src/components/filter/FilterPanel.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="itf-filter-panel d-flex flex-column gap-3 align-items-start">
     <div v-if="search" class="d-flex gap-2 justify-content-between w-100">
-      <itf-text-field
-        style="width: 300px"
-        small
-        :placeholder="searchPlaceholder"
-        prepend-icon="search"
-        :delay-input="250"
-        clearable
-        :value="filterValue.query"
-        @input="(e) => onFilterChange({ type: 'text', name: 'query' }, { value: e })"
-      />
+      <slot name="search">
+        <itf-text-field
+          style="width: 300px"
+          small
+          :placeholder="searchPlaceholder"
+          prepend-icon="search"
+          :delay-input="250"
+          clearable
+          :value="filterValue.query"
+          @input="(e) => onFilterChange({ type: 'text', name: 'query' }, { value: e })"
+        />
+      </slot>
       <div class="d-flex gap-2">
-        <itf-button default icon class="position-relative" @click="showFilters = !showFilters">
+        <itf-button default icon class="position-relative" @click="toggleFilters">
           <itf-icon new name="filter" />
           <span v-if="activeFiltersCount" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
             {{activeFiltersCount}}
@@ -89,6 +91,7 @@ class FilterPanel extends Vue {
   @Prop({ type: Array }) staticFilters;
   @Prop({ type: String }) endpoint;
   @Prop() panel;
+  @Prop(String) stateName;
   @Prop(Boolean) search;
   @Prop(Boolean) mini;
   @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
@@ -101,16 +104,25 @@ class FilterPanel extends Vue {
 
   get visibleFilters() {
     if (this.mini) {
-      return this.filters.slice(0, 2);
+      return this.filters.filter(f => !f.options?.hidden).slice(0, 2);
     }
-    return this.filters;
+    return this.filters.filter(f => !f.options?.hidden);
   }
 
   get resetFilters() {
     return this.filters.filter(f => !this.visibleFilters.find(vf => vf.name === f.name));
   }
 
+  get localstorageKey() {
+    return `filter-panel-${this.stateName}-filters`;
+  }
+
   async mounted() {
+    if (this.stateName) {
+      const item = localStorage.getItem(this.localstorageKey);
+      this.showFilters = item ? JSON.parse(item) : this.showFilters;
+    }
+
     this.filters = this.staticFilters ?? [];
     if (this.endpoint) {
       this.loading = true;
@@ -128,18 +140,27 @@ class FilterPanel extends Vue {
     }
   }
 
+  toggleFilters() {
+    this.showFilters = !this.showFilters;
+    if (this.stateName) {
+      localStorage.setItem(this.localstorageKey, this.showFilters);
+    }
+  }
+
   loadFiltersValue() {
     const payload = this.panel ? this.panel.getPayload() : {};
     const filter = {};
     const filterValue = {};
-    for (const item of this.filters) {
-      if (item.type === 'period') {
-        filter[item.name] = payload.from ? this.formatValue(item, { value: [payload.from, payload.to] }) : { isDefault: true, ...item.options.defaultValue };
-        filterValue.from = payload.from;
-        filterValue.to = payload.to;
-      } else {
-        filter[item.name] = payload[item.name] ? this.formatValue(item, { value: payload[item.name] }) : { isDefault: true, ...item.options.defaultValue };
-        filterValue[item.name] = payload[item.name];
+    if (this.filters) {
+      for (const item of this.filters) {
+        if (item.type === 'period') {
+          filter[item.name] = payload.from ? this.formatValue(item, { value: [payload.from, payload.to] }) : { isDefault: true, ...item.options.defaultValue };
+          filterValue.from = payload.from;
+          filterValue.to = payload.to;
+        } else {
+          filter[item.name] = payload[item.name] ? this.formatValue(item, { value: payload[item.name] }) : { isDefault: true, ...item.options.defaultValue };
+          filterValue[item.name] = payload[item.name];
+        }
       }
     }
     if (this.search) {
@@ -187,7 +208,7 @@ class FilterPanel extends Vue {
   }
 
   get activeFiltersCount() {
-    return Object.values(this.filter).filter(facet => !facet.isDefault).length;
+    return Object.values(this.filter).filter(facet => !facet.isDefault && !facet.hidden).length;
   }
 
   formatValue(facet, value) {
@@ -250,6 +271,7 @@ class FilterPanel extends Vue {
       value.value = value.value.length ? value.value : undefined;
       value.isDefault = !value.value;
     }
+    value.hidden = facet.options?.hidden ?? false;
     return value;
   }
 }

package/src/components/table/TableRowToggle.vue

@@ -28,6 +28,7 @@
 }
 .item-toggle {
   width: 1.5rem;
+  min-width: 1.5rem;
   display: flex;
   align-items: center;
 }

package/src/components/table/table2.scss

@@ -130,6 +130,7 @@ body[data-theme="dark"] {
   }
   .last-sticky-column {
     position: relative;
+    border-right: 0 none !important;
     &:after {
       content: "";
       position: absolute;