@itfin/components 2.0.2 → 2.0.3

package/package.json

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

package/src/components/app/message.js

@@ -38,7 +38,7 @@ const Message = function (options) {
   const parent = document.getElementById('itf-app');
 
   const instance = new ToastContainer({
-    // parent: $nuxt.$el.__vue__,
+    parent: $nuxt.$el.__vue__,
     el: document.createElement('itf-toast-container'),
     data: options
   });

package/src/components/filter/FilterFacetsList.vue

@@ -72,6 +72,7 @@
     }
   }
   .facet-name {
+    min-width: 0;
     text-align: left;
     white-space: nowrap;
 

package/src/components/table/TableGroup.vue

@@ -284,7 +284,7 @@
   }
 
   .sticky-group {
-    top: -10px;
+    top: 0px;
     position: sticky;
     z-index: 10;
 

package/src/components/table/TableHeader.vue

@@ -183,7 +183,7 @@ class itfTableHeader extends Vue {
   @Inject() tableEl;
 
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
-  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
+  @PropSync('sorting') _sorting;
   @Prop({ type: Array, default: () => ([]) }) rows;
   @Prop({ type: Array, default: () => ([]) }) selectedIds;
   @Prop({ type: Object, default: () => ({}) }) schema;

package/src/components/view/View.vue

@@ -10,7 +10,7 @@
       @input="loadData"
     >
       <template #after-filter-btn>
-        <itf-dropdown v-if="$refs.table && schema" shadow :button-options="{ default: true, icon: true }" autoclose="outside">
+        <itf-dropdown v-if="$refs.table && schema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
           <template #button>
             <itf-icon new name="table-view" />
           </template>
@@ -46,10 +46,18 @@
           style="--shadow-area-width: 0px;"
           absolute
           striped
+          clickable
           column-sorting
           column-resizing
+          class="permanent-checkboxes"
+          id-property="id"
           :rows="items"
           :schema="schema"
+          :sorting="sorting"
+          :active="activeIds"
+          v-model="selectedIds"
+          @row-click="$emit('open', $event)"
+          @update:sorting="updateSorting($event)"
         >
           <template v-for="(_, name) in $slots" #[name]="slotData">
             <slot :name="name" v-bind="slotData || {}"/>
@@ -68,7 +76,8 @@
       :items="items"
       :pages="countPages"
       :value="page"
-      @input="$emit('update:page', $event)"
+      @input="updatePage($event)"
+      @per-page="updateSizePerPage($event)"
     >
       <template #center>
         <slot name="pagination-center" />
@@ -78,7 +87,7 @@
 
 </template>
 <script>
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
@@ -101,22 +110,41 @@ export default @Component({
   }
 })
 class itfView extends Vue {
+  @Inject({ default: null }) panelList;
+
   @Prop({ type: Boolean }) loading;
   @Prop({ type: Array }) filters;
   @Prop({ type: Object, required: true }) schema;
-  @Prop({ default: 20 }) size;
-  @Prop({ default: 100 }) total;
-  @Prop({ default: 1 }) page;
-  @Prop(String) sorting;
+  // @Prop({ default: 20 }) size;
+  // @Prop({ default: 1 }) page;
+  @Prop(String) defaultSorting;
   @Prop(String) endpoint;
   @Prop(String) filtersEndpoint;
   @Prop(String) itemsKey;
+  @Prop(String) panelKey;
 
+  page = 1;
+  total = 0;
+  size = 20;
+  sorting = 'id';
   items = [];
   filter = {};
   loadingData = false;
+  activeIds = [];
+  selectedIds = [];
+
+  created() {
+    this.sorting = this.defaultSorting;
+  }
 
   mounted() {
+    if (this.panelList && this.panelList.panelsStack && this.panelList.panelsStack.length && this.panelKey) {
+      const updateIds = () => {
+        this.activeIds = this.panelList.panelsStack.filter(p => p.type === this.panelKey).map(p => p.payload.id);
+      };
+      this.panelList.panelsStack[0].on('panels.changed', updateIds);
+      updateIds();
+    }
   }
 
   async loadData() {
@@ -131,10 +159,13 @@ class itfView extends Vue {
           ...this.filter,
           page: this.page,
           size: this.size,
-          sorting: this.sorting
+          sort: this.sorting
         }
       });
       this.items = res[this.itemsKey];
+      this.page = res.meta.page;
+      this.total = res.meta.total;
+      this.size = res.meta.size;
     });
     this.loadingData = false;
     this.$emit('loaded', this.filter);
@@ -150,5 +181,20 @@ class itfView extends Vue {
   get countPages() {
     return Math.ceil(this.total / this.size);
   }
+
+  updateSorting (val) {
+    this.sorting = val;
+    this.loadData();
+  }
+
+  updatePage (val) {
+    this.page = val;
+    this.loadData();
+  }
+
+  updateSizePerPage (val) {
+    this.size = val;
+    this.loadData();
+  }
 }
 </script>