@itfin/components 1.0.112 → 1.0.116

package/package.json

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

package/src/components/app/App.vue

@@ -70,18 +70,19 @@
 }
 </style>
 <script>
-import { Vue, Component, Provide } from 'vue-property-decorator';
+import { Vue, Component } from 'vue-property-decorator';
 import Message from './message';
 
 let globalApp = null;
 
 export default @Component({
   name: 'itfApp',
-  components: {}
+  components: {},
+  provide() {
+    return { globalApp: this }; // do not use Provide from vue-property-decorator
+  }
 })
 class itfApp extends Vue {
-  @Provide() globalApp = this;
-
   created() {
     globalApp = this;
     Vue.prototype.$globalApp = this;

package/src/components/checkbox/CheckboxGroup.vue

@@ -9,14 +9,15 @@
 
 </style>
 <script>
-  import { Vue, Component, Prop, Model, Provide } from 'vue-property-decorator';
+  import { Vue, Component, Prop, Model } from 'vue-property-decorator';
 
   export default @Component({
-    name: 'itfCheckboxGroup'
+    name: 'itfCheckboxGroup',
+    provide() {
+      return { checkboxGroup: this }; // do not use Provide from vue-property-decorator
+    }
   })
   class itfCheckboxGroup extends Vue {
-    @Provide() checkboxGroup = this;
-
     @Model('input', { type: Array, default: () => [] }) value;
 
     @Prop(Boolean) disabled;

package/src/components/checkbox/RadioGroup.vue

@@ -9,16 +9,17 @@
 
 </style>
 <script>
-import { Vue, Component, Prop, Model, Provide } from 'vue-property-decorator';
+import { Vue, Component, Prop, Model } from 'vue-property-decorator';
 
 let globalRadioGroupId = 0;
 
 export default @Component({
-  name: 'itfRadioGroup'
+  name: 'itfRadioGroup',
+  provide() {
+    return { radioGroup: this }; // do not use Provide from vue-property-decorator
+  }
 })
 class itfRadioGroup extends Vue {
-  @Provide() radioGroup = this;
-
   @Model('input', { default: null }) value;
 
   @Prop(Boolean) disabled;

package/src/components/dropdown/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="itf-dropdown dropdown">
+  <div class="itf-dropdown" :class="`drop${placement}`">
     <itf-button
       :class="{ 'dropdown-toggle': toggle }"
       v-bind="buttonOptions"
@@ -13,7 +13,7 @@
     </itf-button>
     <div
       class="itf-dropdown__menu dropdown-menu"
-      :class="{'dropdown-menu-end': right}"
+      :class="{'dropdown-menu-end': right, 'shadow': shadow}"
       ref="dropdown"
       :aria-labelledby="modalId">
       <slot></slot>
@@ -49,11 +49,12 @@ export default @Component({
 })
 class itfDropdown extends Vue {
   @PropSync('visible') value;
-  @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
+  @Prop({ type: String, default: 'down', validator: (value) => ['down', 'start', 'end', 'up'].includes(value) }) placement;
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
   @Prop({ type: String, default: 'Dropdown' }) label;
   @Prop({ type: Boolean }) right;
   @Prop({ type: Boolean }) toggle;
+  @Prop({ type: Boolean }) shadow;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
 

package/src/components/form/Form.vue

@@ -8,7 +8,7 @@
 //@import '~bootstrap/scss/forms';
 </style>
 <script>
-import { Vue, Component, Watch, Provide, Model } from 'vue-property-decorator';
+import { Vue, Component, Watch, Model } from 'vue-property-decorator';
 import * as validators from '../../helpers/validators';
 
 Vue.prototype.$v = validators;
@@ -16,10 +16,11 @@ Vue.prototype.$v = validators;
 export default @Component({
   name: 'itfForm',
   components: {},
+  provide() {
+    return { form: this }; // do not use Provide from vue-property-decorator
+  }
 })
 class itfForm extends Vue {
-  @Provide() form = this;
-
   @Model('input') valid;
 
   watchers = [];

package/src/components/form/Label.vue

@@ -48,16 +48,18 @@
 }
 </style>
 <script>
-import { Component, Prop, Provide, Inject, Mixins } from 'vue-property-decorator';
+import { Component, Prop, Inject, Mixins } from 'vue-property-decorator';
 import ValidatableMixin from '../../mixins/ValidatableMixin';
 
 export default
 @Component({
   name: 'itfLabel',
-  components: {}
+  components: {},
+  provide() {
+    return { itemLabel: this }; // do not use Provide from vue-property-decorator
+  }
 })
 class itfLabel extends Mixins(ValidatableMixin) {
-  @Provide() itemLabel = this;
   @Inject({ default: null }) form;
 
   @Prop() value;

package/src/components/select/Select.vue

@@ -1283,8 +1283,8 @@ export default {
       if (this.mousedown && !this.searching) {
         this.mousedown = false
       } else {
-        const { clearSearchOnSelect, multiple } = this
-        if (this.clearSearchOnBlur({ clearSearchOnSelect, multiple })) {
+        const { clearSearchOnSelect, multiple, combobox } = this
+        if (this.clearSearchOnBlur({ clearSearchOnSelect, multiple, combobox })) {
           this.search = ''
         }
         this.closeSearchOptions()

package/src/components/tabs/Tabs.vue

@@ -1,6 +1,6 @@
 <script>
 import {
-  Vue, Component, Provide, Model, Emit, Prop
+  Vue, Component, Model, Emit, Prop
 } from 'vue-property-decorator';
 import itfTab from './Tab';
 import './tabs.scss';
@@ -10,10 +10,11 @@ export default @Component({
   components: {
     itfTab
   },
+  provide() {
+    return { tabsManager: this }; // do not use Provide from vue-property-decorator
+  }
 })
 class itfTabs extends Vue {
-  @Provide() tabsManager = this;
-
   @Model('input') value;
   @Prop(Boolean) vertical;
 

package/src/components/tabs/tabs.scss

@@ -24,7 +24,7 @@
     display: flex;
     flex-direction: row-reverse;
 
-    .itf-tabs-panel {
+    & > .itf-tabs-panel {
       flex-direction: column;
       width: var(--itf-tabs-panel-width);
       padding-top: 6px;
@@ -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;
@@ -87,7 +87,7 @@
     }
   }
 
-  .itf-tabs-panel {
+  & > .itf-tabs-panel {
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -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/components/wizard/Step.vue

@@ -106,7 +106,7 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, Emit, Inject, Provide } from 'vue-property-decorator';
+import { Vue, Component, Prop, Emit, Inject } from 'vue-property-decorator';
 import itfForm from '../form/Form';
 import itfButton from '../button/Button';
 import loading from '../../directives/loading';
@@ -119,12 +119,14 @@ export default @Component({
   },
   directives: {
     loading
+  },
+  provide() {
+    return { step: this }; // do not use Provide from vue-property-decorator
   }
 })
 class itfWizardStep extends Vue {
   @Inject({ default: null }) upApp;
   @Inject() stepsManager;
-  @Provide() step = this;
 
   @Prop() id;
   @Prop() cardTitle;

package/src/components/wizard/Wizard.vue

@@ -1,6 +1,6 @@
 <script>
 import {
-  Vue, Component, Prop, Provide, Model, Emit,
+  Vue, Component, Prop, Model, Emit,
 } from 'vue-property-decorator';
 import itfWizardStep from './Step';
 import itfWizardSidebar from './Sidebar';
@@ -12,10 +12,11 @@ export default @Component({
     itfWizardStep,
     itfWizardSidebar,
   },
+  provide() {
+    return { stepsManager: this }; // do not use Provide from vue-property-decorator
+  }
 })
 class itfWizard extends Vue {
-  @Provide() stepsManager = this;
-
   @Model('input') value;
 
   @Prop(Boolean) keepAlive;

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 = [];