@itfin/components 2.0.7 → 2.0.9

package/src/components/icon/new-icons/ai.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="4 4 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8461 13.8066C9.51242 12.9683 7.88973 13.5198 6.33372 14.1816L5 11.0711C5.02223 11.0711 5.06669 11.0491 5.08892 11.027C6.55601 10.4093 10.3571 8.79892 13.5136 11.5785C13.6247 11.6668 13.7136 11.755 13.8248 11.8653C14.9585 11.4461 16.2255 11.3138 17.6037 11.6006C20.1155 12.108 21.8938 14.0272 22.6273 16.6083C23.3387 19.1452 23.0497 22.366 21.6048 25.9397L18.4484 24.6823C19.6932 21.5718 19.8043 19.1452 19.3375 17.5127C18.8929 15.9244 17.9593 15.1302 16.9146 14.9096C16.5367 14.8434 16.181 14.8214 15.8031 14.8655C16.5589 16.6965 16.7812 18.704 16.5811 20.4247C16.4255 21.8807 15.9365 23.3808 15.0251 24.4617C14.0248 25.6309 12.5133 26.2927 10.7572 25.8736C8.68996 25.3882 7.75636 23.7337 7.53407 22.0792C7.33401 20.4909 7.75636 18.704 8.4899 17.1156C9.02339 15.9685 9.82362 14.7772 10.8461 13.7845V13.8066ZM12.8245 16.6303C12.3577 17.1818 11.9354 17.8216 11.5797 18.5716C11.024 19.7629 10.8239 20.91 10.9128 21.6821C11.0017 22.388 11.2463 22.5425 11.513 22.6086C11.8909 22.6969 12.1354 22.6086 12.4022 22.2998C12.7356 21.9027 13.069 21.1527 13.1802 20.0717C13.3135 18.9466 13.1802 17.7333 12.8023 16.6303H12.8245Z" fill="currentColor"/>
+  <path d="M20.6582 5.7567C20.7911 5.4625 21.2089 5.4625 21.3418 5.7567L21.5835 6.29203C21.809 6.79121 22.2088 7.19101 22.708 7.41646L23.2433 7.65824C23.5375 7.79111 23.5375 8.20889 23.2433 8.34176L22.708 8.58354C22.2088 8.80899 21.809 9.20879 21.5835 9.70797L21.3418 10.2433C21.2089 10.5375 20.7911 10.5375 20.6582 10.2433L20.4165 9.70797C20.191 9.20879 19.7912 8.80899 19.292 8.58354L18.7567 8.34176C18.4625 8.20889 18.4625 7.79111 18.7567 7.65824L19.292 7.41646C19.7912 7.19101 20.191 6.79121 20.4165 6.29203L20.6582 5.7567Z" fill="currentColor"/>
+  <path d="M24.7722 11.5045C24.8607 11.3083 25.1393 11.3083 25.2278 11.5045L25.389 11.8614C25.5393 12.1941 25.8059 12.4607 26.1386 12.611L26.4955 12.7722C26.6917 12.8607 26.6917 13.1393 26.4955 13.2278L26.1386 13.389C25.8059 13.5393 25.5393 13.8059 25.389 14.1386L25.2278 14.4955C25.1393 14.6917 24.8607 14.6917 24.7722 14.4955L24.611 14.1386C24.4607 13.8059 24.1941 13.5393 23.8614 13.389L23.5045 13.2278C23.3083 13.1393 23.3083 12.8607 23.5045 12.7722L23.8614 12.611C24.1941 12.4607 24.4607 12.1941 24.611 11.8614L24.7722 11.5045Z" fill="currentColor"/>
+</svg>

package/src/components/icon/new-icons/expand.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19 10V5.3C19 5.13431 18.8657 5 18.7 5H14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 14V18.7C5 18.8657 5.13431 19 5.3 19H10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.5 18.5L9.5 14.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.5 9.5L18.5 5.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icon/new-icons/eye.svg

@@ -0,0 +1,3 @@
+<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="M5.08422 11.626C4.97192 11.8628 4.97193 12.1375 5.08423 12.3743C6.303 14.9438 8.94045 16.7231 11.9977 16.7231C15.055 16.7231 17.6925 14.9437 18.9112 12.3741C19.0235 12.1373 19.0235 11.8625 18.9112 11.6258C17.6924 9.0562 15.055 7.27698 11.9978 7.27698C8.94046 7.27698 6.30294 9.05631 5.08422 11.626ZM15 12C15 13.6569 13.6569 15 12 15C10.3432 15 9.00003 13.6569 9.00003 12C9.00003 10.3432 10.3432 9.00002 12 9.00002C12.3075 9.00002 12.6042 9.04627 12.8834 9.1322C12.3625 9.36738 12 9.89137 12 10.5C12 11.3284 12.6716 12 13.5 12C14.1087 12 14.6327 11.6375 14.8678 11.1166C14.9538 11.3959 15 11.6926 15 12Z" fill="currentColor"/>
+</svg>

