@itfin/components 1.3.34 → 1.3.36

package/src/components/table/TableBody.vue

@@ -1,15 +1,10 @@
 <template>
 
-  <recycle-scroller
-    class="scroller"
-    page-mode
-    :items="rows"
-    :item-size="rowHeight"
-    key-field="Id"
-    v-slot="{ item }"
-    direction="vertical"
-  >
-    <div group="items" data-test="table-item" class="table-view-item grouped draggable-item">
+  <div class="scroller">
+    <div
+      v-for="(item, n) in rows"
+      :key="n"
+      group="items" data-test="table-item" class="table-view-item grouped draggable-item">
       <div class="table-row-template">
         <div accept-group="items" class="table-view-body-space"></div>
         <div class="shadow-area">
@@ -24,32 +19,35 @@
         </div>
         <div class="indicator sticky">
           <div class="fill on-rest table-view-row-count">
-            <span>{{ item.Id }}</span>
+            <!--            <span>{{ item[idProperty] }}</span>-->
           </div>
           <div class="fill on-hover">
-            <a href="" data-test="table-item-expand">
-              <i class="ic-expand"></i>
-            </a>
-            <div class="">
-              <a data-test="table-row-generator" href="">
-                <i class="ic-plus"></i>
-              </a>
-            </div>
+            <itf-checkbox :value="item[idProperty]" />
           </div>
         </div>
         <div accept-group="items" class="table-item-inner">
-          <template v-for="(column, n) in visibleAttributes">
+          <template v-for="(column, k) in visibleAttributes">
             <div
               v-if="column.visible !== false"
-              :data-column="n"
+              :data-column="k"
               :style="`width: ${column.width}px; left: ${column.left}px;`"
-              :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">
+              :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow}"
+              class="table-view-item-value d-flex h-100 align-items-stretch">
               <slot :name="`column.${column.name}`" :item="item" :column="column">
-                <template v-if="editTypes[column.Type]">
-                  <property-inline-edit :value="item[column.field]" :field="column" editable focused />
+                <template v-if="column.editable">
+                  <slot :name="`edit.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
+                    <div class="px-1 py-1 w-100">
+                      <itf-text-field v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n)" />
+                      <itf-textarea autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event)" />
+                      <itf-money-field v-else-if="column.type === 'money'" no-currency-sign currency-disabled :currency-select="false" :value="getValue(item, column)" @input="updateValue(item, $event)" />
+                    </div>
+                  </slot>
+                </template>
+                <template v-else>
+                  <slot :name="`format.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
+                    <div class="px-2 w-100">{{getValue(item, column)}}</div>
+                  </slot>
                 </template>
-                <div v-else v-text="item.Name" />
               </slot>
             </div>
           </template>
@@ -61,7 +59,7 @@
         </div>
       </div>
     </div>
-  </recycle-scroller>
+  </div>
 </template>
 <style lang="scss">
 .table-row-template {
@@ -70,7 +68,6 @@
   align-items: stretch;
 }
 .table-item-inner {
-  height: 100%;
   flex-grow: 1;
   position: relative;
   display: flex;
@@ -83,7 +80,6 @@
   border-right: 1px solid var(--bs-border-color);
   border-bottom: 1px solid var(--bs-border-color);
   align-items: stretch;
-  height: 100%;
   display: flex;
   position: relative;
   line-height: var(--itf-table-line-height);
@@ -108,7 +104,7 @@
     }
   }
   &:hover {
-    background-color: var(--itf-table-hover-bg);
+    background-color: var(--bs-tertiary-bg);
   }
 
   &.sticky {
@@ -119,20 +115,19 @@
 }
 
 .table-item-inner .extra {
-  height: 100%;
   flex-grow: 1;
   border-color: var(--bs-border-color);
 }
 
 .indicator {
-  height: 100%;
+  //height: 100%;
   left: var(--shadow-area-width);
   width: var(--indicator-area-width);
   z-index: 4;
   position: -webkit-sticky;
   position: sticky;
   background-color: var(--bs-body-bg);
-  border-right: 1px solid var(--bs-border-color);
+  //border-right: 1px solid var(--bs-border-color);
   border-bottom: 1px solid var(--bs-border-color);
   display: flex;
   align-items: center;
@@ -140,6 +135,31 @@
   min-width: var(--itf-table-min-width);
 }
 
