@itfin/components 1.4.28 → 1.4.30

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)).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/icon/components/nomi-chart-funnel.vue

@@ -0,0 +1,6 @@
+<template><svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M10.809 11C9.18 11 8 12.334 8 13.81v2.798c0 1.476 1.181 2.81 2.809 2.81H53.19c1.628 0 2.809-1.334 2.809-2.81V13.81c0-1.476-1.181-2.81-2.809-2.81H10.81Zm5.436 11.194c-1.628 0-2.809 1.334-2.809 2.81v2.798c0 1.476 1.181 2.81 2.809 2.81h31.51c1.628 0 2.809-1.334 2.809-2.81v-2.798c0-1.476-1.181-2.81-2.809-2.81h-31.51Zm5.436 11.194c-1.627 0-2.809 1.334-2.809 2.81v2.798c0 1.476 1.182 2.81 2.81 2.81h20.637c1.627 0 2.808-1.334 2.808-2.81v-2.798c0-1.476-1.18-2.81-2.808-2.81H21.68Zm5.436 11.194c-1.627 0-2.808 1.334-2.808 2.81v2.798c0 1.476 1.18 2.81 2.808 2.81h9.765c1.628 0 2.81-1.334 2.81-2.81v-2.798c0-1.476-1.182-2.81-2.81-2.81h-9.764Z"
+          fill="currentColor"></path>
+</svg>
+</template>

package/src/components/icon/components/nomi-chart-kpi.vue

@@ -0,0 +1,8 @@
+<template><svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.761 40.248h-3.974l-4.324-6.954-1.48 1.06v5.894h-3.5V23.742h3.5v7.553l1.378-1.942 4.471-5.611h3.884l-5.758 7.305 5.803 9.201ZM34.339 31.51h1.151c1.077 0 1.882-.211 2.416-.633.535-.429.802-1.05.802-1.862 0-.82-.226-1.427-.677-1.818-.444-.392-1.144-.587-2.1-.587h-1.592v4.9Zm7.903-2.62c0 1.777-.557 3.135-1.671 4.076-1.106.941-2.683 1.411-4.73 1.411h-1.502v5.871h-3.5V23.742h5.272c2.003 0 3.523.433 4.562 1.298 1.046.858 1.569 2.142 1.569 3.85ZM45.358 40.248V23.742h3.5v16.506h-3.5Z"
+      fill="currentColor"></path>
+<path fill-rule="evenodd" clip-rule="evenodd"
+      d="M9.29 12.903c0-.855.743-1.548 1.66-1.548h43.133c.916 0 1.66.693 1.66 1.548 0 .855-.744 1.549-1.66 1.549H10.95c-.917 0-1.66-.694-1.66-1.549ZM9.29 51.097c0-.855.743-1.549 1.66-1.549h43.133c.916 0 1.66.694 1.66 1.549s-.744 1.548-1.66 1.548H10.95c-.917 0-1.66-.693-1.66-1.548Z"
+      fill="currentColor"></path>
+</svg>
+</template>

package/src/components/icon/components/nomi-control-panel.vue

@@ -0,0 +1,8 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 9L9 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M13 15H5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M19 15L17 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="15" cy="15" r="2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="7" cy="9" r="2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

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/PanelLink.vue

@@ -5,7 +5,6 @@
 import { Vue, Component, Inject, Prop } from 'vue-property-decorator';
 import { IPanel } from './PanelList.vue';
 import {stackToHash} from "@itfin/components/src/components/panels/helpers";
