@itfin/components 1.4.30 → 1.4.35

package/src/components/icon/components/nomi-menu.vue

@@ -1,6 +1,6 @@
 <template><svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.8332 18.6667H8.1665" stroke="#0B1315" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M19.8332 9.33331H8.1665" stroke="#0B1315" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M19.8332 14L8.1665 14" stroke="#0B1315" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M19.8332 18.6667H8.1665" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M19.8332 9.33331H8.1665" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M19.8332 14L8.1665 14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 </template>

package/src/components/icon/components/nomi-minus.vue

@@ -1,4 +1,4 @@
 <template><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.83325 10H14.1666" stroke="#7A818E" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5.83325 10H14.1666" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 </template>

package/src/components/icon/components/nomi-pc.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8667 7.48333V16.35C10.8667 16.434 10.8333 16.5145 10.7739 16.5739C10.7145 16.6333 10.634 16.6667 10.55 16.6667H8.96667V17.9333H10.212C10.3754 17.9313 10.5335 17.9911 10.6546 18.1008C10.7757 18.2105 10.8509 18.3619 10.8651 18.5247C10.8708 18.6113 10.8587 18.6982 10.8295 18.78C10.8002 18.8617 10.7545 18.9366 10.6951 18.9999C10.6357 19.0632 10.5639 19.1137 10.4842 19.1481C10.4045 19.1825 10.3186 19.2002 10.2318 19.2H6.45471C6.29104 19.2024 6.13254 19.1428 6.01107 19.0331C5.8896 18.9233 5.81419 18.7717 5.8 18.6086C5.79425 18.522 5.80637 18.4351 5.83561 18.3534C5.86485 18.2716 5.91059 18.1967 5.96999 18.1334C6.02938 18.0701 6.10116 18.0196 6.18087 17.9852C6.26058 17.9508 6.34651 17.9331 6.43333 17.9333H7.7V16.6667H3.9C3.39609 16.6667 2.91282 16.4665 2.5565 16.1102C2.20018 15.7539 2 15.2706 2 14.7667V9.06667C2 8.56276 2.20018 8.07948 2.5565 7.72316C2.91282 7.36684 3.39609 7.16667 3.9 7.16667H10.55C10.634 7.16667 10.7145 7.20003 10.7739 7.25942C10.8333 7.3188 10.8667 7.39935 10.8667 7.48333ZM21 5.26667V17.9333C21 18.2693 20.8665 18.5915 20.629 18.829C20.3915 19.0665 20.0693 19.2 19.7333 19.2H13.4C13.0641 19.2 12.7419 19.0665 12.5043 18.829C12.2668 18.5915 12.1333 18.2693 12.1333 17.9333V5.26667C12.1333 4.93073 12.2668 4.60854 12.5043 4.371C12.7419 4.13345 13.0641 4 13.4 4H19.7333C20.0693 4 20.3915 4.13345 20.629 4.371C20.8665 4.60854 21 4.93073 21 5.26667ZM17.5087 15.841C17.5347 15.6442 17.4984 15.4442 17.4048 15.2692C17.3113 15.0941 17.1653 14.9527 16.9874 14.8649C16.8094 14.7771 16.6084 14.7472 16.4125 14.7794C16.2167 14.8117 16.0359 14.9044 15.8955 15.0447C15.7551 15.185 15.6621 15.3657 15.6297 15.5615C15.5972 15.7573 15.6269 15.9584 15.7146 16.1364C15.8023 16.3145 15.9435 16.4606 16.1185 16.5543C16.2935 16.648 16.4934 16.6845 16.6902 16.6587C16.8976 16.6316 17.0903 16.5367 17.2383 16.3889C17.3863 16.241 17.4814 16.0484 17.5087 15.841ZM19.1 9.65804C19.0858 9.49498 19.0104 9.34333 18.8889 9.23362C18.7675 9.1239 18.609 9.06425 18.4453 9.06667H14.688C14.5246 9.06465 14.3665 9.12448 14.2454 9.23416C14.1243 9.34384 14.0491 9.49525 14.0349 9.65804C14.0292 9.74467 14.0413 9.83156 14.0705 9.91331C14.0998 9.99506 14.1455 10.0699 14.2049 10.1333C14.2643 10.1966 14.3361 10.247 14.4158 10.2814C14.4955 10.3159 14.5814 10.3335 14.6683 10.3333H18.4683C18.5549 10.3333 18.6407 10.3155 18.7202 10.281C18.7997 10.2465 18.8713 10.196 18.9306 10.1327C18.9898 10.0694 19.0354 9.99458 19.0645 9.91294C19.0937 9.8313 19.1057 9.74454 19.1 9.65804ZM19.1 7.12471C19.0858 6.96164 19.0104 6.81 18.8889 6.70028C18.7675 6.59057 18.609 6.53092 18.4453 6.53333H14.688C14.5244 6.53092 14.3659 6.59057 14.2444 6.70028C14.1229 6.81 14.0475 6.96164 14.0333 7.12471C14.0276 7.21134 14.0397 7.29823 14.0689 7.37998C14.0982 7.46173 14.1439 7.53659 14.2033 7.59992C14.2627 7.66325 14.3345 7.71369 14.4142 7.74811C14.4939 7.78253 14.5798 7.80019 14.6667 7.8H18.4667C18.5535 7.80019 18.6394 7.78253 18.7191 7.74811C18.7988 7.71369 18.8706 7.66325 18.93 7.59992C18.9894 7.53659 19.0351 7.46173 19.0644 7.37998C19.0936 7.29823 19.1058 7.21134 19.1 7.12471Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-promo.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.74854 10.9386C3.74854 11.1859 3.90535 11.406 4.14056 11.4884C4.82504 11.7288 5.31664 12.3774 5.31664 13.1389C5.31664 13.9003 4.82504 14.549 4.14056 14.7893C3.90535 14.8718 3.74854 15.0919 3.74854 15.3392V16.6389C3.74854 17.391 4.36323 18 5.12062 18H19.2335C19.9909 18 20.6056 17.391 20.6056 16.6389V15.3392C20.6056 15.0919 20.4488 14.8718 20.2136 14.7893C19.5291 14.549 19.0375 13.9003 19.0375 13.1389C19.0375 12.3774 19.5291 11.7288 20.2136 11.4884C20.4488 11.406 20.6056 11.1859 20.6056 10.9386V8.86111C20.6056 8.109 19.9909 7.5 19.2335 7.5H5.12062C4.36323 7.5 3.74854 8.109 3.74854 8.86111V10.9386ZM15.1314 13.6958C14.6719 13.2408 13.9271 13.2408 13.4676 13.6958C13.009 14.1516 13.009 14.8904 13.4676 15.3454C13.9271 15.8012 14.6719 15.8012 15.1314 15.3454C15.59 14.8904 15.59 14.1516 15.1314 13.6958ZM14.1137 10.0044L9.40938 14.6711C9.17965 14.8982 9.17965 15.2684 9.40938 15.4956C9.63832 15.7234 10.0115 15.7234 10.2405 15.4956L14.9448 10.8289C15.1745 10.6018 15.1745 10.2316 14.9448 10.0044C14.7158 9.77656 14.3426 9.77656 14.1137 10.0044ZM10.8865 10.2743C10.4271 9.81856 9.68223 9.81856 9.22277 10.2743C8.7641 10.7293 8.7641 11.469 9.22277 11.924C9.68223 12.379 10.4271 12.379 10.8865 11.924C11.3452 11.469 11.3452 10.7293 10.8865 10.2743Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-transactions_delete.vue

