@itfin/components 1.0.50 → 1.0.54

package/package.json

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

package/src/assets/scss/_variables.scss

@@ -67,6 +67,8 @@ $dark-btn-secondary-color: $dark-secondary;
 $dark-input-box-shadow: #3d3d3d;
 $dark-input-focus-border: rgb(244 206 176 / 25%);
 
+$pagination-border-width: 0;
+
 // 3. Include remainder of required Bootstrap stylesheets
 @import "~bootstrap/scss/variables.scss";
 @import "~bootstrap/scss/mixins.scss";

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.to">{{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

@@ -1,9 +1,9 @@
 <template>
 
-  <div class="b-sensitive-overlay">
+  <div class="itf-sensitive-overlay">
     <slot></slot>
 
-    <div class="b-sensitive-overlay__cover">
+    <div class="itf-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>
 
@@ -18,7 +18,7 @@
 
 </template>
 <style lang="scss">
-.b-sensitive-overlay {
+.itf-sensitive-overlay {
   position: relative;
   min-height: 100px;
 
@@ -36,9 +36,13 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(255, 255, 255, .5);
-    backdrop-filter: blur(5px);
+    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>

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,126 @@
+<template>
+
+  <nav aria-label="Page navigation example">
+    <ul class="pagination itf-pagination">
+      <li
+        v-for="(page, n) in pages"
+        :key="n"
+        class="page-item"
+        :class="{'active': page.current, 'disabled': !page.active && !page.current }"
+      >
+        <a v-if="page.type === 'prev'" href="" class="page-link" aria-label="Previous" @click.prevent="onPage(page.number)">
+          <itf-icon name="chevron_left" aria-hidden="true" />
+          <span class="sr-only">Previous</span>
+        </a>
+        <a v-else-if="page.type === 'first'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+        <a v-else-if="page.type === 'page'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+        <a v-else-if="page.type === 'last'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+        <span v-else-if="page.type === 'more'" class="page-link">&hellip;</span>
+        <a v-if="page.type === 'next'" href="" class="page-link" aria-label="Next" @click.prevent="onPage(page.number)">
+          <span class="sr-only">Next</span>
+          <itf-icon name="chevron_right" aria-hidden="true" />
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+</template>
+<style lang="scss">
+@import '../../assets/scss/variables';
+@import '~bootstrap/scss/pagination';
+
+.itf-pagination.pagination {
+  padding-left: 0;
+
+  .page-item {
+    margin-right: 3px;
+    .page-link {
+      border-radius: .5rem;
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Component, Model, Prop } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon.vue';
+
+const MIN_PAGES_BLOCKS = 2;
+const MAX_PAGES_BLOCKS = 6;
+
+export default @Component({
+  name: 'itfPagination',
+  components: {
+    itfIcon
+  }
+})
+class itfPagination extends Vue {
+  @Model('input') value;
+  @Prop({ type: [String, Number], default: 0 }) length;
+  @Prop({ type: [String, Number], default: 20 }) size;
+  @Prop({ type: [String, Number], default: MIN_PAGES_BLOCKS }) minBlocks;
+  @Prop({ type: [String, Number], default: MAX_PAGES_BLOCKS }) maxBlocks;
+
+  onPage(page) {
+    this.$emit('input', page);
+  }
+
+  get pages () {
+    const pageSize = Number(this.size);
+    const totalItems = Number(this.length);
+    const currentPage = this.value;
+    let maxBlocks = Number(this.maxBlocks);
+    maxBlocks = maxBlocks && maxBlocks < MAX_PAGES_BLOCKS ? MAX_PAGES_BLOCKS : maxBlocks;
+    const minBlocks = Number(this.minBlocks);
+
+    const pages = [];
+    const numPages = Math.ceil(totalItems / pageSize);
+
+    if (numPages > 1) {
+      pages.push({
+        type: 'prev',
+        number: Math.max(1, currentPage - 1),
+        active: currentPage > 1
+      });
+      pages.push({
+        type: 'first',
+        number: 1,
+        active: currentPage > 1,
+        current: currentPage === 1
+      });
+      const maxPivotPages = Math.round((maxBlocks - minBlocks) / 2);
+      let minPage = Math.max(2, currentPage - maxPivotPages);
+      const maxPage = Math.min(numPages - 1, currentPage + maxPivotPages * 2 - (currentPage - minPage));
+      minPage = Math.max(2, minPage - (maxPivotPages * 2 - (maxPage - minPage)));
+      let i = minPage;
+      while (i <= maxPage) {
+        if ((i === minPage && i !== 2) || (i === maxPage && i !== numPages - 1)) {
+          pages.push({
+            type: 'more',
+            active: false
+          });
+        } else {
+          pages.push({
+            type: 'page',
+            number: i,
+            active: currentPage !== i,
+            current: currentPage === i
+          });
+        }
+        i++;
+      }
+      pages.push({
+        type: 'last',
+        number: numPages,
+        active: currentPage !== numPages,
+        current: currentPage === numPages
+      });
+      pages.push({
+        type: 'next',
+        number: Math.min(numPages, currentPage + 1),
+        active: currentPage < numPages
+      });
+    }
+    return pages;
+  }
+}
+</script>

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

@@ -0,0 +1,41 @@
+import { storiesOf } from '@storybook/vue';
+import itfPagination from './Pagination.vue';
+import itfApp from '../app/App.vue';
+
+storiesOf('Common', module)
+  .add('Pagination', () => ({
+    components: {
+      itfApp,
+      itfPagination
+    },
+    data() {
+      return {
+        page: 1,
+        customDays: {
+          '2021-10-21': { text: '🎉', class: 'test' }
+        },
+        dateRange: null,
+        month: '09-2021'
+      }
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+  <pre>
+
+  </pre>
+
+      <h2>Example</h2>
+
+      <itf-app ref="app">
+
+        {{page}}
+
+        <br />
+        <itf-pagination :length="500" v-model.lazy="page"></itf-pagination>
+
+      </itf-app>
+    </div>`,
+  }));