@itfin/components 1.0.115 → 1.0.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.115",
+  "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/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/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;
@@ -87,7 +87,7 @@
     }
   }
 
-  .itf-tabs-panel {
+  & > .itf-tabs-panel {
     margin: 0;
     padding: 0;
     overflow: hidden;

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;