@@ -0,0 +1,5 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4287 4C17.5836 4 18.6606 4.00047 19.3301 4.66992C19.9995 5.33938 20 6.41639 20 8.57129V15.0283C19.8358 15.0102 19.669 15 19.5 15C17.0147 15 15 17.0147 15 19.5C15 19.669 15.0102 19.8358 15.0283 20H8.57129C6.41639 20 5.33938 19.9995 4.66992 19.3301C4.00047 18.6606 4 17.5836 4 15.4287V8.57129C4 6.41639 4.00047 5.33938 4.66992 4.66992C5.33938 4.00047 6.41639 4 8.57129 4H15.4287ZM14.209 12.1338C14.0306 11.9554 13.7411 11.9557 13.5625 12.1338C13.384 12.3123 13.384 12.6017 13.5625 12.7803L14.6094 13.8281H8.39941C8.14713 13.8282 7.94261 14.0329 7.94238 14.2852C7.94238 14.5376 8.14698 14.7431 8.39941 14.7432H14.6104L13.5625 15.791C13.384 15.9695 13.384 16.259 13.5625 16.4375C13.7411 16.6156 14.0306 16.6159 14.209 16.4375L16.0371 14.6094C16.2152 14.431 16.2151 14.1414 16.0371 13.9629L14.209 12.1338ZM10.5518 7.5625C10.3733 7.38408 10.0838 7.38432 9.90527 7.5625L8.07617 9.3916C7.89785 9.57015 7.89771 9.85962 8.07617 10.0381L9.90527 11.8662C10.0839 12.0441 10.3734 12.0445 10.5518 11.8662C10.7297 11.6879 10.7295 11.3982 10.5518 11.2197L9.50293 10.1719H15.7139C15.9658 10.1715 16.1705 9.96678 16.1709 9.71484C16.1709 9.46257 15.9661 9.25815 15.7139 9.25781H9.50293L10.5518 8.20898C10.7297 8.03065 10.7295 7.74097 10.5518 7.5625Z" fill="currentColor"/>
+<path d="M19.5 16C21.433 16 23 17.567 23 19.5C23 21.433 21.433 23 19.5 23C17.567 23 16 21.433 16 19.5C16 17.567 17.567 16 19.5 16ZM18.125 18.9258C17.7938 18.9319 17.5302 19.2049 17.5361 19.5361C17.5422 19.8673 17.8154 20.1308 18.1465 20.125L20.9248 20.0742C21.256 20.0681 21.5187 19.7951 21.5127 19.4639C21.5066 19.1326 21.2336 18.869 20.9023 18.875L18.125 18.9258Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-types.vue

