@itfin/components 1.3.57 → 1.3.59

package/package.json

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

package/src/components/pagination/Pagination.vue

@@ -1,49 +1,57 @@
 <template>
 
-  <nav aria-label="Page navigation example" class="d-flex">
-    <ul class="pagination itf-pagination px-3">
-      <li
+  <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="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>
+        >
+          <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>
 
-    <itf-select
-      v-if="showSize"
-      class="itf-pagination-select"
-      :options="perPageOptions"
-      :reduce="(item) => item.value"
-      :get-option-label="(item) => item.title"
-      :value="size"
-      @input="onPerPage"
-    >
-    </itf-select>
+    <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"
+      >
+        <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>
-<style lang="scss" scoped>
-.itf-pagination-select
-{}
-</style>
 <script>
 import { Vue, Component, Model, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon.vue';
-import itfSelect from "@itfin/components/src/components/select/Select.vue";
+import itfDropdown from "../dropdown/Dropdown.vue";
 
 const MIN_PAGES_BLOCKS = 2;
 const MAX_PAGES_BLOCKS = 6;
@@ -56,7 +64,7 @@ const PER_PAGE_OPTIONS = [
 export default @Component({
   name: 'itfPagination',
   components: {
-    itfSelect,
+    itfDropdown,
     itfIcon
   }
 })

package/src/components/table/Table2.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="itf-table2 scrollable scrollable-x" :class="{'permanent-checkboxes': selectedIds.length}" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px` }">
+  <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">
@@ -34,6 +34,7 @@
             :striped="striped"
             :expanded-ids="expandedIds"
             :css-property="cssProperty"
+            :sorting.sync="_sorting"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
             @add-column="$emit('add-column', $event)"
@@ -85,6 +86,7 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null }) stateName; // save state to storage
   @Prop({ type: Object, default: () => ({}) }) schema;
   @ModelSync('value', 'input', { type: Array, default: () => ([]) }) selectedIds;
+  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
   @Prop({ type: Array, default: () => [] }) expandedIds;
   @Prop() currency;
   @Prop() currencies;
@@ -100,6 +102,7 @@ class itfTable2 extends Vue {
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
+  @Prop(Boolean) absolute;
 
   state = {
     selectedIds: [],

package/src/components/table/TableGroup.vue

@@ -44,6 +44,7 @@
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
             :indicatorType="indicatorType"
+            :sorting.sync="_sorting"
             @update:selectedIds="$emit('update:selectedIds', $event)"
             @update:columns="$emit('update:columns', $event)"
             @add-column="$emit('add-column', $event)"
@@ -347,6 +348,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) striped;
   @Prop() indicatorWidth;
   @Prop() cssProperty;
+  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
   @Prop({ type: String, default: null }) indicatorType;
   @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;

package/src/components/table/TableHeader.vue

@@ -33,24 +33,24 @@
                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>
-                <span class="itf-table2__header-title" :title="column.title[locale] || column.title['en_US']">
+                <span class="itf-table2__header-title text-truncate" :title="column.title[locale] || column.title['en_US']" :class="{'ms-auto': column.align === 'end'}">
                   <span v-if="column.icon" :class="column.icon"></span>
                   {{column.title[locale] || column.title['en_US']}}
                   <div v-if="column.prefix" class="itf-table2__subtitle" v-text="column.prefix" />
                 </span>
-                <!--                <itf-icon name="arrow_up" :size="16" class="ms-1" />-->
+                <itf-icon v-if="_sorting[column.property]" :name="_sorting[column.property] === 'asc' ? 'arrow_up' : 'arrow_down'" :size="16" class="ms-1" />
               </template>
 
               <div v-if="column.sortable">
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="sortBy(column, 'asc')">
                   <itf-icon name="arrow_up" :size="16" class="me-1" />
                   {{$t('components.table.sortAscending')}}
                 </a>
               </div>
               <div v-if="column.sortable">
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="sortBy(column, 'desc')">
                   <itf-icon name="arrow_down" :size="16" class="me-1" />
-                  {{$t('components.table.sortAscending')}}
+                  {{$t('components.table.sortDescending')}}
                 </a>
               </div>
               <div v-if="column.groupable">
@@ -159,6 +159,7 @@ class itfTableHeader extends Vue {
   @Inject() tableEl;
 
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
+  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
   @Prop({ type: Array, default: () => ([]) }) rows;
   @Prop({ type: Array, default: () => ([]) }) selectedIds;
   @Prop({ type: Object, default: () => ({}) }) schema;
@@ -335,5 +336,10 @@ class itfTableHeader extends Vue {
   onSortColumns(items) {
     this.$emit('update:columns', items);
   }
+
+  sortBy(column, order) {
+    console.info({ [column.property]: order });
+    this.$emit('update:sorting', { [column.property]: order });
+  }
 }
 </script>

package/src/components/table/TableRows.vue

@@ -51,7 +51,7 @@
                 v-if="column.visible !== false"
                 :data-column="k"
                 :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-                :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
+                :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
                 <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)">
                   <template v-if="column.editable && editable">

package/src/components/table/table2.scss

@@ -2,6 +2,7 @@
   --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;
@@ -42,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(even) {
+      --itf-table2-row-bg: var(--itf-table-alt-bg);
+    }
+  }
 
   &__header {
     background-color: var(--itf-table-header-bg);
@@ -207,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: 'Немає записів',