@itfin/components 1.3.42 → 1.3.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.42",
+  "version": "1.3.43",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -38,6 +38,7 @@
     "@popperjs/core": "^2.11.8",
     "@shopify/draggable": "^1.0.0-beta.8",
     "@vue/composition-api": "^1.7.1",
+    "@vue/vue2-jest": "^27.0.0",
     "@vue/web-component-wrapper": "^1.3.0",
     "air-datepicker": "^3.3.5",
     "bootstrap": "^5.3.x",
@@ -56,7 +57,6 @@
     "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
-    "@vue/cli-service": "^5.0.1",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
@@ -67,6 +67,7 @@
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.1",
     "@vue/eslint-config-airbnb": "^7.0.0",
     "@vue/test-utils": "^1.1.1",
     "babel-eslint": "^10.1.0",

package/src/components/table/Table2.vue

@@ -132,6 +132,11 @@ class itfTable2 extends Vue {
   }
 
   mounted() {
+    this.onSchemaUpdate();
+  }
+
+  @Watch('schema')
+  onSchemaUpdate() {
     this.state = this.getTableState();
     this.selectedIds = this.state.selectedIds;
   }

package/src/components/table/TableBody.vue

@@ -38,7 +38,7 @@
               :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
               :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
               class="table-view-item-value d-flex h-100">
-              <slot :name="`column.${column.property}`" :item="item" :column="column">
+              <slot :name="`column.${column.property}`" :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">
                   <slot :name="`edit.${column.type}`" :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)" />
@@ -49,11 +49,12 @@
                       :hours="getValue(item, column)"
                       @update:hours="updateValue(item, $event, n, column)"
                     />
-                    <itf-textarea class="w-100" :rows="2" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="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'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
                   </slot>
                 </template>
-                <div v-else>
+                <div v-else class="h-100 align-items-center d-flex w-100">
                   <slot :name="`format.${column.type}`" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
                     {{getValue(item, column)}}
                   </slot>
@@ -76,15 +77,21 @@
         <div class="shadow-area"></div>
         <div class="indicator sticky"></div>
         <div class="table-item-inner">
-          <div class="table-view-item-value w-100 align-items-center p-3">
+          <div class="table-view-item-value w-100 align-items-center p-3 no-results">
             {{$t('components.table.noResults')}}
           </div>
+          <div class="boundary right"></div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <style lang="scss">
+.no-results {
+  text-align: center;
+  margin-left: -22px;
+  justify-content: center;
+}
 .table-row-template {
   display: flex;
   height: 100%;
@@ -97,6 +104,12 @@
   flex-direction: row;
 }
 
+.scroller > .table-view-item:last-child {
+  .table-item-inner, .indicator {
+    border-bottom: 1px solid var(--itf-table-border-color);
+  }
+}
+
 .table-item-inner .extra {
   flex-grow: 1;
   border-color: var(--bs-border-color);
@@ -203,6 +216,7 @@ import itfTextField from '../text-field/TextField.vue';
 import itfMoneyField from '../text-field/MoneyField.vue';
 import itfTextarea from '../text-field/Textarea.vue';
 import itfHoursField from '../text-field/HoursField.vue';
+import itfSelect from '../select/Select.vue';
 // import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
@@ -213,6 +227,7 @@ export default @Component({
     itfHoursField,
     itfTextarea,
     itfTextField,
+    itfSelect,
     // RecycleScroller
   }
 })

package/src/components/table/TableGroup.vue

@@ -105,7 +105,9 @@
                     </span>
                     <span v-else>
                       <span class="summary-text text-uppercase pe-2">{{getCalculateMethodTitle(column.calculate)}}</span>
-                      <span>{{getCalculateMethodValue(column.calculate, column)}}</span>
+                      <slot :name="`summary.${column.property}`" :value="getCalculateMethodValue(column.calculate, column)" :raw="!column.calculate.includes('count') && !column.calculate.includes('percent')">
+                        <span>{{getCalculateMethodValue(column.calculate, column)}}</span>
+                      </slot>
                     </span>
                   </span>
                 </template>
@@ -290,7 +292,7 @@
 import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
 import uniq from "lodash/uniq";
-import round from "lodash/round";
+import { round } from "../../helpers/formatters";
 import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfButton from '../button/Button.vue';
@@ -350,6 +352,7 @@ class itfTableGroup extends Vue {
       item.lastPinned = index === pinned.length - 1;
       return item
     });
+    console.info(list);
     return list;
   }
 

package/src/helpers/formatters.js

@@ -14,11 +14,11 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
     return isNegative * Math.round(parseFloat(source.replace(',', '.')) * MINUTES_IN_HOUR * SECONDS_IN_MINUTE);
   }
 
-  const match = source.match(/^((\d+)d)?\s*((\d+)h)?\s*((\d+)m)?$/);
+  const match = source.match(/^((\d+)d)?\s*((\d+)h)?\s*((\d+)m)?\s*((\d+)s)?$/);
   if (!match) {
     return false;
   }
-  const [,, days,, hours,, minutes] = match;
+  const [,, days,, hours,, minutes,,secs] = match;
 
   let seconds = 0;
   if (days) {
@@ -30,6 +30,9 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
   if (minutes) {
     seconds += Number(minutes) * SECONDS_IN_MINUTE;
   }
+  if (secs) {
+    seconds += Number(secs);
+  }
   return isNegative * seconds;
 }
 

package/src/helpers/formatters.spec.js

@@ -0,0 +1,17 @@
+import {
+  parseHours
+} from './formatters';
+
+describe('Formatters', () => {
+  const $t = (str) => str;
+
+  test('parseHours', () => {
+    expect(parseHours('10s')).toEqual(10);
+    expect(parseHours('12h')).toEqual(12 * 60 * 60);
+    expect(parseHours('10m')).toEqual(10 * 60);
+    expect(parseHours('12h 10m')).toEqual(12 * 60 * 60 + 10 * 60);
+    expect(parseHours('12h 10s')).toEqual(12 * 60 * 60 + 10);
+    expect(parseHours('12h 10m 10s')).toEqual(12 * 60 * 60 + 10 * 60 + 10);
+    expect(parseHours('1d 12h 10m 10s')).toEqual(8 * 60 * 60 + 12 * 60 * 60 + 10 * 60 + 10);
+  });
+});