@itfin/components 1.2.104 → 1.2.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.104",
+  "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/BoardCard.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="itf-board-card shadow-sm">
+  <div class="itf-board-card shadow-sm" @click="$emit('click')" tabindex="0">
     <slot name="header"></slot>
 
-    <div class="itf-board-card-inner d-flex" @click="$emit('click')">
+    <div class="itf-board-card-inner d-flex">
       <div class="flex-grow-1 itf-board-card-inner-content">
         <slot>{{text}}</slot>
       </div>
-      <div>
-        <itf-button icon small>
+      <div v-if="dropdown">
+        <itf-button icon small @click.prevent.stop="">
           <itf-icon name="menu_horizontal" />
         </itf-button>
       </div>
     </div>
 
-    <div class="itf-board-card-footer d-flex">
+    <div class="itf-board-card-footer pt-1 d-flex">
       <slot name="footer"></slot>
     </div>
   </div>
@@ -39,5 +39,6 @@ export default @Component({
 })
 class BoardColumn extends Vue {
   @Prop() text;
+  @Prop(Boolean) dropdown;
 }
 </script>

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>

package/src/components/kanban/styles.scss

@@ -1,15 +1,16 @@
 :root {
-  --itf-board-column-hover-color: #f5f9fe;
+  --itf-board-column-hover-color: rgba(0, 0, 0, .05);
   --itf-board-column-width: 300px;
   --itf-board-placeholder-color: #47BEFF;
   --itf-board-placeholder-border-color: #0567eb;
   --itf-board-placeholder-bg-color: #ebeffe;
   --itf-board-card-bg-color: #fff;
+  --itf-board-card-hover-color: rgba(0, 0, 0, .05);
   --itf-board-card-border-color: #ccc;
 }
 
 [data-theme="dark"] {
-  --itf-board-column-hover-color: #494646;
+  --itf-board-column-hover-color: rgba(255, 255, 255, .05);
   --itf-board-placeholder-color: #FFCC00;
   --itf-board-placeholder-border-color: #FFCC00;
   --itf-board-placeholder-bg-color: #383b41;
@@ -214,6 +215,11 @@
   overflow: hidden;
   user-select: none;
   padding: .5rem;
+  cursor: pointer;
+
+  &:hover, &:focus {
+    background-color: var(--itf-board-card-hover-bg-color);
+  }
 
   .itf-board-card-inner {
     font-size: .875rem;