@itfin/components 1.2.110 → 1.2.112

package/package.json

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

package/src/components/kanban/Board.vue

@@ -27,7 +27,7 @@
             v-draggable="{ handle: true, payload: { index, column }, mirror: { yAxis:false } }"
             class="flex-grow-1 d-flex align-items-center itf-board-column__header justify-content-between">
             <div><slot name="header" :column="column">{{ column[columnNameKey] }}</slot></div>
-            <div class="text-muted me-1"><slot name="header-addon" :column="column">{{ (groupedItems[column.Id] || []).length }}</slot></div>
+            <div class="text-muted me-1"><slot name="header-addon" :column="column" :items="groupedItems[column.Id]">{{ (groupedItems[column.Id] || []).length }}</slot></div>
           </div>
         </itf-edit-button>
         <div v-if="index === columns.length - 1"

package/src/components/table/Table2.vue

@@ -35,17 +35,19 @@
 <style lang="scss">
 .scrollable {
   --itf-table-hover-bg: #f2f2f2;
-  --table-min-width: 45px;
+  --itf-table-min-width: 45px;
+  --itf-table-line-height: 35px;
 
   body[data-theme="dark"] & {
     --itf-table-hover-bg: #393b41;
   }
 
   -webkit-overflow-scrolling: touch;
-  overflow: hidden auto;
+  overflow: hidden scroll;
 
   &.scrollable-x {
-    overflow-x: auto;
+    overflow-x: scroll;
+    padding-right: 4px;
   }
 }
 .last-sticky-column:after {

package/src/components/table/TableBody.vue

@@ -43,7 +43,7 @@
               v-if="column.visible !== false"
               :data-column="n"
               :style="`width: ${column.width}px; left: ${column.left}px;`"
-              :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex}"
+              :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow}"
               class="table-view-item-value d-flex h-100 align-items-stretch px-2">
               <slot :name="`column.${column.name}`" :item="item" :column="column">
                 <template v-if="editTypes[column.Type]">
@@ -86,8 +86,8 @@
   height: 100%;
   display: flex;
   position: relative;
-  line-height: 35px;
-  min-width: var(--table-min-width);
+  line-height: var(--itf-table-line-height);
+  min-width: var(--itf-table-min-width);
 
   &.highlight-drop-column {
     position: relative;
@@ -137,7 +137,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--table-min-width);
+  min-width: var(--itf-table-min-width);
 }
 
 .table-item-inner .boundary {
@@ -174,9 +174,6 @@
 .table-small-row .table-view-item {
   height: var(--table-row-height);
 }
-.vue-recycle-scroller {
-  position: relative;
-}
 .resize-observer {
   position: absolute;
   top: 0;
@@ -198,6 +195,7 @@ import { RecycleScroller } from 'vue-virtual-scroller'
 import sortBy from 'lodash/sortBy';
 import PropertyInlineEdit from '../customize/PropertyInlineEdit.vue';
 import { INLINE_TYPES } from '../customize/constants';
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
   name: 'itfTableBody',

package/src/components/table/TableGroup.vue

@@ -142,15 +142,15 @@
   --group-title-height: 40px;
   --table-row-height: 36px;
   --table-small-row-size: var(--table-row-height);
-  --shadow-area-width: 2px;
+  --shadow-area-width: 12px;
   --indicator-area-width: 38px;
 
   flex-direction: column;
   min-width: 100%;
   display: flex;
   width: fit-content;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  //margin-top: 20px;
+  margin-bottom: 20px ;
 
   .preline {
     display: flex;
@@ -222,26 +222,10 @@
     font-size: 1rem;
   }
 
-  .table-view-wrapper .vue-recycle-scroller__item-wrapper {
+  .vue-recycle-scroller__item-wrapper {
     overflow: visible;
   }
 
-  .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
-    width: 100%;
-  }
-
-  .table-view-wrapper .vue-recycle-scroller__item-wrapper {
-    overflow: visible;
-  }
-
-  .vue-recycle-scroller.ready .vue-recycle-scroller__item-view {
-    position: absolute;
-    top: 0;
-    left: 0;
-    will-change: transform;
-    width: 100%;
-  }
-
   .table-row-template {
     height: var(--table-small-row-size);
   }
@@ -259,7 +243,7 @@
   .table-summary {
     .shadow-area {
       border-right: 0;
-      min-width: var(--table-min-width);
+      min-width: var(--itf-table-min-width);
     }
     .table-summary-columns {
       padding-right: .5rem;

package/src/components/table/TableHeader.vue

@@ -13,7 +13,7 @@
           data-test="table-header-column"
           :data-column="n"
           :data-id="column.Id"
-          :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex}"
+          :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow, [`justify-content-${column.align || 'start'}`]: true}"
           class="table-view-header-value"
           :style="`width: ${column.width}px; left: ${column.left}px;`">
           <div accept-group="tablecolumns"
@@ -96,7 +96,6 @@
   position: sticky;
   top: 0;
   z-index: calc(var(--row-count) + 1);
-  border-top: 1px solid var(--bs-border-color);
 
   .table-header.draggable-mirror{
     z-index: 100000001;
@@ -113,14 +112,15 @@
     align-items: center;
     height: var(--table-row-height);
     white-space: nowrap;
-    border-top: 0;
+    //border-top: 0;
+    border-top: 1px solid var(--bs-border-color);
     border-left: 0;
     border-right-width: thin;
     border-bottom-width: thin;
     border-style: solid;
     position: relative;
     display: flex;
-    min-width: var(--table-min-width);
+    min-width: var(--itf-table-min-width);
     border-right-color: var(--bs-border-color);
     border-bottom-color: var(--bs-border-color);
     background-color: var(--bs-body-bg);