@itfin/components 1.2.92 → 1.2.93

package/package.json

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

package/src/components/modal/ItemEditor.vue

@@ -152,6 +152,9 @@ class itfItemEditor extends Vue {
       this.$refs.modal.scrollModalTop();
       return;
     }
+    if (this.loading) {
+      return;
+    }
 
     this.loading = true;
     this.showError = false;

package/src/components/table/Table2.vue

@@ -0,0 +1,39 @@
+<template>
+
+  <div class="scrollable scrollable-x big-scrollbar">
+    <itf-table-group
+      :columns="columns"
+      :rows="rows"
+    />
+  </div>
+
+</template>
+<style lang="scss">
+//.scrollable {
+//  -webkit-overflow-scrolling: touch;
+//  overflow: hidden auto;
+//
+//  &.scrollable-x {
+//    overflow-x: auto;
+//  }
+//}
+</style>
+<script>
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfTableGroup from './TableGroup.vue';
+
+export default @Component({
+  name: 'itfTable2',
+  components: {
+    itfButton,
+    itfIcon,
+    itfTableGroup
+  }
+})
+class itfTable2 extends Vue {
+  @Prop({ required: true, type: Array }) columns;
+  @Prop({ required: true, type: Array }) rows;
+}
+</script>

package/src/components/table/TableBody.vue

@@ -101,6 +101,9 @@
   background-color: rgb(255 255 255 / 1);
   border-right: 1px solid rgb(238 238 238 / 1);
   border-bottom: 1px solid rgb(238 238 238 / 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .table-item-inner .boundary {

package/src/components/table/TableGroup.vue

@@ -174,14 +174,8 @@
     background-color: rgb(250 251 252 / 1);
     border-radius: 0.1875rem;
   }
-  .vue-recycle-scroller__item-wrapper {
-    -webkit-box-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
+  .table-view-wrapper .vue-recycle-scroller__item-wrapper {
+    overflow: visible;
   }
   .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
     width: 100%;

package/src/components/table/TableHeader.vue

@@ -7,14 +7,14 @@
       <div class="table-view-header-value reserved sticky"></div>
 
         <div v-for="(column, n) in sortedColumns" :key="n" data-test="table-header-column" :data-column="n" :data-id="column.Id"
-             class="table-view-header-value" style="width: 100px; left: 0px;">
+             class="table-view-header-value" :style="`width: ${column.width}px; left: 0px;`">
           <div accept-group="tablecolumns" class="table-view-header-space">
             <div class="table-view-header-dropzone"></div>
           </div>
           <div group="tablecolumns" class="table-header draggable-item drag-handle" data-draggable-mirror="{&quot;yAxis&quot;:false}">
             <a href="" class="context-menu-toggle tw-flex-auto line-overflow">
               <span title="Name">
-                <itf-icon name="type_select" :size="16" /> {{n}}
+                <itf-icon name="type_select" :size="16" /> {{column.text}}
               </span>
             </a>
           </div>
@@ -161,7 +161,7 @@
 import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
-import { Draggable, Droppable } from '@shopify/draggable';
+import { Draggable, Droppable, Sortable } from '@shopify/draggable';
 
 export default @Component({
   name: 'itfTableHeader',
@@ -172,24 +172,28 @@ export default @Component({
 })
 class itfTable extends Vue {
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
+  @Prop(Boolean) columnSorting;
+  @Prop(Boolean) columnResizing;
 
-  mounted() {
-    const draggable = new Draggable(this.$refs.container, {
-      draggable: '[group="tablecolumns"]',
+  initDraggable() {
+    const draggable = new Sortable(this.$refs.container, {
+      // draggable: '[group="tablecolumns"]',
+      draggable: '[data-test="table-header-column"]',
       mirror: {
         yAxis: false,
         appendTo: this.$refs.container
       }
     });
-    const droppable = new Droppable(this.$refs.container, {
-      draggable: '[group="tablecolumns"]',
-      dropzone: '[accept-group="tablecolumns"]'
-    });
+    // const droppable = new Droppable(this.$refs.container, {
+    //   draggable: '[group="tablecolumns"]',
+    //   dropzone: '[accept-group="tablecolumns"]'
+    // });
     draggable.on('drag:stop', (event) => {
       console.info('dropped', event);
     });
+  }
 
-    // resize
+  initResizing() {
     const resizeHandle = this.$refs.resizeHandle;
     resizeHandle.forEach((handle) => {
       handle.addEventListener('mousedown', (event) => {
@@ -216,6 +220,15 @@ class itfTable extends Vue {
     });
   }
 
+  mounted() {
+    if (this.columnSorting) {
+      this.initDraggable();
+    }
+    if (this.columnResizing) {
+      this.initResizing();
+    }
+  }
+
   changeColumn(index, params) {
     console.info(index, params);
   }

package/src/components/table/TableRow.vue

@@ -14,8 +14,7 @@
           class="ic-drag"></i>
         </div> <!----></a></div>
     </div>
-    <div
-      class="indicator sticky border-gray dark:border-gray-invert border-r bg-white dark:bg-white-invert border-b ">
+    <div class="indicator">
       <div class="fill on-rest table-view-row-count"><span
       >1</span></div>
       <div class="fill on-hover"><a

package/src/components/table/index.stories.js

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue';
 import itfApp from '../app/App.vue';
 import itfButton from '../button/Button.vue';
 import itfTable from './Table.vue';
-import itfTableGroup from './TableGroup.vue';
+import itfTable2 from './Table2.vue';
 
 const exampleData = [{
   Employee: 'Cool',
@@ -77,7 +77,7 @@ storiesOf('Common', module)
     components: {
       itfTable,
       itfButton,
-      itfTableGroup
+      itfTable2
     },
     data() {
       return {
@@ -172,9 +172,7 @@ storiesOf('Common', module)
 
       <h3>Example</h3>
 
-      <itf-table-group :columns="columns" :rows="list" />
-
-      <itf-table-group :columns="columns" :rows="list" />
+      <itf-table2 :columns="columns" :rows="list" />
 
       <!--itf-table
         :columns="columns"