package/src/components/icon/new-icons/help.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg>

package/src/components/icon/new-icons/logout.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16">
+  <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3zm1 13h8V2H4z"/>
+  <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0"/>
+</svg>

package/src/components/icon/new-icons/settings.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+  <path d="M8.932.727c-.243-.97-1.62-.97-1.864 0l-.071.286a.96.96 0 0 1-1.622.434l-.205-.211c-.695-.719-1.888-.03-1.613.931l.08.284a.96.96 0 0 1-1.186 1.187l-.284-.081c-.96-.275-1.65.918-.931 1.613l.211.205a.96.96 0 0 1-.434 1.622l-.286.071c-.97.243-.97 1.62 0 1.864l.286.071a.96.96 0 0 1 .434 1.622l-.211.205c-.719.695-.03 1.888.931 1.613l.284-.08a.96.96 0 0 1 1.187 1.187l-.081.283c-.275.96.918 1.65 1.613.931l.205-.211a.96.96 0 0 1 1.622.434l.071.286c.243.97 1.62.97 1.864 0l.071-.286a.96.96 0 0 1 1.622-.434l.205.211c.695.719 1.888.03 1.613-.931l-.08-.284a.96.96 0 0 1 1.187-1.187l.283.081c.96.275 1.65-.918.931-1.613l-.211-.205a.96.96 0 0 1 .434-1.622l.286-.071c.97-.243.97-1.62 0-1.864l-.286-.071a.96.96 0 0 1-.434-1.622l.211-.205c.719-.695.03-1.888-.931-1.613l-.284.08a.96.96 0 0 1-1.187-1.186l.081-.284c.275-.96-.918-1.65-1.613-.931l-.205.211a.96.96 0 0 1-1.622-.434zM8 12.997a4.998 4.998 0 1 1 0-9.995 4.998 4.998 0 0 1 0 9.996z"/>
+</svg>

package/src/components/pagination/Pagination2.vue

@@ -16,7 +16,7 @@
 
           <div v-if="page.type === 'page'" class="d-flex flex-nowrap text-nowrap align-items-center gap-1 text-muted">
             <itf-text-field :invalid="!isValid" type="number" small :min="1" :max="9999" :value="value" @change="onPageChange" />
-            / {{pages}}
+            / {{pagesCount}}
           </div>
           <a v-if="page.type === 'next'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
             <span class="visually-hidden">{{$t('components.pagination.next')}}</span>
