@itfin/components 1.4.36 → 1.5.0

package/src/components/segmented-control/SegmentedControl.vue

@@ -1,17 +1,17 @@
 <template>
   <div>
-    <div class="itf-segmeneted-control d-none d-lg-grid">
+    <div class="itf-segmeneted-control d-none d-lg-grid" :class="{'small': small}">
       <span v-if="!isUndefined" ref="slider" class="selection" :class="{'elevation-1': !disabled}"></span>
 
       <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
-        <label>
+        <label v-tooltip="tooltipCallback(item)" :key="n" :class="{'disabled': disabled || item[itemDisabled]}">
           <slot name="itemMarkup" :item="item" />
           <input
             ref="input"
             type="radio"
             :name="name"
             :value="n"
-            v-tooltip="tooltipCallback(item)"
+            :disabled="disabled || item[itemDisabled]"
             :checked="isChecked(item)"
             @change="onItemChanged(item)" />
           <span>
@@ -24,6 +24,7 @@
       <itf-select
         :value="value"
         @input="$emit('input', $event)"
+        :disabled="disabled"
         :options="itemsWithNames"
         :reduce="(item) => item[itemKey]"
         :get-option-label="(item) => item[itemText]"
@@ -50,8 +51,10 @@ class itfSegmentedControl extends Vue {
   @Prop({ type: Array, required: true }) items;
   @Prop({ type: String, default: 'Id' }) itemKey;
   @Prop({ type: String, default: 'Name' }) itemText;
+  @Prop({ type: String, default: 'Disabled' }) itemDisabled;
   @Prop({ type: Boolean, default: false }) returnObject;
   @Prop({ type: Boolean, default: false }) disabled;
+  @Prop({ type: Boolean, default: false }) small;
   @Prop({ type: Function, default: () => null }) tooltipCallback;
 
   timers = [];
@@ -127,6 +130,9 @@ class itfSegmentedControl extends Vue {
   }
 
   onItemChanged (item) {
+    if (this.disabled) {
+      return;
+    }
     this.$emit('input', this.returnObject ? item : item[this.itemKey]);
   }
 }

package/src/components/sortable/draggable.js

