@itfin/components 1.4.10 → 1.4.12

package/package.json

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

package/src/components/datepicker/PeriodPicker.vue

@@ -11,85 +11,27 @@
       :placeholder="placeholder"
     />
     <div style="display: none">
-      <div ref="dropdown" class="itf-periodpicker__dropdown">
-        <div class="row mb-3">
-          <div class="col">
-            <itf-button @click="setYear(prevYear)">
-              <itf-icon name="chevron_left" />
-            </itf-button>
-          </div>
-          <div class="col">
-            <itf-button block @click="setYear(prevYear)">
-              {{prevYear}}
-            </itf-button>
-          </div>
-          <div class="col">
-            <itf-button color="outline-primary" block>
-              {{year}}
-            </itf-button>
-          </div>
-          <div class="col">
-            <itf-button block @click="setYear(nextYear)">
-              {{nextYear}}
-            </itf-button>
-          </div>
-          <div class="col text-end">
-            <itf-button @click="setYear(nextYear)">
-              <itf-icon name="chevron_right" />
-            </itf-button>
-          </div>
-        </div>
-
-        <itf-button block class="mb-3" :class="{'btn-whole': !isCurrentYear()}" :primary="isCurrentYear()" @click="onYearSelect(year)">
-          {{ $t('components.wholeYear') }}
-        </itf-button>
-
-        <div class="itf-periodpicker__quarters">
-          <div
-            v-for="quarter of quarters"
-            :key="quarter.Number"
-            class="itf-periodpicker__quarter"
-            :class="{ 'active': isOnlyQuarter(quarter.Number), 'active-inside': isCurrentQuarter(quarter.Number) }">
-            <div class="px-3 pt-2" @click="onQuarterSelect([quarter.Months[0], quarter.Months[2]])">
-              <small><b>QUARTER</b></small><br>
-              <span class="quarter-number">{{ quarter.Number }}</span>
-            </div>
-
-            <div class="itf-periodpicker__months">
-              <itf-button
-                class="itf-periodpicker__month px-1"
-                v-for="month of quarter.Months"
-                :key="month"
-                :primary="isCurrentMonth(month)"
-                @click="onMonthSelect(month)"
-              >
-                {{ month | formatMonth }}
-              </itf-button>
-            </div>
-          </div>
-        </div>
-      </div>
+      <itf-period-picker-inline
+        ref="dropdown"
+        class="itf-periodpicker__dropdown"
+        v-model="value"
+        :value-format="valueFormat"
+        @input="onInput"
+      />
     </div>
   </div>
 </template>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
-import { DateTime } from 'luxon';
 import tippy from 'tippy.js';
-import itfIcon from '../icon/Icon';
-import itfButton from '../button/Button';
+import itfPeriodPickerInline from "@/components/datepicker/PeriodPickerInline.vue";
+import {DateTime} from "luxon";
 import ITFSettings from '../../ITFSettings';
 
 export default @Component({
   name: 'itfPeriodPicker',
   components: {
-    itfIcon,
-    itfButton
-  },
-  filters: {
-    formatMonth(month) {
-      return DateTime.local().set({ month }).toFormat('MMM');
-    }
+    itfPeriodPickerInline
   }
 })
 class itfPeriodPicker extends Vue {
@@ -97,51 +39,12 @@ class itfPeriodPicker extends Vue {
 
   @Prop({ type: Array }) value;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
-  @Prop({ type: String }) displayFormat;
   @Prop({ type: String, default: 'bottom-start' }) placement;
-  @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
-  @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: String, default: '' }) placeholder;
-
-  year = null;
+  @Prop({ type: String }) displayFormat;
 
   focused = false;
 