+.table-row-template, .table-view-header-value {
+  .form-check {
+    padding: 0;
+    margin-bottom: 0;
+
+    .form-check-input {
+      margin-left: 0;
+    }
+  }
+}
+.table-row-template {
+  .on-hover {
+    display: none;
+  }
+  &:hover, .permanent-checkboxes & {
+    .on-rest {
+      display: none;
+    }
+
+    .on-hover {
+      display: block;
+    }
+  }
+}
+
 .table-item-inner .boundary {
   z-index: 3;
   position: absolute;
@@ -172,7 +192,7 @@
   bottom: 0;
 }
 .table-small-row .table-view-item {
-  height: var(--table-row-height);
+  // height: var(--table-row-height);
 }
 .resize-observer {
   position: absolute;
@@ -191,26 +211,33 @@
 </style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
-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';
+import get from 'lodash/get';
+// import { RecycleScroller } from 'vue-virtual-scroller'
+import itfCheckbox from '../checkbox/Checkbox.vue';
+import itfTextField from '../text-field/TextField.vue';
+import itfMoneyField from '../text-field/MoneyField.vue';
+import itfTextarea from '../text-field/Textarea.vue';
+// import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
   name: 'itfTableBody',
   components: {
-    RecycleScroller,
-    PropertyInlineEdit
+    itfCheckbox,
+    itfMoneyField,
+    itfTextarea,
+    itfTextField,
+    // RecycleScroller
   }
 })
 class itfTableBody extends Vue {
   @Prop() columns;
   @Prop() rows;
+  @Prop() idProperty;
   @Prop(Boolean) showAddColumn;
-  @Prop({ type: Number, default: 40 }) rowHeight;
 
-  editTypes = {};
+  getValue(item, column) {
+    return get(item, column.property);
+  }
 
   get visibleAttributes() {
     return this.columns;
@@ -220,10 +247,8 @@ class itfTableBody extends Vue {
     return this.columns.findIndex((column) => column.lastPinned);
   }
 
-  mounted() {
-    for (const { Type } of INLINE_TYPES) {
-      this.editTypes[Type] = true;
-    }
+  updateValue(item, value, index) {
+    this.$emit('update', { index, item, value });
   }
 }
 </script>

package/src/components/table/TableGroup.vue

@@ -7,31 +7,19 @@
     </div-->
 
     <div data-test="table-group-wrapper" class="table-group-wrapper flex-grow-1 w-100 d-block"
-         :style="`--row-count: ${isShowTable ? rows.length : 0}`">
-      <div class="">
-        <div data-test="table-group" class="position-relative">
-          <itf-table-header
-            v-if="showHeader"
-            :columns="visibleColumns"
-            @sort:columns="onColumnsSorted"
-            :column-resizing="columnResizing"
-            :column-sorting="columnSorting"
-            :show-add-column="showAddColumn"
-            :row-height="rowHeight"
-            @update:columns="$emit('update:columns', $event)"
-            @add-column="$emit('add-column', $event)"
-          />
-
+         :style="`--row-count: ${isShowTable ? rows.length : 0}`" data-sticky-container>
+      <div data-test="table-group" class="position-relative">
+        <div :class="stickyId" class="sticky-group">
           <div v-if="title" group="tablegroups" class="draggable-item"
                data-draggable-mirror="{&quot;xAxis&quot;:false}">
             <div class="table-row-template d-flex align-items-stretch"
-                 style="height: var(--group-title-height)">
+                 style="min-height: var(--group-title-height)">
               <div class="shadow-area"></div>
-              <div class="header-wrapper">
-                <div class="header-content position-sticky d-flex align-items-center">
-                  <a href="" class="collapse-arrow" @click.prevent="toggleGroup">
+              <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
+                <a class="header-content position-sticky d-flex align-items-center">
+                  <span class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
-                  </a>
+                  </span>
                   <span class="d-flex align-items-center line-overflow group-header-value"
                         data-test="group-value-group-label-value">
                     {{ title }}
@@ -39,97 +27,114 @@
                   <div data-test="table-group-item-count" class="table-group-item-count">
                     {{ rows.length }}
                   </div>
-                </div>
+                </a>
               </div>
             </div>
           </div>
 
-          <!-- Сама таблиця -->
-          <div v-if="isShowTable">
-            <itf-table-body
-              :rows="rows"
-              :columns="visibleColumns"
-              :row-height="rowHeight"
-              :show-add-column="showAddColumn">
-              <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-body>
-          </div>
+          <itf-table-header
+            v-if="isShowTable"
+            :visible-header="showHeader"
+            :columns="visibleColumns"
+            @sort:columns="onColumnsSorted"
+            :column-resizing="columnResizing"
+            :column-sorting="columnSorting"
+            :show-add-column="showAddColumn"
+            :rows="rows"
+            :schema="schema"
+            :selected-ids="selectedIds"
+            @update:selectedIds="$emit('update:selectedIds', $event)"
+            @update:columns="$emit('update:columns', $event)"
+            @add-column="$emit('add-column', $event)"
+          />
+        </div>
 
-          <!-- Лінія додати нову -->
-          <div v-if="isShowTable && addNewRows"
-               class="table-row-template d-flex align-items-stretch">
-            <div class="shadow-area"></div>
-            <a href="" data-test="table-add-new-item"
-               class="d-flex align-items-center flex-grow-1 table-add-new-item">
-              <span class="d-sticky d-flex align-items-center px-2">
-                <itf-icon name="plus"/>
-                <span>Add new row</span>
-              </span>
-            </a>
-          </div>
+        <!-- Сама таблиця -->
+        <div v-if="isShowTable">
+          <itf-table-body
+            @update="$emit('update', $event)"
+            :id-property="idProperty"
+            :rows="rows"
+            :columns="visibleColumns"
+            :show-add-column="showAddColumn">
+            <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-body>
+        </div>
+
+        <!-- Лінія додати нову -->
+        <div v-if="isShowTable && addNewRows"
+             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 py-1 text-decoration-none">
+            <span class="d-sticky d-flex align-items-center">
+              <itf-icon name="plus"/>
+              <span>{{ newLabel }}</span>
+            </span>
+          </a>
+        </div>
 
-          <!-- Групування -->
-          <div v-if="showSummary" class="table-row-template d-flex align-items-stretch table-summary">
-            <div class="shadow-area"></div>
-
-            <div class="table-summary-columns d-flex tw-flex-row align-items-center">
-              <span
-                v-for="(column, n) in visibleColumns"
-                :key="n"
-                :data-column="n"
-                class="table-summary-column position-relative line-overflow"
-                :style="`width: ${column.width}px;`">
-                <itf-dropdown text>
-                  <template #button>
-                    <span data-test="summary-column" class="invisible-summary d-flex align-items-center justify-content-end flex-auto">
-                      <span class="summary-placeholder align-items-center justify-content-center">
-                        Summary
-                        <itf-icon name="chevron_down" />
-                      </span>
+        <!-- Групування -->
+        <div v-if="isShowTable && showSummary" class="table-row-template d-flex align-items-stretch table-summary">
+          <div class="shadow-area"></div>
+
+          <div class="table-summary-columns d-flex tw-flex-row align-items-center">
+            <span
+              v-for="(column, n) in visibleColumns"
+              :key="n"
+              :data-column="n"
+              class="table-summary-column position-relative line-overflow"
+              :style="`width: ${column.width}px;`">
+              <itf-dropdown text>
+                <template #button>
+                  <span data-test="summary-column" class="invisible-summary d-flex align-items-center justify-content-end flex-auto">
+                    <span class="summary-placeholder align-items-center justify-content-center">
+                      Summary
+                      <itf-icon name="chevron_down" />
                     </span>
-                  </template>
-
-                  <ul class="dropdown-menu show ps-0" aria-labelledby="dropdownMenuOffset">
-                    <li v-if="column.sortable">
-                      <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                        <itf-icon name="arrow_up" :size="16" class="me-1" />
-                        Sort By Asc
-                      </a>
-                    </li>
-                    <li v-if="column.sortable">
-                      <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                        <itf-icon name="arrow_down" :size="16" class="me-1" />
-                        Sort By Desc
-                      </a>
-                    </li>
-                    <li v-if="column.groupable">
-                      <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                        <itf-icon name="episodes" :size="16" class="me-1" />
-                        Group By
-                      </a>
-                    </li>
-                    <li>
-                      <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
-                        <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
-                        <span v-if="column.pinned">Unpin Column</span>
-                        <span v-else>Pin Column</span>
-                      </a>
-                    </li>
-                    <li>
-                      <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
-                        <itf-icon name="eye_no" :size="16" class="me-1" />
-                        Hide
-                      </a>
-                    </li>
-                  </ul>
-                </itf-dropdown>
-              </span>
-            </div>
+                  </span>
+                </template>
+
+                <ul class="dropdown-menu show ps-0" aria-labelledby="dropdownMenuOffset">
+                  <li v-if="column.sortable">
+                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                      <itf-icon name="arrow_up" :size="16" class="me-1" />
+                      Sort By Asc
+                    </a>
+                  </li>
+                  <li v-if="column.sortable">
+                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                      <itf-icon name="arrow_down" :size="16" class="me-1" />
+                      Sort By Desc
+                    </a>
+                  </li>
+                  <li v-if="column.groupable">
+                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                      <itf-icon name="episodes" :size="16" class="me-1" />
+                      Group By
+                    </a>
+                  </li>
+                  <li>
+                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
+                      <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
+                      <span v-if="column.pinned">Unpin Column</span>
+                      <span v-else>Pin Column</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
+                      <itf-icon name="eye_no" :size="16" class="me-1" />
+                      Hide
+                    </a>
+                  </li>
+                </ul>
+              </itf-dropdown>
+            </span>
           </div>
         </div>
       </div>
@@ -144,6 +149,7 @@
   --table-small-row-size: var(--table-row-height);
   --shadow-area-width: 12px;
   --indicator-area-width: 38px;
+  --hover-bg: var(--bs-tertiary-bg);
 
   flex-direction: column;
   min-width: 100%;
@@ -162,15 +168,31 @@
       border-bottom: 4px solid rgb(71 190 255 / 1);
     }
   }
