@itfin/components 1.0.44 → 1.0.48

package/package.json

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

@@ -10,6 +10,8 @@
         :class="className"
         :type="type"
         :content="message"
+        :button="button"
+        :on-click="onClick"
         :closable="showClose"
         :is-collapsed="isCollapsed"
         @close="close"
@@ -85,8 +87,10 @@ class itfToastContainer extends Vue {
       width: '',
       className: '',
       wrapperClassName: '',
+      button: '',
       supportHTML: false,
       onClose: null,
+      onClick: null,
       timer: null,
       closed: false
     };

package/src/components/app/ToastMessage.vue

@@ -14,11 +14,12 @@
       <button type="button" class="btn-close" :class="{'btn-close-white': type}" data-bs-dismiss="toast" aria-label="Close" @click="close"></button>
     </div>
     <div class="d-flex" v-if="!collapsed">
-      <div class="toast-body">
+      <div class="toast-body flex-shrink-1">
         <div v-if="supportHtml" v-html="content">
           <slot />
         </div>
         <slot v-else>{{ content }}</slot>
+        <itf-button small primary block v-if="button" @click="onClick" class="mt-3">{{button}}</itf-button>
       </div>
       <div class="me-2 m-auto" v-if="!title && !$slots.title">
         <button type="button" class="btn-close" :class="{'btn-close-white': type}" data-bs-dismiss="toast" aria-label="Close" @click="close"></button>
@@ -35,10 +36,12 @@
 </style>
 <script>
 import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
+import itfButton from '../button/Button';
 
 export default @Component({
   name: 'itfToastMessage',
   components: {
+    itfButton
   }
 })
 class itfToastMessage extends Vue {
@@ -47,6 +50,8 @@ class itfToastMessage extends Vue {
   @Prop(Boolean) closable;
   @Prop(String) title;
   @Prop(String) content;
+  @Prop(String) button;
+  @Prop(Function) onClick;
 
   @Prop(Boolean) supportHtml;
   @Prop({ type: Boolean, default: true }) isCollapsed;

package/src/components/app/index.stories.js

@@ -26,7 +26,7 @@ storiesOf('Common', module)
 
         <button @click="$showSuccess('Success')">Show success</button>
         <button @click="$showError('Error')">Show error</button>
-        <button @click="$showMessage({ title: 'Cool title', message: 'This is the test message' })">Test message</button>
+        <button @click="$showMessage({ title: 'New version released', message: 'Pss... Hey, we have released a new version of ITFin! Please refresh the page to reach out to new features.', button: 'Refresh', onClick: () => location.reload() })">Test message</button>
         <button @click="$try(() => { throw new Error('Invalid function'); })">Try function with error</button>
 
       </itf-app>

package/src/components/app/message.js

@@ -20,7 +20,7 @@ const Message = function (options) {
       'is-' + position,
       hasMask ? 'has-mask' : ''
     ].filter(function (e) { return !!e; }).join(' ');
-    document.body.appendChild(containerEl);
+    document.getElementById('itf-app').appendChild(containerEl);
   }
 
   if (options.zIndex) {
@@ -33,6 +33,7 @@ const Message = function (options) {
   };
 
   const instance = new MessageConstructor({
+    parent: document.getElementById('itf-app').__vue__,
     el: document.createElement('div'),
     data: options
   });

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/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)
     }
   },