@itfin/components 1.0.42 → 1.0.46

package/package.json

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

package/src/components/alert/Alert.vue

@@ -1,9 +1,11 @@
 <template>
 
   <div class="alert d-flex gap-2" :class="`alert-${type}`" role="alert">
-    <itf-icon :name="iconName" size="36" />
+    <itf-icon :name="iconName" size="24" />
 
-    <span v-html="message"></span>
+    <slot>
+      <span v-html="message"></span>
+    </slot>
   </div>
 
 </template>

package/src/components/button/Button.vue

@@ -8,6 +8,7 @@
     type="button"
     :tag="isLink ? 'a' : 'button'"
     :href="href"
+    :event="isLink ? 'click' : []"
     :to="to || {}"
     :target="target"
     :class="{

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/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,11 +193,11 @@
       background: $dark-input-focus-border-color;
     }
   }
-  .dropdown-menu {
+  &__dropdown-menu {
     background-color: $body-bg;
     border: 2px solid $input-focus-border;
-    padding-left: 0.125rem;
-    padding-right: 0.125rem;
+    padding-left: 0.125rem !important;
+    padding-right: 0.125rem !important;
     left: -2px;
     right: -2px;
     width: auto;
@@ -668,7 +668,7 @@ export default {
      */
     appendToBody: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     /**
      * When `appendToBody` is true, this function is responsible for
@@ -729,7 +729,7 @@ export default {
       _value: [], // Internal value managed by Vue Select if no `value` prop is passed
     }
   },
-  inject: { itemLabel: { default: null } },
+  inject: { itemLabel: { default: null }, appendContext: { default: null } },
   computed: {
     /**
      * Determine if the component needs to

package/src/components/text-field/TextField.vue

@@ -18,6 +18,7 @@
       :disabled="disabled"
       :readonly="readonly"
       @input="onInput($event.target.value)"
+      @keydown="$emit('keydown', $event)"
     />
 
     <div class="addon-end" v-if="clearable && value">

package/src/components/text-field/Textarea.vue

@@ -17,6 +17,7 @@
       class="itf-textarea__input form-control"
       :value="value"
       @input="onInput($event.target.value)"
+      @keydown="$emit('keydown', $event)"
     />
   </div>
 

package/src/directives/appendToBody.js

@@ -1,23 +1,40 @@
 export default {
   inserted(el, bindings, { context }) {
     if (context.appendToBody) {
-      const {
+      let {
         height,
         top,
         left,
         width,
-      } = context.$refs.toggle.getBoundingClientRect()
+      } = context.$refs.toggle.getBoundingClientRect();
 
-      let scrollX = window.scrollX || window.pageXOffset
-      let scrollY = window.scrollY || window.pageYOffset
+      const { calculatePosition } = context;
+      const { appendContext } = context;
+      const rootEl = appendContext && appendContext();
+      if (rootEl) {
+        let {
+          top: parentTop,
+          left: parentLeft
+        } = rootEl.getBoundingClientRect();
+        left -= parentLeft + rootEl.scrollLeft;
+        top -= parentTop + rootEl.scrollTop;
+      } else {
+        let scrollX = window.scrollX || window.pageXOffset
+        let scrollY = window.scrollY || window.pageYOffset
 
-      el.unbindPosition = context.calculatePosition(el, context, {
-        width: width + 'px',
-        left: scrollX + left + 'px',
-        top: scrollY + top + height + 'px',
-      })
+        left += scrollX;
+        top += scrollY;
+      }
+
+      if (calculatePosition) {
+        el.unbindPosition = calculatePosition(el, context, {
+          width: width + 'px',
+          left: left + 'px',
+          top: (top + height) + 'px',
+        });
+      }
 
-      document.body.appendChild(el)
+      (rootEl || document.body).appendChild(el)
     }
   },