@itfin/components 1.2.96 → 1.2.98

package/src/components/table/TableHeader.vue

@@ -2,45 +2,91 @@
 
   <div class="itf-table-header">
     <div ref="container" class="table-row-template">
-      <div accept-group="items" class="table-view-body-space"></div>
-      <div class="tw-bg-light dark:tw-bg-light-invert shadow-area"></div>
+      <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"></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: ${column.width}px; left: 0px;`">
-          <div accept-group="tablecolumns" class="table-view-header-space">
+      <template v-for="(column, n) in visibleAttributes">
+        <div
+          v-if="column.visible !== false"
+          :key="n"
+          data-test="table-header-column"
+          :data-column="n"
+          :data-id="column.Id"
+          :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex}"
+          class="table-view-header-value"
+          :style="`width: ${column.width}px; left: ${column.left}px;`">
+          <div accept-group="tablecolumns"
+               class="table-view-header-space"
+               @enter="columnHighlight(n, 'enter')"
+               @leave="columnHighlight(n, 'leave')"
+               v-dropzone="{ payload: { index: n, attribute: column } }">
             <div class="table-view-header-dropzone"></div>
           </div>
-          <div group="tablecolumns" class="table-header draggable-item drag-handle">
-            <span href="" class="context-menu-toggle flex-auto line-overflow">
-              <span :title="column.text">
-<!--                <itf-icon name="type_select" :size="16" />-->
-                {{column.text}}
-              </span>
-            </span>
-          </div>
-          <div v-if="columnResizing" ref="resizeHandle" class="resize-handle"></div>
-        </div>
+          <div group="tablecolumns"
+               class="table-header"
+               @drop="reorderColumns"
+               v-drag-handle
+               v-draggable="{ handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
+            <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100">
+              <template #button>
+                <span :title="column.text">
+<!--                  <itf-icon name="type_select" :size="16" />-->
+                  {{column.text}}
+                </span>
+              </template>
 
-      <!--div class="table-view-header-value">
-        <div class="attribute-creator">
-          <div data-test="dropdown"
-               class="dropdown-body tw-relative tw-cursor-pointer tw-w-full">
-            <div tabindex="0" data-test="dropdown-toggle">
-              <div class="hbox tw-flex-auto tw-items-center tw-justify-center">
-                <a href="" data-test="table-header-add-column" class="tw-text-blue tw-mx-4">
-                  <span class="ic-plus"></span>
-                  Add column
-                </a>
-              </div>
-            </div>
-            <span style="display: none;">
-              <div class="context-modal-backdrop"></div>
-              <div class="context-modal tw-min-w-[280px]"></div>
-            </span>
+              <ul class="dropdown-menu show ps-0" aria-labelledby="dropdownMenuOffset">
+                <li v-if="column.sortable">
+                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                    <itf-icon name="arrow_up" :size="16" class="me-1" />
+                    Sort By Asc
+                  </a>
+                </li>
+                <li v-if="column.sortable">
+                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                    <itf-icon name="arrow_down" :size="16" class="me-1" />
+                    Sort By Desc
+                  </a>
+                </li>
+                <li v-if="column.groupable">
+                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                    <itf-icon name="episodes" :size="16" class="me-1" />
+                    Group By
+                  </a>
+                </li>
+                <li>
+                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
+                    <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
+                    <span v-if="column.pinned">Unpin Column</span>
+                    <span v-else>Pin Column</span>
+                  </a>
+                </li>
+                <li>
+                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
+                    <itf-icon name="eye_no" :size="16" class="me-1" />
+                    Hide
+                  </a>
+                </li>
+              </ul>
+            </itf-dropdown>
+          </div>
+          <div v-if="n === sortedColumns.length - 1"
+               @enter="columnHighlightLast('enter')"
+               @leave="columnHighlightLast('leave')"
+               accept-group="tablecolumns"
+               class="table-view-header-space right"
+               v-dropzone="{payload:{ last: true }}">
+            <div class="table-view-header-dropzone"></div>
           </div>
+          <div v-if="columnResizing" ref="resizeHandle" class="resize-handle"></div>
         </div>
-      </div-->
+      </template>
+      <div v-if="showAddColumn" class="table-view-header-value">
+        <span class="table-header table-header-add-column" data-test="table-header-add-column" @click.prevent="$emit('add-column')">
+          <itf-icon name="plus" />
+        </span>
+      </div>
     </div>
   </div>
 
