@itfin/components 1.2.134 → 1.2.136

package/package.json

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

package/src/assets/scss/components/_segmeneted-control.scss

@@ -96,6 +96,7 @@
     }
 
     input {
+      z-index: 2;
       position: absolute;
       top: 0;
       left: 0;

package/src/components/kanban/Board.vue

@@ -26,7 +26,10 @@
             @drop="reorderColumns"
             v-draggable="{ handle: true, payload: { index, column }, mirror: { yAxis:false } }"
             class="flex-grow-1 d-flex align-items-center itf-board-column__header justify-content-between">
-            <div><slot name="header" :column="column">{{ column[columnNameKey] }}</slot></div>
+            <div>
+              <slot name="columnMarkup" :column="column" />
+              <slot name="header" :column="column">{{ column[columnNameKey] }}</slot>
+            </div>
             <div class="text-muted me-1"><slot name="header-addon" :column="column" :items="groupedItems[column.Id]">{{ (groupedItems[column.Id] || []).length }}</slot></div>
           </div>
         </itf-edit-button>

package/src/components/kanban/BoardColumn.vue

@@ -2,7 +2,9 @@
   <div class="itf-board-column-wrapper">
     <div class="itf-board-cards-wrapper" ref="container" :class="{'empty-column': !items.length}">
       <template v-if="!items.length">
-        <slot name="empty"></slot>
+        <div class="empty-column-bg">
+          <slot name="empty"></slot>
+        </div>
       </template>
       <template v-else>
         <div v-for="(item, index) of items" :key="index" :data-card="index" :class="item.hidden ? 'd-none' : ''">

package/src/components/kanban/index.stories.js

@@ -51,6 +51,11 @@ storiesOf('Common', module)
         <itf-board class="flex-grow-1" :columns.sync="columns" :column-orders.sync="columnOrders" :items.sync="tasks" column-sorting @update:item="onItemUpdate">
           <template #column="{ column, items }">
             <itf-board-column :column="column" :items="items" card-sorting @update:columns="columns = $event">
+              <template #empty>
+                <div>
+                  Your ad can be here
+                </div>
+              </template>
               <template #item="{ item }">
                 <itf-board-card :text="item.Name">
                   <template #header>

package/src/components/kanban/styles.scss

@@ -1,6 +1,7 @@
 :root {
   --itf-board-column-hover-color: rgba(0, 0, 0, .05);
   --itf-board-column-width: 300px;
+  --itf-board-column-bg-color: #f4f5f7;
   --itf-board-placeholder-color: #47BEFF;
   --itf-board-placeholder-border-color: #0567eb;
   --itf-board-placeholder-bg-color: #ebeffe;
@@ -11,11 +12,12 @@
 
 [data-theme="dark"] {
   --itf-board-column-hover-color: rgba(255, 255, 255, .05);
+  --itf-board-column-bg-color: #2c2f33;
   --itf-board-placeholder-color: #FFCC00;
   --itf-board-placeholder-border-color: #FFCC00;
   --itf-board-placeholder-bg-color: #383b41;
-  --itf-board-card-bg-color: #313337;
-  --itf-board-card-border-color: #424448;
+  --itf-board-card-bg-color: #232529;
+  --itf-board-card-border-color: #393939;
 }
 
 .itf-board {
@@ -97,6 +99,22 @@
       left: -50px;
     }
   }
+
+  .empty-column-bg {
+    position: absolute;
+    width: 60%;
+    left: 50%;
+    top: 60px;
+    transform: translate(-50%);
+    opacity: .75;
+    z-index: 0;
+    user-select: none;
+    text-align: center;
+  }
+}
+
+.z-index-2 {
+  z-index: 2;
 }
 
 .itf-board-titles,
@@ -251,10 +269,11 @@
 .itf-board-cards-wrapper {
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  overflow: hidden;
   flex-grow: 1;
-  padding-right: .25rem;
-  padding-top: .5rem;
+  padding: .5rem .25rem 0;
+  background-color: var(--itf-board-column-bg-color);
+  border-radius: var(--bs-border-radius);
 
   > div:first-child > .itf-board-card-space > .itf-board-header-dropzone {
     top: -30px;

package/src/components/modal/Modal.vue

@@ -53,6 +53,7 @@ class itfModal extends Vue {
   @Prop({ type: Boolean, default: false }) closable
   @Prop({ type: Boolean, default: false }) closeIcon
   @Prop({ type: Boolean, default: false }) persistent
+  @Prop({ type: Boolean, default: false }) slider
   @Prop({ type: Boolean, default: false }) escClose
   @Prop({ type: Function, default: null }) onEscClose;
   @Prop({ type: Boolean, default: true }) appendToBody;

package/src/components/segmented-control/SegmentedControl.vue

@@ -5,11 +5,13 @@
 
       <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
         <label>
+          <slot name="itemMarkup" :item="item" />
           <input
             ref="input"
             type="radio"
             :name="name"
             :value="n"
+            v-tooltip="tooltipCallback(item)"
             :checked="isChecked(item)"
             @change="onItemChanged(item)" />
           <span>
@@ -32,9 +34,13 @@
 <script>
 import { Vue, Component, Model, Prop, Watch } from 'vue-property-decorator';
 import itfSelect from '../select/Select';
+import tooltip from '../../directives/tooltip';
 
 export default @Component({
   name: 'itfSegmentedControl',
+  directives: {
+    tooltip
+  },
   components: {
     itfSelect
   }
@@ -46,6 +52,7 @@ class itfSegmentedControl extends Vue {
   @Prop({ type: String, default: 'Name' }) itemText;
   @Prop({ type: Boolean, default: false }) returnObject;
   @Prop({ type: Boolean, default: false }) disabled;
+  @Prop({ type: Function, default: () => null }) tooltipCallback;
 
   timers = [];