@itfin/components 1.0.42 → 1.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.42",
+  "version": "1.0.43",
 
   "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');