@@ -7,7 +7,7 @@ const SORTABLE_ATTRIBUTES = ['drag-ignore-handle', 'scrollable'];
 
 const DEFAULT_OPTIONS = {
   draggableClass: DRAGGABLE_CLASS,
-  dragHandleClass: DRAG_HANDLE_CLASS,
+  // dragHandleClass: DRAG_HANDLE_CLASS,
   delay: 200,
   tresholdDistance: 2,
   draggable: `.${DRAGGABLE_CLASS}`,

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,64 @@
       </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" class="d-flex flex-column" style="min-width: 100%; width: max-content">
+        <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"
+              :new-label="newLabel"
+              :collapsed-group-ids="collapsedGroupIds"
+              @update:expanded-ids="$emit('update:expanded-ids', $event)"
+              @update:collapsed-group-ids="$emit('update:collapsed-group-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 +107,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;
@@ -123,6 +123,7 @@ class itfTable2 extends Vue {
   @ModelSync('value', 'input', { type: Array, default: () => ([]) }) selectedIds;
   @PropSync('sorting') _sorting;
   @Prop({ type: Array, default: () => [] }) expandedIds;
+  @Prop({ type: Array }) collapsedGroupIds;
   @Prop() currency;
   @Prop() currencies;
   @Prop(Boolean) stickyHeader;
@@ -141,6 +142,7 @@ class itfTable2 extends Vue {
   @Prop(Boolean) striped;
   @Prop(Boolean) absolute;
   @Prop(Boolean) clickable;
+  @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
 
   state = {
     selectedIds: [],
@@ -189,7 +191,7 @@ class itfTable2 extends Vue {
       if (stateColumnIndex === -1) {
         state.columns.push(column);
       } else {
-        state.columns[stateColumnIndex] = { ...column, width: state.columns[stateColumnIndex].width };
+        state.columns[stateColumnIndex] = { ...column, width: state.columns[stateColumnIndex].width, visible: state.columns[stateColumnIndex].visible };
       }
     }
     for (const column of state.columns) {
@@ -209,7 +211,7 @@ class itfTable2 extends Vue {
     if (!this.stateName) {
       return;
     }
-    const columns = this.state.columns.map((s) => ({ property: s.property, width: s.width, index: s.index }));
+    const columns = this.state.columns.map((s) => ({ property: s.property, width: s.width, index: s.index, visible: s.visible }));
     localStorage.setItem(this.stateKey, JSON.stringify({ columns }));
   }
 
@@ -247,8 +249,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

@@ -1,13 +1,28 @@
 <template>
   <div>
+    <div v-if="!rows.length" data-test="table-no-results" class="scroller">
+      <div class="table-view-item">
+        <div class="table-row-template">
+          <div accept-group="items" class="table-view-body-space"></div>
+          <div class="shadow-area"></div>
+          <div class="indicator sticky"></div>
+          <div class="table-item-inner">
+            <div class="table-view-item-value w-100 align-items-center p-3 no-results">
+              {{$t('components.table.noResults')}}
+            </div>
+            <div class="boundary right"></div>
+          </div>
+        </div>
+      </div>
+    </div>
     <itf-table-rows
+      v-else
       class="scroller"
       :rows="rows"
       :selected-ids="selectedIds"
       :columns="columns"
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
-      :async-subrows-property="asyncSubrowsProperty"
       :divider-property="dividerProperty"
       :show-add-column="showAddColumn"
       :show-actions="showActions"
@@ -34,21 +49,6 @@
         <slot :name="name" v-bind="slotData || {}"/>
       </template>
     </itf-table-rows>
-    <div v-if="!rows.length" data-test="table-no-results" class="scroller">
-      <div class="table-view-item">
-        <div class="table-row-template">
-          <div accept-group="items" class="table-view-body-space"></div>
-          <div class="shadow-area"></div>
-          <div class="indicator sticky"></div>
-          <div class="table-item-inner">
-            <div class="table-view-item-value w-100 align-items-center p-3 no-results">
-              {{$t('components.table.noResults')}}
-            </div>
-            <div class="boundary right"></div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <style lang="scss">
@@ -93,7 +93,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 1rem;//var(--itf-table-min-width);
+  min-width: 1rem; // важливо для скруглення //var(--itf-table-min-width);
 }
 
 .table-row-template, .table-view-header-value {
@@ -145,7 +145,6 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
-  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
@@ -166,10 +165,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

@@ -15,14 +15,14 @@
             <div class="table-row-template d-flex align-items-stretch"
                  style="min-height: var(--group-title-height)">
               <div class="shadow-area"></div>
-              <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
+              <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="() => toggleGroup(!isShowTable)">
                 <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"
                         data-test="group-value-group-label-value">
-                    <slot name="group-title" :rows="rows" :title="title">{{ title }}</slot>
+                    <slot name="group-title" :rows="rows" :title="title" :collapsed="!isShowTable">{{ title }}</slot>
                   </span>
                 </a>
               </div>
@@ -39,7 +39,6 @@
             :show-add-column="showAddColumn"
             :show-actions="showActions"
             :id-property="idProperty"
-            :sort-as-string="sortAsString"
             :rows="rows"
             :schema="schema"
             :editable="editable"
@@ -52,7 +51,14 @@
             @update:columns="$emit('update:columns', $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-header>
         </div>
 
         <!-- Сама таблиця -->
@@ -62,13 +68,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 +85,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 +98,11 @@
 
         <!-- Лінія додати нову -->
         <div v-if="isShowTable && addNewRows"
-             class="table-row-template table-row-template__new-row d-flex align-items-stretch">
+             class="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-2 px-2">
               <itf-icon name="plus"/>
               <span>{{ newLabel }}</span>
             </span>
@@ -268,20 +271,21 @@
     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);
+    margin-top: -12px;
     border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
     outline: none;
     border-bottom-left-radius: var(--itf-table-table-border-radius);
     border-bottom-right-radius: var(--itf-table-table-border-radius);
+    border-right: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+
+    > .d-sticky {
+      border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+      border-bottom-left-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);
@@ -344,6 +348,7 @@ import itfIcon from '../icon/Icon.vue';
 import itfTableBody from './TableBody.vue';
 import itfTableHeader from './TableHeader.vue';
 import Sticky from "./sticky";
+import { getIsMobileView } from "./mobile";
 
 function getNumber(item, prop) {
   const num = Number(get(item, prop));
@@ -367,7 +372,6 @@ class itfTableGroup extends Vue {
   @Prop() title;
   @Prop() idProperty;
   @Prop() subrowsProperty;
-  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() currency;
   @Prop() currencies;
@@ -387,7 +391,6 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
   @Prop(Boolean) stickyHeader;
-  @Prop(Boolean) sortAsString;
   @Prop() indicatorWidth;
   @Prop() shadowWidth;
   @Prop() cssProperty;
@@ -396,10 +399,14 @@ class itfTableGroup extends Vue {
   @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;
   @Prop() expandedIds;
+  @Prop() collapsedGroupIds;
 
-  isShowTable = true;
   persistSummary = false;
 
+  get isShowTable() {
+    return typeof this.collapsedGroupIds !== 'undefined' ? !this.collapsedGroupIds.includes(this.title) : true;
+  }
+
   get visibleColumns() {
     let list = this.columns;
     list = sortBy(list, (column) => column.index);
@@ -407,8 +414,8 @@ class itfTableGroup extends Vue {
     const pinned = list.filter((column) => column.pinned && column.visible !== false);
     list = list.map((column, index) => {
       const item = {...column};
-      item.left = (item.pinned && item.visible !== false) ? left : 0;
-      left = (item.pinned && item.visible !== false) ? left + column.width : left;
+      item.left = (item.pinned && !getIsMobileView() && item.visible !== false) ? left : 0;
+      left = (item.pinned && !getIsMobileView() && item.visible !== false) ? left + column.width : left;
       item.lastPinned = index === pinned.length - 1;
       return item
     });
@@ -420,8 +427,17 @@ class itfTableGroup extends Vue {
     this.$emit('update:columns', columns);
   }
 
-  toggleGroup() {
-    this.isShowTable = !this.isShowTable;
+  toggleGroup(val) {
+    let expanded = this.collapsedGroupIds ? [...this.collapsedGroupIds] : [];
+    if (!val) {
+      if (!expanded.includes(this.title)) {
+        expanded.push(this.title);
+      }
+    } else {
+      expanded = expanded.filter(id => id !== this.title);
+    }
+    console.info(expanded, this.title, val);
+    this.$emit('update:collapsed-group-ids', expanded);
   }
 
   get stickyId() {