@itfin/components 2.0.16 → 2.0.18

package/src/components/filter/FilterPanel.vue

@@ -1,41 +1,56 @@
 <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">
+    <div v-if="!filtersOnly" class="d-flex gap-2 justify-content-between w-100">
       <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 })"
-        />
+        <div>
+          <itf-text-field
+            v-if="search"
+            style="width: 300px"
+            small
+            :placeholder="searchPlaceholder"
+            prepend-icon="search"
+            :delay-input="250"
+            clearable
+            :value="filterValueQuery"
+            @input="(e) => onFilterChange({ type: 'text', name: 'query' }, { value: e })"
+          />
+        </div>
       </slot>
       <div class="d-flex gap-2">
-        <itf-button default icon class="position-relative" @click="toggleFilters">
+        <!--itf-button v-if="showFilter" default icon class="position-relative" @click="toggleFilters" :class="{'active': showFilters}">
           <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">active filters</span>
           </span>
-        </itf-button>
+        </itf-button-->
         <slot name="after-filter-btn"></slot>
       </div>
     </div>
-    <div v-if="showFilters" class="d-flex gap-2 flex-nowrap filters-row">
-      <filter-badge
-        v-for="(facet, n) in visibleFilters"
-        :key="n"
-        v-model="filter[facet.name]"
-        :is-default="filter[facet.name].isDefault"
-        :text="filter[facet.name].label"
-        :type="facet.type"
-        :icon="facet.icon"
-        :options="facet.options"
-        @change="onFilterChange(facet, $event)"
-      />
+    <div class="d-flex align-items-start justify-content-between w-100">
+      <div v-show="showFilters && showFilter" class="gap-2 filters-row" ref="container" :class="{'expanded': isFilterExpanded}">
+        <filter-badge
+          v-for="(facet, n) in visibleFilters"
+          :key="n"
+          class="itf-filter-panel__badge"
+          :ref="'item-' + n"
+          v-model="filter[facet.name]"
+          :is-default="filter[facet.name].isDefault"
+          :text="filter[facet.name].label"
+          :type="facet.type"
+          :icon="facet.icon"
+          :options="facet.options"
+          :class="{ hidden: !visibleItems.has(n) && !isFilterExpanded }"
+          @change="onFilterChange(facet, $event)"
+        />
+      </div>
+      <div v-if="showFilters && showFilter && (visibleItems.size < visibleFilters.length || (isFilterExpanded && visibleItems.size === visibleFilters.length))">
+        <itf-button icon default small class="itf-filter-panel__filters" @click="toggleExpandFilter">
+          <itf-icon v-if="isFilterExpanded" name="minus" />
+          <itf-icon v-else name="plus" />
+        </itf-button>
+      </div>
+      <slot name="after-filters"></slot>
     </div>
     <div v-if="loading">
       <span class="itf-spinner"></span>
@@ -45,6 +60,18 @@
 </template>
 <style lang="scss">
 .itf-filter-panel {
+  &__badge {
+    transition: opacity 0.3s ease-in-out;
+
+    &.hidden {
+      opacity: 0;
+      pointer-events: none;
+      visibility: hidden;
+    }
+  }
+  &__filters {
+    outline: 1px solid var(--filter-badge__default-border-color);
+  }
   .itf-text-field:not(.is-valid):not(.is-invalid) .itf-icon {
     color: #8E97A5;
   }
@@ -63,18 +90,28 @@
   }
 
   .filters-row {
-    @media (max-width: 768px) {
-      overflow: auto;
-      width: 100%;
-      padding: 2px;
-      margin: -2px;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    padding: 2px;
+    margin: -2px;
+    flex-wrap: nowrap;
+
+    &.expanded {
+      flex-wrap: wrap;
+
+      .itf-filter-panel__badge.hidden {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: all;
+      }
     }
   }
 }
 </style>
 <script>
 import { DateTime } from 'luxon';
-import { Vue, Model, Prop, Component } from 'vue-property-decorator';
+import { Vue, Watch, Model, Prop, Component } from 'vue-property-decorator';
 import tooltip from '../../directives/tooltip';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