@@ -50,15 +96,22 @@
   position: sticky;
   top: 0;
   z-index: calc(var(--row-count) + 1);
+  border-top: 1px solid var(--bs-border-color);
 
+  .table-header.draggable-mirror{
+    z-index: 100000001;
+    background: rgba(235,237,239,0.75);
+  }
   .table-row-template {
     display: flex;
     align-items: stretch;
     height: var(--table-small-row-size);
+    user-select: none;
   }
   .table-view-header-value {
+    cursor: pointer;
     align-items: center;
-    height: 36px;
+    height: var(--table-row-height);
     white-space: nowrap;
     border-top: 0;
     border-left: 0;
@@ -67,9 +120,12 @@
     border-style: solid;
     position: relative;
     display: flex;
-    border-right-color: rgb(218 218 218 / 1);
-    border-bottom-color: rgb(238 238 238 / 1);
-    background-color: rgb(238 238 238 / 1);
+    min-width: var(--table-min-width);
+    border-right-color: var(--bs-border-color);
+    border-bottom-color: var(--bs-border-color);
+    background-color: var(--bs-body-bg);
+    //background-color: rgb(238 238 238 / 1);
+    font-weight: 500;
 
     &.reserved {
       left: var(--shadow-area-width);
@@ -91,11 +147,14 @@
     padding-right: 0.75rem;
     gap: 0.25rem;
     align-items: center;
-    display: flex;
+
+    &.table-header-add-column {
+      text-overflow: clip;
+    }
   }
   .resize-handle {
     width: 4px;
-    height: 36px;
+    height: var(--table-row-height);
     position: absolute;
     right: -2px;
     top: 0;
@@ -111,7 +170,6 @@
     }
   }
   .context-menu-toggle {
-    display: flex;
     flex: 1 1 auto;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -134,6 +192,18 @@
     z-index: 100;
     width: 2px;
     margin-left: -1px;
+
+    &.right {
+      left: auto;
+      right: 0;
+      top: 0;
+    }
+    &.active {
+      display: block;
+      &.over {
+        background: #47BEFF;
+      }
+    }
   }
   .draggable-mirror {
     opacity: .5;
@@ -163,11 +233,13 @@
 import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
-import { Draggable, Droppable, Sortable } from '@shopify/draggable';
+import { Draggable } from './draggable';
+import itfDropdown from '../dropdown/Dropdown.vue';
 
 export default @Component({
   name: 'itfTableHeader',
   components: {
+    itfDropdown,
     itfButton,
     itfIcon
   }
@@ -176,22 +248,60 @@ class itfTable extends Vue {
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
   @Prop(Boolean) columnSorting;
   @Prop(Boolean) columnResizing;
+  @Prop(Boolean) showAddColumn;
 
-  initDraggable() {
-    const draggable = new Sortable(this.$refs.container, {
-      // draggable: '[group="tablecolumns"]',
-      draggable: '[data-test="table-header-column"]',
-      mirror: {
-        yAxis: false,
-        appendTo: this.$refs.container
-      }
+  get visibleAttributes() {
+    return this.sortedColumns;
+  }
+
+  get lastPinnedIndex() {
+    return this.sortedColumns.findIndex((column) => column.lastPinned);
+  }
+
+  onSort(items) {
+    console.info(items);
+  }
+
+  reorderColumns({ detail }) {
+    const { index: fromIndex } = detail.draggablePayload;
+    const { index: toIndex, last } = detail.dropzonePayload;
+    const newValue = [...this.sortedColumns];
+    const [removed] = newValue.splice(fromIndex, 1);
+    let putIndex = (removed.pinned && toIndex > this.lastPinnedIndex + 1) ? this.lastPinnedIndex : toIndex;
+    if (!removed.pinned && toIndex <= this.lastPinnedIndex) {
+      putIndex = this.lastPinnedIndex + 1;
+    }
+
+    if (last) {
+      newValue.push(removed);
+    } else {
+      newValue.splice((fromIndex < putIndex) ? putIndex - 1 : putIndex, 0, removed);
+    }
+    this.$emit('sort:columns', newValue);
+    if (last) {
+      this.columnHighlightLast('leave');
+    } else {
+      this.columnHighlight(toIndex, 'leave');
+    }
+    for (const dropdown of this.$refs.dropdown) {
+      dropdown.hide();
+    }
+  }
+
+  columnHighlight(index, state) {
+    Array.from(document.querySelectorAll(`[data-column="${index}"]`)).forEach(t=>{
+      state === "enter" ? t.classList.add("highlight-drop-column") : t.classList.remove("highlight-drop-column")
     });
-    // const droppable = new Droppable(this.$refs.container, {
-    //   draggable: '[group="tablecolumns"]',
-    //   dropzone: '[accept-group="tablecolumns"]'
-    // });
-    draggable.on('drag:stop', (event) => {
-      console.info('dropped', event);
+  }
+  columnHighlightLast(state) {
+    Array.from(document.querySelectorAll(`[data-column="${this.sortedColumns.length - 1}"]`)).forEach(t=>{
+      if (state === "enter") {
+        t.classList.add("highlight-drop-column");
+        t.classList.add("right");
+      } else {
+        t.classList.remove("highlight-drop-column");
+        t.classList.remove("right");
+      }
     });
   }
 
@@ -205,16 +315,18 @@ class itfTable extends Vue {
         const startX = event.pageX;
         const index = column.getAttribute('data-column');
         const columns = body.querySelectorAll(`[data-column="${index}"]`);
+        let newWidth;
         const mouseMoveHandler = (event) => {
           const delta = event.pageX - startX;
+          newWidth = Math.max(columnWidth + delta, 100);
           columns.forEach((column) => {
-            column.style.width = `${columnWidth + delta}px`;
+            column.style.width = `${newWidth}px`;
           });
-          this.changeColumn(index, { width: columnWidth + delta });
         };
         const mouseUpHandler = () => {
           document.removeEventListener('mousemove', mouseMoveHandler);
           document.removeEventListener('mouseup', mouseUpHandler);
+          this.changeColumn(index, { width: newWidth });
         };
         document.addEventListener('mousemove', mouseMoveHandler);
         document.addEventListener('mouseup', mouseUpHandler);
@@ -222,9 +334,15 @@ class itfTable extends Vue {
     });
   }
 
+  beforeDestroy() {
+    if (this.columnSorting) {
+      Draggable.removeContainer(this.$refs.container);
+    }
+  }
+
   mounted() {
     if (this.columnSorting) {
-      this.initDraggable();
+      Draggable.addContainer(this.$refs.container);
     }
     if (this.columnResizing) {
       this.initResizing();
@@ -232,7 +350,20 @@ class itfTable extends Vue {
   }
 
   changeColumn(index, params) {
-    console.info(index, params);
+    this.$refs.dropdown[index].hide();
+    let newValue = [...this.sortedColumns];
+    const newItem = { ...newValue[index] };
+    Object.assign(newItem, params);
+    newValue[index] = newItem;
+    this.$emit('update:columns', newValue);
+  }
+
+  hideColumn(index) {
+    this.changeColumn(index, { visible: false });
+  }
+
+  togglePinned(index) {
+    this.changeColumn(index, { pinned: !this.sortedColumns[index].pinned });
   }
 }
 </script>

package/src/components/table/draggable.js

@@ -0,0 +1,161 @@
+import Vue from 'vue';
+import { Draggable } from '@shopify/draggable';
+import DraggableEvent from './event';
+
+const DRAGGABLE_CLASS = 'draggable-item'
+const DRAG_HANDLE_CLASS = 'drag-handle'
+const SORTABLE_ATTRIBUTES = ['drag-ignore-handle', 'scrollable'];
+
+const draggableNode = new Draggable([], {
+  draggableClass: DRAGGABLE_CLASS,
+  dragHandleClass: DRAG_HANDLE_CLASS,
+  delay: 200,
+  tresholdDistance: 2,
+  draggable: `.${DRAGGABLE_CLASS}`,
+  handle: `.${DRAG_HANDLE_CLASS}`,
+  ignoreHandleClassList: SORTABLE_ATTRIBUTES,
+  mirror: {
+    yAxis: false,
+    constrainDimensions: !0
+  },
+  scrollable: {
+    speed: 20,
+    sensitivity: 80
+  }
+});
+
+export {draggableNode as Draggable};
+
+Vue.directive('DragHandle', {
+  inserted(el) {
+    if (el.getAttribute("drag-disabled") !== "true") {
+      el.classList.add(DRAG_HANDLE_CLASS);
+    } else {
+      el.classList.remove(DRAG_HANDLE_CLASS);
+    }
+  },
+  update(el) {
+    if (el.getAttribute("drag-disabled") !== "true") {
+      el.classList.add(DRAG_HANDLE_CLASS);
+    } else {
+      el.classList.remove(DRAG_HANDLE_CLASS);
+    }
+  }
+});
+
+Vue.directive("dropzone", {
+  inserted(el, {value}) {
+    // console.log('dropzone');
+    el.over = false;
+    el.dropzonePayload = value.payload;
+    el.dropCondition = value.condition;
+
+    el.dropzoneDragMove = event => {
+      // console.log('dropzone event', event);
+      el.initialized || (el.initialized = !0,
+      el.getAttribute("accept-group").split(",").includes(event.group) && (el.classList.add("active"),
+        draggableNode.on("drag:move", el.onDragMoveReal),
+        el.event = event))
+    };
+
+    el.onDragMoveReal = event => {
+      const { target } = event.sensorEvent;
+      if (target === el || el.contains(target)) {
+        el.over === false && (!el.dropCondition || el.dropCondition({
+          dropzonePayload: el.dropzonePayload,
+          draggablePayload: el.event.data.draggablePayload
+        })) && (el.dispatchEvent(new Event("enter")), el.classList.add("over"), el.over = !0)
+      } else {
+        el.over === !0 && (el.dispatchEvent(new Event("leave")), el.classList.remove("over"), el.over = !1);
+      }
+    };
+
+    el.onDragStop = (event) => {
+      if (draggableNode.off("drag:move", el.onDragMoveReal),
+        el.classList.remove("active"),
+        el.initialized = false,
+        !el.over) {
+        return;
+      }
+      el.classList.remove("over");
+      el.over = false;
+      const detail = {
+        ...el.event.data,
+        // dropzonePayload: p()(el.dropzonePayload),
+        dropzonePayload: el.dropzonePayload,
+        newComponent: el
+      };
+      el.dispatchEvent(new CustomEvent("receive", {detail}));
+      el.event.sourceComponent.dispatchEvent(new CustomEvent("drop", {detail}));
+    };
+
+    draggableNode.on("vue:drag:move", el.dropzoneDragMove).on("drag:stop", el.onDragStop),
+    draggableNode.dragging && el.dropzoneDragMove(draggableNode.lastEvent)
+  },
+  update(el, {value}) {
+    el.dropzonePayload = value.payload
+  },
+  unbind(el) {
+    draggableNode.off("vue:drag:move", el.dropzoneDragMove).off("drag:stop", el.onDragStop).off("drag:move", el.onDragMoveReal)
+  }
+});
+
+Vue.directive("draggable", {
+  inserted(el, {value}) {
+    // console.log('directive - draggable');
+    el.currentDraggablePayload = value?.payload;
+    el.classList.add(draggableNode.options.draggableClass);
+    value?.handle && el.classList.add(draggableNode.options.dragHandleClass);
+    value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror));
+
+    el.onDragStart = event => {
+      // console.log('drag start', el.currentDraggablePayload)
+      if (draggableNode.options.ignoreHandleClassList.some(M => event.sensorEvent.target.classList.contains(M))) {
+        event.cancel();
+        return
+      }
+      if (el === event.originalEvent.target.closest("." + draggableNode.options.draggableClass)) {
+        if (event.originalEvent.target.tagName === "INPUT") {
+          event.cancel();
+          return
+        }
+        el.draggablePayload = el.currentDraggablePayload;
+        draggableNode.on("drag:move", el.dragMove);
+        draggableNode.on("drag:stop", el.dragStop);
+        el.dispatchEvent(new Event("drag-start"));
+      }
+    };
+
+    el.dragMove = () => {
+      // console.log('onDragMove')
+      const D = new DraggableEvent({
+        draggablePayload: el.draggablePayload,
+        sourceComponent: el,
+        group: el.getAttribute("group")
+      });
+      draggableNode.trigger(D);
+      draggableNode.lastEvent = D;
+    };
+
+    el.dragStop = () => {
+      draggableNode.off("drag:move", el.dragMove);
+      draggableNode.off("drag:stop", el.dragStop);
+    }
+    draggableNode.on("drag:start", el.onDragStart);
+  },
+  update(el, { value }) {
+    el.classList.add(draggableNode.options.draggableClass);
+    el.currentDraggablePayload = value?.payload;
+    value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror));
+    if (value?.handle) {
+      el.classList.add(draggableNode.options.dragHandleClass);
+    } else {
+      el.classList.remove(draggableNode.options.dragHandleClass);
+    }
+  },
+  unbind(el) {
+    draggableNode.off("drag:start", el.onDragStart);
+    draggableNode.off("drag:move", el.dragMove);
+    draggableNode.off("drag:stop", el.dragStop);
+  }
+})

package/src/components/table/event.js

@@ -0,0 +1,57 @@
+const CANCELED = Symbol("canceled");
+
+export
+class CancelableEvent {
+  static type = "event";
+
+  static cancelable = false;
+
+  constructor(f) {
+    this[CANCELED] = false,
+      this.data = f
+  }
+
+  get type() {
+    return this.constructor.type
+  }
+
+  get cancelable() {
+    return this.constructor.cancelable
+  }
+
+  cancel() {
+    this[CANCELED] = true
+  }
+
+  canceled() {
+    return !!this[CANCELED]
+  }
+
+  clone(f) {
+    return new this.constructor({
+      ...this.data,
+      ...f
+    })
+  }
+}
+
+export default
+class DraggableEvent extends CancelableEvent {
+  static type = "vue:drag:move";
+
+  get sourceComponent() {
+    return this.data.sourceComponent
+  }
+
+  get group() {
+    return this.data.group
+  }
+
+  get item() {
+    return this.data.item
+  }
+
+  get draggablePayload() {
+    return this.data.draggablePayload
+  }
+}

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

@@ -81,17 +81,24 @@ storiesOf('Common', module)
     },
     data() {
       return {
-        list: Array.from({length: 10}).map((_, i) => ({
+        list: Array.from({length: 20}).map((_, i) => ({
           Id: i,
-          text: `Рахунок`,
+          text: `Рахунок ✅`,
           Name: `Item #${i}`
-        })),
+        })).concat(Array.from({length: 20}).map((_, i) => ({
+          Id: i,
+          text: `Рахунок ❌`,
+          Name: `Item #${i}`
+        }))),
         columns: [{
           text: 'Рахунок',
           name: 'Account',
           width: 200,
           min: 250,
-          max: 250
+          max: 250,
+          sortable: true,
+          groupable: true,
+          pinned: true
         }, {
           text: 'Dr',
           name: 'Total',
@@ -101,6 +108,67 @@ storiesOf('Common', module)
           ],
           width: 200,
           min: 150,
+          max: 150,
+          pinned: true
+        }, {
+          text: 'Cr 1',
+          name: 'Total',
+          Type: 'select',
+          Options: [
+            { Id: 1, Name: 'test' }
+          ],
+          width: 200,
+          min: 150,
+          max: 150
+        }, {
+          text: 'Cr 2',
+          name: 'Total',
+          Type: 'select',
+          Options: [
+            { Id: 1, Name: 'test' }
+          ],
+          width: 200,
+          min: 150,
+          max: 150
+        }, {
+          text: 'Cr 3',
+          name: 'Total',
+          Type: 'select',
+          Options: [
+            { Id: 1, Name: 'test' }
+          ],
+          width: 200,
+          min: 150,
+          max: 150
+        }, {
+          text: 'Cr 4',
+          name: 'Total',
+          Type: 'select',
+          Options: [
+            { Id: 1, Name: 'test' }
+          ],
+          width: 200,
+          min: 150,
+          max: 150
+        }, {
+          text: 'Cr',
+          name: 'Total',
+          Type: 'select',
+          Options: [
+            { Id: 1, Name: 'test' }
+          ],
+          width: 200,
+          min: 150,
+          max: 150
+        }, {
+          text: 'Cr',
+          name: 'Total',
+          Type: 'select',
+          Options: [
+            { Id: 1, Name: 'test' }
+          ],
+          width: 200,
+          min: 150,
           max: 150
         }, {
           text: 'Cr',
@@ -115,6 +183,11 @@ storiesOf('Common', module)
         }]
       }
     },
+    methods: {
+      onAdd() {
+        console.info('add')
+      }
+    },
     template: `<div>
       <p>You need wrap whole application with this tag</p>
 
@@ -131,7 +204,9 @@ storiesOf('Common', module)
 
       <h3>Example</h3>
 
-      <itf-table2 :columns="columns" :rows="list">
+      <itf-table2
+        group-by="text"
+        :columns.sync="columns" :rows="list" column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
         <template #column.Account="{ item }">
           {{item.text}}
         </template>