@itfin/components 1.3.96 → 2.0.1

package/src/components/table/TableHeader.vue

@@ -15,7 +15,7 @@
           data-test="table-header-column"
           :data-column="n"
           :data-id="column.Id"
-          :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow, [`justify-content-${column.align || 'start'}`]: true}"
+          :class="{'sticky': column.pinned, 'active': sortColumnParams[column.property], 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow, [`justify-content-${column.align || 'start'}`]: true}"
           class="table-view-header-value"
           :style="column.grow ? `left: ${column.left}px; flex-grow: 1` : `width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`">
           <!-- Не треба видаляти колонки, бо вони потрібні для збереження ширини -->
@@ -29,30 +29,22 @@
           <div v-if="visibleHeader" 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" :disabled="noColumnMenu">
               <template #button>
-                <span class="itf-table2__header-title text-truncate" :title="getTitle(column.title)" :class="{'ms-auto': column.align === 'end'}">
-                  <span v-if="column.icon" :class="column.icon"></span>
-                  {{getTitle(column.title)}}
-                  <div v-if="column.prefix" class="itf-table2__subtitle" v-text="column.prefix" />
-                </span>
-                <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'arrow_up' : 'arrow_down'" :size="16" class="ms-1" />
+                <div class="itf-table2__header-title d-flex w-100 align-items-start" :title="getTitle(column.title)" :class="{'ms-auto': column.align === 'end'}">
+                  <itf-icon class="itf-table2__header-icon" new v-if="column.icon" :name="column.icon"></itf-icon>
+                  <div class="flex-grow-1 w-100 itf-table2__title-container">
+                    <div class="itf-table2__title text-truncate">{{getTitle(column.title)}}</div>
+                    <div v-if="column.prefix" class="itf-table2__subtitle text-truncate" v-text="column.prefix" />
+                  </div>
+                </div>
+                <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'sort-asc' : 'sort-desc'" new :size="20" class="ms-1" />
               </template>
-
-              <div v-if="column.sortable">
-                <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:;" @click="sortBy(column, 'desc')">
-                  <itf-icon name="arrow_down" :size="16" class="me-1" />
-                  {{$t('components.table.sortDescending')}}
-                </a>
+              <div class="dropdown-header">
+                {{$t('components.table.actions')}}
               </div>
+
               <div v-if="column.groupable">
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
                   <itf-icon name="episodes" :size="16" class="me-1" />
@@ -60,19 +52,84 @@
                 </a>
               </div>
               <div>
-                <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" />
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="togglePinned(n)">
+                  <itf-icon v-if="column.pinned" name="pin" new />
+                  <itf-icon v-else name="pin" new />
+
                   <span v-if="column.pinned">{{$t('components.table.unfreezeColumn')}}</span>
                   <span v-else>{{$t('components.table.freezeColumn')}}</span>
                 </a>
               </div>
               <div v-if="showAddColumn">
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
-                  <itf-icon name="eye_no" :size="16" class="me-1" />
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="hideColumn(n)">
+                  <itf-icon name="hide" new />
+
                   {{$t('components.table.hideColumn')}}
                 </a>
               </div>
+              <div v-if="column.filtrable">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="$emit('filter', column)">
+                  <itf-icon name="filter" new />
+
+                  {{$t('components.table.filter')}}
+                </a>
+              </div>
+              <div v-if="canMoveColumn(1, column)">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="moveColumn(1, column)">
+                  <itf-icon name="move-right" new />
+
+                  {{$t('components.table.moveRight')}}
+                </a>
+              </div>
+
+              <div v-if="canMoveColumn(-1, column)">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="moveColumn(-1, column)">
+                  <itf-icon name="move-left" new />
+
+                  {{$t('components.table.moveLeft')}}
+                </a>
+              </div>
+
+              <template v-if="column.sortable">
+                <div class="dropdown-header">
+                  {{$t('components.table.sorting')}}
+                </div>
+                <div>
+                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="sortBy(column, 'asc')">
+                    <itf-icon name="sort-asc" new />
+                    {{$t('components.table.sortAscending')}}
+                  </a>
+                </div>
+                <div>
+                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="sortBy(column, 'desc')">
+                    <itf-icon name="sort-desc" new />
+                    {{$t('components.table.sortDescending')}}
+                  </a>
+                </div>
+              </template>
             </itf-dropdown>
