@itfin/components 1.4.26 → 1.4.28

package/src/components/panels/index.ts

@@ -0,0 +1,43 @@
+const PanelsSettings = {
+  pathType: 'path', // 'hash' | 'path'
+  rootPanelList: null, // This will be set to the root panel list when the app is initialized
+};
+
+export function getPanelsSettings() {
+  return PanelsSettings;
+}
+
+export function getRootPanelList() {
+  return PanelsSettings.rootPanelList;
+}
+
+export function isPathType() {
+  return PanelsSettings.pathType === 'path';
+}
+
+export function setPanelsPathType(settings: any) {
+  PanelsSettings.pathType = settings.pathType ?? 'path';
+}
+
+export function setRootPanelList(rootPanelList: any) {
+  PanelsSettings.rootPanelList = rootPanelList;
+}
+
+export function emitGlobalEvent(eventName: string, data: any) {
+  const event = new CustomEvent(`panel:${eventName}`, { detail: data });
+  window.dispatchEvent(event);
+}
+
+export function onGlobalEvent(eventName: string|string[], callback: (event: CustomEvent) => void) {
+  const eventNames = Array.isArray(eventName) ? eventName : [eventName];
+  for (const name of eventNames) {
+    window.addEventListener(`panel:${name}`, callback);
+  }
+}
+
+export function offGlobalEvent(eventName: string|string[], callback: (event: CustomEvent) => void) {
+  const eventNames = Array.isArray(eventName) ? eventName : [eventName];
+  for (const name of eventNames) {
+    window.removeEventListener(`panel:${name}`, callback);
+  }
+}

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');

package/src/components/table/TableRows.vue

@@ -25,22 +25,6 @@
               <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)">
@@ -49,37 +33,37 @@
                 v-if="column.visible !== false"
                 :data-column="k"
                 :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-                :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'editable': column.editable && editable}"
+                :class="{'justify-content-end': column.align === 'end', '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 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 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>
               </div>
             </template>
@@ -102,7 +86,6 @@
           :columns="columns"
           :id-property="idProperty"
           :subrows-property="subrowsProperty"
-          :async-subrows-property="asyncSubrowsProperty"
           :show-add-column="showAddColumn"
           :show-actions="showActions"
           :no-select-all="noSelectAll"
@@ -162,7 +145,6 @@ class itfTableRows extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
-  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
@@ -192,12 +174,6 @@ 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) {
@@ -212,8 +188,20 @@ 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 || !this.active) {
+    if (!this.idProperty) {
       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: #575b63;
+  --itf-table-header-color: #7A818EA5;
   --itf-table-mirror-bg: #F2F4F7;
   --itf-table-border-color: transparent; //var(--itf-table-header-bg);
-  --itf-table-header-border-color: #8E97A533;
+  --itf-table-header-border-color: #7A818E33;
   --itf-table-border-base-color: var(--itf-table-header-bg); // кольори границь таблиці без внутрішніх рядків
   --itf-table-border-base-width: 2px;
   --itf-table-hover-header-bg: #dfe5ef;
@@ -23,8 +23,6 @@
   --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;
@@ -45,9 +43,6 @@ 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));
@@ -65,7 +60,7 @@ body[data-theme="dark"] {
     height: 100%;
   }
   .scroller {
-    //margin-bottom: .5rem;
+    margin-bottom: 12px;
   }
   .scrollable-x {
     overflow-x: scroll;
@@ -102,18 +97,34 @@ body[data-theme="dark"] {
     position: sticky;
     top: 0;
     bottom: 0;
-    right: -5px;
+    right: -.5rem;
     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;
   }
@@ -440,11 +451,11 @@ body[data-theme="dark"] {
   }
 
   &__row-divider {
-    background-color: var(--itf-table-divider-bg);
+    background-color: #F7F8FA;
     height: 5px;
     padding: 0;
-    border-top: 1px solid var(--itf-table-divider-border);
-    border-bottom: 1px solid var(--itf-table-divider-border);
+    border-top: 1px solid rgba(238, 238, 238, 1);
+    border-bottom: 1px solid rgba(238, 238, 238, 1);
   }
   //&:hover, &.permanent-editable-border {
   //  .table-view-item-value.editable {
@@ -457,7 +468,6 @@ body[data-theme="dark"] {
     position: relative;
     z-index: 2;
     width: 100%;
-    display: flex;
     height: 100%;
     background: var(--itf-table2-row-bg)
   }