@itfin/components 1.2.97 → 1.2.99

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,35 +233,80 @@
 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 createDraggable from '../sortable/draggable';
+import itfDropdown from '../dropdown/Dropdown.vue';
+
+const { Node, ...draggableDirectives } = createDraggable();
 
 export default @Component({
   name: 'itfTableHeader',
   components: {
+    itfDropdown,
     itfButton,
     itfIcon
+  },
+  directives: {
+    ...draggableDirectives
   }
 })
 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 +320,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 +339,15 @@ class itfTable extends Vue {
     });
   }
 
+  beforeDestroy() {
+    if (this.columnSorting) {
+      Node.removeContainer(this.$refs.container);
+    }
+  }
+
   mounted() {
     if (this.columnSorting) {
-      this.initDraggable();
+      Node.addContainer(this.$refs.container);
     }
     if (this.columnResizing) {
       this.initResizing();
@@ -232,7 +355,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/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>

package/src/locales/uk.js

@@ -56,4 +56,40 @@ module.exports = {
   addMore: 'Додати ще',
   close: 'Закрити',
   wholeYear: 'Весь рік',
+
+  select: {
+    loading: 'Завантаження...',
+    noOptions: 'Виберіть значення зі списку',
+  },
+  modal: {
+    delete: 'Видалити',
+    cancel: 'Відмінити',
+    save: 'Зберегти',
+    itemHasBeenSuccessfullySaved: 'Успішно збережено',
+    itemHasBeenSuccessfullyDeleted: 'Успішно видалено',
+    networkProblem: 'Проблеми з мережею. Перевірте підключення до Інтернету. Також проблема може виникнути через використання VPN.',
+    pleaseFixTheErrorsBelowToProceed: 'Щоб продовжити, виправте, будь ласка, помилки у формі.',
+  },
+  popover: {
+    noKeepIt: 'Ні, залишити',
+    yesDelete: 'Так, видалити',
+    areYouSureToDeleteThis: 'Ви впевнені, що хочете видалити це?',
+    confirmDelete: 'Підтвердження видалення',
+  },
+  customize: {
+    editProperty: 'Редагувати поле',
+    hideProperty: 'Видимість поля',
+    alwaysShow: 'Завжди показувати',
+    hideWhenEmpty: 'Приховувати, якщо порожнє',
+    alwaysHide: 'Завжди приховувати',
+    duplicateProperty: 'Дублювати поле',
+    deleteProperty: 'Видалити поле',
+    areYouSureYouWantToDeleteThisField: 'Ви впевнені, що хочете видалити це поле?',
+    customizePage: 'Налаштувати сторінку',
+    type: 'Тип',
+    options: 'Опції',
+    addOption: 'Додати опцію',
+    showMoreProperties: 'Ще {n} поле|Ще {n} полів',
+    hideMoreProperties: 'Приховати {n} поле|Приховати {n} полів',
+  }
 };