@itfin/components 1.3.96 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.96",
+  "version": "2.0.2",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/_css_variables.scss

@@ -1,8 +1,8 @@
 @import './variables.scss';
 @import './bootstrap.scss';
 
-$color-income: #0d935b;
-$color-outcome: #b91e1e;
+$color-income: #46A856;
+$color-outcome: #DC5C2E;
 
 :root {
   --color-income: #{$color-income};

package/src/assets/scss/_variables.scss

@@ -26,21 +26,22 @@ $success: #10834e;
 $warning: #cda277;
 $danger: #cb4839;
 
-$primary: #0B314F !default;
-$link-color: #0B314F !default;
+$primary: #0B1315 !default;
+$secondary: #f2f2f2;
+$link-color: #1A4A97 !default;
 $input-btn-focus-width: .125rem;
 
-$input-bg: #f3f3f3 !default;
-$input-border-color: rgba(#000, .08);
+$input-bg: #F2F4F7 !default;
+$input-border-color: #F2F4F7;
 $input-border-radius: 10px;
 $input-font-size: 0.875rem;
 $input-font-family: "Fira Mono", "Courier New", monospace;
 
-$input-focus-bg: #fff;
-$input-focus-border-color: #fff;
+$input-focus-bg: #F2F4F7;
+$input-focus-border-color: #F2F4F7;
 
 $form-label-margin-bottom: .1rem;
-$input-focus-border: rgb(11 49 79 / 25%);
+$input-focus-border: #F2F4F7;//rgb(11 49 79 / 25%);
 
 $form-check-input-border: 1px solid rgba(#000, .08);
 $form-switch-focus-color: tint-color($primary, 50%);
@@ -49,8 +50,6 @@ $modal-backdrop-bg: #999;
 $modal-backdrop-opacity: .25;
 $modal-content-border-radius: 0;
 
-$secondary: #dfe1e6;
-
 // popover
 $popover-border-width: 2px;
 
@@ -87,3 +86,26 @@ $primaryColor15: #DAE0E5;
 $baseText: #1e1e1e;
 $gray5: #F0F0F1;
 $gray50: #787885;
+
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "blue":       $link-color
+);
+
+// згідно з дизайном
+$body-color: #22222B;
+$dropdown-border-radius: .75rem;
+$dropdown-padding-x: .5rem;
+$dropdown-item-padding-x: .5rem;
+$dropdown-link-hover-bg: #F1F2F4;
+$border-color-translucent:    #00000014;
+$dropdown-header-color: #A5A5A9;
+$input-group-addon-bg: $input-bg;
+$form-check-input-checked-bg-color: #22222B;
+$form-check-input-indeterminate-bg-color: #22222B;
+$nav-link-color: $primary;

package/src/assets/scss/components/_button.scss

@@ -139,4 +139,14 @@
       }
     }
   }
+
+  &.btn-default {
+    border: 1px solid #0000001A;
+    color: #8E97A5;
+
+    &.active, &:hover, &.show {
+      border: 1px solid #1A4A974D;
+      color: #1A4A97;
+    }
+  }
 }

package/src/assets/scss/components/_datepicker.scss

@@ -114,7 +114,7 @@
   --adp-transition-ease: ease-out;
   --adp-transition-offset: 8px;
 
-  --adp-background-color: #{$body-bg};
+  --adp-background-color: transparent;
   --adp-background-color-hover: #f0f0f0;
   --adp-background-color-active: #eaeaea;
   --adp-background-color-in-range: rgba(92, 196, 239, .1);
@@ -123,7 +123,7 @@
   --adp-background-color-selected-other-month: #a2ddf6;
 
   --adp-color: #4a4a4a;
-  --adp-color-secondary: #9c9c9c;
+  --adp-color-secondary: #A5A5A9;
   --adp-accent-color: #4eb5e6;
   --adp-color-current-date: #{$primary};
   --adp-color-other-month: #dedede;
@@ -132,7 +132,7 @@
   --adp-color-other-month-hover: #c5c5c5;
 
   --adp-border-color: #dbdbdb;
