@itfin/components 1.0.46 → 1.0.50

package/package.json

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

package/src/components/app/App.vue

@@ -95,7 +95,7 @@ class itfApp extends Vue {
   }
 
   showSuccess(message, title = '') {
-    Message.success({
+    return Message.success({
       isCollapsed: false,
       showClose: true,
       supportHTML: true,
@@ -107,7 +107,7 @@ class itfApp extends Vue {
   }
 
   showError(message, opts = {}) {
-    Message.error({
+    return Message.error({
       isCollapsed: false,
       showClose: true,
       supportHTML: true,
@@ -119,7 +119,7 @@ class itfApp extends Vue {
   }
 
   showMessage(options) {
-    Message.toast({
+    return Message.toast({
       isCollapsed: false,
       showClose: true,
       supportHTML: true,

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 w-100">
         <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
   });
@@ -46,7 +47,6 @@ const Message = function (options) {
   } else {
     containerEl.appendChild(instance.$el);
   }
-  // 挂载后再设置显示才有过渡效果
   instance.show = true;
 
   instances.push(instance);
@@ -68,7 +68,6 @@ Message.close = function (id, userOnClose) {
       const index = instances.findIndex(function (e) {
         return e.containerKey === containerKey;
       });
-      // 如果开启遮罩，300ms 后移除容器（不移除白屏时间太长）
       if (hasMask && index === -1) {
         setTimeout(function () {
           containers[containerKey].remove();
@@ -80,7 +79,6 @@ Message.close = function (id, userOnClose) {
   }
 
   setTimeout(function () {
-    // 当前没有消息后，移除容器
     if (instances.length === 0) {
       for (const type in containers) {
         if (containers[type]) {

package/src/components/overlay/SensitiveOverlay.vue

@@ -0,0 +1,44 @@
+<template>
+
+  <div class="b-sensitive-overlay">
+    <slot></slot>
+
+    <div class="b-sensitive-overlay__cover">
+      <slot name="hint">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 104.8 122.88" style="enable-background:new 0 0 104.8 122.88" xml:space="preserve"><g><path fill="currentColor" d="M39.92,0c11.02,0,21,4.47,28.23,11.69c7.22,7.22,11.69,17.2,11.69,28.23c0,3.8-0.53,7.47-1.52,10.95l-3.7-2.53 c0.65-2.7,1-5.52,1-8.42c0-9.86-4-18.78-10.46-25.24C58.7,8.21,49.78,4.22,39.92,4.22c-9.86,0-18.78,4-25.24,10.46 C8.21,21.13,4.22,30.06,4.22,39.92c0,9.86,4,18.78,10.46,25.24c4.79,4.79,10.93,8.22,17.8,9.68l0.34,4.36 c-8.17-1.47-15.48-5.43-21.11-11.06C4.47,60.92,0,50.94,0,39.92c0-11.02,4.47-21,11.69-28.23C18.91,4.47,28.89,0,39.92,0L39.92,0z M81.84,122.5c-0.89,0.41-1.88,0.48-2.76,0.25c-0.97-0.26-1.83-0.87-2.36-1.78l-9.91-17.08l-9.42,10.57 c-1.31,1.47-2.8,2.58-4.24,3.16c-1.11,0.45-2.2,0.59-3.22,0.37c-1.13-0.24-2.09-0.89-2.8-2c-0.56-0.89-0.93-2.07-1.05-3.59 l-5.25-68.42c-0.01-0.05-0.01-0.11-0.01-0.15c-0.01-0.43,0.07-0.85,0.25-1.23c0.19-0.44,0.51-0.84,0.91-1.13 c0.17-0.13,0.36-0.22,0.56-0.27c0.39-0.13,0.8-0.18,1.19-0.13c0.38,0.04,0.75,0.15,1.09,0.35c0.11,0.05,0.23,0.12,0.33,0.2 l56.52,38.7c1.25,0.86,2.09,1.77,2.58,2.7c0.62,1.17,0.69,2.32,0.33,3.42c-0.32,0.99-1,1.87-1.93,2.6 c-1.21,0.95-2.92,1.69-4.86,2.09c-0.02,0.01-0.05,0.01-0.07,0.01L83.92,94l9.84,17.13c0.52,0.91,0.62,1.96,0.36,2.92 c-0.25,0.94-0.85,1.8-1.72,2.37c-0.03,0.03-0.07,0.05-0.11,0.07l-10.21,5.9C81.99,122.43,81.92,122.47,81.84,122.5L81.84,122.5 L81.84,122.5z M79.99,119.28c0.1,0.03,0.2,0.03,0.29-0.01c0.03-0.02,0.07-0.04,0.11-0.05l10.08-5.82c0.09-0.07,0.15-0.17,0.19-0.27 c0.02-0.09,0.02-0.17-0.01-0.22L79.11,93.16h0.01c-0.09-0.16-0.16-0.34-0.2-0.53c-0.2-0.97,0.43-1.91,1.39-2.11l16.22-2.88 c0.02-0.01,0.04-0.01,0.07-0.01c1.4-0.29,2.58-0.79,3.38-1.41c0.39-0.31,0.65-0.61,0.74-0.9c0.06-0.18,0.03-0.4-0.1-0.65 c-0.23-0.43-0.69-0.89-1.43-1.41L45.01,46.02l5.12,65.4c0.07,0.91,0.25,1.54,0.5,1.94c0.15,0.23,0.33,0.37,0.51,0.41 c0.3,0.07,0.69-0.01,1.15-0.19c0.93-0.37,1.94-1.15,2.9-2.22l10.11-12.18l0,0c0.13-0.14,0.27-0.26,0.44-0.36 c0.85-0.49,1.95-0.21,2.44,0.65l11.63,19.69C79.85,119.22,79.91,119.26,79.99,119.28L79.99,119.28L79.99,119.28z M80.39,119.22 c0.23-0.11,0.5-0.18,0.78-0.18L80.39,119.22L80.39,119.22L80.39,119.22z M39.92,27.34c3.47,0,6.62,1.41,8.89,3.69 c0.23,0.23,0.46,0.48,0.67,0.73c-0.12-0.04-0.24-0.08-0.36-0.12c-0.65-0.21-1.35-0.37-2.09-0.48c-0.23-0.04-0.47-0.08-0.71-0.1 c-1.05-0.12-2.14-0.12-3.23,0c-0.15,0.02-0.3,0.04-0.46,0.06c-0.86-0.27-1.78-0.41-2.73-0.41c-2.55,0-4.86,1.03-6.52,2.69 l-0.01,0.01c-1.66,1.66-2.69,3.97-2.69,6.52c0,1.3,0.11,1.34-0.16,2.69c-0.14,0.68-0.22,1.44-0.24,2.28 c-0.04,0.56-0.04,1.13,0,1.71l0.12,1.58c-1.92-2.21-3.08-5.09-3.08-8.25c0-3.46,1.41-6.61,3.69-8.89l0.01-0.01 C33.31,28.74,36.45,27.34,39.92,27.34L39.92,27.34z M39.92,13.68c7.24,0,13.8,2.94,18.55,7.68c4.75,4.75,7.68,11.31,7.68,18.55 c0,0.86-0.04,1.7-0.12,2.54l-3.85-2.64c-0.03-6.11-2.51-11.64-6.52-15.64c-4.03-4.03-9.59-6.52-15.74-6.52 c-6.15,0-11.71,2.49-15.74,6.52c-4.03,4.03-6.52,9.59-6.52,15.74c0,6.15,2.49,11.71,6.52,15.74c2.04,2.04,4.48,3.69,7.19,4.82 l0.34,4.37c-3.94-1.3-7.47-3.51-10.34-6.37c-4.75-4.75-7.68-11.31-7.68-18.55c0-7.24,2.94-13.8,7.68-18.55 C26.11,16.62,32.67,13.68,39.92,13.68L39.92,13.68z"/></g></svg>
+
+        <div class="ms-3">
+          Sensitive data<br />
+          <small class="text-muted">Move cursor to see the data</small>
+        </div>
+
+      </slot>
+    </div>
+  </div>
+
+</template>
+<style lang="scss">
+.b-sensitive-overlay {
+  position: relative;
+  min-height: 100px;
+
+  &:hover &__cover {
+    opacity: 0;
+  }
+  &__cover {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    pointer-events: none;
+    opacity: 1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, .5);
+    backdrop-filter: blur(5px);
+    transition: opacity .25s;
+  }
+}
+</style>