@itfin/components 1.0.44 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.44",
+  "version": "1.0.45",
 
   "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/select/Select.vue

@@ -196,8 +196,8 @@
   &__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;
@@ -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)
     }
   },