@itfin/components 1.3.12 → 1.3.15

package/package.json

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

package/src/assets/scss/components/_datepicker.scss

@@ -1037,21 +1037,12 @@ $rangeThumbSize: 12px;
   }
   &__dropdown {
     width: max-content;
-    border: $input-border-width solid $input-border-color;
     border-radius: $input-border-radius;
     background-color: $body-bg;
     overflow: hidden;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-btn-focus-box-shadow;
-    }
 
     [data-theme="dark"] & {
       background-color: $dark-body-bg;
-      border-color: $dark-border-color;
-      box-shadow: 0 0 0 2px $dark-input-focus-border;
     }
   }
 }

package/src/components/datepicker/MonthPicker.vue

@@ -6,28 +6,31 @@
       </slot>
     </div>
     <input
-      ref="input"
-      readonly
-      :disabled="disabled"
-      class="form-control text-capitalize"
-      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
-      @focus="onFocus"
-      @blur="onBlur"
-      :value="displayValue"
-      :placeholder="placeholder"
+        ref="input"
+        readonly
+        :disabled="disabled"
+        class="form-control text-capitalize"
+        :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
+        @focus="onFocus"
+        @blur="onBlur"
+        :value="displayValue"
+        :placeholder="placeholder"
     />
     <div style="display: none">
-      <div ref="dropdown" class="itf-monthpicker__dropdown">
-        <itf-date-picker-inline
-          :value="value"
-          start-view="months"
-          min-view="months"
-          :min-date="minDate"
-          only-calendar
-          :display-format="displayFormat"
-          :value-format="valueFormat"
-          @input="selectInlineDate"
-        ></itf-date-picker-inline>
+      <div ref="dropdown" class="itf-monthpicker__dropdown border rounded">
+        <div>
+          <itf-date-picker-inline
+              :value="value"
+              start-view="months"
+              min-view="months"
+              :min-date="minDate"
+              only-calendar
+              :display-format="displayFormat"
+              :value-format="valueFormat"
+              @input="selectInlineDate"
+          />
+        </div>
+        <slot name="after-calendar" />
       </div>
     </div>
   </div>
@@ -50,6 +53,7 @@ class itfMonthPicker extends Vue {
   @Inject({ default: null }) itemLabel;
 
   @Prop({ type: String }) value;
+  @Prop({ type: String }) customValue;
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
   @Prop({ type:  [String, Date], default: '' }) minDate;
@@ -98,6 +102,9 @@ class itfMonthPicker extends Vue {
   }
 
   get displayValue() {
+    if (this.customValue) {
+      return this.customValue;
+    }
     if (!this.valueAsLuxon) {
       return '';
     }
@@ -131,9 +138,13 @@ class itfMonthPicker extends Vue {
     this.focused = false;
   }
 
+  hide() {
+    this.tooltip.hide();
+  }
+
   selectInlineDate(date) {
     this.$emit('input', date);
-    this.tooltip.hide();
+    this.hide();
   }
 }
 </script>

package/src/components/editable/EditButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="itf-editable-button">
     <slot></slot>
-    <itf-button secondary icon small class="itf-editable-button__button" @click="$emit('click')">
+    <itf-button v-if="canEdit" secondary icon small class="itf-editable-button__button" @click="$emit('click')">
       <itf-icon name="pen" />
     </itf-button>
   </div>
@@ -35,5 +35,6 @@ export default @Component({
   }
 })
 class EditButton extends Vue {
+  @Prop({ type: Boolean, default: true }) canEdit;
 }
 </script>

package/src/components/kanban/Board.vue

@@ -6,7 +6,7 @@
            :data-column="index"
            @mouseover="columnHighlight(index, 'enter')"
            @mouseout="columnHighlight(index, 'leave')"
-           :key="index" class="itf-board-column itf-board-column__title p-2">
+           :key="index" :class="`itf-board-column itf-board-column__title p-2 ${columnEdit ? 'itf-board-column__move' : ''}`">
         <div accept-group="board-columns"
              class="itf-board-header-space"
              @enter="columnHighlight(index, 'enter', 'drop')"
@@ -16,6 +16,7 @@
         </div>
         <itf-edit-button
           accept-group="board-columns"
+          :can-edit="columnEdit"
           @enter="columnHighlight(index, 'enter')"
           @leave="columnHighlight(index, 'leave')"
           @click="$emit('update:columnSettings', column)"
@@ -42,7 +43,7 @@
           <div class="itf-board-header-dropzone"></div>
         </div>
       </div>
-      <div class="align-items-end d-flex pb-1">
+      <div v-if="columnEdit" class="align-items-end d-flex pb-1">
         <slot name="add-column">
           <itf-button icon small @click="$emit('add-сolumn')">
             <itf-icon name="plus" />
@@ -98,6 +99,7 @@ class Board extends Vue {
   @Prop({ type: Function, default: (item, value) => { item.Status = value; } }) updateFunc;
   @Prop({ type: String, default: 'Name' }) columnNameKey;
   @Prop(Boolean) columnSorting;
+  @Prop({ type: Boolean, default: true }) columnEdit;
 
   beforeDestroy() {
     if (this.columnSorting) {

package/src/components/kanban/styles.scss

@@ -129,7 +129,6 @@
     border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
 
     &__title {
-      cursor: move;
       border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
 
       .itf-board-column__header {
@@ -142,6 +141,10 @@
       }
     }
 
+    &__move {
+      cursor: move;
+    }
+
     &.over {
       background-color: var(--itf-board-column-hover-color);
     }
@@ -173,7 +176,7 @@
   border-bottom: 1px solid var(--itf-board-card-border-color);
   position: sticky;
   top: 0;
-  z-index: 101;
+  z-index: 100;
   background-color: var(--bs-light);
 }