@itfin/components 1.3.96 → 2.0.2

package/src/components/table/TableGroup.vue

@@ -17,10 +17,10 @@
               <div class="shadow-area"></div>
               <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
                 <a class="header-content position-sticky d-flex align-items-center">
-                  <span class="collapse-arrow">
+                  <itf-button squircle icon small secondary class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
-                  </span>
-                  <span class="d-flex align-items-center line-overflow group-header-value"
+                  </itf-button>
+                  <span class="d-flex align-items-center line-overflow group-header-value text-primary"
                         data-test="group-value-group-label-value">
                     <slot name="group-title" :rows="rows" :title="title">{{ title }}</slot>
                   </span>
@@ -49,6 +49,7 @@
             :sorting.sync="_sorting"
             @update:selectedIds="$emit('update:selectedIds', $event)"
             @update:columns="$emit('update:columns', $event)"
+            @filter="$emit('filter', $event)"
             @add-column="$emit('add-column', $event)"
           />
         </div>
@@ -153,7 +154,7 @@
 
   &.no-indicator {
     .shadow-area + .table-view-header-value, .table-item-inner {
-      border-left: 1px solid var(--itf-table-border-color);
+      border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-color);
     }
   }
 
@@ -229,7 +230,7 @@
       border-radius: 0;
     }
     &:hover {
-      background: var(--itf-table-hover-bg);
+      //background: var(--itf-table-hover-bg); // видно, що група не на всю ширину коли є нижній скролінг
     }
   }
 
@@ -238,7 +239,7 @@
   }
   .header-content:not(.draggable-mirror *) {
     left: var(--shadow-area-width);
-    padding-left: 0.75rem;
+    //padding-left: 0.75rem;
     padding-right: 0.75rem;
     gap: 1rem;
     align-items: center;
@@ -263,15 +264,18 @@
   }
 
   .table-add-new-item {
-    border-right: 1px solid var(--itf-table-border-color);
-    border-bottom: 1px solid var(--itf-table-border-color);
+    border-right:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+    border-left:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+    border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
     outline: none;
+    border-bottom-left-radius: var(--itf-table-table-border-radius);
+    border-bottom-right-radius: var(--itf-table-table-border-radius);
 
     & > span {
       left: var(--shadow-area-width);
       position: sticky;
       padding-left: var(--shadow-area-width);
-      border-left: 1px solid var(--itf-table-border-color);
+      //border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
       height: 100%;
     }
     &:hover, &:active {
@@ -280,9 +284,20 @@
   }
 
   .sticky-group {
+    top: -10px;
     position: sticky;
-    top: 0;
     z-index: 10;
+
+    & > .draggable-item {
+      margin-bottom: 8px;
+    }
+    .collapse-arrow {
+      padding: 0;
+
+      &:after {
+        display: none;
+      }
+    }
   }
   .table-summary {
     .shadow-area {

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')"
@@ -86,43 +143,6 @@
         </div>
       </template>
       <div class="table-view-item-value extra flex-grow-1"></div>
-      <itf-dropdown v-if="showAddColumn && visibleHeader" ref="newDd" text append-to-context shadow autoclose="outside" class="table-header-add-column table-view-item-actions" data-test="table-header-add-column">
-          <template #button>
-            <itf-button icon small><span class="nom-gear"></span></itf-button>
-          </template>
-
-          <itf-sortable :value="sortedColumns" @input="onSortColumns">
-            <template v-for="(column, k) in sortedColumns">
-              <div :key="`column${k}`" class="d-flex align-items-center justify-content-between" :class="{'px-2 py-1': column.visible !== false}">
-                <template v-if="column.visible !== false">
-                  <div class="d-flex justify-content-between flex-grow-1">
-                    <div>
-                      <span class="nom-grip-vertical"></span>
-                      <span v-if="column.icon" :class="column.icon"></span>
-                      {{getTitle(column.title)}}
-                    </div>
-                    <span v-if="column.pinned" class="nom-pin-fill"></span>
-                  </div>
-                  <a sortable-skip href="" class="text-decoration-none" @click.prevent="hideColumn(k)">
-                    <span class="nom-trash"></span>
-                  </a>
-                </template>
-              </div>
-            </template>
-          </itf-sortable>
-
-          <div v-if="invisibleColumns.length">
-            <div class="dropdown-header">{{$t('components.table.addColumn')}}</div>
-            <template v-for="(column, k) in invisibleColumns">
-              <a href="" @click.prevent="addColumn(column)" :key="`inv-column${k}`" class="dropdown-item d-flex align-items-center justify-content-between px-2 py-1">
-                <div>
-                  <span class="nom-plus"></span>
-                  {{getTitle(column.title)}}
-                </div>
-              </a>
-            </template>
-          </div>
-        </itf-dropdown>
 
       <div class="boundary top"></div>
       <div class="boundary right"></div>
@@ -238,6 +258,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,23 +51,24 @@
                 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">
-                      <itf-text-field class="w-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                      <itf-text-field class="w-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                       <itf-hours-field
-                        class="w-100"
+                        class="w-100 h-100"
                         placeholder="00h 00m"
                         v-else-if="column.type === 'time'"
                         :hours="getValue(item, column)"
                         @update:hours="updateValue(item, $event, n, column)"
                       />
-                      <itf-textarea class="w-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                      <itf-money-field class="w-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                      <itf-select class="w-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
+                      <itf-textarea class="w-100 h-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-money-field class="w-100 h-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-select class="w-100 h-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
                     </slot>
                   </template>
                   <div v-else class="h-100 align-items-center d-flex w-100">
@@ -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>`,
-  }));