@itfin/components 1.3.100 → 1.4.0

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>`,
-  }));