@itfin/components 1.3.58 → 1.3.59

package/package.json

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

package/src/components/table/Table2.vue

@@ -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;

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

@@ -51,7 +51,7 @@ body[data-theme="dark"] {
     bottom: 0;
   }
   &.table-striped {
-    .table-view-item:nth-child(odd) {
+    .table-view-item:nth-child(even) {
       --itf-table2-row-bg: var(--itf-table-alt-bg);
     }
   }