@itfin/components 1.2.105 → 1.2.106

package/package.json

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

package/src/components/customize/PropertiesEditMenu.vue

@@ -140,6 +140,7 @@ class PropertiesEditMenu extends Vue {
   }
 
   addNewOption() {
+    this.newOption = '';
     this.isNewOptionVisible = true;
     this.$nextTick(() => {
       this.$refs.newOptionInput.focus();

package/src/components/kanban/Board.vue

@@ -40,8 +40,8 @@
         </div>
       </div>
       <div class="align-items-end d-flex pb-1">
-        <slot name="add-column" @click="$emit('addColumn')">
-          <itf-button icon small>
+        <slot name="add-column">
+          <itf-button icon small @click="$emit('add-сolumn')">
             <itf-icon name="plus" />
           </itf-button>
         </slot>

package/src/components/kanban/BoardColumn.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="itf-board-column-wrapper">
-    <itf-button v-if="showAddButton" block small class="text-muted">
+    <div v-if="isNewOptionVisible">
+      <itf-text-field
+        style="margin: -4px 0"
+        ref="newOptionInput"
+        v-model="newOption"
+        :placeholder="newItemPlaceholder"
+        @blur="onBlurOption"
+        @keydown.enter="submitNewOption"
+      />
+    </div>
+    <itf-button v-else-if="showAddButton" :loading="loading" block small class="text-muted" @click="addNewOption">
       <itf-icon name="plus" />
-
-      Add entry
+      {{ newItemText }}
     </itf-button>
 
     <div class="itf-board-cards-wrapper" ref="container">
@@ -43,6 +52,7 @@ import itfButton from '../button/Button';
 import loading from '../../directives/loading';
 import itfForm from '../form/Form';
 import itfEditButton from '../editable/EditButton';
+import itfTextField from '../text-field/TextField.vue';
 import createDraggable from '../sortable/draggable';
 
 const { Node, ...draggableDirectives } = createDraggable({
@@ -59,6 +69,7 @@ const { Node, ...draggableDirectives } = createDraggable({
 
 export default @Component({
   components: {
+    itfTextField,
     itfIcon,
     itfForm,
     itfEditButton,
@@ -77,6 +88,12 @@ class BoardColumn extends Vue {
   @Prop(Array) items;
   @Prop(Boolean) showAddButton;
   @Prop(Boolean) cardSorting;
+  @Prop(Boolean) loading;
+  @Prop({ type: String, default: 'Add new task' }) newItemText;
+  @Prop({ type: String, default: 'Type a new task...' }) newItemPlaceholder;
+
+  isNewOptionVisible = false;
+  newOption = '';
 
   beforeDestroy() {
     if (this.cardSorting) {
@@ -107,5 +124,26 @@ class BoardColumn extends Vue {
       }
     });
   }
+
+  onBlurOption() {
+    this.isNewOptionVisible = false;
+  }
+
+  addNewOption() {
+    this.newOption = '';
+    this.isNewOptionVisible = true;
+    this.$nextTick(() => {
+      this.$refs.newOptionInput.focus();
+    });
+  }
+
+  submitNewOption() {
+    const newOption = this.newOption;
+    if (newOption) {
+      this.$emit('create', newOption);
+      this.newOption = '';
+      this.isNewOptionVisible = false;
+    }
+  }
 }
 </script>