@itfin/components 1.3.14 → 1.3.15

package/package.json

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