+            <div v-if="columnSorting" v-drag-handle class="itf-table2__drag-column">
+              <svg width="35" height="23" viewBox="0 0 35 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g filter="url(#filter0_d_1081_25763)">
+                  <rect x="4" y="2" width="27" height="15" rx="4" fill="#1A4A97"/>
+                  <circle cx="23.5" cy="9.5" r="1.5" fill="white"/>
+                  <circle cx="17.5" cy="9.5" r="1.5" fill="white"/>
+                  <circle cx="11.5" cy="9.5" r="1.5" fill="white"/>
+                </g>
+                <defs>
+                  <filter id="filter0_d_1081_25763" x="0" y="0" width="35" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                    <feOffset dy="2"/>
+                    <feGaussianBlur stdDeviation="2"/>
+                    <feComposite in2="hardAlpha" operator="out"/>
+                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1081_25763"/>
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1081_25763" result="shape"/>
+                  </filter>
+                </defs>
+              </svg>
+            </div>
           </div>
           <div v-if="visibleHeader && n === sortedColumns.length - 1"
                @enter="columnHighlightLast('enter')"
@@ -238,6 +295,26 @@ class itfTableHeader extends Vue {
     return this.sortedColumns.findIndex((column) => column.lastPinned);
   }
 
+  canMoveColumn(direction, column) {
+    if (!this.columnSorting) {
+      return false;
+    }
+    const index = this.sortedColumns.findIndex((c) => c === column);
+    return (index + direction >= 0 && index + direction < this.sortedColumns.length);
+  }
+
+  moveColumn(direction, column) {
+    const index = this.sortedColumns.findIndex((c) => c === column);
+    const newIndex = index + direction;
+    if (newIndex < 0 || newIndex >= this.sortedColumns.length) {
+      return;
+    }
+    const newValue = [...this.sortedColumns];
+    newValue.splice(index, 1);
+    newValue.splice(newIndex, 0, column);
+    this.$emit('update:columns', newValue);
+  }
+
   reorderColumns({ detail }) {
     const { index: fromIndex } = detail.draggablePayload;
     const { index: toIndex, last } = detail.dropzonePayload;

package/src/components/table/TableRows.vue

@@ -51,8 +51,9 @@
                 v-if="column.visible !== false"
                 :data-column="k"
                 :style="column.grow ? `left: ${column.left}px; flex-grow: 1` : `width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-                :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="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
+                <div class="table-view-item-value-content" :class="{'px-2': !(column.editable && editable)}">
                 <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 && (!editableProperty || item[editableProperty])">
                     <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
@@ -76,6 +77,7 @@
                     </slot>
                   </div>
                 </slot>
+                </div>
               </div>
             </template>
             <div class="table-view-item-value extra"></div>

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

@@ -2,8 +2,7 @@ import { storiesOf } from '@storybook/vue';
 import ITFSettings from '../../ITFSettings';
 import itfApp from '../app/App.vue';
 import itfButton from '../button/Button.vue';
-import itfTable from './Table.vue';
-import itfTable2 from './Table2.vue';
+import itfTable from './Table2.vue';
 import itfSelect from '../select/Select.vue';
 
 const exampleData = [{
@@ -79,15 +78,16 @@ ITFSettings.currencies = [
 ];
 
 storiesOf('Common', module)
-  .add('Simple Table', () => ({
+  .add('Table', () => ({
     components: {
-      itfTable,
       itfButton,
-      itfTable2,
+      itfTable,
       itfSelect
     },
     data() {
       return {
+        selectedIds: [],
+        sorting: 'Description',
         list: Array.from({length: 20}).map((_, i) => ({
           Id: i,
           text: `Рахунок ✅`,
@@ -140,7 +140,9 @@ storiesOf('Common', module)
               "title": { "en_US": "Description", "uk_UA": "Прізвище" },
               "type": "text",
               "editable": true,
-              "sortable": false,
+              "sortable": true,
+              "filtrable": true,
+              icon: 'money',
               width: 200,
               minWidth: 100,
               maxWidth: 300
@@ -153,7 +155,7 @@ storiesOf('Common', module)
               "copy": true,
               "editable": true,
               "sortable": false,
-              icon: 'nom-person',
+              icon: 'card',
               width: 200,
               minWidth: 100,
               maxWidth: 300
@@ -164,6 +166,7 @@ storiesOf('Common', module)
               "type": "money",
               "editable": true,
               "sortable": false,
+              icon: 'calendar',
               width: 200,
               minWidth: 100,
               maxWidth: 300
@@ -174,6 +177,7 @@ storiesOf('Common', module)
               "type": "time",
               "editable": true,
               "sortable": false,
+              icon: 'person',
               width: 200,
               minWidth: 100,
               maxWidth: 300
@@ -182,6 +186,7 @@ storiesOf('Common', module)
               "property": "Amount",
               "title": { "en_US": "Amount", "uk_UA": "Прізвище" },
               "type": "money",
+              icon: 'text',
               "sortable": false,
               width: 200,
               minWidth: 100,
@@ -327,13 +332,18 @@ storiesOf('Common', module)
         }
       </pre>
       <h3>Example</h3>
-      <itf-table2
+
+      <itf-table
         add-new-rows
+        striped
         @new="onAdd"
         state-name="test"
         :schema="schema"
         :columns.sync="columns2" :rows="list2"
+        v-model="selectedIds"
         show-summary
+        id-property="Id"
+        :sorting.sync="sorting"
         column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
         <template #format.employee="{ item }">
           {{item.EmployeeId}}
@@ -346,14 +356,15 @@ storiesOf('Common', module)
             :get-option-label="item => item.Name"
             :options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
         </template>
-      </itf-table2>
+      </itf-table>
 
-      <itf-table2
+      <itf-table
         editable
         add-new-rows
         @new="onAdd"
         state-name="test"
         :schema="schema"
+        v-model="selectedIds"
         :columns.sync="columns2" :rows="list2"
         show-summary
         column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
@@ -368,7 +379,7 @@ storiesOf('Common', module)
             :get-option-label="item => item.Name"
             :options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
         </template>
-      </itf-table2>
+      </itf-table>
 
       <br />
       <br />
@@ -396,192 +407,3 @@ storiesOf('Common', module)
 
     </div>`,
   }))
-
-  .add('Table', () => ({
-    components: {
-      itfApp,
-      itfTable,
-      itfButton
-    },
-    data() {
-      return {
-        from: '2021-01-16',
-        to: null,
-        dates: [],
-        customDays: {
-          '2021-10-21': { text: '🎉', class: 'test' }
-        },
-
-        sorting: {},
-        columns: [{
-          text: 'Employee',
-          name: 'Employee',
-          min: 250,
-          max: 250
-        }, {
-          text: 'Total',
-          name: 'Total',
-          min: 150,
-          max: 150
-        }, {
-          text: 'FTE',
-          name: 'FTE',
-          min: 100,
-          max: 100
-        }, {
-          text: 'Position',
-          name: 'Position',
-          min: 200,
-          max: 200
-        }, {
-          text: 'Office',
-          name: 'Office',
-          min: 150,
-          max: 150
-        }, {
-          text: 'Internal',
-          name: 'MinutesInternal',
-          min: 150,
-          max: 150,
-          sortable: true
-        }, {
-          text: 'External',
-          name: 'MinutesExternal',
-          min: 150,
-          max: 150,
-          sortable: true
-        }, {
-          text: 'Compensation (Internal)',
-          name: 'AmountInternal',
-          min: 200,
-          max: 200
-        }, {
-          text: 'Compensation (External)',
-          name: 'AmountExternal',
-          min: 150,
-          max: 150
-        }, {
-          text: 'Bonus/Commission',
-          name: 'AmountShare',
-          min: 150,
-          max: 150
-        }, {
-          text: 'Actions',
-          name: 'Notes',
-          min: 80,
-          max: 80
-        }],
-        list2: [
-          {
-            summary: true,
-            Employee: 'Total asda das dasd ada dad adaddas',
-            Total: 100,
-            FTE: 1.0,
-            Position: 'Developer',
-            MinutesInternal: '10h 20m',
-            MinutesExternal: '10h 20m',
-            AmountInternal: 1000,
-            AmountExternal: 2000,
-            AmountShare: 200,
-            Notes: 'Test'
-          }
-        ],
-        list: [
-          {
-            summary: true,
-            Employee: 'Total',
-            Total: 100,
-            FTE: 1.0,
-            Position: 'Developer',
-            MinutesInternal: '10h 20m',
-            MinutesExternal: '10h 20m',
-            AmountInternal: 1000,
-            AmountExternal: 2000,
-            AmountShare: 200,
-            Notes: 'Test'
-          },
-          ...exampleData,
-          {
-            summary: true,
-            Employee: 'Subtotal',
-            Total: 100,
-            FTE: 1.0,
-            Position: 'Developer',
-            MinutesInternal: '10h 20m',
-            MinutesExternal: '10h 20m',
-            AmountInternal: 1000,
-            AmountExternal: 2000,
-            AmountShare: 200,
-            Notes: 'Test'
-          },
-          ...exampleData,
-          {
-            summary: true,
-            Employee: 'Subtotal',
-            Total: 100,
-            FTE: 1.0,
-            Position: 'Developer',
-            MinutesInternal: '10h 20m',
-            MinutesExternal: '10h 20m',
-            AmountInternal: 1000,
-            AmountExternal: 2000,
-            AmountShare: 200,
-            Notes: 'Test'
-          },
-          ...exampleData
-        ]
-      }
-    },
-    methods: {
-      submit() {
-        this.$refs.form.doValidation();
-      },
-      reset() {
-        this.$refs.form.resetValidation();
-      }
-    },
-    template: `<div>
-      <p>You need wrap whole application with this tag</p>
-
-      <h2>Usage</h2>
-
-  <pre>
-
-    &lt;itf-datepicker>&lt;/itf-datepicker>
-
-    &lt;button @click="$showSuccess('Success')">Show success&lt;/button>
-    &lt;button @click="$showError('Error')">Show error&lt;/button>
-    &lt;button @click="$try(() => { throw new Error('Invalid function'); })">Try function with error&lt;/button>
-  </pre>
-
-      <h2>With Scroll</h2>
-
-      {{sorting}}
-
-      <itf-button secondary>
-        <svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 5)"><path d="m8.5 11c3.1296136 0 5.9629469-1.83333333 8.5-5.5-2.5370531-3.66666667-5.3703864-5.5-8.5-5.5-3.12961358 0-5.96294692 1.83333333-8.5 5.5 2.53705308 3.66666667 5.37038642 5.5 8.5 5.5z"/><path d="m8.5 2c.18463928 0 .36593924.01429736.54285316.04184538-.02850842.148891-.04285316.30184762-.04285316.45815462 0 1.38071187 1.1192881 2.5 2.5 2.5.156307 0 .3092636-.01434474.4576252-.04178957.0280774.17585033.0423748.35715029.0423748.54178957 0 1.93299662-1.5670034 3.5-3.5 3.5-1.93299662 0-3.5-1.56700338-3.5-3.5s1.56700338-3.5 3.5-3.5z"/></g></svg>
-        Export
-      </itf-button>
-
-      <itf-table
-        small
-        :sorting.sync="sorting"
-        sticky-header
-        sticky-column
-        sticky-last-column
-        :columns="columns"
-        :rows="list"
-        hoverable
-        striped
-      >
-        <template #column.Employee="{ item }">
-          {{item.Employee}}
-        </template>
-        <template #column.Total.summary="{ item }">
-          <strong>12</strong><br/>
-          <small>50% від загальної кількості</small>
-        </template>
-      </itf-table>
-
-    </div>`,
-  }));