@itfin/components 1.3.67 → 1.3.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.67",
+  "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">
@@ -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/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
       });