@itfin/components 1.0.46 → 1.0.47

package/package.json

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

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>