@itfin/components 1.2.31 → 1.2.34

package/src/assets/scss/components/_table.scss

@@ -0,0 +1,278 @@
+@import '../variables';
+
+:root {
+  --itf-table-background-color: #fff;
+  --itf-table-sticky-top: 0;
+  --itf-table-border-color: #e1e4e7;
+  --itf-table-hover-color: #f0f0f0;
+  --itf-table-strip-color: #f8f8f8;//#dadce033;
+  --itf-table-sorted-color: #f8f8f8;//#dadce033;
+  --itf-table-shadow-width: 3px;
+  --itf-table-row-cursor: default;
+  --itf-table-sticky-shadow1: rgb(0 0 0 / 16%);
+  --itf-table-sticky-shadow2: rgb(0 0 0 / 23%);
+}
+
+[data-theme="dark"] {
+  --itf-table-background-color: #{$dark-body-bg};
+  --itf-table-border-color: #666;
+  --itf-table-hover-color: #111;
+  --itf-table-strip-color: #222;
+  --itf-table-sorted-color: #444;
+  --itf-table-sticky-shadow1: rgb(255 255 255 / 16%);
+  --itf-table-sticky-shadow2: rgb(255 255 255 / 23%);
+}
+
+.itf-table {
+  width: 100%;
+  grid-template-columns: [col-start] auto [col-end];
+  grid-template-rows: [header-start] 56px [header-end row-start] auto [row-end];
+
+  &__wrapper {
+    margin-top: 10px;
+    margin-right: -30px;
+    background-color: var(--itf-table-background-color);
+    padding-right: 0;
+    //overflow: hidden;
+    width: 100%;
+  }
+
+  &__headers {
+    .scroller {
+      overflow-x: hidden;
+      overflow-y: visible;
+      padding-bottom: 1px;
+    }
+    .itf-table__header-row {
+      display: grid;
+      grid-template-columns: var(--itf-table-template);
+    }
+    .itf-table__header.align-left > span {
+      justify-content: flex-start;
+      text-align: left;
+    }
+  }
+  &__rows {
+    display: grid;
+    overflow: auto;
+    grid-template-columns: var(--itf-table-template);
+    padding-bottom: 10px;
+
+    & > .itf-table__row {
+      display: contents;
+
+      &:not(.itf-table__summary-row) {
+        cursor: var(--itf-table-row-cursor);
+      }
+    }
+  }
+
+  &--striped &__row:nth-child(even) &__cell {
+    background-color: var(--itf-table-strip-color);
+  }
+
+  &__cell.itf-table__cell--sorted {
+    background-color: var(--itf-table-sorted-color);
+  }
+  &--hoverable &__rows{
+    & > .itf-table__row:not(.itf-table__summary-row) {
+      &:hover > .itf-table__cell,
+      &:hover > .itf-table__cell--sorted {
+        background-color: var(--itf-table-hover-color);
+      }
+    }
+  }
+
+  .itf-table__sticky-header &__headers {
+    position: sticky;
+    top: var(--itf-table-sticky-top);
+    z-index: 4;
+
+    .itf-table__header-row:last-child .itf-table__header {
+      &:after {
+        display: block;
+        content: ' ';
+        border-top: 1px solid var(--itf-table-border-color);
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 0;
+      }
+    }
+  }
+
+  &__header {
+    background-color: var(--itf-table-background-color);
+    grid-row: header;
+    font-weight: 500;
+    &--sortable {
+      cursor: pointer;
+    }
+    &--sorted {
+      background-color: var(--itf-table-sorted-color);
+    }
+
+    & > span {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      height: 100%;
+      display: block;
+      padding: 8px 10px;
+      text-align: right;
+
+      &:hover .com-table-sort-btn {
+        opacity: 1;
+      }
+    }
+
+    &:first-child > span {
+      text-align: left;
+    }
+  }
+
+  &__small &__header span, &__small &__cell {
+    padding: 4px 5px;
+  }
+
+  &__summary-row &__cell {
+    padding-top: 2rem;
+    border-bottom: 1px solid var(--itf-table-border-color);
+
+    &:first-child {
+      font-weight: 500;
+    }
+  }
+
+  &--borders &__cell {
+    border-bottom: 1px solid var(--itf-table-border-color);
+  }
+
+  &__cell {
+    background-color: var(--itf-table-background-color);
+    padding: 8px 10px;
+    //border-left: 1px solid var(--itf-table-border-color);
+    align-items: center;
+    display: flex;
+    justify-content: end;
+    text-align: right;
+    word-break: break-word;
+
+    &:first-child, &.align-left {
+      justify-content: flex-start;
+      text-align: left;
+    }
+  }
+
+  // First column sticky
+  &__sticky-column & {
+    .itf-table__header:nth-child(1) {
+      position: sticky;
+      left: 0;
+      z-index: 5;
+      border-right: solid 1px var(--itf-table-border-color);
+    }
+    .itf-table__cell:nth-child(1) {
+      position: sticky;
+      left: 0;
+      z-index: 3;
+      border-right: solid 1px var(--itf-table-border-color);
+    }
+  }
+  &__sticky-column &__header, &__sticky-column &__cell {
+    &:first-child {
+      &:before {
+        content: " ";
+        display: block;
+        //background: rgba(0, 0, 0, .1);
+        top: 0;
+        left: 100%;
+        width: 1px;
+        box-shadow: var(--itf-table-sticky-shadow1) 2px 0px 3px, var(--itf-table-sticky-shadow2) 2px 0px 3px;
+        height: 100%;
+        bottom: 0;
+        position: absolute;
+        opacity: 0;
+        transition: opacity .25s ease-in-out;
+      }
+    }
+  }
+  .scrolled-x & {
+    .itf-table__header, .itf-table__cell {
+      &:first-child {
+        &:before {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  // Last column sticky
+  &__sticky-last-column & {
+    .itf-table__header:last-child {
+      position: sticky;
+      right: 0;
+      z-index: 5;
+      border-left: solid 1px var(--itf-table-border-color);
+    }
+    .itf-table__cell:last-child {
+      position: sticky;
+      right: 0;
+      z-index: 3;
+      border-left: solid 1px var(--itf-table-border-color);
+    }
+  }
+  &__sticky-last-column &__header, &__sticky-column &__cell {
+    &:last-child {
+      &:before {
+        content: " ";
+        display: block;
+        //background: rgba(0, 0, 0, .1);
+        top: 0;
+        left: 0;
+        width: 1px;
+        box-shadow: var(--itf-table-sticky-shadow1) -2px 0px 3px, var(--itf-table-sticky-shadow2) -2px 0px 3px;
+        height: 100%;
+        bottom: 0;
+        position: absolute;
+        opacity: 1;
+        transition: opacity .25s ease-in-out;
+      }
+    }
+  }
+  .scrolled-right & {
+    .itf-table__header, .itf-table__cell {
+      &:last-child {
+        &:before {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  .scrolled-y & {
+    .scroller {
+      .itf-table__header {
+        border-top: 1px solid var(--itf-table-border-color);
+      }
+      &:after {
+        content: " ";
+        display: block;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, .1);
+        height: calc(var(--itf-table-shadow-width) - 1px); // subtract 1px border-top
+        top: 100%;
+        position: absolute;
+      }
+    }
+  }
+}
+
+.table2.table-retrieve tbody tr td.value {
+  border: solid 1px transparent; }
+
+.table2.table-border-hover tbody tr:hover td.value:hover,
+.table2.table-retrieve tbody tr:hover td.value:hover {
+  border: solid 1px #64abdc !important;
+  cursor: pointer; 
+}

package/src/{components/tabs/tabs.scss → assets/scss/components/_tabs.scss}

@@ -1,4 +1,4 @@
-@import '../../assets/scss/variables';
+@import '../variables';
 
 :root {
   --itf-tabs-active-bg: #fff;

package/src/assets/scss/components/_text-field.scss

@@ -0,0 +1,36 @@
+@import '../variables';
+
+.itf-text-field {
+  &__input {
+    border-radius: $input-border-radius !important;
+  }
+  .addon-end {
+    pointer-events: all;
+    padding-right: 0.25rem;
+  }
+}
+
+.itf-textarea {
+  position: relative;
+
+  &__input {
+    border-radius: $input-border-radius !important;
+    resize: none;
+  }
+  &__autogrow &__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+  }
+  &__autogrow &__autogrow-text {
+    white-space: pre-line;
+    visibility: hidden;
+    min-height: 4rem;
+    max-height: 75vh; // жалувались, що коли багато тексту,
+    // то поле за межі вікна виходить і не зручно
+  }
+}

package/src/assets/scss/components/_toaster.scss

@@ -0,0 +1,97 @@
+@import '../variables';
+
+.itf-toast-container.toast-container {
+  position: fixed;
+  z-index: $zindex-tooltip;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 15px;
+
+  &.is-top-left,
+  &.is-top-center,
+  &.is-top-right {
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+  &.is-top-left {
+    align-items: flex-start;
+  }
+  &.is-top-center {
+    align-items: center;
+  }
+  &.is-top-right {
+    align-items: flex-end;
+  }
+  &.is-center {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    align-items: center;
+    justify-content: center;
+  }
+  &.is-bottom-left,
+  &.is-bottom-center,
+  &.is-bottom-right {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    justify-content: flex-end;
+  }
+  &.is-bottom-left {
+    align-items: flex-start;
+  }
+  &.is-bottom-center {
+    align-items: center;
+  }
+  &.is-bottom-right {
+    align-items: flex-end;
+  }
+  &.has-mask {
+    background-color: rgba(255, 255, 255, 0.5);
+    width: 100%;
+    height: 100%;
+    pointer-events: all;
+  }
+}
+
+
+.itf-toast-wrapper {
+  max-width: 100%;
+}
+.itf-toast-fade-enter-active {
+  animation: itf-toast-fade-in-down 0.3s;
+}
+
+.itf-toast-fade-leave-active {
+  animation: itf-toast-fade-out 0.3s;
+}
+
+@keyframes itf-toast-fade-in-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+@keyframes itf-toast-fade-out {
+  0% {
+    opacity: 1;
+    margin-top: 0;
+  }
+  100% {
+    opacity: 0;
+    margin-top: -45px;
+  }
+}
+
+.itf-toast-message {
+  z-index: $zindex-toaster;
+}

package/src/assets/scss/components/_tree-view.scss

@@ -0,0 +1,17 @@
+@import '../variables';
+
+.itf-tree-view {
+  .itf-button {
+    &.depth-0 {
+      padding-left: $spacer;
+    }
+
+    &.depth-1 {
+      padding-left: $spacer * 2;
+    }
+
+    &.depth-2 {
+      padding-left: $spacer * 3;
+    }
+  }
+}

package/src/{components/wizard/wizard.scss → assets/scss/components/_wizard.scss}

@@ -1,4 +1,4 @@
-@import '../../assets/scss/variables';
+@import '../variables';
 
 .itf-wizard {
 

package/src/{components/pdf-viewer/styles → assets/scss/components/pdf-viewer}/_colors.scss

@@ -1,5 +1,5 @@
 @import "variables.scss";
-@import "../../../assets/scss/variables.scss";
+@import "../../variables.scss";
 
 .pdf-app {
   --pdf-app-background-color: #{$pdf-app-background-color};

package/src/{components/pdf-viewer/styles → assets/scss/components/pdf-viewer}/_pdf_viewer.scss

@@ -25,7 +25,7 @@
   overflow: visible;
   border: 9px solid transparent;
   background-clip: content-box;
-  border-image: url(./images/shadow.png) 9 9 repeat;
+  border-image: url(/3rdparty/pdf-viewer/shadow.png) 9 9 repeat;
   background-color: rgba(255, 255, 255, 1);
 }
 
@@ -102,7 +102,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  background: url(./images/loading-icon.svg) center no-repeat;
+  background: url(/3rdparty/pdf-viewer/loading-icon.svg) center no-repeat;
 }
 
 .pdf-app .pdfPresentationMode .pdfViewer {

package/src/{components/pdf-viewer/styles → assets/scss/components/pdf-viewer}/_viewer.scss

@@ -371,7 +371,7 @@ html[dir="rtl"] .pdf-app .findbar {
 }
 .pdf-app #findInput[data-status="pending"] {
   background-size: 16px;
-  background-image: url(./images/loading-icon.svg);
+  background-image: url(/3rdparty/pdf-viewer/loading-icon.svg);
   background-repeat: no-repeat;
   background-position: right;
 }
@@ -791,10 +791,11 @@ html[dir="rtl"] .pdf-app .verticalToolbarSeparator {
   min-width: 16px;
   text-align: right;
   width: 40px;
+  min-height: auto;
 }
 
 .pdf-app .toolbarField.pageNumber.visiblePageIsLoading {
-  background-image: url(./images/loading-icon.svg);
+  background-image: url(/3rdparty/pdf-viewer/loading-icon.svg);
   background-repeat: no-repeat;
   background-position: 1px;
   background-size: 16px;
@@ -952,12 +953,12 @@ html[dir="rtl"] .pdf-app .attachmentsItem > button {
   color: rgba(255, 255, 255, 0.5);
 }
 .pdf-app .outlineItemToggler::before {
-  content: url(./images/treeitem-expanded.png);
+  content: url(/3rdparty/pdf-viewer/treeitem-expanded.png);
   display: inline-block;
   position: absolute;
 }
 .pdf-app .outlineItemToggler.outlineItemsHidden::before {
-  content: url(./images/treeitem-collapsed.png);
+  content: url(/3rdparty/pdf-viewer/treeitem-collapsed.png);
 }
 html[dir="rtl"] .pdf-app .outlineItemToggler.outlineItemsHidden::before {
   transform: scaleX(-1);
@@ -1253,10 +1254,10 @@ html[dir="rtl"] .pdf-app #documentPropertiesOverlay .row > * {
   .pdf-app .outlineItemToggler::before {
     transform: scale(0.5);
     top: -1px;
-    content: url(./images/treeitem-expanded@2x.png);
+    content: url(/3rdparty/pdf-viewer/treeitem-expanded@2x.png);
   }
   .pdf-app .outlineItemToggler.outlineItemsHidden::before {
-    content: url(./images/treeitem-collapsed@2x.png);
+    content: url(/3rdparty/pdf-viewer/treeitem-collapsed@2x.png);
   }
   html[dir="rtl"] .pdf-app .outlineItemToggler.outlineItemsHidden::before {
     transform: scaleX(-1) scale(0.5);

package/src/assets/scss/components/{_selected.scss → select/_selected.scss}

@@ -1,4 +1,4 @@
-@import '../variables';
+@import '../../variables';
 
 /* Selected Tags */
 .vs__selected, .badge.vs__selected {

package/src/assets/scss/main.scss

@@ -1,7 +1,29 @@
-@import './variables.scss';
+@import './css_variables.scss';
 @import './fonts.scss';
 @import './dark-theme.scss';
 @import './scrollbar';
+@import './components/toaster';
+@import './components/avatar';
+@import './components/button';
+@import './components/card';
+@import './components/checkbox';
+@import './components/datepicker';
+@import './components/dropdown';
+@import './components/form';
+@import './components/icon';
+@import './components/modal';
+@import './components/pagination';
+@import './components/pdf-viewer';
+@import './components/popover';
+@import './components/segmeneted-control';
+@import './components/select';
+@import './components/table';
+@import './components/tabs';
+@import './components/text-field';
+@import './components/tree-view';
+@import './components/wizard';
+@import './directives/loading';
+@import './directives/tooltip';
 
 .form-control {
   min-height: 2.5rem;
@@ -18,7 +40,7 @@
 }
 
 .color-income {
-  color: #0d935b !important;
+  color: var(--color-income) !important;
 }
 
 .color-outcome {

package/src/components/alert/Alert.vue

@@ -9,10 +9,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/alert';
-</style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';

package/src/components/app/App.vue

@@ -3,72 +3,6 @@
     <slot></slot>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/main';
-//@import '~bootstrap/scss/reboot';
-//@import '~bootstrap/scss/type';
-//@import '~bootstrap/scss/root';
-//@import '~bootstrap/scss/toasts';
-//@import '~bootstrap/scss/close';
-
-.itf-toast-container.toast-container {
-  position: fixed;
-  z-index: $zindex-tooltip;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 15px;
-
-  &.is-top-left,
-  &.is-top-center,
-  &.is-top-right {
-    width: 100%;
-    top: 0;
-    left: 0;
-  }
-  &.is-top-left {
-    align-items: flex-start;
-  }
-  &.is-top-center {
-    align-items: center;
-  }
-  &.is-top-right {
-    align-items: flex-end;
-  }
-  &.is-center {
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    align-items: center;
-    justify-content: center;
-  }
-  &.is-bottom-left,
-  &.is-bottom-center,
-  &.is-bottom-right {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    justify-content: flex-end;
-  }
-  &.is-bottom-left {
-    align-items: flex-start;
-  }
-  &.is-bottom-center {
-    align-items: center;
-  }
-  &.is-bottom-right {
-    align-items: flex-end;
-  }
-  &.has-mask {
-    background-color: rgba(255, 255, 255, 0.5);
-    width: 100%;
-    height: 100%;
-    pointer-events: all;
-  }
-}
-</style>
 <script>
 import { Vue, Component } from 'vue-property-decorator';
 import Message from './message';