+  .sticky-group {
+    transition: transform 0.02s;
+  }
+  .sticky-group.sticky {
+    z-index: 5;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -50px;
+      height: 50px;
+      background: var(--bs-body-bg);
+    }
+  }
 
   .table-group-wrapper {
     display: flex;
-    height: calc(var(--group-title-height) + var(--table-small-row-size) * 1 + var(--row-count) * var(--table-row-height));
+    //height: calc(var(--group-title-height) + var(--table-small-row-size) * 1 + var(--row-count) * var(--table-row-height));
   }
 
   .shadow-area {
     z-index: 4;
-    height: 100%;
+    //height: 100%;
     width: var(--shadow-area-width);
     justify-content: center;
     align-items: center;
@@ -180,7 +202,7 @@
     position: sticky;
     left: 0;
     background: var(--bs-body-bg);
-    border-right: 1px solid var(--bs-border-color);
+    //border-right: 1px solid var(--bs-border-color);
   }
 
   .header-wrapper:not(.collapsed *) {
@@ -190,6 +212,7 @@
   }
 
   .header-wrapper {
+    cursor: pointer;
     background-color: var(--bs-body-bg);
     left: var(--shadow-area-width);
     align-items: center;
@@ -197,13 +220,23 @@
     position: -webkit-sticky;
     position: sticky;
     border-radius: 0.1875rem;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
     font-weight: 500;
     font-size: 1.25rem;
-    border-color: rgb(238 238 238 / 1);
+    border-left: 0;
+    border-bottom: 0;
+    border-right: 1px solid var(--bs-border-color);
+
+    &.header-additional-column {
+      border-radius: 0;
+    }
+    &:hover {
+      background: var(--hover-bg);
+    }
   }
 
