@itfin/components 1.3.66 → 1.3.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.66",
+  "version": "1.3.68",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/table/Table2.vue

@@ -39,6 +39,7 @@
             :striped="striped"
             :expanded-ids="expandedIds"
             :css-property="cssProperty"
+            :editable-property="editableProperty"
             :sorting.sync="_sorting"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
@@ -86,6 +87,7 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
+  @Prop({ type: String, default: null }) editableProperty;
   @Prop({ default: 45 }) indicatorWidth;
   @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
   @Prop({ type: String, default: null }) stateName; // save state to storage

package/src/components/table/TableBody.vue

@@ -17,6 +17,7 @@
       :striped="striped"
       :expanded-all="expandedAll"
       :css-property="cssProperty"
+      :editable-property="editableProperty"
       @update:expanded-ids="$emit('update:expanded-ids', $event)"
       @row-click="$emit('row-click', $event)"
       @update="$emit('update', $event)"
@@ -186,6 +187,7 @@ class itfTableBody extends Vue {
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
+  @Prop() editableProperty;
   @Prop() selectedIds;
   @Prop() currency;
   @Prop() currencies;

package/src/components/table/TableGroup.vue

@@ -71,6 +71,7 @@
             :show-add-column="showAddColumn"
             :expanded-ids="expandedIds"
             :css-property="cssProperty"
+            :editable-property="editableProperty"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
           >
             <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -99,14 +100,14 @@
         <div v-if="isShowTable && showSummary" class="table-row-template d-flex align-items-stretch table-summary" :class="{'table-summary-persist': persistSummary}">
           <div class="shadow-area"></div>
 
-          <div class="table-summary-columns d-flex tw-flex-row align-items-center">
+          <div class="table-summary-columns d-flex tw-flex-row align-items-center w-100 flex-grow-1">
             <span
               v-for="(column, n) in visibleColumns"
               v-if="column.visible !== false"
               :key="n"
               :data-column="n"
-              class="position-relative line-overflow"
-              :style="`width: ${column.width}px; max-width: ${column.width}px;`">
+              class="position-relative line-overflow px-1"
+              :style="column.grow ? `min-width: ${column.minWidth}px; flex-grow: 1;` : `width: ${column.width}px; max-width: ${column.width}px;`">
               <itf-dropdown append-to-context text right @open="persistSummary = true" @close="persistSummary = false" autoclose="outside">
                 <template #button>
                   <span data-test="summary-column" class="invisible-summary d-flex align-items-center justify-content-end flex-auto">
@@ -114,7 +115,7 @@
                       {{$t('components.table.calculate')}}
                       <itf-icon name="chevron_down" />
                     </span>
-                    <span v-else>
+                    <span v-else class="text-truncate">
                       <span class="summary-text text-uppercase pe-2">{{getCalculateMethodTitle(column.calculate)}}</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>
@@ -344,6 +345,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop() editableProperty;
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
   @Prop() indicatorWidth;

package/src/components/table/TableHeader.vue

@@ -279,7 +279,7 @@ class itfTableHeader extends Vue {
         let newWidth;
         const mouseMoveHandler = (event) => {
           const delta = event.pageX - startX;
-          newWidth = Math.max(columnWidth + delta, 100);
+          newWidth = Math.max(columnWidth + delta, 50);
           columns.forEach((column) => {
             if (!this.sortedColumns[index].grow) {
               column.style.width = `${newWidth}px`;

package/src/components/table/TableRows.vue

@@ -54,9 +54,10 @@
                 :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="table-view-item-value d-flex h-100">
                 <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">
+                  <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-hours-field
                         class="w-100"
                         placeholder="00h 00m"
@@ -103,6 +104,8 @@
           :expanded-ids="expandedIds"
           :expanded-all="expandedAll"
           :css-property="cssProperty"
+          :editable-property="editableProperty"
+          @update="$emit('update', $event)"
           @toggle="$emit('toggle', $event)"
         >
           <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -153,6 +156,7 @@ class itfTableRows extends Vue {
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
+  @Prop() editableProperty;
   @Prop() selectedIds;
   @Prop() expandedIds;
   @Prop() currency;
@@ -180,6 +184,7 @@ class itfTableRows extends Vue {
       this.$emit('update', {
         index,
         item,
+        inputValue: value,
         value: newItem,
         column
       });