@itfin/components 1.0.110 → 1.0.113

package/package.json

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

@@ -116,7 +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: null }) minDate;
+  @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop(Boolean) clearable;
 
   focused = false;

package/src/components/datepicker/DatePickerInline.vue

@@ -78,7 +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: null }) minDate;
+  @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop({
     type: Array,
     default: () => ([

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 = '';
       }
     },
     /**

package/src/components/tabs/tabs.scss

@@ -32,7 +32,7 @@
       margin-right: 0;
       padding-bottom: calc(var(--itf-tabs-tab-padding) * 3);
 
-      .itf-tab {
+      & > .itf-tab {
         padding: var(--itf-tabs-tab-padding) 10px 0;
         width: calc(100% - 2px);
         margin-bottom: calc(var(--itf-tabs-tab-padding) * 1.5);
@@ -79,7 +79,7 @@
         }
       }
     }
-    .itf-tabs-content {
+    & > .itf-tabs-content {
       flex-grow: 1;
       z-index: 1;
       margin-right: -1px;
@@ -97,7 +97,7 @@
     justify-content: start;
     flex-wrap: wrap;
 
-    .itf-tab {
+    & > .itf-tab {
       white-space: nowrap;
       display: block;
       //float: right;
@@ -170,7 +170,7 @@
     }
   }
   .itf-tabs-content {
-    .itf-tab-content {
+    & > .itf-tab-content {
       height: 100%;
 
       &.filled {

package/src/mixins/ValidatableMixin.js

@@ -21,7 +21,7 @@ class ValidatableMixin extends Vue {
   @Prop({ type: [String, Array], default: () => [] }) errorMessages;
   @Prop({ type: [String, Array], default: () => [] }) successMessages;
   @Prop({ type: [String, Array], default: () => [] }) messages;
-  @Prop({ type: Array, default: () => [] }) rules;
+  @Prop({ type: Array, default: () => [], validator: (value) => Array.isArray(value) }) rules;
   @Prop({ required: false }) value;
 
   errorBucket = [];