@itfin/components 1.0.109 → 1.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.109",
+  "version": "1.0.112",
   "main": "dist/itfin-components.umd.js",
   "unpkg": "dist/itfin-components.common.js",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",

package/src/assets/scss/components/_search-input.scss

@@ -60,7 +60,7 @@ $font-size: 1em;
   }
 }
 // Single, when searching but not loading or open
-.vs--single.vs--searching:not(.vs--open):not(.vs--loading) {
+.vs--single.vs--searching:not(.vs--open):not(.vs--combobox):not(.vs--loading) {
   .vs__search {
     opacity: .2;
   }

package/src/components/datepicker/DatePicker.vue

@@ -42,6 +42,7 @@
           :only-calendar="onlyCalendar"
           :display-format="displayFormat"
           :value-format="valueFormat"
+          :min-date="minDate"
           @input="selectInlineDate"
         ></itf-date-picker-inline>
       </div>
@@ -115,6 +116,7 @@ class itfDatePicker extends Vue {
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;
   @Prop({ type: String, default: 'bottom-start' }) placement;
+  @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop(Boolean) clearable;
 
   focused = false;

package/src/components/datepicker/DatePickerInline.vue

@@ -78,6 +78,7 @@ class itfDatePickerInline extends Vue {
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: Boolean, default: false }) range;
   @Prop({ type: Object, default: () => ({}) }) customDays;
+  @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop({
     type: Array,
     default: () => ([
@@ -111,6 +112,7 @@ class itfDatePickerInline extends Vue {
       range: this.range,
       view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,
       minView: this.minView,
+      minDate: this.minDate,
       selectedDates: this.valueAsLuxon ? [this.valueAsLuxon.toJSDate()] : [],
       onSelect: ({ date }) => {
         if (this.range && !this.calendar.rangeDateTo) {

package/src/components/select/Select.vue

@@ -88,7 +88,7 @@
     </div>
     <transition :name="transition">
       <ul
-        v-if="dropdownOpen"
+        v-if="dropdownWindowOpen"
         :id="`vs${uid}__listbox`"
         ref="dropdownMenu"
         :key="`vs${uid}__listbox`"
@@ -231,9 +231,7 @@ import itfButton from '../button/Button';
 import appendToBody from '../../directives/appendToBody';
 import sortAndStringify from '../../helpers/sortAndStringify';
 import uniqueId from '../../helpers/uniqueId';
-/**
- * @name VueSelect
- */
+
 export default {
   components: {
     itfButton,
@@ -242,6 +240,10 @@ export default {
   directives: { appendToBody },
   mixins: [pointerScroll, typeAheadPointer, ajax],
   props: {
+    query: {
+      type: String,
+      default: ''
+    },
     /**
      * Contains the currently selected value. Very similar to a
      * `value` attribute on an <input>. You can listen for changes
@@ -579,7 +581,10 @@ export default {
      */
     clearSearchOnBlur: {
       type: Function,
-      default: function ({ clearSearchOnSelect, multiple }) {
+      default: function ({ clearSearchOnSelect, multiple, combobox }) {
+        if (combobox) {
+          return false;
+        }
         return clearSearchOnSelect && !multiple
       },
     },
@@ -627,6 +632,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    combobox: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Keycodes that will select the current option.
      * @type Array
@@ -708,7 +717,7 @@ export default {
      */
     dropdownShouldOpen: {
       type: Function,
-      default({ noDrop, open, mutableLoading }) {
+      default({ noDrop, open, mutableLoading, combobox, options }) {
         return noDrop ? false : open;// && !mutableLoading
       },
     },
@@ -723,7 +732,7 @@ export default {
   },
   data() {
     return {
-      search: '',
+      searchString: '',
       open: false,
       isComposing: false,
       pushedTags: [],
@@ -733,6 +742,15 @@ export default {
   },
   inject: { itemLabel: { default: null } },
   computed: {
+    search: {
+      get() {
+        return this.query || this.searchString;
+      },
+      set(val) {
+        this.searchString = val;
+        this.$emit('update:query', val);
+      }
+    },
     /**
      * Determine if the component needs to
      * track the state of values internally.
@@ -848,6 +866,7 @@ export default {
      */
     stateClasses() {
       return {
+        'vs--combobox': this.combobox,
         'vs--open': this.dropdownOpen,
         'vs--single': !this.multiple,
         'vs--multiple': this.multiple,
@@ -874,6 +893,17 @@ export default {
     dropdownOpen() {
       return this.opened || this.dropdownShouldOpen(this);
     },
+    /**
+     * Return the current state of the
+     * dropdown menu window
+     * @return {Boolean} True if open
+     */
+    dropdownWindowOpen() {
+      if (this.combobox && !this.options.length) {
+        return false;
+      }
+      return this.dropdownOpen;
+    },
     /**
      * Return the placeholder string if it's set
      * & there is no value selected.
@@ -959,6 +989,9 @@ export default {
         if (this.isTrackingValues) {
           this.setInternalValueFromOptions(val)
         }
+        if (this.combobox) {
+          this.searchString = this.findOptionFromReducedValue(val) || '';
+        }
       },
     },
     /**
@@ -998,7 +1031,7 @@ export default {
           this.findOptionFromReducedValue(val)
         )
       } else {
-        this.$data._value = this.findOptionFromReducedValue(value)
+        this.$data._value = this.findOptionFromReducedValue(value);
       }
     },
     /**
@@ -1057,8 +1090,8 @@ export default {
         this.open = !this.open
         this.searchEl.blur()
       }
-      if (this.clearSearchOnSelect) {
-        this.search = ''
+      if (this.clearSearchOnSelect && !this.combobox) {
+        this.search = '';
       }
     },
     /**