@itfin/components 1.0.39 → 1.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.39",
+  "version": "1.0.43",
 
   "main": "dist/itfin-components.umd.js",
   "unpkg": "dist/itfin-components.common.js",

package/src/components/app/App.vue

@@ -73,6 +73,8 @@
 import { Vue, Component, Provide } from 'vue-property-decorator';
 import Message from './message';
 
+let globalApp = null;
+
 export default @Component({
   name: 'itfApp',
   components: {}
@@ -80,10 +82,12 @@ export default @Component({
 class itfApp extends Vue {
   @Provide() globalApp = this;
   @Provide() appendContext = function appendContext() {
-    return this.$el;
+    return globalApp.$el;
   };
 
   created() {
+    globalApp = this;
+    Vue.prototype.$globalApp = this;
     Vue.prototype.$showSuccess = this.showSuccess.bind(this);
     Vue.prototype.$showError = this.showError.bind(this);
     Vue.prototype.$showMessage = this.showMessage.bind(this);

package/src/components/checkbox/Radio.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div class="itf-radio form-check" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium }">
-    <input class="form-check-input" :id="id" type="radio" :name="name" v-model="isChecked" :disabled="disabled" />
+    <input class="form-check-input" :id="id" type="radio" :name="radioName" v-model="isChecked" :value="true" :disabled="disabled" />
     <label :for="id" slot="label" class="form-check-label">
       {{label}}
       <slot name="icon"></slot>
@@ -49,17 +49,17 @@ import { Vue, Component, Prop, Model, Inject } from 'vue-property-decorator';
 let globalRadioId = 0;
 
 export default @Component({
-  name: 'itfCheckbox',
+  name: 'itfRadio',
   components: {
   }
 })
-class itfCheckbox extends Vue {
-  @Inject({ default: null }) checkboxGroup;
+class itfRadio extends Vue {
+  @Inject({ default: null }) radioGroup;
 
   @Model('input') checked;
   @Prop(String) label;
   @Prop() value;
-  @Prop({ type: String, required: true }) name;
+  @Prop({ type: String }) name;
 
   @Prop(Boolean) disabled;
   @Prop(Boolean) medium;
@@ -72,11 +72,27 @@ class itfCheckbox extends Vue {
     this.id = `radio${globalRadioId}`;
   }
 
+  get radioName() {
+    if (this.radioGroup) {
+      return this.radioGroup.getGroupName();
+    }
+    if (!this.name) {
+      throw new Error('Name for radio should be not empty');
+    }
+    return this.name;
+  }
+
   set isChecked(val) {
+    if (this.radioGroup) {
+      this.radioGroup.onToggleOption(this.value, val);
+    }
     this.$emit('input', this.value);
   }
 
   get isChecked() {
+    if (this.radioGroup) {
+      return this.radioGroup.isChecked(this.value);
+    }
     if (this.itemKey) {
       if (!this.checked || !this.value) {
         return false;

package/src/components/checkbox/RadioGroup.vue

@@ -0,0 +1,51 @@
+<template>
+
+  <fieldset>
+    <slot />
+  </fieldset>
+
+</template>
+<style>
+
+</style>
+<script>
+import { Vue, Component, Prop, Model, Provide } from 'vue-property-decorator';
+
+let globalRadioGroupId = 0;
+
+export default @Component({
+  name: 'itfRadioGroup'
+})
+class itfRadioGroup extends Vue {
+  @Provide() radioGroup = this;
+
+  @Model('input', { default: null }) value;
+
+  @Prop(Boolean) disabled;
+
+  @Prop(String) itemKey;
+
+  @Prop(Number) max;
+
+  created() {
+    globalRadioGroupId += 1;
+    this.id = `radio-group-${globalRadioGroupId}`;
+  }
+
+  getGroupName() {
+    return this.id;
+  }
+
+  onToggleOption(value, isChecked) {
+    this.$emit('input', value);
+  }
+
+  isChecked(value) {
+    return this.value === value;
+  }
+
+  isDisabled() {
+    return this.disabled;
+  }
+}
+</script>

package/src/components/modal/Modal.vue

@@ -124,7 +124,7 @@ class itfModal extends Vue {
     }
     if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
-      const elContext = (this.globalApp && this.globalApp.$el) || document.body;
+      const elContext = document.getElementById('app') || document.body; // @todo getElementById remove when cleanup vuetify
       elContext.appendChild(this.$el);
     }
     const { default: Modal } = await import('bootstrap/js/src/modal.js');

package/src/components/popover/Popover.vue

@@ -132,7 +132,8 @@ class itfPopover extends Vue {
 
   hide() {
     if (this.modalEl) {
-      this.modalEl.hide();
+      // треба затримка щоб попав не показався знову через отримання фокусу
+      setTimeout(() => this.modalEl.hide(), 10);
     }
   }
 }

package/src/mixins/ValidatableMixin.js

@@ -2,7 +2,14 @@ import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import { deepEqual } from '../helpers/deepEqual';
 
 export default
-@Component({ name: 'ValidatableMixin' })
+@Component({
+  name: 'ValidatableMixin',
+  methods: {
+    validate(force = false, value) {
+      return this.doValidation(force, value);
+    }
+  }
+})
 class ValidatableMixin extends Vue {
   @Prop(Boolean) manualValidation;
   @Prop(Boolean) disabled;