@itfin/components 1.3.56 → 1.3.58

package/package.json

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

package/src/components/datepicker/MonthPicker.vue

@@ -53,7 +53,7 @@ import { DateTime } from 'luxon';
 import tippy from 'tippy.js';
 import itfIcon from '../icon/Icon';
 import itfDatePickerInline from './DatePickerInline.vue';
-import itfButton from "@/components/button/Button.vue";
+import itfButton from "../button/Button.vue";
 
 export default @Component({
   name: 'itfMonthPicker',

package/src/components/pagination/Pagination.vue

@@ -1,40 +1,70 @@
 <template>
 
-  <nav aria-label="Page navigation example">
-    <ul class="pagination itf-pagination px-3">
-      <li
-        v-for="(page, n) in pagesArr"
-        :key="n"
-        class="page-item"
-        :class="{'active': page.current, 'disabled': !page.active && !page.current }"
+  <nav aria-label="Page navigation example" class="d-flex justify-content-between align-items-center">
+    <div class="d-flex gap-2 align-items-center">
+      <ul class="pagination itf-pagination ps-3 mb-0">
+        <li
+          v-for="(page, n) in pagesArr"
+          :key="n"
+          class="page-item"
+          :class="{'active': page.current, 'disabled': !page.active && !page.current }"
+        >
+          <a v-if="page.type === 'prev'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
+            <itf-icon name="chevron_left" aria-hidden="true" />
+            <span class="sr-only">{{$t('components.pagination.previous')}}</span>
+          </a>
+          <a v-else-if="page.type === 'first'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+          <a v-else-if="page.type === 'page'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+          <a v-else-if="page.type === 'last'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+          <span v-else-if="page.type === 'more'" class="page-link">&hellip;</span>
+          <a v-if="page.type === 'next'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
+            <span class="sr-only">{{$t('components.pagination.next')}}</span>
+            <itf-icon name="chevron_right" aria-hidden="true" />
+          </a>
+        </li>
+      </ul>
+      <!--div>
+        1-25 of {{length}} items
+      </div-->
+    </div>
+
+    <div class="d-flex gap-2 align-items-center">
+      <span>{{$t('components.pagination.itemsPerPage')}}</span>
+      <itf-dropdown
+        toggle
+        :button-options="{ secondary: true, small: true }"
+        v-if="showSize"
+        class="itf-pagination-select"
+        :value="size"
       >
-        <a v-if="page.type === 'prev'" href="" class="page-link" aria-label="Previous" @click.prevent="onPage(page.number)">
-          <itf-icon name="chevron_left" aria-hidden="true" />
-          <span class="sr-only">Previous</span>
-        </a>
-        <a v-else-if="page.type === 'first'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
-        <a v-else-if="page.type === 'page'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
-        <a v-else-if="page.type === 'last'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
-        <span v-else-if="page.type === 'more'" class="page-link">&hellip;</span>
-        <a v-if="page.type === 'next'" href="" class="page-link" aria-label="Next" @click.prevent="onPage(page.number)">
-          <span class="sr-only">Next</span>
-          <itf-icon name="chevron_right" aria-hidden="true" />
-        </a>
-      </li>
-    </ul>
+        <template #button>
+          <span>{{size}}</span>
+        </template>
+        <div class="dropdown-item" v-for="option in perPageOptions" :key="option.value" @click="onPerPage(option.value)">
+          {{option.title}}
+        </div>
+      </itf-dropdown>
+    </div>
   </nav>
 
 </template>
 <script>
 import { Vue, Component, Model, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon.vue';
+import itfDropdown from "../dropdown/Dropdown.vue";
 
 const MIN_PAGES_BLOCKS = 2;
 const MAX_PAGES_BLOCKS = 6;
+const PER_PAGE_OPTIONS = [
+  { title: '20', value: 20 },
+  { title: '50', value: 50 },
+  { title: '100', value: 100 }
+];
 
 export default @Component({
   name: 'itfPagination',
   components: {
+    itfDropdown,
     itfIcon
   }
 })
@@ -45,11 +75,17 @@ class itfPagination extends Vue {
   @Prop({ type: [String, Number] }) pages;
   @Prop({ type: [String, Number], default: MIN_PAGES_BLOCKS }) minBlocks;
   @Prop({ type: [String, Number], default: MAX_PAGES_BLOCKS }) maxBlocks;
+  @Prop({type: Array, default: () => PER_PAGE_OPTIONS}) perPageOptions;
+  @Prop(Boolean) showSize;
 
   onPage(page) {
     this.$emit('input', page);
   }
 
+  onPerPage(size) {
+    this.$emit('per-page', size);
+  }
+
   get pagesArr () {
     const pageSize = Number(this.size);
     const totalItems = Number(this.length);

package/src/components/table/Table2.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="itf-table2 scrollable scrollable-x" :class="{'permanent-checkboxes': selectedIds.length}">
+  <div class="itf-table2 scrollable scrollable-x" :class="{'table-striped': striped, 'table-absolute': absolute, 'permanent-checkboxes': selectedIds.length}" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px` }">
     <itf-checkbox-group v-model="selectedIds">
       <template v-for="(group, index) in groups">
         <div class="table-view-body">
@@ -30,6 +30,11 @@
             :subrows-property="subrowsProperty"
             :indicator-type="indicatorType"
             :expanded-all="expandedAll"
+            :indicatorWidth="indicatorWidth"
+            :striped="striped"
+            :expanded-ids="expandedIds"
+            :css-property="cssProperty"
+            @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
             @add-column="$emit('add-column', $event)"
           >
@@ -47,7 +52,7 @@
 
 </template>
 <script>
-import { Vue, Component, Prop, Watch, ModelSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, ModelSync, PropSync } from 'vue-property-decorator';
 import itfCheckboxGroup from '../checkbox/CheckboxGroup.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
@@ -73,11 +78,14 @@ class itfTable2 extends Vue {
   @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({ default: 45 }) indicatorWidth;
   @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
   @Prop({ type: String, default: null }) stateName; // save state to storage
   @Prop({ type: Object, default: () => ({}) }) schema;
   @ModelSync('value', 'input', { type: Array, default: () => ([]) }) selectedIds;
+  @Prop({ type: Array, default: () => [] }) expandedIds;
   @Prop() currency;
   @Prop() currencies;
   @Prop(Boolean) addNewRows;
@@ -91,6 +99,8 @@ class itfTable2 extends Vue {
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
+  @Prop(Boolean) striped;
+  @Prop(Boolean) absolute;
 
   state = {
     selectedIds: [],

package/src/components/table/TableBody.vue

@@ -14,7 +14,10 @@
       :currencies="currencies"
       :indicatorType="indicatorType"
       :expanded-ids="expandedIds"
+      :striped="striped"
       :expanded-all="expandedAll"
+      :css-property="cssProperty"
+      @update:expanded-ids="$emit('update:expanded-ids', $event)"
       @row-click="$emit('row-click', $event)"
       @update="$emit('update', $event)"
       @toggle="onToggle"
@@ -164,7 +167,7 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfTableRows from './TableRows.vue';
 
 export default @Component({
@@ -182,17 +185,18 @@ class itfTableBody extends Vue {
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
+  @Prop(Boolean) striped;
   @Prop() selectedIds;
   @Prop() currency;
   @Prop() currencies;
+  @Prop() cssProperty;
   @Prop({ type: String, default: null }) indicatorType;
-
-  expandedIds = [];
+  @Prop() expandedIds;
 
   onToggle(item) {
-    this.expandedIds = this.expandedIds.includes(item[this.idProperty])
+    this.$emit('update:expanded-ids', this.expandedIds.includes(item[this.idProperty])
       ? this.expandedIds.filter((id) => id !== item[this.idProperty])
-      : [...this.expandedIds, item[this.idProperty]];
+      : [...this.expandedIds, item[this.idProperty]]);
   }
 }
 </script>

package/src/components/table/TableGroup.vue

@@ -43,6 +43,7 @@
             :no-column-menu="noColumnMenu"
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
+            :indicatorType="indicatorType"
             @update:selectedIds="$emit('update:selectedIds', $event)"
             @update:columns="$emit('update:columns', $event)"
             @add-column="$emit('add-column', $event)"
@@ -65,7 +66,12 @@
             :selected-ids="selectedIds"
             :indicatorType="indicatorType"
             :expanded-all="expandedAll"
-            :show-add-column="showAddColumn">
+            :striped="striped"
+            :show-add-column="showAddColumn"
+            :expanded-ids="expandedIds"
+            :css-property="cssProperty"
+            @update:expanded-ids="$emit('update:expanded-ids', $event)"
+          >
             <template v-for="(_, name) in $slots" #[name]="slotData">
               <slot :name="name" v-bind="slotData || {}"/>
             </template>
@@ -295,7 +301,7 @@ import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
 import uniq from "lodash/uniq";
 import { round } from "../../helpers/formatters";
-import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
+import {Vue, Component, Prop, Watch, PropSync} from 'vue-property-decorator';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
@@ -338,9 +344,13 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
+  @Prop(Boolean) striped;
+  @Prop() indicatorWidth;
+  @Prop() cssProperty;
   @Prop({ type: String, default: null }) indicatorType;
   @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;
+  @Prop() expandedIds;
 
   isShowTable = true;
   persistSummary = false;
@@ -348,7 +358,7 @@ class itfTableGroup extends Vue {
   get visibleColumns() {
     let list = this.columns;
     list = sortBy(list, (column) => column.index);
-    let left = 57; // sum of first 2 cells
+    let left = 12 + (this.indicatorType === 'none' ? 1 : Number(this.indicatorWidth)); // sum of first 2 cells
     const pinned = list.filter((column) => column.pinned && column.visible !== false);
     list = list.map((column, index) => {
       const item = {...column};
@@ -357,7 +367,6 @@ class itfTableGroup extends Vue {
       item.lastPinned = index === pinned.length - 1;
       return item
     });
-    console.info(list);
     return list;
   }
 

package/src/components/table/TableHeader.vue

@@ -5,7 +5,7 @@
       <div accept-group="items" class="table-view-body-space" v-dropzone="{ payload: 0 }"></div>
       <div class="shadow-area"></div>
       <div class="table-view-header-value reserved sticky">
-        <itf-checkbox v-if="visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
+        <itf-checkbox v-if="indicatorType !== 'none' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
       </div>
 
       <template v-for="(column, n) in visibleAttributes">
@@ -169,6 +169,7 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop() indicatorType;
 
   @Watch('selectedIds')
   @Watch('rows')

package/src/components/table/TableRows.vue

@@ -6,7 +6,7 @@
         group="items"
         data-test="table-item"
         class="table-view-item grouped draggable-item"
-        :class="{'selected': selectedIds.includes(item[idProperty])}"
+        :class="{'selected': selectedIds.includes(item[idProperty]), [cssProperty && item[cssProperty]]: !!item[cssProperty]}"
       >
         <div class="table-row-template">
           <div accept-group="items" class="table-view-body-space"></div>
@@ -27,13 +27,15 @@
               <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-caret-right-fill" viewBox="0 0 16 16">
-                      <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
+                    <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-caret-down-fill" viewBox="0 0 16 16">
-                      <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+                    <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>
@@ -100,6 +102,7 @@
           :level="level + 1"
           :expanded-ids="expandedIds"
           :expanded-all="expandedAll"
+          :css-property="cssProperty"
           @toggle="$emit('toggle', $event)"
         >
           <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -149,12 +152,14 @@ class itfTableRows extends Vue {
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
+  @Prop(Boolean) striped;
   @Prop() selectedIds;
   @Prop() expandedIds;
   @Prop() currency;
   @Prop() currencies;
+  @Prop() cssProperty;
   @Prop({ type: Number, default: 0 }) level;
-  @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
+  @Prop({ type: String, default: null, validator: (val) => ['none', 'order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
 
   getValue(item, column) {
     return get(item, column.property);
@@ -183,7 +188,6 @@ class itfTableRows extends Vue {
 
   isExpanded(item) {
     const isExpanded = this.expandedIds.includes(item[this.idProperty]);
-    console.info(isExpanded, this.expandedAll)
     return this.expandedAll ? !isExpanded : isExpanded;
   }
 }

package/src/components/table/table2.scss

@@ -2,15 +2,18 @@
   --itf-table-border-color: #e1e1e1;
   --itf-table-header-bg: #f8f8f8;
   --itf-table-selected-bg: #f0f0f0;
+  --itf-table-alt-bg: #f9f9f9;
+  //--itf-table-border-color: #e1e1e1;
+  //--itf-table-header-bg: #f9faf5;
+  //--itf-table-selected-bg: #cbd6f4;
+  --itf-table-header-bg: #f8f8f8;
   --itf-table-border-color: #dbddd1;
-  --itf-table-header-bg: #f9faf5;
   --itf-table-hover-header-bg: var(--bs-tertiary-bg);
   --itf-table-hover-bg: #f2f2f2;
   --itf-table-bg: var(--bs-body-bg);
   --itf-table-min-width: 45px;
   --itf-table-input-border-color: #aaaba6;
   --itf-table-input-focus-border-color: #0028aa;
-  --itf-table-selected-bg: #cbd6f4;
   --itf-table-header-subtitle-color: #aeafaa;
   --itf-table-summary-text: var(--bs-tertiary-color);
 
@@ -40,6 +43,18 @@ body[data-theme="dark"] {
     overflow-x: scroll;
     padding-right: 4px;
   }
+  &.table-absolute {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+  &.table-striped {
+    .table-view-item:nth-child(odd) {
+      --itf-table2-row-bg: var(--itf-table-alt-bg);
+    }
+  }
 
   &__header {
     background-color: var(--itf-table-header-bg);
@@ -205,11 +220,8 @@ body[data-theme="dark"] {
 
     background-color: var(--itf-table2-row-bg);
 
-    &.selected {
-      --itf-table2-row-bg: var(--itf-table-selected-bg);
-    }
-    &:hover {
-      --itf-table2-row-bg: var(--itf-table-selected-bg);
+    &.selected, &:hover {
+      --itf-table2-row-bg: var(--itf-table-selected-bg) !important;
     }
 
     .indicator {

package/src/locales/en.js

@@ -120,5 +120,10 @@ module.exports = {
     calculateCountNotEmpty: 'Count not empty',
     calculatePercentEmpty: 'Percent empty',
     calculatePercentNotEmpty: 'Percent not empty',
+  },
+  pagination: {
+    itemsPerPage: 'Items per page',
+    previous: 'Previous',
+    next: 'Next'
   }
 };

package/src/locales/uk.js

@@ -97,6 +97,11 @@ module.exports = {
   copyToClipboard: {
     copyingToClipboardWasSuccessful: 'Скопійовано в буфер',
   },
+  pagination: {
+    itemsPerPage: 'К-ть на сторінці',
+    previous: 'Попередня',
+    next: 'Наступна',
+  },
   table: {
     new: 'Додати',
     noResults: 'Немає записів',