@@ -0,0 +1,7 @@
+<template><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="5" y="5" width="4.28571" height="4.28571" rx="0.714286" fill="currentColor"/>
+    <rect x="10.7143" y="5" width="4.28571" height="4.28571" rx="0.714286" fill="currentColor"/>
+    <rect x="5" y="10.7144" width="4.28571" height="4.28571" rx="0.714286" fill="currentColor"/>
+    <rect x="10.7143" y="10.7144" width="4.28571" height="4.28571" rx="0.714286" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-warning_triangle.vue

@@ -0,0 +1,6 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 9.75V13.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.7062 3.74999L2.45625 18C2.32482 18.2276 2.25551 18.4858 2.25528 18.7487C2.25505 19.0115 2.32389 19.2698 2.45492 19.4977C2.58595 19.7256 2.77456 19.915 3.00185 20.0471C3.22914 20.1791 3.48714 20.2491 3.75 20.25H20.25C20.5129 20.2491 20.7709 20.1791 20.9981 20.0471C21.2254 19.915 21.414 19.7256 21.5451 19.4977C21.6761 19.2698 21.7449 19.0115 21.7447 18.7487C21.7445 18.4858 21.6752 18.2276 21.5437 18L13.2937 3.74999C13.1633 3.52206 12.975 3.33263 12.7478 3.20088C12.5206 3.06914 12.2626 2.99976 12 2.99976C11.7374 2.99976 11.4794 3.06914 11.2522 3.20088C11.025 3.33263 10.8367 3.52206 10.7062 3.74999V3.74999Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17.8125C12.5178 17.8125 12.9375 17.3928 12.9375 16.875C12.9375 16.3572 12.5178 15.9375 12 15.9375C11.4822 15.9375 11.0625 16.3572 11.0625 16.875C11.0625 17.3928 11.4822 17.8125 12 17.8125Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/panels/PanelItemEdit.vue

@@ -1,19 +1,19 @@
 <template>
-  <div v-loading="loading" class="px-3 pt-2 h-100">
+  <div v-loading="loading" class="px-3 pt-2 h-100 d-flex flex-column">
     <itf-form
       ref="editForm"