@@ -103,18 +140,75 @@ class FilterPanel extends Vue {
   @Prop() panel;
   @Prop(String) stateName;
   @Prop(Boolean) search;
+  @Prop({ type: Boolean, default: true }) showFilter;
+  @Prop({ type: Boolean, default: false }) filtersOnly;
   @Prop(Boolean) mini;
   @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
 
   filter = {};
-  filterValue = {};
+  filterValue = null;
   filters = [];
   loading = false;
   showFilters = true;
+  isFilterExpanded = false;
+  observer = null;
+
+  periodFilters = ['period', 'timeframe'];
+  visibleItems = new Set();
+
+  toggleExpandFilter() {
+    this.isFilterExpanded = !this.isFilterExpanded;
+  }
+
+  beforeDestroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
+  initObserver() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (!this.$refs.container) {
+      return;
+    }
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          const index = parseInt(entry.target.dataset.index);
+          const filter = this.filters[index];
+          const value = this.filter[filter.name];
+          if (entry.isIntersecting) {
+            this.visibleItems.add(index); // Додаємо, якщо елемент у полі зору
+          } else {
+            this.visibleItems.delete(index); // Видаляємо, якщо вийшов за межі
+          }
+          this.$forceUpdate(); // Оновлюємо Vue, бо Set не є реактивним
+        });
+      },
+      { root: this.$refs.container, threshold: 1.0 }
+    );
+
+    // Спостерігаємо за кожним елементом
+    this.$nextTick(() => {
+      for (const index in this.visibleFilters) {
+        const item = this.$refs[`item-${index}`][0];
+        if (item) {
+          item.$el.dataset.index = index; // Зберігаємо індекс у dataset
+          this.observer.observe(item.$el);
+        }
+      }
+    });
+  }
+
+  get filterValueQuery() {
+    return this.filterValue?.query ?? '';
+  }
 
   get visibleFilters() {
     if (this.mini) {
-      return sortBy(this.filters, (f) => this.filter[f.name].isDefault).filter(f => !f.options?.hidden).slice(0, 2);
+      return sortBy(this.filters, (f) => this.filter[f.name].isDefault).filter(f => !f.options?.hidden);
     }
     return this.filters.filter(f => !f.options?.hidden);
   }
@@ -127,6 +221,12 @@ class FilterPanel extends Vue {
     return `filter-panel-${this.stateName}-filters`;
   }
 
