@itfin/components 1.2.134 → 1.2.135

package/package.json

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

package/src/assets/scss/components/_dropdown.scss

@@ -2,11 +2,6 @@
 
 .itf-dropdown {
   display: inline-block;
-
-  &__menu.dropdown-menu {
-    border: 0 none;
-    padding: 0;
-  }
 }
 
 

package/src/components/dropdown/Dropdown.vue

@@ -1,4 +1,4 @@
-<template>
+<!--template>
 
   <div class="itf-dropdown" :class="`drop${placement}`">
     <div v-if="disabled"><slot name="button">{{label}}</slot></div>
@@ -26,7 +26,7 @@
     </div>
   </div>
 
-</template>
+</template-->
 <script>
 import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button';
@@ -73,12 +73,38 @@ class itfDropdown extends Vue {
   //   }
   // }
 
+  render (createElement) {
+    const modalId = `dropdownId${this._uid}`;
+    const { right, shadow } = this;
+    return createElement('div', {}, [
+      createElement(
+        'itf-button',
+        {
+          props: this.buttonOptions || {},
+          class: { 'dropdown-toggle': this.toggle },
+          attrs: { id: modalId, 'data-bs-toggle': 'dropdown', 'aria-expanded': 'false' },
+          ref: 'toggle',
+        },
+        this.$slots.button
+      ),
+      createElement(
+        'div',
+        {
+          attrs: { rel: 'dropdown' , 'aria-labelledby': modalId},
+          class: { 'dropdown-menu-end': right, 'shadow': shadow },
+          staticClass: 'itf-dropdown__menu dropdown-menu'
+        },
+        this.$slots.default
+      )
+    ]);
+  }
+
   created() {
-    globalModalIndex += 1;
-    this.modalId = `dropdownId${globalModalIndex}`;
+    console.info(this);
   }
 
   async mounted() {
+    console.info(this);
     if (typeof window === 'undefined' || !this.$refs.toggle) {
       return;
     }

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,
@@ -253,8 +271,9 @@
   flex-direction: column;
   overflow: auto;
   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/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 = [];