-      class="d-flex flex-column justify-content-between h-100"
+      class="d-flex flex-column justify-content-between flex-grow-1"
       @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 :loading="loading" :disabled="loading" @click="$emit('cancel')">
-            <span>{{ $t('components.modal.cancel') }}</span>
+          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
+            <span>{{ cancelBtnText }}</span>
           </itf-button>
-          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary :loading="loading" :disabled="loading" @click="onSaveClick">
-            <span>{{ $t('components.modal.save') }}</span>
+          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
+            <span>{{ saveBtnText }}</span>
           </itf-button>
         </div>
       </div>
@@ -51,6 +51,8 @@ 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,6 +5,7 @@
 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: {
@@ -15,7 +16,6 @@ import {stackToHash} from "@itfin/components/src/components/panels/helpers";
   }
 })
 export default class PanelLink extends Vue {
-  @Inject({ default: null }) panelList;
   @Inject({ default: null }) currentPanel;
 
   @Prop(Boolean) global: boolean;
@@ -25,6 +25,7 @@ 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 = {};
@@ -35,7 +36,7 @@ export default class PanelLink extends Vue {
   }
 
   get activeList() {
-    return this.list ?? this.panelList;
+    return this.list ?? getRootPanelList();
   }
 
   get isActive() {
@@ -51,6 +52,9 @@ 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,
       {
@@ -62,13 +66,18 @@ export default class PanelLink extends Vue {
   }
 
   onClick(e) {
-    console.info(this.activeList);
+    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
+    });
     if (!this.activeList) {
       return;
     }
-    e.preventDefault();
-    e.stopPropagation();
-    this.activeList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel?.index + 1);
+    this.activeList.openPanel(this.panel, this.payload || {}, index);
   }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -218,7 +218,6 @@ 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[] = [];
 
@@ -229,7 +228,6 @@ 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); // щоб панелі змінювались при навігації
   }