+  .header-content {
+    text-decoration: none;
+  }
   .header-content:not(.draggable-mirror *) {
     left: var(--shadow-area-width);
     padding-left: 0.75rem;
@@ -227,7 +260,7 @@
   }
 
   .table-row-template {
-    height: var(--table-small-row-size);
+    min-height: var(--table-small-row-size);
   }
 
   .table-add-new-item {
@@ -237,6 +270,10 @@
     & > span {
       left: var(--shadow-area-width);
       position: sticky;
+      padding-left: var(--shadow-area-width);
+    }
+    &:hover {
+      background: var(--hover-bg);
     }
   }
 
@@ -263,12 +300,13 @@
 </style>
 <script>
 import sortBy from 'lodash/sortBy';
-import {Vue, Component, Prop} from 'vue-property-decorator';
+import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableBody from './TableBody.vue';
 import itfTableHeader from './TableHeader.vue';
+import Sticky from "./sticky";
 
 export default @Component({
   name: 'itfTableGroup',
@@ -283,7 +321,9 @@ export default @Component({
 class itfTableGroup extends Vue {
   @Prop() columns;
   @Prop() rows;
+  @Prop() selectedIds;
   @Prop() title;
+  @Prop() idProperty;
   @Prop(Boolean) showGrouping;
   @Prop(Boolean) showSummary;
   @Prop(Boolean) addNewRows;
@@ -291,13 +331,14 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) columnResizing;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) showHeader;
-  @Prop({type: Number, default: 40}) rowHeight;
+  @Prop({type: String, default: function() { return this.$t('components.new'); } }) newLabel;
+  @Prop({type: Object, default: () => ({})}) schema;
 
   isShowTable = true;
 
   get visibleColumns() {
     let list = this.columns;
-    list = sortBy(list, (column) => column.pinned ? 0 : 1);
+    list = sortBy(list, (column) => column.index);
     let left = 57; // sum of first 2 cells
     const pinned = list.filter((column) => column.pinned && column.visible !== false);
     list = list.map((column, index) => {
@@ -318,5 +359,17 @@ class itfTableGroup extends Vue {
   toggleGroup() {
     this.isShowTable = !this.isShowTable;
   }
+
+  get stickyId() {
+    return `sticky-group-${this._uid}`;
+  }
+
+  mounted() {
+    this.sticky = new Sticky(`.${this.stickyId}`, {
+      wrap: true,
+      stickyClass: 'sticky',
+    });
+    console.info(this.sticky);
+  }
 }
 </script>