@itfin/components 1.4.35 → 1.4.36

package/package.json

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

package/src/components/app/App.vue

@@ -74,12 +74,9 @@ class itfApp extends Vue {
     try {
       await func();
     } catch (err) {
-      if (err.code !== 'ERR_CANCELED') {
-        console.error(err);
-        this.showError(err.message);
-        if (errFunc) {
-          errFunc(err);
-        }
+      this.showError(err.message);
+      if (errFunc) {
+        errFunc(err);
       }
     }
   }

package/src/components/checkbox/Checkbox.vue

@@ -2,7 +2,7 @@
 
   <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
     <input class="form-check-input" ref="input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
-    <label :for="id" class="form-check-label w-100" :class="{ 'disabled': isDisabled }">
+    <label :for="id" class="form-check-label">
       <slot name="label">
         {{label}}
         <slot name="icon"></slot>

package/src/components/checkbox/RadioBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-radio-box form-check card" :class="{ 'disabled': disabled, 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
+  <div class="itf-radio-box form-check card" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
     <input class="form-check-input" :id="id" type="radio" :name="radioName" v-model="isChecked" :value="true" :disabled="disabled" />
     <label :for="id" slot="label" class="form-check-label card-body">
 
@@ -18,17 +18,6 @@
   position: relative;
   cursor: pointer;
 
-  &:not(.disabled) {
-    cursor: pointer;
-
-    .form-check-label {
-      cursor: pointer;
-    }
-  }
-
-  .form-check-label {
-    cursor: not-allowed;
-  }
   &.left {
     padding: 0 0 0 2.5rem;
 
@@ -49,9 +38,13 @@
   &.active {
     background-color: rgba(var(--bs-primary-rgb),.1) !important;
   }
-  &:hover:not(.disabled) {
+  &:hover {
     background-color: rgba(0,0,0,.05);
   }
+
+  .form-check-label {
+    cursor: pointer;
+  }
 }
 </style>
 <script>

package/src/components/filter/FilterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-filter-panel d-flex flex-column gap-3 align-items-start">
+  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly}">
     <div v-if="!filtersOnly" class="d-flex gap-2 justify-content-between w-100">
       <slot name="search">
         <div>
@@ -35,8 +35,8 @@
           class="itf-filter-panel__badge"
           :ref="'item-' + n"
           v-model="filter[facet.name]"
-          :is-default="filter[facet.name].isDefault"
-          :text="filter[facet.name].label"
+          :is-default="filter[facet.name] && filter[facet.name].isDefault"
+          :text="filter[facet.name] && filter[facet.name].label"
           :type="facet.type"
           :icon="facet.icon"
           :options="facet.options"
@@ -52,7 +52,7 @@
       </div>
       <slot name="after-filters"></slot>
     </div>
-    <div v-if="loading">
+    <div v-if="loading && !visibleFilters.length">
       <span class="itf-spinner"></span>
       {{$t('loading')}}
     </div>
@@ -177,6 +177,8 @@ class FilterPanel extends Vue {
       (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 {
@@ -206,7 +208,7 @@ class FilterPanel extends Vue {
 
   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);
   }
@@ -233,15 +235,7 @@ class FilterPanel extends Vue {
 
     this.filters = this.staticFilters ?? [];
     if (this.endpoint) {
-      this.loading = true;
-      await this.$try(async () => {
-        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;
+      this.loadData();
     } else {
       this.loadFiltersValue();
     }
@@ -250,6 +244,23 @@ class FilterPanel extends Vue {
     }
   }
 
+  async loadData() {
+    this.loading = true;
+    await this.$try(async () => {
+      const payload = this.panel ? this.panel.getPayload() : {};
+      const {filters, tableSchema} = await this.$axios.$get(this.endpoint, {
+        preventRaceCondition: true,
+        params: payload
+      });
+      this.filters = filters;
+      this.loading = false;
+      this.$emit('set-table-schema', tableSchema);
+      this.loadFiltersValue();
+    }, () => {
+      this.loading = false;
+    });
+  }
+
   toggleFilters() {
     this.showFilters = !this.showFilters;
     if (this.stateName) {
@@ -269,7 +280,7 @@ class FilterPanel extends Vue {
           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] ?? filter[item.name].value;
+          filterValue[item.name] = payload[item.name];
         }
       }
     }
@@ -282,6 +293,7 @@ class FilterPanel extends Vue {
       this.filter = filter;
       this.filterValue = filterValue;
       this.$emit('input', this.filterValue);
+      this.$emit('loaded', this.filterValue);
       this.initObserver();
     }
   }
@@ -318,6 +330,7 @@ class FilterPanel extends Vue {
       this.panel.setPayload({ ...payload, ...this.filterValue });
     }
     this.$emit('input', this.filterValue);
+    this.$emit('change', this.filterValue);
   }
 
   get daysList() {
@@ -363,7 +376,11 @@ class FilterPanel extends Vue {
       }
     } else if (facet.type === 'date') {
       const date = DateTime.fromISO(value.value);
-      value.label = (date.isValid ? value.value : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now())).toFormat('dd MMM yyyy');
+      value.label = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now().toISO())).toFormat('dd MMM yyyy');
+      value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
+    } else if  (facet.type === 'month') {
+      const date = DateTime.fromISO(value.value);
+      value.label = capitalizeFirstLetter((date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('LLLL yyyy'));
       value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
     } else if (facet.type === 'facets-list') {
       const firstItem = facet.options.items.find(item => item.value === (Array.isArray(value.value) ? value.value[0] : value.value));
@@ -402,6 +419,10 @@ class FilterPanel extends Vue {
     }
     value.hidden = facet.options?.hidden ?? false;
     return value;
+
+    function capitalizeFirstLetter(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    }
   }
 }
 </script>

