@itfin/components 1.0.49 → 1.0.53

package/package.json

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

package/src/components/alert/Alert.vue

@@ -26,8 +26,12 @@ export default @Component({
 class itfAlert extends Vue {
   @Prop({ type: String, default: 'info' }) type;
   @Prop({ type: String }) message;
+  @Prop({ type: String }) icon;
 
   get iconName() {
+    if (this.icon) {
+      return this.icon;
+    }
     switch (this.type) {
     case 'danger': return 'warning_hex';
     }

package/src/components/avatar/Avatar.vue

@@ -58,7 +58,7 @@ export default @Component({
   name: 'itfAvatar',
 })
 class itfAvatar extends Vue {
-  @Prop({ type: Number, default: 32 }) size;
+  @Prop({ type: [String, Number], default: 32 }) size;
 
   @Prop({ type: String, default: null }) src;
 

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,34 @@
+<template>
+
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb mb-1">
+      <li
+        v-for="(crumb, n) of items"
+        class="breadcrumb-item"
+        :key="n"
+        :class="{'active': n === items.length - 1}"
+        :aria-current="n === items.length - 1 ? 'page' : null"
+      >
+        <span v-if="crumb.disabled">{{crumb.text}}</span>
+        <nuxt-link v-else :to="crumb.to" :exact="crumb.exact">{{crumb.text}}</nuxt-link>
+      </li>
+    </ol>
+  </nav>
+
+</template>
+<style lang="scss">
+@import '../../assets/scss/variables';
+@import '~bootstrap/scss/breadcrumb';
+</style>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+export default @Component({
+  name: 'itfBreadcrumb',
+  components: {
+  }
+})
+class itfBreadcrumb extends Vue {
+  @Prop({ type: Array }) items;
+}
+</script>

package/src/components/overlay/SensitiveOverlay.vue

@@ -0,0 +1,48 @@
+<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);
+    transition: opacity .25s;
+
+    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+      backdrop-filter: blur(5px);
+      background-color: rgba(255, 255, 255, .5);
+    }
+  }
+}
+</style>