-  tooltip = null;
-
-  get quarters() {
-    return [
-      { Name: `${this.$t('components.quarter')} 1`, Months: [1, 2, 3], Number: 1 },
-      { Name: `${this.$t('components.quarter')} 2`, Months: [4, 5, 6], Number: 2 },
-      { Name: `${this.$t('components.quarter')} 3`, Months: [7, 8, 9], Number: 3 },
-      { Name: `${this.$t('components.quarter')} 4`, Months: [10, 11, 12], Number: 4 },
-    ];
-  }
-
-  get dateFormat() {
-    return this.displayFormat || ITFSettings.defaultDisplayDateFormat;
-  }
-
-  get nextYear() {
-    return this.year + 1;
-  }
-
-  get prevYear() {
-    return this.year - 1;
-  }
-
-  setYear(year) {
-    this.year = year;
-  }
-
-  isInvalid() {
-    return this.itemLabel && this.itemLabel.isHasError();
-  }
-
-  isSuccess() {
-    return this.itemLabel && this.itemLabel.isHasSuccess();
-  }
-
   mounted() {
     const context = this.$el.closest('.itf-append-context') || document.body;
     this.tooltip = tippy(this.$refs.input, {
@@ -149,30 +52,17 @@ class itfPeriodPicker extends Vue {
       interactiveDebounce: 75,
       animation: 'scale',
       arrow: true,
-      content: this.$refs.dropdown,
+      content: this.$refs.dropdown.$el,
       allowHTML: true,
       trigger: 'click',
       interactive: true,
       placement: this.placement,
       appendTo: context,
     });
-    this.year = (this.value && this.value[0]) ? this.valueAsLuxon[0].year : DateTime.local().year;
   }
 
-  get valueAsLuxon() {
-    if (!this.value || this.value.length < 2) {
-      return null;
-    }
-    if (this.valueFormat === 'ISO') {
-      return [
-        DateTime.fromISO(this.value[0]),
-        DateTime.fromISO(this.value[1]),
-      ];
-    }
-    return [
-      DateTime.fromFormat(this.value[0], this.valueFormat),
-      DateTime.fromFormat(this.value[1], this.valueFormat),
-    ];
+  get dateFormat() {
+    return this.displayFormat || ITFSettings.defaultDisplayDateFormat;
   }
 
   get displayText() {
@@ -183,12 +73,29 @@ class itfPeriodPicker extends Vue {
     if (!this.valueAsLuxon || this.valueAsLuxon.length < 2) {
       return [];
     }
+    console.info(this.valueAsLuxon);
     return [
       this.valueAsLuxon[0].toFormat(this.dateFormat),
       this.valueAsLuxon[1].toFormat(this.dateFormat)
     ];
   }
 
+  get valueAsLuxon() {
+    if (!this.value || this.value.length < 2) {
+      return null;
+    }
+    if (this.valueFormat === 'ISO') {
+      return [
+        DateTime.fromISO(this.value[0]),
+        DateTime.fromISO(this.value[1]),
+      ];
+    }
+    return [
+      DateTime.fromFormat(this.value[0], this.valueFormat),
+      DateTime.fromFormat(this.value[1], this.valueFormat),
+    ];
+  }
+
   onFocus() {
     this.focused = true;
   }
@@ -197,71 +104,21 @@ class itfPeriodPicker extends Vue {
     this.focused = false;
   }
 
-  selectInlineDate(date) {
-    this.$emit('input', date);
-    this.tooltip.hide();
-  }
-
-  isCurrentMonth(month) {
-    if (!this.valueAsLuxon) {
-      return false;
-    }
-    return Number(this.valueAsLuxon[0].toFormat('M')) === month && Number(this.valueAsLuxon[1].toFormat('M')) === month;
-  }
-
-  isOnlyQuarter(quarter) {
-    if (!this.valueAsLuxon) {
-      return false;
-    }
-    return this.isCurrentQuarter(quarter) && this.valueAsLuxon[0].month !== this.valueAsLuxon[1].month;
+  isInvalid() {
+    return this.itemLabel && this.itemLabel.isHasError();
   }
 
-  isCurrentQuarter(quarter) {
-    if (!this.valueAsLuxon) {
-      return false;
-    }
-    return this.valueAsLuxon[0].quarter === quarter && this.valueAsLuxon[1].quarter === quarter;
+  isSuccess() {
+    return this.itemLabel && this.itemLabel.isHasSuccess();
   }
 
-  isCurrentYear() {
-    if (!this.valueAsLuxon) {
-      return false;
-    }
-    return this.valueAsLuxon[0].hasSame(this.valueAsLuxon[0].startOf('year'), 'day')
-      && this.valueAsLuxon[1].hasSame(this.valueAsLuxon[0].endOf('year'), 'day');
+  selectInlineDate(date) {
+    this.$emit('input', date);
   }
 
-  updateValue(start, end) {
-    if (!start) {
-      this.$emit('input', []);
-      return;
-    }
-    this.$emit('input', [
-      (this.valueFormat === 'ISO') ? start.toISO() : start.toFormat(this.valueFormat),
-      (this.valueFormat === 'ISO') ? end.toISO() : end.toFormat(this.valueFormat),
-    ]);
+  onInput(val) {
+    this.$emit('input', val);
     this.tooltip.hide();
   }
-
-  onYearSelect(year) {
-    this.updateValue(
-      DateTime.local().set({ year }).startOf('year'),
-      DateTime.local().set({ year }).endOf('year'),
-    );
-  }
-
-  onMonthSelect(month) {
-    this.updateValue(
-      DateTime.local().set({ month, year: this.year }).startOf('month'),
-      DateTime.local().set({ month, year: this.year }).endOf('month'),
-    );
-  }
-
-  onQuarterSelect([startMonth, endMonth]) {
-    this.updateValue(
-      DateTime.local().set({ month: startMonth, year: this.year }).startOf('quarter'),
-      DateTime.local().set({ month: endMonth, year: this.year }).endOf('quarter'),
-    );
-  }
 }
 </script>

package/src/components/datepicker/PeriodPickerInline.vue

@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <div class="row mb-3">
+      <div class="col">
+        <itf-button @click="setYear(prevYear)">
+          <itf-icon name="chevron_left" />
+        </itf-button>
+      </div>
+      <div class="col">
+        <itf-button block @click="setYear(prevYear)">
+          {{prevYear}}
+        </itf-button>
+      </div>
+      <div class="col">
+        <itf-button color="outline-primary" block>
+          {{year}}
+        </itf-button>
+      </div>
+      <div class="col">
+        <itf-button block @click="setYear(nextYear)">
+          {{nextYear}}
+        </itf-button>
+      </div>
+      <div class="col text-end">
+        <itf-button @click="setYear(nextYear)">
+          <itf-icon name="chevron_right" />
+        </itf-button>
+      </div>
+    </div>
+
+    <itf-button block class="mb-3" :class="{'btn-whole': !isCurrentYear()}" :primary="isCurrentYear()" @click="onYearSelect(year)">
+      {{ $t('components.wholeYear') }}
+    </itf-button>
+
+    <div class="itf-periodpicker__quarters">
+      <div
+        v-for="quarter of quarters"
+        :key="quarter.Number"
+        class="itf-periodpicker__quarter"
+        :class="{ 'active': isOnlyQuarter(quarter.Number), 'active-inside': isCurrentQuarter(quarter.Number) }">
+        <div class="px-3 pt-2" @click="onQuarterSelect([quarter.Months[0], quarter.Months[2]])">
+          <small><b>{{ $t('components.quarter') }}</b></small><br>
+          <span class="quarter-number">{{ quarter.Number }}</span>
+        </div>
+
+        <div class="itf-periodpicker__months">
+          <itf-button
+            class="itf-periodpicker__month px-1"
+            v-for="month of quarter.Months"
+            :key="month"
+            :primary="isCurrentMonth(month)"
+            @click="onMonthSelect(month)"
+          >
+            {{ month | formatMonth }}
+          </itf-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { DateTime } from 'luxon';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+
+export default @Component({
+  name: 'itfPeriodPickerInline',
+  components: {
+    itfIcon,
+    itfButton
+  },
+  filters: {
+    formatMonth(month) {
+      return DateTime.local().set({ month }).toFormat('MMM');
+    }
+  }
+})
+class itfPeriodPickerInline extends Vue {
+  @Prop({ type: Array }) value;
+  @Prop({ type: String, default: 'ISO' }) valueFormat;
+
+  year = null;
+
+  get quarters() {
+    return [
+      { Name: `${this.$t('components.quarter')} 1`, Months: [1, 2, 3], Number: 1 },
+      { Name: `${this.$t('components.quarter')} 2`, Months: [4, 5, 6], Number: 2 },
+      { Name: `${this.$t('components.quarter')} 3`, Months: [7, 8, 9], Number: 3 },
+      { Name: `${this.$t('components.quarter')} 4`, Months: [10, 11, 12], Number: 4 },
+    ];
+  }
+
+  get nextYear() {
+    return this.year + 1;
+  }
+
+  get prevYear() {
+    return this.year - 1;
+  }
+
+  setYear(year) {
+    this.year = year;
+  }
+
+  mounted() {
+    this.year = (this.value && this.value[0]) ? this.valueAsLuxon[0].year : DateTime.local().year;
+  }
+
+  get valueAsLuxon() {
+    if (!this.value || this.value.length < 2) {
+      return null;
+    }
+    if (this.valueFormat === 'ISO') {
+      return [
+        DateTime.fromISO(this.value[0]),
+        DateTime.fromISO(this.value[1]),
+      ];
+    }
+    return [
+      DateTime.fromFormat(this.value[0], this.valueFormat),
+      DateTime.fromFormat(this.value[1], this.valueFormat),
+    ];
+  }
+
+  isCurrentMonth(month) {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return Number(this.valueAsLuxon[0].toFormat('M')) === month && Number(this.valueAsLuxon[1].toFormat('M')) === month;
+  }
+
+  isOnlyQuarter(quarter) {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return this.isCurrentQuarter(quarter) && this.valueAsLuxon[0].month !== this.valueAsLuxon[1].month;
+  }
+
+  isCurrentQuarter(quarter) {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return this.valueAsLuxon[0].quarter === quarter && this.valueAsLuxon[1].quarter === quarter;
+  }
+
+  isCurrentYear() {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return this.valueAsLuxon[0].hasSame(this.valueAsLuxon[0].startOf('year'), 'day')
+      && this.valueAsLuxon[1].hasSame(this.valueAsLuxon[0].endOf('year'), 'day');
+  }
+
+  updateValue(start, end) {
+    if (!start) {
+      this.$emit('input', []);
+      return;
+    }
+    this.$emit('input', [
+      (this.valueFormat === 'ISO') ? start.toISO() : start.toFormat(this.valueFormat),
+      (this.valueFormat === 'ISO') ? end.toISO() : end.toFormat(this.valueFormat),
+    ]);
+  }
+
+  onYearSelect(year) {
+    this.updateValue(
+      DateTime.local().set({ year }).startOf('year'),
+      DateTime.local().set({ year }).endOf('year'),
+    );
+  }
+
+  onMonthSelect(month) {
+    this.updateValue(
+      DateTime.local().set({ month, year: this.year }).startOf('month'),
+      DateTime.local().set({ month, year: this.year }).endOf('month'),
+    );
+  }
+
+  onQuarterSelect([startMonth, endMonth]) {
+    this.updateValue(
+      DateTime.local().set({ month: startMonth, year: this.year }).startOf('quarter'),
+      DateTime.local().set({ month: endMonth, year: this.year }).endOf('quarter'),
+    );
+  }
+}
+</script>

package/src/components/datepicker/index.stories.js

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/vue';
 import itfDatePicker from './DatePicker.vue';
 import itfMonthPicker from './MonthPicker.vue';
 import itfPeriodPicker from './PeriodPicker';
+import itfPeriodPickerInline from './PeriodPickerInline';
 import itfDatePickerInline from './DatePickerInline.vue';
 import itfDateRangePicker from './DateRangePicker.vue';
 import itfDateRangePickerInline from './DateRangePickerInline.vue';
@@ -13,6 +14,7 @@ storiesOf('Common', module)
       itfApp,
       itfDatePicker,
       itfPeriodPicker,
+      itfPeriodPickerInline,
       itfMonthPicker,
       itfDateRangePicker,
       itfDatePickerInline,
@@ -86,6 +88,8 @@ storiesOf('Common', module)
         <h2>Period</h2>
 
         <itf-period-picker :value="dateRange" v-model.lazy="dateRange"></itf-period-picker>
+
+        <itf-period-picker-inline :value="dateRange" v-model.lazy="dateRange"></itf-period-picker-inline>
       </itf-app>
     </div>`,
   }));

package/src/components/filter/FilterBadge.vue

@@ -29,8 +29,8 @@
           @input="onFilterChange({ value: $event })"
         />
       </template>
-      <template v-else-if="type === 'period-selector'">
-        <itf-period-picker
+      <template v-else-if="type === 'timeframe'">
+        <itf-period-picker-inline
           style="margin: -.5rem"
           :value="value.value"
           value-format="yyyy-MM-dd"
@@ -69,6 +69,7 @@
 <style lang="scss">
 :root {
   --filter-badge__default-color: #475266;
+  --filter-badge__icon-color: #A7AFBB;
   --filter-badge__default-border-color: #0000001A;
   --filter-badge__default-bg-color: transparent;
   --filter-badge__default-bg-color-hover: #1A4A970D;
@@ -95,6 +96,7 @@
 
   .icon {
     margin: -2px;
+    color: var(--filter-badge__icon-color);
   }
   &:hover {
     background-color: var(--filter-badge__default-bg-color-hover);
@@ -154,7 +156,7 @@ import itfButton from '../button/Button';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfDatePickerInline from '../datepicker/DatePickerInline.vue';
 import itfDateRangePickerInline from '../datepicker/DateRangePickerInline.vue';
-import itfPeriodPicker from '../datepicker/PeriodPicker.vue'
+import itfPeriodPickerInline from '../datepicker/PeriodPickerInline.vue'
 import itfTextField from '../text-field/TextField.vue';
 import FilterFacetsList from './FilterFacetsList';
 import FilterAmountRange from './FilterAmountRange.vue';
@@ -166,7 +168,7 @@ export default @Component({
     itfDropdown,
     itfDatePickerInline,
     itfDateRangePickerInline,
-    itfPeriodPicker,
+    itfPeriodPickerInline,
     itfTextField,
     FilterFacetsList,
     FilterAmountRange

package/src/components/filter/FilterPanel.vue

@@ -11,7 +11,7 @@
             prepend-icon="search"
             :delay-input="250"
             clearable
-            :value="filterValue.query"
+            :value="filterValueQuery"
             @input="(e) => onFilterChange({ type: 'text', name: 'query' }, { value: e })"
           />
         </div>
@@ -27,20 +27,29 @@
         <slot name="after-filter-btn"></slot>
       </div>
     </div>
-    <div class="d-flex align-items-center justify-content-between w-100">
-      <div v-if="showFilters && showFilter" class="d-flex gap-2 flex-nowrap filters-row">
+    <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">
@@ -51,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;
   }
@@ -69,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';
@@ -115,12 +146,63 @@ class FilterPanel extends Vue {
   @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', 'period-selector'];
+  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);
+          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) {
@@ -137,6 +219,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);
@@ -188,13 +276,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) {

package/src/components/modal/DeleteConfirmModal.vue

@@ -34,7 +34,7 @@
             :class="confirmClass"
             @click="onConfirm"
           >
-            <span v-html="$t('components.popover.yesDelete')"></span>
+            <span v-html="deleteCaption"></span>
           </button>
         </div>
       </div>
@@ -59,8 +59,8 @@ class itfDeleteConfirmModal extends Vue {
   @Prop(Boolean) loading;
   @Prop({ type: Boolean, default: false }) disabled;
   @Prop({ type: String, default: 'text-danger' }) confirmClass;
-  @Prop({ type: String, default () { return this.$t('noKeepIt'); } }) cancelCaption;
-  @Prop({ type: String, default () { return this.$t('yesDelete'); } }) deleteCaption;
+  @Prop({ type: String, default () { return this.$t('components.noKeepIt'); } }) cancelCaption;
+  @Prop({ type: String, default () { return this.$t('components.yesDelete'); } }) deleteCaption;
 
   isModalShown = false;
 

package/src/components/panels/PanelList.vue

@@ -159,8 +159,8 @@ $double-an-time: $an-time * 2;
 </style>
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
-import Panel from './Panel.vue';
-import {hashToStack, stackToHash} from "@itfin/components/src/components/panels/helpers";
+import Panel from './Panel';
+import {hashToStack, stackToHash} from "./helpers";
 
 interface VisualOptions {
   title: string;

package/src/components/table/Table2.vue

@@ -88,7 +88,6 @@ import itfTableGroup from './TableGroup.vue';
 import itfTableHeader from './TableHeader.vue';
 import itfNoticePopout from '../popover/NoticePopout.vue';
 import './table2.scss';
-import itfTableBody from '@itfin/components/src/components/table/TableBody.vue';
 
 export default @Component({
   name: 'itfTable2',
@@ -96,7 +95,6 @@ export default @Component({
     return { tableEl: this }; // do not use Provide from vue-property-decorator
   },
   components: {
-    itfTableBody,
     itfCheckboxGroup,
     itfTableHeader,
     itfButton,

package/src/components/table/TableGroup.vue

@@ -95,11 +95,11 @@
 
         <!-- Лінія додати нову -->
         <div v-if="isShowTable && addNewRows"
-             class="table-row-template d-flex align-items-stretch">
+             class="table-row-template table-row-template__new-row d-flex align-items-stretch">
           <div class="shadow-area"></div>
           <a href="" @click.prevent="$emit('new', title)" data-test="table-add-new-item"
              class="d-flex align-items-center flex-grow-1 table-add-new-item text-decoration-none">
-            <span class="d-sticky d-flex align-items-center py-1">
+            <span class="d-sticky d-flex align-items-center py-1 px-2 small">
               <itf-icon name="plus"/>
               <span>{{ newLabel }}</span>
             </span>
@@ -268,7 +268,11 @@
     min-height: var(--table-small-row-size);
   }
 
+  .table-row-template.table-row-template__new-row {
+    min-height: 2rem;
+  }
   .table-add-new-item {
+    background-color: var(--itf-table-header-bg);
     border-right:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
     border-left:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
     border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
@@ -277,7 +281,7 @@
     border-bottom-right-radius: var(--itf-table-table-border-radius);
 
     & > span {
-      left: var(--shadow-area-width);
+      left: calc(var(--shadow-area-width) + 4px);
       position: sticky;
       padding-left: var(--shadow-area-width);
       //border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);

package/src/components/table/table2.scss

@@ -60,7 +60,7 @@ body[data-theme="dark"] {
     height: 100%;
   }
   .scroller {
-    margin-bottom: .5rem;
+    //margin-bottom: .5rem;
   }
   .scrollable-x {
     overflow-x: scroll;

package/src/components/view/View.vue

@@ -42,12 +42,11 @@
         </itf-dropdown>
 
         <itf-segmented-control
-          v-if="tabs.length > 1"
+          v-if="tabs.length"
           class="small"
-          :value="currentTab"
+          v-model="currentTab"
           item-key="value"
           :items="tabs"
-          @input="updateTabs"
         >
           <template #item="{ item }">
             <div class="d-flex align-items-center">
@@ -63,39 +62,41 @@
     <slot v-else-if="currentTab === 'board'" name="kanban-view"></slot>
     <slot v-else-if="currentTab === 'calendar'" name="calendar-view"></slot>
     <slot v-else name="table-view">
-    <div class="flex-grow-1 px-3 d-flex flex-column">
-      <div class="position-relative flex-grow-1">
-        <itf-table
-          ref="table"
-          style="--shadow-area-width: 0px;"
-          absolute
-          striped
-          clickable
-          column-sorting
-          column-resizing
-          :indicator-type="indicatorType"
-          class="permanent-checkboxes"
-          :state-name="stateName"
-          id-property="id"
-          :sort-as-string="sortAsString"
-          :rows="items"
-          :schema="tableSchema"
-          :sorting="sorting"
-          :active="activeIds"
-          :show-actions="showActions"
-          v-model="selectedIds"
-          @row-click="$emit('open', $event)"
-          @update:sorting="updateSorting($event)"
-        >
-          <template v-for="(_, name) in $slots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData || {}"/>
-          </template>
-          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData || {}"/>
-          </template>
-        </itf-table>
+      <div class="flex-grow-1 px-3 d-flex flex-column">
+        <div class="position-relative flex-grow-1">
+          <itf-table
+            ref="table"
+            style="--shadow-area-width: 0px;"
+            absolute
+            striped
+            clickable
+            column-sorting
+            column-resizing
+            :indicator-type="indicatorType"
+            class="permanent-checkboxes"
+            :state-name="stateName"
+            id-property="id"
+            :sort-as-string="sortAsString"
+            :rows="items"
+            :schema="tableSchema"
+            :sorting="sorting"
+            :active="activeIds"
+            :no-select-all="noSelectAll"
+            :show-actions="showActions"
+            :indicator-width="indicatorWidth"
+            v-model="selectedIds"
+            @row-click="$emit('open', $event)"
+            @update:sorting="updateSorting($event)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}"/>
+            </template>
+            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}"/>
+            </template>
+          </itf-table>
+        </div>
       </div>
-    </div>
     </slot>
 
     <itf-pagination
@@ -117,7 +118,7 @@
 
 </template>
 <script>
-import {Vue, ModelSync, Component, Prop, Inject, PropSync, Watch} from 'vue-property-decorator';
+import { Vue, ModelSync, Component, Prop, Inject } from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
@@ -125,13 +126,14 @@ import itfPagination from '../pagination/Pagination2.vue';
 import itfTableBody from "../table/TableBody.vue";
 import itfIcon from "../icon/Icon.vue";
 import itfDropdown from "../dropdown/Dropdown.vue";
-import itfSegmentedControl from '@itfin/components/src/components/segmented-control/SegmentedControl.vue';
+import itfSegmentedControl from '../segmented-control/SegmentedControl.vue';
 
 export default @Component({
   name: 'itfView',
   components: {
     itfSegmentedControl,
-    itfDropdown, itfIcon,
+    itfDropdown,
+    itfIcon,
     itfPagination,
     itfFilterPanel,
     itfTableBody,
@@ -147,7 +149,10 @@ class itfView extends Vue {
 
   @Prop({ type: Boolean }) loading;
   @Prop({ type: Array }) filters;
+  // @Prop({ type: Object, required: true }) schema;
   @Prop({ type: Object }) schema;
+  // @Prop({ default: 20 }) size;
+  // @Prop({ default: 1 }) page;
   @Prop(String) defaultSorting;
   @Prop(String) endpoint;
   @Prop(String) filtersEndpoint;
@@ -163,9 +168,11 @@ class itfView extends Vue {
   @Prop(Boolean) listViewEnabled;
   @Prop(Boolean) kanbanViewEnabled;
   @Prop(Boolean) calendarViewEnabled;
+  @Prop(Boolean) noSelectAll;
   @Prop({ type: Boolean, default: true }) tableViewEnabled;
   @Prop(Boolean) sortAsString;
   @Prop(Boolean) oldFormat;
+  @Prop({ default: 45 }) indicatorWidth;
   @Prop({type: Function, default: null }) onSplitSlectedIds  // якщо потрібно розділяти вибрані рядки в таблиці на дві групи
 
   page = 1;
@@ -190,6 +197,10 @@ class itfView extends Vue {
     return this.tab;
   }
 
+  set currentTab(val) {
+    this.$emit('update:tab', val);
+  }
+
   get tabs() {
     const views = [];
     if (this.listViewEnabled) {
@@ -208,6 +219,7 @@ class itfView extends Vue {
   }
 
   get tableSchema() {
+    // return this.tableColumns || this.schema;
     if (this.tableColumns) {
       return {
         properties: this.tableColumns
@@ -220,12 +232,13 @@ class itfView extends Vue {
   }
 
   created() {
-    const defaultSize = localStorage.getItem('sizePerPage') ?? 20;
-
-    const { page, size, sorting } = this.panel.getPayload() ?? {};
-    this.page = page ?? 1;
-    this.size = size ?? defaultSize;
-    this.sorting = sorting ?? this.defaultSorting;
+    // const defaultSize = localStorage.getItem('sizePerPage') ?? 20;
+    //
+    // const { page, size, sorting } = this.panel.getPayload() ?? {};
+    // this.page = page ?? 1;
+    // this.size = size ?? defaultSize;
+    // this.sorting = sorting ?? this.defaultSorting;
+    this.sorting = this.defaultSorting;
   }
 
   mounted() {

package/src/locales/en.js

@@ -99,7 +99,7 @@ module.exports = {
     copyingToClipboardWasSuccessful: 'Copying to clipboard was successful',
   },
   table: {
-    new: 'New',
+    new: 'New row',
     noResults: 'No items',
     sortAscending: 'Sort ascending',
     sortDescending: 'Sort descending',

package/src/locales/uk.js

@@ -104,7 +104,7 @@ module.exports = {
     next: 'Наступна',
   },
   table: {
-    new: 'Додати',
+    new: 'Додати рядок',
     noResults: 'Немає записів',
     sortAscending: 'Сортувати за зростанням',
     sortDescending: 'Сортувати за спаданням',