+  @Watch('staticFilters', { deep: true })
+  onStaticFiltersUpdate() {
+    this.filters = this.staticFilters ?? [];
+    this.loadFiltersValue();
+  }
+
   async mounted() {
     if (this.stateName) {
       const item = localStorage.getItem(this.localstorageKey);
@@ -137,8 +237,10 @@ class FilterPanel extends Vue {
     if (this.endpoint) {
       this.loading = true;
       await this.$try(async () => {
-        const {filters} = await this.$axios.$get(this.endpoint);
+        const payload = this.panel ? this.panel.getPayload() : {};
+        const {filters, tableSchema} = await this.$axios.$get(this.endpoint, { params: payload });
         this.filters = filters;
+        this.$emit('set-table-schema', tableSchema);
         this.loadFiltersValue();
       });
       this.loading = false;
@@ -163,7 +265,7 @@ class FilterPanel extends Vue {
     const filterValue = {};
     if (this.filters) {
       for (const item of this.filters) {
-        if (item.type === 'period') {
+        if (this.periodFilters.includes(item.type)) {
           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;
@@ -176,13 +278,25 @@ class FilterPanel extends Vue {
     if (this.search) {
       filterValue.query = payload.query;
     }
-    const prevFilter = JSON.stringify(this.filter).concat(JSON.stringify(this.filterValue));
-    const newFilter = JSON.stringify(filter).concat(JSON.stringify(filterValue));
-    if (prevFilter !== newFilter) {
+    const prevFilter = JSON.stringify(this.getVisibleFilters(this.filterValue));//.concat(JSON.stringify(this.filterValue));
+    const newFilter = JSON.stringify(this.getVisibleFilters(filterValue));//.concat(JSON.stringify(filterValue));
+    if (prevFilter !== newFilter || !this.filterValue) {
       this.filter = filter;
       this.filterValue = filterValue;
       this.$emit('input', this.filterValue);
+      this.initObserver();
+    }
+  }
+
+  getVisibleFilters(filter) {
+    const result = [];
+    const facets = Object.values(this.filter);
+    for (const facet of facets) {
+      if (!facet.isDefault && !facet.hidden) {
+        result.push(filter[facet.name]);
+      }
     }
+    return result.filter(Boolean);
   }
 
   setFilter(field, value) {
@@ -195,7 +309,7 @@ class FilterPanel extends Vue {
 
   onFilterChange(facet, value) {
     this.filter[facet.name] = this.formatValue(facet, value);
-    if (facet.type === 'period') {
+    if (this.periodFilters.includes(facet.type)) {
       this.filterValue.from = this.filter[facet.name].isDefault ? undefined : value.value[0];
       this.filterValue.to = this.filter[facet.name].isDefault ? undefined : value.value[1];
     } else {
@@ -226,7 +340,7 @@ class FilterPanel extends Vue {
   }
 
   formatValue(facet, value) {
-    if (facet.type === 'period') {
+    if (this.periodFilters.includes(facet.type)) {
       if (value.value) {
         let from = DateTime.fromFormat(value.value[0], 'yyyy-MM-dd');
         let to = DateTime.fromFormat(value.value[1], 'yyyy-MM-dd');
@@ -285,7 +399,7 @@ class FilterPanel extends Vue {
       value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;
       value.label = item ? item.label : facet.options.defaultValue.label;
     } else if (facet.type === 'text') {
-      value.value = value.value.length ? value.value : undefined;
+      value.value = value.value.length ? value.value : (facet.options?.defaultValue ?? undefined);
       value.isDefault = !value.value;
     }
     value.hidden = facet.options?.hidden ?? false;

package/src/components/icon/components/nomi-export.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="M11.4 5V8C11.4 8.88366 12.1163 9.6 13 9.6H16V15.7372L15.8527 15.5899C15.2279 14.9651 14.2148 14.9651 13.59 15.5899C12.9651 16.2148 12.9651 17.2278 13.59 17.8527L14.7373 19H7C6.44772 19 6 18.5523 6 18V6C6 5.44772 6.44772 5 7 5H11.4ZM12.6 5.6V8C12.6 8.22091 12.7791 8.4 13 8.4H15.4L12.6 5.6ZM18.1456 20.1456C18.0881 20.2031 18.0218 20.2465 17.951 20.2758C17.8803 20.3051 17.8027 20.3213 17.7213 20.3213C17.6401 20.323 17.4416 20.2901 17.2971 20.1456L14.2971 17.1456C14.0627 16.9113 14.0627 16.5314 14.2971 16.297C14.5314 16.0627 14.9113 16.0627 15.1456 16.297L17.1213 18.2728V13.7213C17.1213 13.3899 17.39 13.1213 17.7213 13.1213C18.0527 13.1213 18.3213 13.3899 18.3213 13.7213V18.2728L20.2971 16.297C20.5314 16.0627 20.9113 16.0627 21.1456 16.297C21.3799 16.5314 21.3799 16.9113 21.1456 17.1456L18.1456 20.1456Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-lock.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="M12 4.3999C13.9882 4.3999 15.6 6.01168 15.6 7.9999V10.0489C16.033 10.1018 16.3329 10.2114 16.5607 10.4392C17 10.8786 17 11.5857 17 12.9999V14.9999C17 16.4141 17 17.1212 16.5607 17.5606C16.1213 17.9999 15.4142 17.9999 14 17.9999H10C8.58579 17.9999 7.87868 17.9999 7.43934 17.5606C7 17.1212 7 16.4141 7 14.9999V12.9999C7 11.5857 7 10.8786 7.43934 10.4392C7.66715 10.2114 7.96695 10.1018 8.4 10.0489L8.4 7.9999C8.4 6.01168 10.0118 4.3999 12 4.3999ZM14.4 7.9999V10.0003C14.2733 9.99991 14.1401 9.99991 14 9.99991H10C9.85987 9.99991 9.72668 9.99991 9.6 10.0003L9.6 7.9999C9.6 6.67442 10.6745 5.5999 12 5.5999C13.3255 5.5999 14.4 6.67442 14.4 7.9999ZM12.6 12.9999C12.6 12.6685 12.3314 12.3999 12 12.3999C11.6686 12.3999 11.4 12.6685 11.4 12.9999V14.9999C11.4 15.3313 11.6686 15.5999 12 15.5999C12.3314 15.5999 12.6 15.3313 12.6 14.9999V12.9999Z" fill="currentColor"/>
+</svg>
+</template>