package/src/components/panels/PanelItemEdit.vue

@@ -1,19 +1,19 @@
 <template>
-  <div v-loading="loading" class="px-3 pt-2 h-100 d-flex flex-column">
+  <div v-loading="loading" class="px-3 pt-2 h-100">
     <itf-form
       ref="editForm"
-      class="d-flex flex-column justify-content-between flex-grow-1"
+      class="d-flex flex-column justify-content-between h-100"
       @keydown.native.shift.enter.stop.prevent="onSaveClick"
       @keydown.native.esc.stop.prevent="$emit('cancel')"
     >
       <slot></slot>
       <div class="py-3 justify-content-end d-flex align-items-center sticky-container">
         <div v-if="!hideFooter">
-          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
-            <span>{{ cancelBtnText }}</span>
+          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary :loading="loading" :disabled="loading" @click="$emit('cancel')">
+            <span>{{ $t('components.modal.cancel') }}</span>
           </itf-button>
-          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
-            <span>{{ saveBtnText }}</span>
+          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary :loading="loading" :disabled="loading" @click="onSaveClick">
+            <span>{{ $t('components.modal.save') }}</span>
           </itf-button>
         </div>
       </div>
@@ -51,8 +51,6 @@ import itfButton from '../button/Button.vue';
 export default class PanelItemEdit extends Vue {
   @Prop(Boolean) loading;
   @Prop(Boolean) hideFooter;
-  @Prop({ type: String, default: function() { return this.$t('components.modal.save') } }) saveBtnText;
-  @Prop({ type: String, default: function() { return this.$t('components.modal.cancel') } }) cancelBtnText;
 
   onSaveClick() {
     if (this.$refs.editForm && !this.$refs.editForm.doValidation()) {

package/src/components/panels/PanelList.vue

@@ -17,20 +17,14 @@
           :icon="panel.icon"
           :payload="panel.payload"
           :expandable="panelsStack.length > 1"
-          :isFullSize="isFullSize"
           :collapsed="panel.isCollapsed"
           :closeable="panel.isCloseable"
           :animate="panel.isAnimate"
           @open="openPanel($event[0], $event[1], n + 1)"
           @expand="expandPanel(panel)"
           @fullsize="fullsizePanel(panel)"
-          @collapse="collapsePanel(panel)"
           @close="closePanel(panel)"
-          @open-menu="$emit('open-menu', panel.type, panel.payload)"
         >
-          <template #before-header>
-            <slot name="before-header" :panel="panel" :index="n" :payload="panel.payload"></slot>
-          </template>
           <slot
             :name="panel.type"
             :panel="panel"
@@ -40,9 +34,9 @@
             :close="() => closePanel(panel)"
             :expand="() => expandPanel(panel)"
             :fullsize="() => fullsizePanel(panel)">
-            <component v-if="panel.components.default" :is="panel.components.default" :panel="panel" :payload="panel.payload" />
+            <component :is="panels[panel.type].default || panels[panel.type]" :panel="panel" :payload="panel.payload" />
           </slot>
-          <template v-if="$scopedSlots[`${panel.type}.title`] || panel.components.title" #title>
+          <template v-if="$scopedSlots[`${panel.type}.title`] || panels[panel.type].title" #title>
             <slot
               :name="`${panel.type}.title`"
               :panel="panel"
@@ -52,10 +46,10 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panel.components.title" :is="panel.components.title" :panel="panel" :payload="panel.payload" />
+              <component v-if="panels[panel.type].title" :is="panels[panel.type].title" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
-          <template v-if="$scopedSlots[`${panel.type}.buttons`] || panel.components.buttons" #buttons>
+          <template v-if="$scopedSlots[`${panel.type}.buttons`] || panels[panel.type].buttons" #buttons>
             <slot
               :name="`${panel.type}.buttons`"
               :panel="panel"
@@ -65,10 +59,10 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panel.components.buttons" :is="panel.components.buttons" :panel="panel" :payload="panel.payload" />
+              <component v-if="panels[panel.type].buttons" :is="panels[panel.type].buttons" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
-          <template v-if="$scopedSlots[`${panel.type}.header`] || panel.components.header" #header>
+          <template v-if="$scopedSlots[`${panel.type}.header`] || panels[panel.type].header" #header>
             <slot
               :name="`${panel.type}.header`"
               :panel="panel"
@@ -78,7 +72,7 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panel.components.header" :is="panel.components.header" :panel="panel" :payload="panel.payload" />
+              <component v-if="panels[panel.type].header" :is="panels[panel.type].header" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
         </panel>
@@ -154,6 +148,7 @@ $double-an-time: $an-time * 2;
     //transition: opacity $an-time linear;
   }
 }
+
 //.slide-enter-active > div {
 //  opacity: 0;
 //}
@@ -164,10 +159,8 @@ $double-an-time: $an-time * 2;
 </style>
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
-import itfIcon from '../icon/Icon.vue';
-import Panel from './Panel.vue';
-import {hashToStack, stackToHash} from "@itfin/components/src/components/panels/helpers";
-import {emitGlobalEvent, setRootPanelList} from "@itfin/components/src/components/panels";
+import Panel from './Panel';
+import {hashToStack, stackToHash} from "./helpers";
 
 interface VisualOptions {
   title: string;
@@ -202,7 +195,6 @@ export interface IPanel {
 
 @Component({
   components: {
-    itfIcon,
     Panel
   },
   directives: {
@@ -216,15 +208,12 @@ export interface IPanel {
 export default class PanelList extends Vue {
   @Prop() firstPanel: IPanel;
   @Prop() panels: Record<string, Component>;
-  @Prop({ default: () => {} }) searchPanel: (type: string) => boolean;
-  @Prop({ type: String, default: 'path' }) routeType: string;
 
   panelsStack:IPanel[] = [];
 
   nextId:number = 0;
 
   created() {
-    setRootPanelList(this);
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
@@ -278,30 +267,18 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
   }
 
-  async internalOpenPanel(type: string, payload: any = {}, openIndex?: number, noEvents = false) {
-    let panel = this.panels[type];
-    if (!panel) {
-      panel = await this.searchPanel(type, this.panels);
-      if (!panel) {
-        console.error(`Panel type "${type}" not found`);
-        return;
-      }
-      panel.type = type;
+  internalOpenPanel(type: string, payload: any = {}, openIndex?: number, noEvents = false) {
+    if (!this.panels[type]) {
+      return;
     }
-    if (typeof panel.caption !== 'function') {
+    if (typeof this.panels[type].caption !== 'function') {
       throw new Error('Panel component must have a "caption" function');
     }
     const newPanel:any = {
       id: this.nextId++,
-      nocard: panel.nocard,
-      title: panel.caption(this.$t.bind(this), payload),
-      icon: panel.icon ? panel.icon(this.$t.bind(this), payload) : null,
-      components: {
-        default: panel.default ?? undefined,
-        buttons: panel.buttons ?? undefined,
-        header: panel.header ?? undefined,
-        title: panel.title ?? undefined,
-      },
+      nocard: this.panels[type].nocard,
+      title: this.panels[type].caption(this.$t.bind(this), payload),
+      icon: this.panels[type].icon ? this.panels[type].icon(this.$t.bind(this), payload) : null,
       type,
       payload,
       isCollapsed: false,
@@ -312,7 +289,7 @@ export default class PanelList extends Vue {
       newPanel.isCloseable = false;
     }
     let newStack = [...this.panelsStack];
-    if (panel.permanentExpanded && newStack.length) {
+    if (this.panels[type].permanentExpanded && newStack.length) {
       for (const panel of newStack) {
         panel.isCollapsed = true;
       }
@@ -322,32 +299,25 @@ export default class PanelList extends Vue {
       isAnimation = newStack.length === openIndex;
       newStack = newStack.slice(0, openIndex);
     }
-    if (newStack.length > 0 && !newStack.find(p => !p.isCollapsed)) {
-      // якщо немає відкритих панелей, то перша панель має бути розгорнута
-      newStack[0].isCollapsed = false;
-    }
     this.panelsStack = newStack;
     return new Promise(res => {
       this.$nextTick(() => { // щоб панелі змінювались при редагуванні
         const n = newStack.length;
         newPanel.isAnimate = isAnimation;
-        newPanel.permanentExpanded = !!panel.permanentExpanded;
+        newPanel.permanentExpanded = !!this.panels[type].permanentExpanded;
         newPanel.emit = (event, ...args) => this.emitEvent(event, ...args);
-        newPanel.open = (type, payload, index?:number) => this.openPanel(type, payload, index ?? n + 1);
+        newPanel.open = (type, payload) => this.openPanel(type, payload, n + 1);
         newPanel.close = () => this.closePanel(newPanel);
         newPanel.expand = () => this.expandPanel(newPanel);
         newPanel.getTitle = () => newPanel.title;
         newPanel.getIcon = () => newPanel.icon;
-        newPanel.setTitle = (title: string) => { newPanel.title = title; this.updateTitle() };
+        newPanel.setTitle = (title: string) => { newPanel.title = title; };
         newPanel.setIcon = (icon: string) => { newPanel.icon = icon; };
-        newPanel.on = (eventName: string|string[], func: (event: string, ...args: any[]) => any) => {
-          const eventNames = Array.isArray(eventName) ? eventName : [eventName];
-          for (const evName of eventNames) {
-            if (!newPanel.__events[evName]) {
-              newPanel.__events[evName] = [];
-            }
-            newPanel.__events[evName].push(func);
+        newPanel.on = (eventName, func: (event: string, ...args: any[]) => any) => {
+          if (!newPanel.__events[eventName]) {
+            newPanel.__events[eventName] = [];
           }
+          newPanel.__events[eventName].push(func);
         };
         newPanel.off = (eventName, func: (event: string, ...args: any[]) => any) => {
           if (newPanel.__events[eventName]) {
@@ -367,7 +337,9 @@ export default class PanelList extends Vue {
         newPanel.getPayload = () => newPanel.payload;
         newPanel.setPayload = (value: any) => {
           newPanel.payload = value;
-          this.setPanelHash();
+          newPanel.title = this.panels[type].caption(this.$t.bind(this), value);
+          newPanel.icon = this.panels[type].icon ? this.panels[type].icon(this.$t.bind(this), payload) : null,
+            this.setPanelHash()
         }
         newStack.push(newPanel);
         this.panelsStack = newStack;
@@ -381,19 +353,12 @@ export default class PanelList extends Vue {
     });
   }
 
-  updateTitle() {
-    const titles = this.panelsStack.map(p => p.getTitle()).filter(Boolean).reverse();
-    this.$root.$options.head.titleChunk = titles.join(' / ');
-    this.$meta().refresh();
-  }
-
   async openPanel(type: string, payload: any, openIndex?: number) {
     await this.internalOpenPanel(type, payload, openIndex);
-    this.setPanelHash();
+    this.setPanelHash()
   }
 
   emitEvent(event: string, ...args: any[]) {
-    emitGlobalEvent(event, ...args);
     for (const panel of this.panelsStack) {
       if (panel.__events[event]) {
         for (const func of panel.__events[event]) {
@@ -423,40 +388,12 @@ export default class PanelList extends Vue {
   fullsizePanel(panel: IPanel) {
     const newStack = [...this.panelsStack];
     for (const p of newStack) {
-      p.isLastOpened = !p.isCollapsed && p !== panel;
       p.isCollapsed = p !== panel;
     }
     this.panelsStack = newStack;
     this.setPanelHash();
   }
 
-  get isFullSize() {
-    return this.panelsStack.filter(p => !p.isCollapsed).length === 1;
-  }
-
-  expandPanel(panel: IPanel) {
-    const newStack = [...this.panelsStack];
-    const index = newStack.findIndex(p => p.id === panel.id);
-    newStack[index].isCollapsed = false;
-    this.panelsStack = newStack;
-    this.ensureOnlyTwoOpenPanels(panel.id);
-    this.setPanelHash();
-  }
-
-  collapsePanel(panel: IPanel) {
-    const newStack = [...this.panelsStack];
-    const currenctIndex = newStack.findIndex(p => p.id === panel.id);
-    const lastOpenedIndex = newStack.findIndex(p => p.isLastOpened);
-    if (lastOpenedIndex !== -1) { // якщо зебрежена остання відкрита панель
-      newStack[lastOpenedIndex].isCollapsed = false
-    } else if (newStack[currenctIndex-1]) { // якщо після оновлення сторінки відсутнє значення "остання відкрита", то відкриваємо ту, що зліва
-      newStack[currenctIndex-1].isCollapsed = false;
-    }
-    this.panelsStack = newStack;
-    this.ensureOnlyTwoOpenPanels(panel.id);
-    this.setPanelHash();
-  }
-
   getPanels(type) {
     return this.panelsStack.filter(panel => panel.type === type);
   }
@@ -466,19 +403,14 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack, this.routeType === 'path').replace(/^#/, '');
-    if (this.routeType === 'path') {
-      this.$router.push({ path: `/${hash}` });
-    } else {
-      this.$router.push({ hash });
-    }
-    this.updateTitle();
+    const hash = stackToHash(this.panelsStack).replace(/^#/, '');
+    this.$router.push({ hash });
   }
 
   async parsePanelHash() {
-    const hash = this.routeType === 'path' ? location.pathname : location.hash;
+    const {hash} = location;
     if (hash) {
-      const panels = hashToStack(hash, this.routeType === 'path');
+      const panels = hashToStack(hash);
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {
@@ -499,7 +431,6 @@ export default class PanelList extends Vue {
       }
       this.panelsStack = newStack;
       this.emitEvent('panels.changed', this.panelsStack);
-      this.updateTitle();
     }
   }
 

package/src/components/panels/helpers.ts

@@ -1,51 +1,33 @@
-import JSON5 from 'json5'
-import {isPathType} from "./index";
-
 export interface IPanel {
   type: string;
   payload?: any;
   isCollapsed?: boolean;
 }
 
-const COLLAPSE_SYMBOL = '~'
-const PARAMS_SYMBOL = ';'
-
 export function stackToHash(stack: IPanel[]) {
   const hash = stack.map(panel => {
-    let json = JSON5.stringify(panel.payload || {});
-    json = json.substring(1, json.length - 1); // Remove the outer {}
-    return `${panel.type}${panel.isCollapsed ? COLLAPSE_SYMBOL : ''}${json ? PARAMS_SYMBOL : ''}${json}`;
-  }).join(isPathType() ? '/' : '&');
-  return isPathType() ? `/${hash}` : `#${hash}`;
+    return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
+  }).join('&');
+  return `#${hash}`;
 }
 
 
 export function hashToStack(hash: string|undefined): IPanel[] {
   let stack:IPanel[] = [];
-  const str = hash.replace(isPathType() ? /^\// : /^#/, '');
-  if (str) {
-    stack = str.split(isPathType() ? '/' : '&').map(item => {
-      if (!item.includes(PARAMS_SYMBOL)) {
-        return { type: item.replace(COLLAPSE_SYMBOL, ''), isCollapsed: item.includes(COLLAPSE_SYMBOL), payload: {} };
-      }
-      const [type, payload] = item.split(PARAMS_SYMBOL);
-      const isCollapsed = type.includes(COLLAPSE_SYMBOL);
+  if (hash) {
+    const str = hash.replace(/^#/, '');
+
+    stack = str.split('&').map(item => {
+      const [type, payload] = item.split('=');
+      const isCollapsed = !type.includes('!');
       let payloadObj:any = {};
       try {
-        let json = decodeURIComponent(payload);
-        if (!json.startsWith('{')) {
-          json = `{${json}`; // Ensure it starts with a '{' to be valid JSON
-        }
-        if (!json.endsWith('}')) {
-          json += '}'; // Ensure it ends with a '}' to be valid JSON
-        }
-        payloadObj = JSON5.parse(json);
+        payloadObj = JSON.parse(decodeURIComponent(payload));
       } catch (e) {
         // ignore
-        console.warn(`Error parsing payload for type ${type}:`, payload, e);
       }
       return {
-        type: type.replace(COLLAPSE_SYMBOL, ''),
+        type: type.replace('!', ''),
         isCollapsed,
         payload: payloadObj
       };

package/src/components/table/Table2.vue

@@ -7,11 +7,9 @@
     'permanent-checkboxes': selectedIds.length
   }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px`, '--shadow-area-width': `${shadowWidth}px` }">
     <itf-notice-popout :visible="showGroupOperations" class="rounded-3 bg-black text-white">
-      <div class="d-flex gap-2 ps-2 align-items-center small itf-table2_mass-operations">
-        <slot name="group-operations-count">
-          <div>{{$tc('components.table.selectedItems', selectedIds.length, { n: selectedIds.length })}}</div>
-          <div class="opacity-50">•</div>
-        </slot>
+      <div class="d-flex gap-2 ps-3 align-items-center small itf-table2_mass-operations">
+        <div>{{$tc('components.table.selectedItems', selectedIds.length, { n: selectedIds.length })}}</div>
+        <div class="opacity-50">•</div>
         <a href="" class="me-3 opacity-50 text-white text-decoration-none" @click.stop.prevent="selectedIds = []">{{$t('components.table.cancelSelected')}}</a>
         <div>
           <slot name="group-operations"></slot>
@@ -19,61 +17,64 @@
       </div>
     </itf-notice-popout>
     <div class="scrollable scrollable-x">
-      <itf-checkbox-group v-model="selectedIds">
-        <template v-for="(group, index) in groups">
-          <div class="table-view-body">
-            <itf-table-group
-              :key="index"
-              @update="$emit('update', { ...$event, group, groupIndex: index })"
-              @row-click="$emit('row-click', $event)"
-              :id-property="idProperty"
-              :columns="columns"
-              @update:columns="onColumnsUpdate"
-              :rows="group.rows"
-              :title="group.name"
-              :selected-ids.sync="selectedIds"
-              :add-new-rows="addNewRows"
-              :shadow-width="shadowWidth"
-              :column-sorting="columnSorting"
-              :column-resizing="columnResizing"
-              :show-grouping="showGrouping"
-              :show-summary="showSummary"
-              :show-add-column="showAddColumn"
-              :show-actions="showActions"
-              :show-header="!noHeader"
-              :schema="schema"
-              :editable="editable"
-              :no-column-menu="noColumnMenu"
-              :no-select-all="noSelectAll"
-              :currencies="currencies"
-              :currency="currency"
-              :subrows-property="subrowsProperty"
-              :divider-property="dividerProperty"
-              :indicator-type="indicatorType"
-              :expanded-all="expandedAll"
-              :indicatorWidth="indicatorWidth"
-              :striped="striped"
-              :expanded-ids="expandedIds"
-              :css-property="cssProperty"
-              :sticky-header="stickyHeader"
-              :editable-property="editableProperty"
-              :sorting.sync="_sorting"
-              :active="active"
-              @update:expanded-ids="$emit('update:expanded-ids', $event)"
-              @new="$emit('new', $event)"
-              @filter="$emit('filter', $event)"
-              @add-column="$emit('add-column', $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-group>
-          </div>
-        </template>
-      </itf-checkbox-group>
+    <itf-checkbox-group v-model="selectedIds">
+      <template v-for="(group, index) in groups">
+        <div class="table-view-body">
+          <itf-table-group
+            :key="index"
+            @update="$emit('update', { ...$event, group, groupIndex: index })"
+            @row-click="$emit('row-click', $event)"
+            :id-property="idProperty"
+            :columns="columns"
+            @update:columns="onColumnsUpdate"
+            :rows="group.rows"
+            :title="group.name"
+            :selected-ids.sync="selectedIds"
+            :add-new-rows="addNewRows"
+            :shadow-width="shadowWidth"
+            :column-sorting="columnSorting"
+            :column-resizing="columnResizing"
+            :show-grouping="showGrouping"
+            :show-summary="showSummary"
+            :show-add-column="showAddColumn"
+            :show-actions="showActions"
+            :show-header="!noHeader"
+            :schema="schema"
+            :editable="editable"
+            :no-column-menu="noColumnMenu"
+            :no-select-all="noSelectAll"
+            :currencies="currencies"
+            :currency="currency"
+            :subrows-property="subrowsProperty"
+            :async-subrows-property="asyncSubrowsProperty"
+            :divider-property="dividerProperty"
+            :indicator-type="indicatorType"
+            :expanded-all="expandedAll"
+            :indicatorWidth="indicatorWidth"
+            :striped="striped"
+            :expanded-ids="expandedIds"
+            :css-property="cssProperty"
+            :sticky-header="stickyHeader"
+            :editable-property="editableProperty"
+            :sorting.sync="_sorting"
+            :sort-as-string="sortAsString"
+            :active="active"
+            @loadChildren="$emit('loadChildren', $event)"
+            @update:expanded-ids="$emit('update:expanded-ids', $event)"
+            @new="$emit('new', $event)"
+            @filter="$emit('filter', $event)"
+            @add-column="$emit('add-column', $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-group>
+        </div>
+      </template>
+    </itf-checkbox-group>
     </div>
   </div>
 
@@ -104,11 +105,13 @@ export default @Component({
 })
 class itfTable2 extends Vue {
   // @Prop({ required: true, type: Array }) columns;
+  @Prop(Boolean) sortAsString;
   @Prop({ required: true, type: Array }) rows;
   @Prop({ type: String, default: null }) groupBy;
   @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
+  @Prop({ type: String, default: null }) asyncSubrowsProperty;
   @Prop({ type: String, default: null }) dividerProperty;
   @Prop({ type: String, default: null }) editableProperty;
   @Prop({ default: null }) active;
@@ -244,7 +247,8 @@ class itfTable2 extends Vue {
   @Watch('selectedIds')
   onSelectedIdsUpdate(selectedIds) {
     this.state.selectedIds = selectedIds;
-    this.saveTableState();
+    // метод saveTableState не зберігає selectedIds в localStorage, не впевнений що він тут треба
+    // this.saveTableState();
   }
 
   onColumnsUpdate(columns) {

package/src/components/table/TableBody.vue

@@ -7,6 +7,7 @@
       :columns="columns"
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
+      :async-subrows-property="asyncSubrowsProperty"
       :divider-property="dividerProperty"
       :show-add-column="showAddColumn"
       :show-actions="showActions"
@@ -144,6 +145,7 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
@@ -164,6 +166,10 @@ class itfTableBody extends Vue {
     this.$emit('update:expanded-ids', this.expandedIds.includes(item[this.idProperty])
       ? this.expandedIds.filter((id) => id !== item[this.idProperty])
       : [...this.expandedIds, item[this.idProperty]]);
+
+    if (this.asyncSubrowsProperty && item[this.asyncSubrowsProperty] && item[this.asyncSubrowsProperty]) {
+      this.$emit('loadChildren', item);
+    }
   }
 }
 </script>

package/src/components/table/TableGroup.vue

@@ -17,7 +17,7 @@
               <div class="shadow-area"></div>
               <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
                 <a class="header-content position-sticky d-flex align-items-center">
-                  <itf-button squircle icon small secondary class="collapse-arrow">
+                  <itf-button icon small secondary class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
                   </itf-button>
                   <span class="d-flex align-items-center line-overflow group-header-value text-primary"
@@ -39,6 +39,7 @@
             :show-add-column="showAddColumn"
             :show-actions="showActions"
             :id-property="idProperty"
+            :sort-as-string="sortAsString"
             :rows="rows"
             :schema="schema"
             :editable="editable"
@@ -61,11 +62,13 @@
             @row-click="$emit('row-click', $event)"
             :id-property="idProperty"
             :subrows-property="subrowsProperty"
+            :async-subrows-property="asyncSubrowsProperty"
             :divider-property="dividerProperty"
             :rows="rows"
             :editable="editable"
             :currency="currency"
             :currencies="currencies"
+            :sort-as-string="sortAsString"
             :columns="visibleColumns"
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
@@ -78,6 +81,7 @@
             :css-property="cssProperty"
             :editable-property="editableProperty"
             :active="active"
+            @loadChildren="$emit('loadChildren', $event)"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
           >
             <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -91,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>
@@ -264,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);
@@ -273,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);
@@ -359,6 +367,7 @@ class itfTableGroup extends Vue {
   @Prop() title;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() currency;
   @Prop() currencies;
@@ -378,6 +387,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
   @Prop(Boolean) stickyHeader;
+  @Prop(Boolean) sortAsString;
   @Prop() indicatorWidth;
   @Prop() shadowWidth;
   @Prop() cssProperty;

package/src/components/table/TableHeader.vue

@@ -4,8 +4,8 @@
     <div ref="container" class="table-row-template">
       <div accept-group="items" class="table-view-body-space" v-dropzone="{ payload: 0 }"></div>
       <div class="shadow-area"></div>
-      <div class="table-view-header-value reserved sticky">
-        <itf-checkbox v-if="indicatorType === 'checkbox' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
+      <div v-if="indicatorType !== 'none'" class="table-view-header-value reserved sticky">
+        <itf-checkbox v-if="indicatorType !== 'none' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
       </div>
 
       <template v-for="(column, n) in visibleAttributes">
@@ -29,14 +29,16 @@
           <div v-if="visibleHeader" group="tablecolumns"
                class="table-header"
                @drop="reorderColumns"
-               v-draggable="{ handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
+               v-draggable="{ dragHandleClass: null, handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
             <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100" :disabled="noColumnMenu">
               <template #button>
                 <div class="itf-table2__header-title d-flex w-100 align-items-center" :title="getTitle(column.title)">
                   <itf-icon class="itf-table2__header-icon" new v-if="column.icon" :name="column.icon"></itf-icon>
                   <div class="flex-grow-1 w-100 itf-table2__title-container d-flex align-items-center" :class="{'justify-content-end': column.align === 'end'}">
-                    <div class="itf-table2__title text-truncate">{{getTitle(column.title)}}</div>
-                    <div v-if="column.prefix" class="itf-table2__subtitle text-truncate" v-text="column.prefix" />
+                    <div class="itf-table2__title text-truncate">
+                      {{getTitle(column.title)}}
+                      <div v-if="column.prefix" class="itf-table2__subtitle text-truncate" :class="{'text-end': column.align === 'end'}" v-text="column.prefix" />
+                    </div>
                   </div>
                 </div>
                 <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'sort-asc' : 'sort-desc'" new :size="20" class="ms-1" />
@@ -194,6 +196,7 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop(Boolean) sortAsString;
   @Prop() idProperty;
   @Prop() indicatorType;
 
@@ -411,8 +414,10 @@ class itfTableHeader extends Vue {
   }
 
   sortBy(column, order) {
-    let sort = order === 'desc' ? `-${column.property}` : column.property;
-    console.info(sort);
+    let sort = { [column.property]: order };
+    if (this.sortAsString) {
+      sort = order === 'desc' ? `-${column.property}` : column.property;
+    }
     this.$emit('update:sorting', sort);
   }
 }

package/src/components/table/TableRowToggle.vue

@@ -2,7 +2,10 @@
   <div>
     <div @click.prevent.stop="toggle" class="d-flex align-items-center flex-nowrap" :class="{'active-toggle': visible}">
       <div class="item-toggle text-muted">
-        <template v-if="visible && expanded">
+        <template v-if="visible && loading">
+          <div class="itf-spinner"></div>
+        </template>
+        <template v-else-if="visible && expanded">
           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                width="16" height="16" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 <path d="M184.7,413.1l2.1-1.8l156.5-136c5.3-4.6,8.6-11.5,8.6-19.2c0-7.7-3.4-14.6-8.6-19.2L187.1,101l-2.6-2.3
@@ -23,6 +26,10 @@
   </div>
 </template>
 <style lang="scss" scoped>
+.itf-spinner {
+  width: 1rem;
+  height: 1rem;
+}
 .active-toggle {
   cursor: pointer;
 }
@@ -43,6 +50,7 @@ export default @Component({
 class itfTableRowToggle extends Vue {
   @Prop(Boolean) expanded;
   @Prop(Boolean) visible;
+  @Prop(Boolean) loading;
 
   toggle() {
     this.$emit('toggle');

package/src/components/table/TableRows.vue

@@ -25,6 +25,22 @@
               <span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
               <span v-else-if="indicatorType === 'property'">{{ item[idProperty] }}</span>
               <span v-else-if="indicatorType === 'checkbox'"><itf-checkbox :value="item[idProperty]" /></span>
+              <a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
+                <template v-if="subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length">
+                  <template v-if="item[subrowsProperty] && item[subrowsProperty].length && !isExpanded(item)">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
+                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
+                    </svg>
+                  </template>
+                  <template v-else>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16">
+                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+                      <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/>
+                    </svg>
+                  </template>
+                </template>
+              </a>
             </div>
           </div>
           <div accept-group="items" class="table-item-inner" @click="$emit('row-click', item)">
@@ -33,37 +49,37 @@
                 v-if="column.visible !== false"
                 :data-column="k"
                 :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-                :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'editable': column.editable && editable}"
+                :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
-                <div class="table-view-item-value-content" :class="{'px-2': !(column.editable && editable)}">
-                  <slot
-                    :name="`column.${column.property}`"
-                    :toggle="() => $emit('toggle', item)"
-                    :hasSubitems="!!(subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length)"
-                    :isExpanded="!!(item[subrowsProperty] && item[subrowsProperty].length && !isExpanded(item))"
-                    :level="level" :editable="column.editable && editable" :item="item" :column="column" :updateFields="(val) => updateValues(item, val, n, column)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
-                    <template v-if="column.editable && editable && (!editableProperty || item[editableProperty])">
-                      <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
-                        <itf-text-field class="w-100 h-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                        <itf-text-field class="w-100 h-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                        <itf-hours-field
-                          class="w-100 h-100"
-                          placeholder="00h 00m"
-                          v-else-if="column.type === 'time'"
-                          :hours="getValue(item, column)"
-                          @update:hours="updateValue(item, $event, n, column)"
-                        />
-                        <itf-textarea class="w-100 h-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                        <itf-money-field class="w-100 h-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                        <itf-select class="w-100 h-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
-                      </slot>
-                    </template>
-                    <div v-else class="h-100 align-items-center d-flex w-100">
-                      <slot :name="`format.${column.type}`" :toggle="() => $emit('toggle', item)" :level="level" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
-                        {{getValue(item, column)}}
-                      </slot>
-                    </div>
-                  </slot>
+                <div class="table-view-item-value-content align-items-center" :class="{'justify-content-end': column.align === 'end', 'px-2': !(column.editable && editable)}">
+                <slot
+                  :name="`column.${column.property}`"
+                  :toggle="() => $emit('toggle', item)"
+                  :hasSubitems="hasSubitems(item)"
+                  :isExpanded="!!(hasSubitems(item) && !isExpanded(item))"
+                  :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
+                  <template v-if="column.editable && editable && (!editableProperty || item[editableProperty])">
+                    <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-hours-field
+                        class="w-100 h-100"
+                        placeholder="00h 00m"
+                        v-else-if="column.type === 'time'"
+                        :hours="getValue(item, column)"
+                        @update:hours="updateValue(item, $event, n, column)"
+                      />
+                      <itf-textarea class="w-100 h-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-money-field class="w-100 h-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-select class="w-100 h-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
+                    </slot>
+                  </template>
+                  <span v-else class="text-truncate">
+                    <slot :name="`format.${column.type}`" :toggle="() => $emit('toggle', item)" :level="level" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
+                      {{getValue(item, column)}}
+                    </slot>
+                  </span>
+                </slot>
                 </div>
               </div>
             </template>
@@ -86,6 +102,7 @@
           :columns="columns"
           :id-property="idProperty"
           :subrows-property="subrowsProperty"
+          :async-subrows-property="asyncSubrowsProperty"
           :show-add-column="showAddColumn"
           :show-actions="showActions"
           :no-select-all="noSelectAll"
@@ -145,6 +162,7 @@ class itfTableRows extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
@@ -174,6 +192,12 @@ class itfTableRows extends Vue {
     return this.columns.findIndex((column) => column.lastPinned);
   }
 
+  hasSubitems(item) {
+    const hasFactItems = this.subrowsProperty && item[this.subrowsProperty] && item[this.subrowsProperty].length;
+    const hasPlanItems = this.asyncSubrowsProperty && item[this.asyncSubrowsProperty] && item[this.asyncSubrowsProperty];
+    return !!(hasFactItems || hasPlanItems);
+  }
+
   updateValue(item, value, index, column) {
     const newItem = { ...item };
     if (newItem[column.property] !== value) {
@@ -188,20 +212,8 @@ class itfTableRows extends Vue {
     }
   }
 
-  updateValues(item, values, index, column) {
-    const newItem = { ...item };
-    Object.assign(newItem, values);
-    this.$emit('update', {
-      index,
-      item,
-      inputValue: values,
-      value: newItem,
-      column
-    });
-  }
-
   isActive(id) {
-    if (!this.idProperty) {
+    if (!this.idProperty || !this.active) {
       return false;
     }
     if (Array.isArray(this.active)) {

package/src/components/table/table2.scss

@@ -7,10 +7,10 @@
   --itf-table-alt-bg: #F9FAFB;
   --itf-table-alt-selected-bg: #eff1f3;
   --itf-table-header-bg: #f5f7f8;
-  --itf-table-header-color: #7A818EA5;
+  --itf-table-header-color: #575b63;
   --itf-table-mirror-bg: #F2F4F7;
   --itf-table-border-color: transparent; //var(--itf-table-header-bg);
-  --itf-table-header-border-color: #7A818E33;
+  --itf-table-header-border-color: #8E97A533;
   --itf-table-border-base-color: var(--itf-table-header-bg); // кольори границь таблиці без внутрішніх рядків
   --itf-table-border-base-width: 2px;
   --itf-table-hover-header-bg: #dfe5ef;
@@ -23,6 +23,8 @@
   --itf-table-summary-text: var(--bs-tertiary-color);
   --itf-table-table-border-radius: 1rem;
   --itf-table-header-height: 2.25rem;
+  --itf-table-divider-bg: #F7F8FA;
+  --itf-table-divider-border: rgba(238, 238, 238, 1);
 
   --group-title-height: 40px;
   --table-row-height: none;
@@ -43,6 +45,9 @@ body[data-theme="dark"] {
   --itf-table-selected-bg: #011534;
   --itf-table-active-bg: #022e72;
   --itf-table-summary-text: #82909d80;
+  --itf-table-border-base-color: var(--itf-table-header-bg);
+  --itf-table-divider-bg: #0f0f0f;
+  --itf-table-divider-border: rgb(100, 100, 100, .1);
 }
 .itf-table2 {
   font-size: var(--itf-table-content-font-size, var(--itf-table-font-size));
@@ -60,7 +65,7 @@ body[data-theme="dark"] {
     height: 100%;
   }
   .scroller {
-    margin-bottom: 12px;
+    //margin-bottom: .5rem;
   }
   .scrollable-x {
     overflow-x: scroll;
@@ -97,34 +102,18 @@ body[data-theme="dark"] {
     position: sticky;
     top: 0;
     bottom: 0;
-    right: -.5rem;
+    right: -5px;
     z-index: 8;
+    padding-right: 5px;
+    padding-left: 5px;
     display: flex;
     align-items: center;
-
-    @media (max-width: 768px) {
-      position: relative;
-      opacity: 1;
-    }
   }
   .on-hover {
     opacity: 0;
-    width: 0;
-    padding: 4px .5rem;
-    overflow: hidden;
     pointer-events: none;
-    position: absolute;
-    right: 0;
-    background: linear-gradient(90deg, transparent 0, var(--itf-table2-row-bg) 10px);
-
-    @media (max-width: 768px) {
-      width: max-content;
-      opacity: 1;
-      position: relative;
-    }
   }
   .table-row-template:hover .on-hover {
-    width: max-content;
     opacity: 1;
     pointer-events: all;
   }
@@ -451,11 +440,11 @@ body[data-theme="dark"] {
   }
 
   &__row-divider {
-    background-color: #F7F8FA;
+    background-color: var(--itf-table-divider-bg);
     height: 5px;
     padding: 0;
-    border-top: 1px solid rgba(238, 238, 238, 1);
-    border-bottom: 1px solid rgba(238, 238, 238, 1);
+    border-top: 1px solid var(--itf-table-divider-border);
+    border-bottom: 1px solid var(--itf-table-divider-border);
   }
   //&:hover, &.permanent-editable-border {
   //  .table-view-item-value.editable {
@@ -468,6 +457,7 @@ body[data-theme="dark"] {
     position: relative;
     z-index: 2;
     width: 100%;
+    display: flex;
     height: 100%;
     background: var(--itf-table2-row-bg)
   }

package/src/components/view/View.vue

@@ -10,7 +10,8 @@
       :endpoint="filtersEndpoint"
       :panel="panel"
       v-model="filter"
-      @input="onFilterSet"
+      @loaded="onFilterSet($event, true)"
+      @change="onFilterSet($event, false)"
       @set-table-schema="setTableSchema"
     >
       <template #after-filter-btn>
@@ -213,7 +214,7 @@ class itfView extends Vue {
 
   getDownloadLinks() {
     const state = this.$refs.table ? this.$refs.table.getTableState() : null;
-    const filter = this.filter;
+    const filter = { ...this.filter };
     const sorting = this.sorting;
     const filterableColumnsNames = (state?.columns ?? []).filter(column => column.visible).map(column => column.property);
 
@@ -297,7 +298,7 @@ class itfView extends Vue {
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
-      let filter = this.filter;
+      let filter = { ...this.filter };
       if (this.oldFormat) {
         filter = Object.keys(filter).reduce((acc, key) => {
           acc[`filter[${key}]`] = filter[key];
@@ -370,7 +371,9 @@ class itfView extends Vue {
       sources.forEach(source => {
         if (source && typeof source === 'object') {
           Object.entries(source).forEach(([key, value]) => {
-            if (value !== undefined) {
+            if (key === 'page' && value === null) {
+              delete target[key];
+            } else if (value !== undefined) {
               target[key] = value;
             }
           });
@@ -380,10 +383,14 @@ class itfView extends Vue {
     }
   }
 
-  onFilterSet(filter) {
-    this.page = 1;
-    this.selectedIds = [];
-    this.setPanelPayload({ ...filter, page: 1 });
+  onFilterSet(filter, keepPage = false) {
+    if (keepPage) {
+      // при завантаженні сторінки не потрібно скидувати сторінку
+      this.setPanelPayload({ ...filter });
+    } else {
+      this.page = 1;
+      this.setPanelPayload({ ...filter, page: null });
+    }
     this.loadData();
   }