@@ -468,9 +466,9 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack, this.routePrefix).replace(/^#/, '');
+    const hash = stackToHash(this.panelsStack, this.routeType === 'path').replace(/^#/, '');
     if (this.routeType === 'path') {
-      this.$router.push({ path: hash });
+      this.$router.push({ path: `/${hash}` });
     } else {
       this.$router.push({ hash });
     }
@@ -480,7 +478,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.routePrefix);
+      const panels = hashToStack(hash, this.routeType === 'path');
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {
@@ -500,14 +498,12 @@ 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,25 +10,19 @@ export interface IPanel {
 const COLLAPSE_SYMBOL = '~'
 const PARAMS_SYMBOL = ';'
 
-export function stackToHash(stack: IPanel[], prefix: string = '') {
-  let hash = stack.map(panel => {
+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() ? '/' : '&');
-  if (prefix) {
-    hash = `${prefix}/${hash}`;
-  }
   return isPathType() ? `/${hash}` : `#${hash}`;
 }
 
 
-export function hashToStack(hash: string|undefined, prefix: string = ''): IPanel[] {
+export function hashToStack(hash: string|undefined): IPanel[] {
   let stack:IPanel[] = [];
-  let str = hash.replace(isPathType() ? /^\// : /^#/, '');
-  if (str && prefix) {
-    str = str.replace(new RegExp(`^${prefix}\/?`), '');
-  }
+  const str = hash.replace(isPathType() ? /^\// : /^#/, '');
   if (str) {
     stack = str.split(isPathType() ? '/' : '&').map(item => {
       if (!item.includes(PARAMS_SYMBOL)) {

package/src/components/table/Table2.vue

@@ -7,9 +7,11 @@
     '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-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>
+      <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>
         <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>
@@ -17,64 +19,61 @@
       </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"
-            :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>
+      <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>
     </div>
   </div>
 
@@ -105,13 +104,11 @@ 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;
@@ -247,8 +244,7 @@ class itfTable2 extends Vue {
   @Watch('selectedIds')
   onSelectedIdsUpdate(selectedIds) {
     this.state.selectedIds = selectedIds;
-    // метод saveTableState не зберігає selectedIds в localStorage, не впевнений що він тут треба
-    // this.saveTableState();
+    this.saveTableState();
   }
 
   onColumnsUpdate(columns) {

package/src/components/table/TableBody.vue

@@ -7,7 +7,6 @@
       :columns="columns"
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
-      :async-subrows-property="asyncSubrowsProperty"
       :divider-property="dividerProperty"
       :show-add-column="showAddColumn"
       :show-actions="showActions"
@@ -145,7 +144,6 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
-  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
@@ -166,10 +164,6 @@ 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 icon small secondary class="collapse-arrow">
+                  <itf-button squircle 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,7 +39,6 @@
             :show-add-column="showAddColumn"
             :show-actions="showActions"
             :id-property="idProperty"
-            :sort-as-string="sortAsString"
             :rows="rows"
             :schema="schema"
             :editable="editable"
@@ -62,13 +61,11 @@
             @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"
@@ -81,7 +78,6 @@
             :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">
@@ -95,11 +91,11 @@
 
         <!-- Лінія додати нову -->
         <div v-if="isShowTable && addNewRows"
-             class="table-row-template table-row-template__new-row d-flex align-items-stretch">
+             class="table-row-template 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 px-2 small">
+            <span class="d-sticky d-flex align-items-center py-1">
               <itf-icon name="plus"/>
               <span>{{ newLabel }}</span>
             </span>
@@ -268,11 +264,7 @@
     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);
@@ -281,7 +273,7 @@
     border-bottom-right-radius: var(--itf-table-table-border-radius);
 
     & > span {
-      left: calc(var(--shadow-area-width) + 4px);
+      left: var(--shadow-area-width);
       position: sticky;
       padding-left: var(--shadow-area-width);
       //border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
@@ -367,7 +359,6 @@ class itfTableGroup extends Vue {
   @Prop() title;
   @Prop() idProperty;
   @Prop() subrowsProperty;
-  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() currency;
   @Prop() currencies;
@@ -387,7 +378,6 @@ 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 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 class="table-view-header-value reserved sticky">
+        <itf-checkbox v-if="indicatorType === 'checkbox' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
       </div>
 
       <template v-for="(column, n) in visibleAttributes">
@@ -29,16 +29,14 @@
           <div v-if="visibleHeader" group="tablecolumns"
                class="table-header"
                @drop="reorderColumns"
-               v-draggable="{ dragHandleClass: null, handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
+               v-draggable="{ 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 v-if="column.prefix" class="itf-table2__subtitle text-truncate" :class="{'text-end': column.align === 'end'}" v-text="column.prefix" />
-                    </div>
+                    <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>
                 </div>
                 <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'sort-asc' : 'sort-desc'" new :size="20" class="ms-1" />
@@ -196,7 +194,6 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
-  @Prop(Boolean) sortAsString;
   @Prop() idProperty;
   @Prop() indicatorType;
 
@@ -414,10 +411,8 @@ class itfTableHeader extends Vue {
   }
 
   sortBy(column, order) {
-    let sort = { [column.property]: order };
-    if (this.sortAsString) {
-      sort = order === 'desc' ? `-${column.property}` : column.property;
-    }
+    let sort = order === 'desc' ? `-${column.property}` : column.property;
+    console.info(sort);
     this.$emit('update:sorting', sort);
   }
 }

package/src/components/table/TableRowToggle.vue

@@ -2,10 +2,7 @@
   <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 && loading">
-          <div class="itf-spinner"></div>
-        </template>
-        <template v-else-if="visible && expanded">
+        <template v-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
@@ -26,10 +23,6 @@
   </div>
 </template>
 <style lang="scss" scoped>
-.itf-spinner {
-  width: 1rem;
-  height: 1rem;
-}
 .active-toggle {
   cursor: pointer;
 }
@@ -50,7 +43,6 @@ export default @Component({
 class itfTableRowToggle extends Vue {
   @Prop(Boolean) expanded;
   @Prop(Boolean) visible;
-  @Prop(Boolean) loading;
 
   toggle() {
     this.$emit('toggle');