@@ -93,6 +93,10 @@ class itfPagination extends Vue {
 
   isValid = true;
 
+  get pagesCount() {
+    return this.pages || 1;
+  }
+
   onPage(page) {
     this.$emit('input', page);
   }

package/src/components/panels/Panel.vue

@@ -14,16 +14,16 @@
       <slot name="header">
         <div>
           <slot name="title">
-            <div class="b-panel__title ps-1 fw-bold h2" v-text="title"></div>
+            <div class="b-panel__title fw-bold h2" v-text="title"></div>
           </slot>
         </div>
         <div class="d-flex gap-1">
           <slot name="buttons"></slot>
-          <itf-button v-if="expandable" icon small class="b-panel__expand_button" @click="fullsizePanel">
-            <itf-icon name="expand" />
+          <itf-button v-if="expandable" icon default class="b-panel__expand_button" @click="fullsizePanel">
+            <itf-icon new name="expand" />
           </itf-button>
-          <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
-            <itf-icon name="cross" />
+          <itf-button v-if="closeable" icon default class="b-panel__expand_button" @click="closePanel">
+            <itf-icon new name="close" />
           </itf-button>
         </div>
       </slot>
@@ -140,6 +140,7 @@ class Panel extends Vue {
   @Prop() title;
   @Prop() icon;
   @Prop() payload;
+  @Prop() panel;
   @Prop(Boolean) collapsed;
   @Prop(Boolean) closeable;
   @Prop(Boolean) expandable;

package/src/components/panels/PanelLink.vue

@@ -1,9 +1,10 @@
 <template>
-  <a :href="link" :target="target" v-on="on"><slot></slot></a>
+  <a :href="link" :target="target" v-on="on" :class="{[activeClass]: isActive}"><slot></slot></a>
 </template>
 <script lang="ts">
 import { Vue, Component, Inject, Prop } from 'vue-property-decorator';
 import { IPanel } from './PanelList.vue';
+import {stackToHash} from "@itfin/components/src/components/panels/helpers";
 
 @Component({
   components: {
@@ -17,9 +18,12 @@ export default class PanelLink extends Vue {
   @Inject({ default: null }) panelList;
   @Inject({ default: null }) currentPanel;
 
+  @Prop(Boolean) global: boolean;
   @Prop(String) panel: string;
   @Prop() payload: payload;
   @Prop() target: string;
+  @Prop() list;
+  @Prop({ type: String, default: 'active' }) activeClass: string;
   @Prop(Boolean) append: boolean;
 
   get on() {
@@ -30,25 +34,41 @@ export default class PanelLink extends Vue {
     return handlers;
   }
 
+  get activeList() {
+    return this.list ?? this.panelList;
+  }
+
+  get isActive() {
+    if (!this.activeList) {
+      return false;
+    }
+    let stack = this.activeList.getCurrentStack();
+    return stack.find(s => s.type === this.panel);
+  }
+
   get link() {
-    let stack = this.panelList.getCurrentStack();
+    let stack = this.activeList?.getCurrentStack() ?? [];
     if (!this.append) {
-      stack = stack.splice(0, this.currentPanel.index + 1);
+      stack = stack.splice(0, this.currentPanel?.index + 1);
     }
-    const hash = this.panelList.getLink([
+    const hash = stackToHash([
       ...stack,
       {
         type: this.panel,
         payload: this.payload || {}
       }
     ]);
-    return `#${hash}`;
+    return hash;
   }
 
   onClick(e) {
+    console.info(this.activeList);
+    if (!this.activeList) {
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    this.panelList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel.index + 1);
+    this.activeList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel?.index + 1);
   }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -11,6 +11,7 @@
         <panel
           :key="n"
           :index="n"
+          :panel="panel"
           :title="panel.title"
           :nocard="panel.nocard"
           :icon="panel.icon"
@@ -133,21 +134,22 @@ $double-an-time: $an-time * 2;
   transition: min-width $an-time linear, flex-grow $an-time linear;
 
   > div {
-    transition: opacity $an-time linear;
+    //transition: opacity $an-time linear;
   }
 }
 
-.slide-enter-active > div {
-  opacity: 0;
-}
-
-.opacity-null > div {
-  opacity: 0 !important;
-}
+//.slide-enter-active > div {
+//  opacity: 0;
+//}
+//
+//.opacity-null > div {
+//  opacity: 0 !important;
+//}
 </style>
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import Panel from './Panel.vue';
+import {hashToStack, stackToHash} from "@itfin/components/src/components/panels/helpers";
 
 interface VisualOptions {
   title: string;
@@ -199,7 +201,6 @@ export default class PanelList extends Vue {
 
   nextId:number = 0;
 
-
   created() {
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
@@ -275,6 +276,8 @@ export default class PanelList extends Vue {
     if (!this.panelsStack.length || openIndex === 0) {
       newPanel.isCloseable = false;
     }
+    console.info(newPanel, this.panelsStack)
+    console.trace();
     let newStack = [...this.panelsStack];
     if (this.panels[type].permanentExpanded && newStack.length) {
       for (const panel of newStack) {
@@ -388,30 +391,17 @@ export default class PanelList extends Vue {
     return [...this.panelsStack];
   }
 
-  getLink(stack: IPanel[]) {
-    return stack.map(panel => {
-      return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
-    }).join('&');
-  }
-
   setPanelHash() {
-    const hash = this.getLink(this.panelsStack);
+    const hash = stackToHash(this.panelsStack).replace(/^#/, '');
     this.$router.push({ hash });
   }
 
   async parsePanelHash() {
     const {hash} = location;
     if (hash) {
-      const panels = hash.slice(1).split('&').map(item => {
-        const [type, payload] = item.split('=');
-        const isCollapsed = !item.includes('!');
-        return {
-          type: type.replace('!', ''),
-          isCollapsed,
-          payload: JSON.parse(decodeURIComponent(payload))
-        };
-      });
+      const panels = hashToStack(hash);
       const newStack = [];
+      this.panelsStack = [];
       for (const panelIndex in panels) {
         const panel = panels[panelIndex];
         if (this.panelsStack[panelIndex] && this.panelsStack[panelIndex].type === panel.type) {

package/src/components/panels/helpers.spec.ts

@@ -0,0 +1,27 @@
+import {stackToHash, hashToStack} from "./helpers";
+
+describe('panel helpers', () => {
+  test('stackToHash', () => {
+    const stack = [
+      { type: 'a', payload: { a: 1 }, isCollapsed: false },
+      { type: 'b', payload: { b: 2 }, isCollapsed: true },
+      { type: 'c', payload: { c: 3 }, isCollapsed: false }
+    ];
+    expect(stackToHash(stack)).toBe('a!={"a":1}&b={"b":2}&c!={"c":3}');
+  });
+  test('hashToStack', () => {
+    const stack = [
+      { type: 'a', payload: { a: 1 }, isCollapsed: false },
+      { type: 'b', payload: { b: 2 }, isCollapsed: true },
+      { type: 'c', payload: { c: 3 }, isCollapsed: false }
+    ];
+    expect(hashToStack('a!={"a":1}&b={"b":2}&c!={"c":3}')).toEqual(stack);
+    expect(hashToStack('a!={"a')).toEqual([
+      {
+        "isCollapsed": false,
+        "payload": {},
+        "type": "a"
+      }
+    ]);
+  });
+});

package/src/components/panels/helpers.ts

@@ -0,0 +1,37 @@
+export interface IPanel {
+  type: string;
+  payload?: any;
+  isCollapsed?: boolean;
+}
+
+export function stackToHash(stack: IPanel[]) {
+  const hash = stack.map(panel => {
+    return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
+  }).join('&');
+  return `#${hash}`;
+}
+
+
+export function hashToStack(hash: string|undefined): IPanel[] {
+  let stack:IPanel[] = [];
+  if (hash) {
+    const str = hash.replace(/^#/, '');
+
+    stack = str.split('&').map(item => {
+      const [type, payload] = item.split('=');
+      const isCollapsed = !type.includes('!');
+      let payloadObj:any = {};
+      try {
+        payloadObj = JSON.parse(decodeURIComponent(payload));
+      } catch (e) {
+        // ignore
+      }
+      return {
+        type: type.replace('!', ''),
+        isCollapsed,
+        payload: payloadObj
+      };
+    });
+  }
+  return stack;
+}

package/src/components/table/Table2.vue

@@ -5,7 +5,7 @@
     'table-absolute': absolute,
     'table-clickable': clickable,
     'permanent-checkboxes': selectedIds.length
-  }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px` }">
+  }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px`, '--shadow-area-width': `${shadowWidth}px` }">
     <itf-notice-popout :visible="showGroupOperations" class="rounded-pill bg-dark text-light">
       <div class="d-flex gap-3 px-3 align-items-center">
         <div><strong>{{selectedIds.length}}</strong> selected</div>
@@ -29,6 +29,7 @@
             :title="group.name"
             :selected-ids.sync="selectedIds"
             :add-new-rows="addNewRows"
+            :shadow-width="shadowWidth"
             :column-sorting="columnSorting"
             :column-resizing="columnResizing"
             :show-grouping="showGrouping"
@@ -43,6 +44,7 @@
             :currencies="currencies"
             :currency="currency"
             :subrows-property="subrowsProperty"
+            :divider-property="dividerProperty"
             :indicator-type="indicatorType"
             :expanded-all="expandedAll"
             :indicatorWidth="indicatorWidth"
@@ -103,9 +105,11 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
+  @Prop({ type: String, default: null }) dividerProperty;
   @Prop({ type: String, default: null }) editableProperty;
   @Prop({ default: null }) active;
   @Prop({ default: 45 }) indicatorWidth;
+  @Prop({ default: 0 }) shadowWidth;
   @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property', 'none'].includes(val) }) indicatorType;
   @Prop({ type: String, default: null }) stateName; // save state to storage
   @Prop({ type: Object, default: () => ({}) }) schema;

package/src/components/table/TableBody.vue

@@ -7,6 +7,7 @@
       :columns="columns"
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
+      :divider-property="dividerProperty"
       :show-add-column="showAddColumn"
       :show-actions="showActions"
       :no-select-all="noSelectAll"
@@ -91,7 +92,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--itf-table-min-width);
+  min-width: 1rem;//var(--itf-table-min-width);
 }
 
 .table-row-template, .table-view-header-value {
@@ -109,21 +110,6 @@
     }
   }
 }
-.table-row-template {
-  .on-hover {
-    display: none;
-  }
-  &:hover, .permanent-checkboxes & {
-    .on-rest {
-      display: none;
-    }
-
-    .on-hover {
-      opacity: 1;
-      display: block;
-    }
-  }
-}
 
 .table-small-row .table-view-item {
   // height: var(--table-row-height);
@@ -158,6 +144,7 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) showActions;

package/src/components/table/TableGroup.vue

@@ -61,6 +61,7 @@
             @row-click="$emit('row-click', $event)"
             :id-property="idProperty"
             :subrows-property="subrowsProperty"
+            :divider-property="dividerProperty"
             :rows="rows"
             :editable="editable"
             :currency="currency"
@@ -112,7 +113,7 @@
               :key="n"
               :data-column="n"
               class="position-relative line-overflow px-1"
-              :style="column.grow ? `min-width: ${column.minWidth}px; flex-grow: 1;` : `width: ${column.width}px; max-width: ${column.width}px;`">
+              :style="`width: ${column.width}px; max-width: ${column.width}px;`">
               <itf-dropdown append-to-context text right @open="persistSummary = true" @close="persistSummary = false" autoclose="outside">
                 <template #button>
                   <span data-test="summary-column" class="invisible-summary d-flex align-items-center justify-content-end flex-auto">
@@ -358,6 +359,7 @@ class itfTableGroup extends Vue {
   @Prop() title;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() currency;
   @Prop() currencies;
   @Prop() active;
@@ -377,6 +379,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) striped;
   @Prop(Boolean) stickyHeader;
   @Prop() indicatorWidth;
+  @Prop() shadowWidth;
   @Prop() cssProperty;
   @PropSync('sorting') _sorting;
   @Prop({ type: String, default: null }) indicatorType;
@@ -390,7 +393,7 @@ class itfTableGroup extends Vue {
   get visibleColumns() {
     let list = this.columns;
     list = sortBy(list, (column) => column.index);
-    let left = 12 + (this.indicatorType === 'none' ? 1 : Number(this.indicatorWidth)); // sum of first 2 cells
+    let left = Number(this.shadowWidth) + (this.indicatorType === 'none' ? 1 : Math.max(Number(this.indicatorWidth), 16)); // sum of first 2 cells
     const pinned = list.filter((column) => column.pinned && column.visible !== false);
     list = list.map((column, index) => {
       const item = {...column};

package/src/components/table/TableHeader.vue

@@ -15,9 +15,9 @@
           data-test="table-header-column"
           :data-column="n"
           :data-id="column.Id"
-          :class="{'sticky': column.pinned, 'active': sortColumnParams[column.property], 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow, [`justify-content-${column.align || 'start'}`]: true}"
+          :class="{'sticky': column.pinned, 'active': sortColumnParams[column.property], 'last-sticky-column': n === lastPinnedIndex, [`justify-content-${column.align || 'start'}`]: true}"
           class="table-view-header-value"
-          :style="column.grow ? `left: ${column.left}px; flex-grow: 1` : `width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`">
+          :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`">
           <!-- Не треба видаляти колонки, бо вони потрібні для збереження ширини -->
           <div v-if="visibleHeader" accept-group="tablecolumns"
                class="table-view-header-space"
@@ -32,9 +32,9 @@
                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-start" :title="getTitle(column.title)" :class="{'ms-auto': column.align === 'end'}">
+                <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">
+                  <div class="flex-grow-1 w-100 itf-table2__title-container d-flex align-items-center" :class="{'justify-content-end': column.align === 'end'}">
                     <div class="itf-table2__title text-truncate">{{getTitle(column.title)}}</div>
                     <div v-if="column.prefix" class="itf-table2__subtitle text-truncate" v-text="column.prefix" />
                   </div>
@@ -139,7 +139,7 @@
                v-dropzone="{payload:{ last: true }}">
             <div class="table-view-header-dropzone"></div>
           </div>
-          <div v-if="visibleHeader && columnResizing && !column.grow" ref="resizeHandle" class="resize-handle"></div>
+          <div v-if="visibleHeader && columnResizing" ref="resizeHandle" class="resize-handle"></div>
         </div>
       </template>
       <div class="table-view-item-value extra flex-grow-1"></div>
@@ -341,15 +341,27 @@ class itfTableHeader extends Vue {
           const delta = event.pageX - startX;
           newWidth = Math.max(columnWidth + delta, 50);
           columns.forEach((column) => {
-            if (!this.sortedColumns[index].grow) {
-              column.style.width = `${newWidth}px`;
-              column.style['max-width'] = `${newWidth}px`;
+            const { maxWidth, minWidth } = this.sortedColumns[index];
+            if (minWidth && newWidth < minWidth) {
+              newWidth = minWidth;
             }
+            if (maxWidth && newWidth > maxWidth) {
+              newWidth = maxWidth;
+            }
+            column.style.width = `${newWidth}px`;
+            column.style['max-width'] = `${newWidth}px`;
           });
         };
         const mouseUpHandler = () => {
           document.removeEventListener('mousemove', mouseMoveHandler);
           document.removeEventListener('mouseup', mouseUpHandler);
+          const { minWidth, maxWidth } = this.sortedColumns[index];
+          if (minWidth && newWidth < minWidth) {
+            newWidth = minWidth;
+          }
+          if (maxWidth && newWidth > maxWidth) {
+            newWidth = maxWidth;
+          }
           this.changeColumn(index, { width: newWidth });
         };
         document.addEventListener('mousemove', mouseMoveHandler);

package/src/components/table/TableRowToggle.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div @click.prevent.stop="toggle" class="d-flex align-items-center flex-nowrap" :class="{'active-toggle': visible}">
+      <div class="item-toggle text-muted">
+        <template v-if="visible && expanded">
+          <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
+	C182,97,179,96,175.8,96c-8.7,0-15.8,7.4-15.8,16.6h0v286.8h0c0,9.2,7.1,16.6,15.8,16.6C179.1,416,182.2,414.9,184.7,413.1z" fill="currentColor" />
+</svg>
+        </template>
+        <template v-else-if="visible">
+          <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="M98.9,184.7l1.8,2.1l136,156.5c4.6,5.3,11.5,8.6,19.2,8.6c7.7,0,14.6-3.4,19.2-8.6L411,187.1l2.3-2.6
+	c1.7-2.5,2.7-5.5,2.7-8.7c0-8.7-7.4-15.8-16.6-15.8v0H112.6v0c-9.2,0-16.6,7.1-16.6,15.8C96,179.1,97.1,182.2,98.9,184.7z" fill="currentColor" />
+</svg>
+        </template>
+      </div>
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.active-toggle {
+  cursor: pointer;
+}
+.item-toggle {
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+</style>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+export default @Component({
+  components: {
+  }
+})
+class itfTableRowToggle extends Vue {
+  @Prop(Boolean) expanded;
+  @Prop(Boolean) visible;
+
+  toggle() {
+    this.$emit('toggle');
+  }
+}
+</script>

package/src/components/table/TableRows.vue

@@ -20,29 +20,11 @@
               </a>
             </div>
           </div>
-          <div v-if="indicatorType !== 'none'" class="indicator sticky">
-            <div class="fill table-view-row-count" :class="{'on-rest': indicatorType !== 'checkbox' && indicatorType !== 'toggle'}">
+          <div class="indicator sticky">
+            <div v-if="indicatorType !== 'none'" class="table-view-row-count">
               <span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
               <span v-else-if="indicatorType === 'property'">{{ 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 v-if="indicatorType !== 'toggle'" class="fill" :class="{'on-hover': indicatorType !== 'checkbox'}">
-              <itf-checkbox :value="item[idProperty]" />
+              <span v-else-if="indicatorType === 'checkbox'"><itf-checkbox :value="item[idProperty]" /></span>
             </div>
           </div>
           <div accept-group="items" class="table-item-inner" @click="$emit('row-click', item)">
@@ -50,11 +32,16 @@
               <div
                 v-if="column.visible !== false"
                 :data-column="k"
-                :style="column.grow ? `left: ${column.left}px; flex-grow: 1` : `width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-                :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'editable': column.editable && editable}"
+                :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
+                :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
                 <div class="table-view-item-value-content" :class="{'px-2': !(column.editable && editable)}">
-                <slot :name="`column.${column.property}`" :toggle="() => $emit('toggle', item)" :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
+                <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" :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)" />
@@ -122,6 +109,7 @@
           </template>
         </itf-table-rows>
       </template>
+      <div v-if="dividerProperty && item[dividerProperty]" :key="`divider-${n}`" class="itf-table2__row-divider"></div>
     </template>
   </div>
 </template>
@@ -157,6 +145,7 @@ class itfTableRows extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) noSelectAll;