@itfin/components 2.0.8 → 2.0.10

package/package.json

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

package/src/components/filter/FilterPanel.vue

@@ -1,30 +1,32 @@
 <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}}
-            <span class="visually-hidden">unread messages</span>
+            <span class="visually-hidden">active filters</span>
           </span>
         </itf-button>
         <slot name="after-filter-btn"></slot>
       </div>
     </div>
-    <div v-if="showFilters" class="d-flex gap-2 flex-wrap">
+    <div v-if="showFilters" class="d-flex gap-2 flex-nowrap">
       <filter-badge
-        v-for="(facet, n) in filters"
+        v-for="(facet, n) in visibleFilters"
         :key="n"
         v-model="filter[facet.name]"
         :is-default="filter[facet.name].isDefault"
@@ -89,7 +91,9 @@ 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;
 
   filter = {};
@@ -98,7 +102,27 @@ class FilterPanel extends Vue {
   loading = false;
   showFilters = true;
 
+  get visibleFilters() {
+    if (this.mini) {
+      return this.filters.filter(f => !f.options?.hidden).slice(0, 2);
+    }
+    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;
@@ -116,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) {
@@ -175,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) {
@@ -238,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/icon/components/nomi-eye.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.08422 11.626C4.97192 11.8628 4.97193 12.1375 5.08423 12.3743C6.303 14.9438 8.94045 16.7231 11.9977 16.7231C15.055 16.7231 17.6925 14.9437 18.9112 12.3741C19.0235 12.1373 19.0235 11.8625 18.9112 11.6258C17.6924 9.0562 15.055 7.27698 11.9978 7.27698C8.94046 7.27698 6.30294 9.05631 5.08422 11.626ZM15 12C15 13.6569 13.6569 15 12 15C10.3432 15 9.00003 13.6569 9.00003 12C9.00003 10.3432 10.3432 9.00002 12 9.00002C12.3075 9.00002 12.6042 9.04627 12.8834 9.1322C12.3625 9.36738 12 9.89137 12 10.5C12 11.3284 12.6716 12 13.5 12C14.1087 12 14.6327 11.6375 14.8678 11.1166C14.9538 11.3959 15 11.6926 15 12Z" fill="currentColor"/>
+</svg>
+</template>