@itfin/components 1.0.40 → 1.0.44

package/package.json

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

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/components/select/Select.vue

@@ -93,7 +93,7 @@
         ref="dropdownMenu"
         :key="`vs${uid}__listbox`"
         v-append-to-body
-        class="dropdown-menu vs__dropdown-menu"
+        class="dropdown-menu vs__dropdown-menu itf-select__dropdown-menu"
         role="listbox"
         tabindex="-1"
         @mousedown.prevent="onMousedown"
@@ -193,7 +193,7 @@
       background: $dark-input-focus-border-color;
     }
   }
-  .dropdown-menu {
+  &__dropdown-menu {
     background-color: $body-bg;
     border: 2px solid $input-focus-border;
     padding-left: 0.125rem;
@@ -668,7 +668,7 @@ export default {
      */
     appendToBody: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     /**
      * When `appendToBody` is true, this function is responsible for

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;