@itfin/components 2.0.9 → 2.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "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) {
@@ -221,6 +242,9 @@ class FilterPanel extends Vue {
     } else if (facet.type === 'facets-list') {
       const firstItem = facet.options.items.find(item => item.value === (Array.isArray(value.value) ? value.value[0] : value.value));
       value.label = firstItem ? firstItem.label : facet.options.defaultValue.label;
+      if (!Array.isArray(value.value)) {
+        value.value = [value.value];
+      }
       if (value.value && value.value.length > 1) {
         value.label = `${value.label} та ще ${value.value.length - 1}`;
       }
@@ -250,6 +274,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-pen.vue

@@ -0,0 +1,5 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7 18L17 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+  <path d="M7 13.4142V15.5C7 15.7761 7.22386 16 7.5 16H9.58579C9.851 16 10.1054 15.8946 10.2929 15.7071L17.2929 8.70711C17.6834 8.31658 17.6834 7.68342 17.2929 7.29289L15.7071 5.70711C15.3166 5.31658 14.6834 5.31658 14.2929 5.70711L7.29289 12.7071C7.10536 12.8946 7 13.149 7 13.4142Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-trash.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="M10.0004 5.40039C9.66902 5.40039 9.40039 5.66902 9.40039 6.00039C9.40039 6.33176 9.66902 6.60039 10.0004 6.60039H14.0004C14.3318 6.60039 14.6004 6.33176 14.6004 6.00039C14.6004 5.66902 14.3318 5.40039 14.0004 5.40039H10.0004ZM5.40039 8.00039C5.40039 7.66902 5.66902 7.40039 6.00039 7.40039L18.0004 7.40039C18.3318 7.40039 18.6004 7.66902 18.6004 8.00039C18.6004 8.33176 18.3318 8.60039 18.0004 8.60039H16.9458L16.0831 18.0909C16.0362 18.606 15.6044 19.0004 15.0872 19.0004H8.91361C8.3964 19.0004 7.96454 18.606 7.91771 18.0909L7.05494 8.60039H6.00039C5.66902 8.60039 5.40039 8.33176 5.40039 8.00039Z" fill="currentColor"/>
+</svg>
+</template>