-import {getRootPanelList} from "@itfin/components/src/components/panels";
 
 @Component({
   components: {
@@ -16,6 +15,7 @@ import {getRootPanelList} from "@itfin/components/src/components/panels";
   }
 })
 export default class PanelLink extends Vue {
+  @Inject({ default: null }) panelList;
   @Inject({ default: null }) currentPanel;
 
   @Prop(Boolean) global: boolean;
@@ -25,7 +25,6 @@ export default class PanelLink extends Vue {
   @Prop() list;
   @Prop({ type: String, default: 'active' }) activeClass: string;
   @Prop(Boolean) append: boolean;
-  @Prop(Boolean) replace: boolean;
 
   get on() {
     const handlers = {};
@@ -36,7 +35,7 @@ export default class PanelLink extends Vue {
   }
 
   get activeList() {
-    return this.list ?? getRootPanelList();
+    return this.list ?? this.panelList;
   }
 
   get isActive() {
@@ -52,9 +51,6 @@ export default class PanelLink extends Vue {
     if (!this.append) {
       stack = stack.splice(0, this.currentPanel?.index + 1);
     }
-    if (this.replace) {
-      stack = [];
-    }
     const hash = stackToHash([
       ...stack,
       {
@@ -66,18 +62,13 @@ export default class PanelLink extends Vue {
   }
 
   onClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    const index = this.replace ? 0 : (this.append ? undefined : this.currentPanel?.index + 1);
-    this.$emit('open', {
-      panel: this.panel,
-      payload: this.payload || {},
-      index
-    });
+    console.info(this.activeList);
     if (!this.activeList) {
       return;
     }
-    this.activeList.openPanel(this.panel, this.payload || {}, index);
+    e.preventDefault();
+    e.stopPropagation();
+    this.activeList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel?.index + 1);
   }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -218,6 +218,7 @@ export default class PanelList extends Vue {
   @Prop() panels: Record<string, Component>;
   @Prop({ default: () => {} }) searchPanel: (type: string) => boolean;
   @Prop({ type: String, default: 'path' }) routeType: string;
+  @Prop({ type: String, default: '' }) routePrefix: string;
 
   panelsStack:IPanel[] = [];
 
@@ -228,6 +229,7 @@ export default class PanelList extends Vue {
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
+    console.info('created');
     this.parsePanelHash(); // щоб панелі змінювались при перезавантаженні
     window.addEventListener('popstate', this.handlePopState); // щоб панелі змінювались при навігації
   }
@@ -466,9 +468,9 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack, this.routeType === 'path').replace(/^#/, '');
+    const hash = stackToHash(this.panelsStack, this.routePrefix).replace(/^#/, '');
     if (this.routeType === 'path') {
-      this.$router.push({ path: `/${hash}` });
+      this.$router.push({ path: hash });
     } else {
       this.$router.push({ hash });
     }
@@ -478,7 +480,7 @@ export default class PanelList extends Vue {
   async parsePanelHash() {
     const hash = this.routeType === 'path' ? location.pathname : location.hash;
     if (hash) {
-      const panels = hashToStack(hash, this.routeType === 'path');
+      const panels = hashToStack(hash, this.routePrefix);
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {
@@ -498,12 +500,14 @@ export default class PanelList extends Vue {
         }
       }
       this.panelsStack = newStack;
+      console.info('set', newStack);
       this.emitEvent('panels.changed', this.panelsStack);
       this.updateTitle();
     }
   }
 
   handlePopState() {
+    console.info('handlePopState')
     this.parsePanelHash();
     // виправляє проблему відкритої панелі при натисканні кнопки "назад" до першої панелі
     if (this.panelsStack.length === 2) {

package/src/components/panels/helpers.ts

@@ -10,19 +10,25 @@ export interface IPanel {
 const COLLAPSE_SYMBOL = '~'
 const PARAMS_SYMBOL = ';'
 
-export function stackToHash(stack: IPanel[]) {
-  const hash = stack.map(panel => {
+export function stackToHash(stack: IPanel[], prefix: string = '') {
+  let 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() ? '/' : '&');
+  if (prefix) {
+    hash = `${prefix}/${hash}`;
+  }
   return isPathType() ? `/${hash}` : `#${hash}`;
 }
 
 
-export function hashToStack(hash: string|undefined): IPanel[] {
+export function hashToStack(hash: string|undefined, prefix: string = ''): IPanel[] {
   let stack:IPanel[] = [];
-  const str = hash.replace(isPathType() ? /^\// : /^#/, '');
+  let str = hash.replace(isPathType() ? /^\// : /^#/, '');
+  if (str && prefix) {
+    str = str.replace(new RegExp(`^${prefix}\/?`), '');
+  }
   if (str) {
     stack = str.split(isPathType() ? '/' : '&').map(item => {
       if (!item.includes(PARAMS_SYMBOL)) {

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;