-  --adp-border-color-inner: #efefef;
+  --adp-border-color-inner: #00000014;
   --adp-border-radius: 4px;
   //--adp-border-color-inline: #d7d7d7;
   --adp-border-color-inline: transparent;

package/src/assets/scss/components/_pagination.scss

@@ -2,11 +2,14 @@
 
 .itf-pagination.pagination {
   padding-left: 0;
+  display: flex;
+  align-items: center;
+  gap: .5rem;
 
   .page-item {
-    margin-right: 3px;
     .page-link {
       border-radius: .5rem;
+      padding: .125rem .25rem
     }
 
     &.disabled .page-link {

package/src/assets/scss/components/_select.scss

@@ -41,7 +41,7 @@
   cursor: pointer;
 
   .form-control {
-    padding: 0.3125rem 0.75rem;
+    padding: 0.25rem 0.75rem;
 
     &.is-valid, &.is-invalid {
       background-image: none;
@@ -58,16 +58,14 @@
     padding-bottom: 0.125rem;
   }
   &.vs--open .form-control {
-    box-shadow: 0 0 0 0.125rem $input-focus-border;
-    border-color: $body-bg;
-    background: $body-bg;
+    //box-shadow: 0 0 0 0.125rem $input-focus-border;
+    //border-color: $body-bg;
+    //background: $body-bg;
   }
   &__dropdown-menu {
     background-color: $body-bg;
     //border: 2px solid $input-focus-border;
     border: 0 none;
-    padding-left: 0.125rem !important;
-    padding-right: 0.125rem !important;
     left: -2px;
     right: -2px;
     width: auto;

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

@@ -2,10 +2,10 @@
 
 .itf-text-field {
   &__input {
-    .addon + & {
-      border-top-left-radius: $input-border-radius !important;
-      border-bottom-left-radius: $input-border-radius !important;
-    }
+    min-height: 2rem;
+    border: 0 none;
+    background-color: transparent !important;
+
     -moz-appearance: textfield; // Hide Arrows From Input Number (Firefox)
 
     &::-webkit-outer-spin-button,  // Hide Arrows From Input Number (Chrome, Safari, Edge, Opera)
@@ -14,9 +14,19 @@
       margin: 0;
     }
   }
-  .addon-end {
-    pointer-events: all;
-    padding-right: 0.25rem;
+  .input-group-text {
+    background: transparent;
+    padding: 0.375rem 0 0.375rem 0.75rem;
+  }
+  &.is-valid .input-group-text {
+    color: var(--bs-form-valid-border-color);
+  }
+  &.is-invalid .input-group-text {
+    color: var(--bs-form-invalid-border-color);
+  }
+  .was-validated &.form-control:valid, &.form-control.is-valid,
+  .was-validated &.form-control:invalid, &.form-control.is-invalid {
+    background-image: none;
   }
 }
 
@@ -30,10 +40,8 @@
     z-index: 10;
   }
   &__input {
-    .addon + & {
-      border-top-left-radius: $input-border-radius !important;
-      border-bottom-left-radius: $input-border-radius !important;
-    }
+    border: 0 none;
+    //background-color: transparent !important;
     resize: none;
   }
   &__autogrow &__input {

package/src/assets/scss/main.scss

@@ -28,8 +28,8 @@
 @import './directives/tooltip';
 
 .form-control {
-  min-height: 2.5rem;
-  box-shadow: 0 2px 10px rgba(0,0,0,.05);
+  //min-height: 2.5rem;
+  //box-shadow: 0 2px 10px rgba(0,0,0,.05);
 }
 
 .color-project-tnm {
@@ -60,3 +60,42 @@ kbd {
     color: var(--bs-primary-color) !important
   }
 }
+
+// згідно з дизайном
+.dropdown-header {
+  font-size: .75rem;
+  padding: .75rem .5rem .25rem;
+
+  &:first-child {
+    padding-top: .25rem;
+  }
+}
+.dropdown-item {
+  --bs-dropdown-link-active-bg: #F1F2F4;
+  --bs-dropdown-link-active-color: var(--bs-body-color);
+  &:not(:last-child) {
+    margin-bottom: 1px;
+  }
+
+  svg {
+    color: #8E97A5;
+  }
+  &:hover svg {
+    color: var(--bs-body-color);
+  }
+}
+body .form-check-input:checked[type=checkbox] {
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  box-shadow: 0px 2px 3px 0px #00000026;
+}
+body .form-check-input:indeterminate[type=checkbox] {
+  box-shadow: 0px 2px 3px 0px #00000026;
+}
+.text-muted {
+  color: #666770;
+}
+body .form-control {
+  &:focus {
+    box-shadow: none !important;
+  }
+}

package/src/components/app/message.js

@@ -38,7 +38,7 @@ const Message = function (options) {
   const parent = document.getElementById('itf-app');
 
   const instance = new ToastContainer({
-    parent: $nuxt.$el.__vue__,
+    // parent: $nuxt.$el.__vue__,
     el: document.createElement('itf-toast-container'),
     data: options
   });

package/src/components/button/Button.vue

@@ -10,6 +10,7 @@ export default @Component({
 class itfButton extends Vue {
   @Prop(Boolean) labeled;
   @Prop(Boolean) primary;
+  @Prop(Boolean) default;
   @Prop(Boolean) secondary;
   @Prop(Boolean) loading;
   @Prop(Boolean) small;
@@ -27,7 +28,7 @@ class itfButton extends Vue {
 
   render (createElement, { data, slots, children, props }) {
     const {
-      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle,
+      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle, default: defaultStyle,
       class: classNames
     } = props;
     const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
@@ -44,7 +45,8 @@ class itfButton extends Vue {
         'labeled': labeled,
         'disabled': disabled || loading,
         'btn-primary': primary,
-        'btn-basic': !primary && !secondary && !color,
+        'btn-default': defaultStyle,
+        'btn-basic': !primary && !secondary && !color && !defaultStyle,
         'btn-secondary': secondary,
         'btn-squircle': squircle,
         'btn-sm': small,

package/src/components/filter/FilterAmountRange.vue

@@ -1,27 +1,25 @@
 <template>
-  <div class="py-2" @mousemove="onRefresh" @mouseup="onUpdateValue">
-    <div class="px-1">
-      <div v-if="histogram" class="histogram px-3">
-        <div v-for="(item, n) in histogramPerc" :key="n" :style="`--bar-height: ${item}px`"></div>
-      </div>
-
-      <itf-range
-        ref="range"
-        :value="value"
-        :width="260"
-        @input="onChange"
-        :min="min"
-        :max="max"
-        :stop-propagation="false"
-        :use-keyboard="false"
-        :tooltip="false"
-        :tooltip-merge="false"
+  <div class="py-1 px-1 small text-muted">
+    <itf-label :label="$t('components.filter.filterBy')" hide-details class="w-100">
+      <itf-select
+        v-model="filterType"
+        :options="filterTypes"
+        :get-option-label="option => option.text"
+        :reduce="option => option.value"
+        @input="onChangeType"
       />
+    </itf-label>
 
-      <div v-if="internalValue" class="d-flex justify-content-between gap-5">
-        <itf-text-field small type="number" :value="internalValue[0]" @input="onChange([$event, internalValue[1]], true)" />
-        <itf-text-field small type="number" :value="internalValue[1]" @input="onChange([internalValue[0], $event], true)" />
-      </div>
+    <itf-label v-if="filterType === 'exact'" :label="$t('components.filter.value')" hide-details class="mb-0 w-100">
+      <itf-text-field type="number" :value="internalValue" @input="onChange($event)" />
+    </itf-label>
+    <div v-else-if="internalValue" class="d-flex justify-content-between gap-2">
+      <itf-label :label="$t('components.filter.from')" hide-details class="mb-0 w-100">
+        <itf-text-field type="number" :value="internalValue[0]" @input="onChange([$event, internalValue[1]])" />
+      </itf-label>
+      <itf-label :label="$t('components.filter.to')" hide-details class="mb-0 w-100">
+        <itf-text-field type="number" :value="internalValue[1]" @input="onChange([internalValue[0], $event])" />
+      </itf-label>
     </div>
   </div>
 </template>
@@ -42,13 +40,18 @@
 </style>
 <script>
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
+import itfLabel from '../form/Label.vue';
+import itfSelect from '../select/Select.vue';
 import itfTextField from '../text-field/TextField.vue';
 import itfRange from '../range/Range.vue';
+import debounce from 'lodash/debounce';
 
 export default @Component({
   name: 'FilterAmountRange',
   components: {
+    itfSelect,
     itfTextField,
+    itfLabel,
     itfRange
   }
 })
@@ -58,36 +61,41 @@ class FilterAmountRange extends Vue {
   @Prop() max;
   @Prop() histogram;
 
-  isRefreshed = false;
-  internalValue = null;
-
-  mounted() {
-    this.internalValue = this.value;
-  }
+  filterType = false;
+  internalValue = 'exact';
+  onChangeFn = null;
 
-  get histogramPerc() {
-    const max = Math.max(...this.histogram);
-    return this.histogram.map(item => Math.round(item / max * 100));
+  get filterTypes() {
+    return [
+      { text: this.$t('components.filter.exact'), value: 'exact' },
+      { text: this.$t('components.filter.range'), value: 'range' }
+    ];
   }
 
-  onRefresh() {
-    if (this.isRefreshed) {
-      return;
-    }
-    this.isRefreshed = true;
-    this.$refs.range.refresh();
+  mounted() {
+    this.internalValue = this.value;
+    this.filterType = Array.isArray(this.internalValue) ? 'range' : 'exact';
+    this.onChangeFn = debounce(() => {
+      this.$emit('input', this.internalValue);
+    }, 500);
   }
 
-  onChange(val, isSet = false) {
-    this.isRefreshed = false;
+  onChange(val) {
     this.internalValue = val;
-    if (isSet) {
-      this.onUpdateValue();
+    if (!Number.isNaN(parseFloat(val))) {
+      this.onChangeFn()
+    }
+    if (!val) {
+      this.onChangeFn();
     }
   }
 
-  onUpdateValue() {
-    this.$emit('input', this.internalValue);
+  onChangeType(type) {
+    if (type === 'range') {
+      this.internalValue = [parseFloat(this.internalValue), parseFloat(this.internalValue)];
+    } else {
+      this.internalValue = Array.isArray(this.internalValue) ? parseFloat(this.internalValue[0]) : parseFloat(this.internalValue);
+    }
   }
 }
 </script>

package/src/components/filter/FilterBadge.vue

@@ -1,13 +1,13 @@
 <template>
-  <itf-dropdown text ref="dropdown" autoclose="outside">
+  <itf-dropdown text ref="dropdown" autoclose="outside" shadow class="h-100">
     <template #button>
-      <div class="filter-pill" :class="{'filter-not-default-pill': !isDefault && !isInvalid, 'filter-invalid-pill': isInvalid}">
+      <div class="filter-pill rounded" :class="{'filter-not-default-pill': !isDefault && !isInvalid, 'filter-invalid-pill': isInvalid}">
         <div class="filter-pill__label" :class="{'filter-pill__not-default-value': !isDefault && !isInvalid, 'filter-pill__default-value': isDefault, 'filter-pill__label-invalid': isInvalid}">
-          <itf-icon v-if="icon" :size="18" :name="icon" />
+          <itf-icon v-if="icon" :size="20" new :name="icon" class="icon" />
           {{ text }}
         </div>
         <div @click.stop.prevent="resetValue" v-if="!isDefault" class="filter-pill__icon" :class="{'filter-pill__icon-not-default-value': !isDefault && !isInvalid, 'filter-pill__icon-invalid': isInvalid}">
-          <svg width="8" height="8" viewBox="0 0 8 8" fill="#788195" xmlns="http://www.w3.org/2000/svg"><path d="M8 0.94L7.06 0L4 3.06L0.94 0L0 0.94L3.06 4L0 7.06L0.94 8L4 4.94L7.06 8L8 7.06L4.94 4L8 0.94Z" fill="inherit"></path></svg>
+          <itf-icon new name="close" />
         </div>
       </div>
     </template>
@@ -24,17 +24,19 @@
       </template>
       <template v-else-if="type === 'period'">
         <itf-date-range-picker-inline
+          style="margin: -.5rem"
           :value="value.value"
           @input="onFilterChange({ value: $event })"
         />
       </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
+          style="margin: -.5rem"
           :value="value.value"
           @input="onFilterChange({ value: $event })"
         />
       </template>
-      <div class="px-2" v-else-if="type === 'facets-list'" style="width: 300px;">
+      <div v-else-if="type === 'facets-list'" style="width: 300px;">
         <filter-facets-list
           :title="options.title"
           :value="value.value"
@@ -44,7 +46,7 @@
           @input="onFilterChange({ value: $event })"
         />
       </div>
-      <div class="px-2" v-else-if="type === 'amount'" style="width: 300px;">
+      <div v-else-if="type === 'amount'" style="width: 300px;">
         <filter-amount-range
           :value="value.value"
           :histogram="options.histogram"
@@ -59,29 +61,33 @@
 <style lang="scss">
 :root {
   --filter-badge__default-color: #475266;
-  --filter-badge__default-bg-color: #4752661A;
-  --filter-badge__default-bg-color-hover: #47526642;
+  --filter-badge__default-border-color: #0000001A;
+  --filter-badge__default-bg-color: transparent;
+  --filter-badge__default-bg-color-hover: #1A4A970D;
 
   --filter-badge__invalid-color: #D83C31;
   --filter-badge__invalid-bg-color: #D83C311A;
   --filter-badge__invalid-bg-color-hover: #D83C3142;
 
-  --filter-badge__selected-color: #2f51fe; // #0d935b;
-  --filter-badge__selected-bg-color: #2f51fe1a; // #0d935b1A;
-  --filter-badge__selected-bg-color-hover: #2f51fe42; // #0d935b42;
-  --filter-badge__padding-x: 6px; // 10px;
-  --filter-badge__padding-y: 12px;// 18px;
+  --filter-badge__selected-color: #1A4A97; // #0d935b;
+  --filter-badge__selected-bg-color: #1A4A970D; // #0d935b1A;
+  --filter-badge__selected-bg-color-hover: rgba(26, 74, 151, 0.1); // #0d935b42;
+  --filter-badge__padding-y: .5rem;
+  --filter-badge__padding-x: .75rem;
 }
 .filter-pill {
   align-items: center;
-  border-radius: 21px;
   font-size: 14px;
   line-height: 100%;
+  outline: 1px solid var(--filter-badge__default-border-color);
   background-color: var(--filter-badge__default-bg-color);
   display: flex;
   min-height: 2rem;
   transition: 0.1s;
 
+  .icon {
+    margin: -2px;
+  }
   &:hover {
     background-color: var(--filter-badge__default-bg-color-hover);
     cursor: pointer;
@@ -94,12 +100,12 @@
     background-color: var(--filter-badge__invalid-bg-color);
   }
   &.filter-pill__default-value {
-    padding: var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+    padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);
   }
 }
 .filter-pill__label {
   color: var(--filter-badge__default-color);
-  padding: var(--filter-badge__padding-x) 0 var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+  padding: var(--filter-badge__padding-y) 0 var(--filter-badge__padding-y) var(--filter-badge__padding-x);
   max-width: 330px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -109,7 +115,7 @@
   align-items: center;
 
   &.filter-pill__default-value {
-    padding: var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+    padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);
   }
   &.filter-pill__not-default-value {
     color: var(--filter-badge__selected-color);
@@ -120,17 +126,16 @@
 }
 
 .filter-pill__icon {
-  padding: var(--filter-badge__padding-x) calc(var(--filter-badge__padding-x) * 2) var(--filter-badge__padding-x) var(--filter-badge__padding-x);
-  margin-top: -2px;
+  padding: 0 calc(var(--filter-badge__padding-x) / 2) 0 calc(var(--filter-badge__padding-x) / 4);
 
   svg {
-    fill: var(--filter-badge__default-color);
+    color: var(--filter-badge__default-color);
   }
   &.filter-pill__icon-invalid svg {
-    fill: var(--filter-badge__invalid-color);
+    color: var(--filter-badge__invalid-color);
   }
   &.filter-pill__icon-not-default-value svg {
-    fill: var(--filter-badge__selected-color);
+    color: var(--filter-badge__selected-color);
   }
 }
 </style>