@itfin/components 1.3.96 → 2.0.2

package/src/components/table/table2.scss

@@ -1,30 +1,35 @@
 :root {
-  --itf-table-border-color: #e1e1e1;
-  --itf-table-header-bg: #f8f8f8;
-  --itf-table-font-size: 1rem;
-  --itf-table-selected-bg: #f0f0f0;
-  --itf-table-active-bg: #e0e0e0;
-  --itf-table-alt-bg: #f9f9f9;
-  //--itf-table-border-color: #e1e1e1;
-  //--itf-table-header-bg: #f9faf5;
-  //--itf-table-selected-bg: #cbd6f4;
-  --itf-table-header-bg: #f8f8f8;
-  --itf-table-border-color: #dbddd1;
-  --itf-table-hover-header-bg: var(--bs-tertiary-bg);
-  --itf-table-hover-bg: #f2f2f2;
+  --itf-primary: #1A4A97;
+  --itf-table-header-font-size: 12px;
+  --itf-table-content-font-size: 16px;
+  --itf-table-selected-bg: #f9fafc;
+  --itf-table-active-bg: #1A4A971A;
+  --itf-table-alt-bg: #F9FAFB;
+  --itf-table-alt-selected-bg: #eff1f3;
+  --itf-table-header-bg: #f5f7f8;
+  --itf-table-header-color: #8E97A5;
+  --itf-table-mirror-bg: #F2F4F7;
+  --itf-table-border-color: transparent; //var(--itf-table-header-bg);
+  --itf-table-header-border-color: #8E97A533;
+  --itf-table-border-base-color: var(--itf-table-header-bg); // кольори границь таблиці без внутрішніх рядків
+  --itf-table-border-base-width: 2px;
+  --itf-table-hover-header-bg: #1A4A971A;
+  --itf-table-hover-bg: #e9edf5;
   --itf-table-bg: var(--bs-body-bg);
   --itf-table-min-width: 45px;
   --itf-table-input-border-color: #aaaba6;
   --itf-table-input-focus-border-color: #0028aa;
   --itf-table-header-subtitle-color: #aeafaa;
   --itf-table-summary-text: var(--bs-tertiary-color);
+  --itf-table-table-border-radius: 1rem;
+  --itf-table-header-height: 2.25rem;
 
   --group-title-height: 40px;
-  --table-row-height: 36px;
-  --table-small-row-size: var(--table-row-height);
+  --table-row-height: none;
+  --table-small-row-size: 3rem;
   --shadow-area-width: 12px;
   --indicator-area-width: 38px;
-  --hover-bg: var(--bs-tertiary-bg);
+  --bs-dropdown-item-border-radius: .5rem;
 }
 // dark
 body[data-theme="dark"] {
@@ -40,16 +45,27 @@ body[data-theme="dark"] {
   --itf-table-summary-text: #82909d80;
 }
 .itf-table2 {
-  font-size: var(--itf-table-font-size);
+  font-size: var(--itf-table-content-font-size, var(--itf-table-font-size));
+  position: relative;
 
+  .itf-cell-center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
   .scrollable {
     -webkit-overflow-scrolling: touch;
     overflow: hidden scroll;
     height: 100%;
   }
+  .scroller {
+    margin-bottom: .5rem;
+  }
   .scrollable-x {
     overflow-x: scroll;
     padding-right: 4px;
+    padding-top: 10px; // щоб drag для колонок був видимий
   }
   &.table-absolute {
     position: absolute;
@@ -92,16 +108,58 @@ body[data-theme="dark"] {
     pointer-events: none;
   }
   .table-header-add-column {
-    background-image: linear-gradient(90deg, transparent 0, var(--itf-table-header-bg) 10px);
+    border-top-right-radius: var(--itf-table-table-border-radius);
+    background-image: linear-gradient(90deg, var(--itf-table2-row-bg) 0, var(--itf-table-header-bg) 10px);
   }
 
+  &__header-icon {
+    margin-top: -1px;
+  }
+  &__drag-column {
+    position: absolute;
+    top: -.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+    opacity: 0;
+    transition: opacity 0.2s;
+    cursor: move;
+    height: 1.5rem !important;
+    padding: 0 !important;
+    min-height: auto !important;
+  }
+  .last-sticky-column {
+    position: relative;
+    &:after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 20px;
+      z-index: 1;
+      bottom: 5px;
+      box-shadow: 0px 4px 20px 0px #0000001A;
+    }
+  }
   &__header {
-    --itf-table2-row-bg: --itf-table-header-bg;
-    background-color: var(--itf-table-header-bg);
+    --itf-table2-row-bg: var(--itf-table-header-bg);
+    //background-color: var(--itf-table-header-bg);
     position: sticky;
     top: 0;
     z-index: calc(var(--row-count) + 1);
+    font-size: var(--itf-table-header-font-size, var(--itf-table-font-size));
+    color: var(--itf-table-header-color);
+    text-transform: uppercase;
 
+    .table-view-header-value:hover {
+      .itf-table2__drag-column {
+        opacity: 1;
+      }
+    }
+
+    .table-view-item-value.extra {
+      border-top-right-radius: var(--itf-table-table-border-radius);
+    }
     &.no-header {
       --table-row-height: 0px;
       --table-small-row-size: 0px;
@@ -113,10 +171,21 @@ body[data-theme="dark"] {
     }
     .table-header.draggable-mirror{
       z-index: 100000001;
-      background: rgba(235,237,239,0.75);
+      border-radius: .25rem;
+      border: 1px solid var(--itf-primary);
+      color: var(--itf-primary);
+      background-color: var(--itf-table-hover-header-bg);
+
+      .itf-table2__drag-column {
+        opacity: 1;
+        display: block;
+      }
+    }
+    .itf-table2 & .boundary.right {
+      top: var(--itf-table-table-border-radius);
     }
     .itf-table2 & .boundary.top, .itf-table2 & .boundary.bottom {
-      border-color: var(--itf-table-border-color)
+      border-color: transparent;// var(--itf-table-border-color)
     }
     .table-row-template {
       display: flex;
@@ -124,6 +193,23 @@ body[data-theme="dark"] {
       align-items: stretch;
       height: auto;
       user-select: none;
+      background: var(--itf-table-bg);
+      min-height: var(--itf-table-header-height);
+
+      &:not(.draggable-container--is-dragging) .table-view-header-value {
+        z-index: 9;
+      }
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        height: 12px;
+        left: 0;
+        right: 0;
+        top: -12px;
+        z-index: 4;
+        background: var(--itf-table-bg);
+      }
     }
     .table-view-header-value {
       cursor: pointer;
@@ -132,10 +218,9 @@ body[data-theme="dark"] {
       height: auto;
       white-space: nowrap;
       //border-top: 0;
-      border-top: 1px solid var(--itf-table-border-color);
+      //border-top: 1px solid var(--itf-table-border-color);
       border-left: 0;
-      border-right: 1px solid var(--itf-table-border-color);
-      border-bottom: 1px solid var(--itf-table-border-color);
+      //border-bottom: 1px solid var(--itf-table-border-color);
       position: relative;
       display: flex;
       min-width: var(--itf-table-min-width);
@@ -143,14 +228,25 @@ body[data-theme="dark"] {
       //background-color: var(--bs-body-bg);
       //background-color: rgb(238 238 238 / 1);
       //font-weight: 500;
-
-      &.last-sticky-column {
-        border-right-color: var(--bs-border-color);
+      &:not(.reserved) {
+        border-right: 1px solid var(--itf-table-header-border-color);
+      }
+      &.active .table-header {
+        color: var(--itf-primary);
+        background-color: var(--itf-table-hover-header-bg);
       }
+
+      //&.last-sticky-column {
+      //  border-right-color: var(--bs-border-color);
+      //}
       &.reserved {
-        border-left: 1px solid var(--itf-table-border-color);
+        border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
         left: var(--shadow-area-width);
         width: var(--indicator-area-width);
+
+        &.sticky {
+            border-top-left-radius: var(--itf-table-table-border-radius);
+        }
       }
       &.sticky {
         position: sticky;
@@ -160,16 +256,21 @@ body[data-theme="dark"] {
     }
     .table-header {
       flex: 0 0 auto;
-      overflow: hidden;
+      //overflow: hidden;
       width: 100%;
+      height: 100%;
       text-overflow: ellipsis;
-      padding-left: 0.75rem;
-      padding-right: 0.5rem;
       gap: 0.25rem;
       align-items: center;
+      position: relative;
+      z-index: 2;
+      background: var(--itf-table-header-bg);
+
       & > div {
+        padding: .5rem .75rem;
+        height: 100%;
         min-height: var(--table-row-height);
-        align-items: center;
+        align-items: start;
         justify-content: space-between;
         display: flex;
       }
@@ -179,12 +280,12 @@ body[data-theme="dark"] {
       }
     }
     .resize-handle {
-      width: 4px;
+      width: 2px;
       bottom: 0;
       position: absolute;
-      right: -2px;
+      right: -1px;
       top: 0;
-      background: #29ACE1;
+      background: var(--itf-primary);
       border-radius: 2px;
       z-index: 100;
       opacity: 0;
@@ -226,19 +327,20 @@ body[data-theme="dark"] {
       }
       &.active {
         display: block;
+
+        .drag-handle {
+          opacity: 1;
+        }
         &.over {
-          background: #47BEFF;
+          background: var(--itf-primary);
         }
       }
     }
-    .draggable-mirror {
-      opacity: .5;
-    }
     .draggable-container--over .table-view-header-space {
       display: block;
     }
     .draggable-container--over .draggable--over .table-view-header-space {
-      background: #47BEFF;
+      background: var(--itf-primary);
     }
     .table-view-header-space > .table-view-header-dropzone {
       position: absolute;
@@ -247,41 +349,77 @@ body[data-theme="dark"] {
       bottom: 0;
       left: -50px;
     }
-    .table-view-header-value:not(.reserved):hover {
-      background-color: var(--itf-table-hover-header-bg);
+    .table-view-header-value:not(.reserved):hover .table-header {
+      color: var(--itf-primary);
+      //background-color: var(--itf-table-hover-header-bg);
     }
     .draggable-source--is-dragging {
-      z-index: 100;
+      z-index: 1000;
+      color: transparent;
+      background: var(--itf-table-mirror-bg);
+    }
+    .draggable-container--is-dragging {
+      .itf-table2__drag-column, .resize-handle {
+        display: none;
+      }
     }
   }
 
+  &__title-container, &__header-title, &__title, &__subtitle {
+    min-width: 0; // for text ellipsis
+  }
   &__subtitle {
     color: var(--itf-table-header-subtitle-color);
+
+    .draggable-source--is-dragging & {
+      color: transparent;
+    }
   }
 
   .table-view-item {
     --itf-table2-row-bg: var(--itf-table-bg);
+    --itf-table2-border-color: var(--itf-table-border-base-color);
 
     background-color: var(--itf-table2-row-bg);
 
-    &.selected, &:hover {
+    &.selected {
+      --itf-table2-border-color: var(--bs-body-color);
+    }
+    &:hover {
+      --itf-table2-row-bg: var(--itf-table-hover-bg) !important;
+    }
+    &.selected {
       --itf-table2-row-bg: var(--itf-table-selected-bg) !important;
+      &:nth-child(even) {
+        --itf-table2-row-bg: var(--itf-table-alt-selected-bg) !important;
+      }
+
+      &:hover {
+        --itf-table2-row-bg: var(--itf-table-hover-bg) !important;
+      }
     }
     &.active {
       --itf-table2-row-bg: var(--itf-table-active-bg) !important;
     }
 
     .indicator {
-      border-left: 1px solid var(--itf-table-border-color);
+      border-left: var(--itf-table-border-base-width) solid var(--itf-table2-border-color);
     }
   }
 
-  &:hover, &.permanent-editable-border {
-    .table-view-item-value.editable {
-      .form-control {
-        border: 1px solid var(--itf-table-input-border-color);
-      }
-    }
+  //&:hover, &.permanent-editable-border {
+  //  .table-view-item-value.editable {
+  //    .form-control {
+  //      border: 1px solid var(--itf-table-input-border-color);
+  //    }
+  //  }
+  //}
+  .table-view-item-value-content {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    background: var(--itf-table2-row-bg)
   }
   .table-view-item-value {
     text-overflow: ellipsis;
@@ -298,16 +436,16 @@ body[data-theme="dark"] {
     &.editable {
       padding: 2px;
 
-      .form-control {
-        border-radius: 0;
-        border: 1px solid transparent;
-        background-color: transparent;
-        box-shadow: none;
-
-        &:focus {
-          border-color: var(--itf-table-input-focus-border-color);
-        }
-      }
+      //.form-control {
+      //  border-radius: 0;
+      //  border: 1px solid transparent;
+      //  background-color: transparent;
+      //  box-shadow: none;
+      //
+      //  &:focus {
+      //    border-color: var(--itf-table-input-focus-border-color);
+      //  }
+      //}
     }
 
     &.highlight-drop-column {
@@ -316,9 +454,9 @@ body[data-theme="dark"] {
       &:after {
         content: "";
         height: 100%;
-        z-index: 100;
+        z-index: 1000;
         width: 2px;
-        background: #47beff;
+        background: var(--itf-primary);
         margin-left: -1px;
         position: absolute;
         left: 0;
@@ -355,7 +493,7 @@ body[data-theme="dark"] {
 
     &.right {
       left: auto;
-      border-right: 1px solid var(--itf-table-border-color);
+      border-right: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
       right: 0;
     }
 

package/src/components/text-field/MoneyField.vue

@@ -1,26 +1,24 @@
 <template>
   <div class="itf-money-field ph-no-capture" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div class="h-100" :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
-      <span class="itf-money-field__prepend" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
+    <div class="input-group h-100" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
+      <span class="input-group-text pe-1" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
       <i-mask-component
         ref="input"
         v-bind="mask"
-        class="form-control h-100"
+        class="form-control"
         :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
         @input="setValue"
         :value="maskedValue"
         :unmask="false"
         :disabled="disabled"
       />
-    </div>
-
-    <div v-if="currencySelect" class="itf-money-field__currency">
-      <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
-      <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
+      <span v-if="currencySelect" class="input-group-text ps-1">{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
+      <select v-if="currencySelect && !disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
         <option v-for="currency in currenciesList" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
           {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
         </option>
       </select>
+      <slot name="postfix"></slot>
     </div>
   </div>
 </template>
@@ -28,50 +26,9 @@
 .itf-money-field {
   position: relative;
 
-  input {
-    padding-left: var(--itf-money-field-padding-left, 1.5rem);
-
-    &.is-invalid, &.is-valid {
-      padding-right: 4rem;
-    }
-  }
-  &.currency-select {
-    input {
-      padding-right: 3rem;
-    }
-    &.currency-arrow {
-      input {
-        padding-right: 4.5rem;
-      }
-    }
-  }
-
-  &__prepend {
-    position: absolute;
-    left: .75rem;
-    top: .5rem;
-    bottom: .5rem;
-    display: flex;
-    align-items: center;
-  }
-  &__currency {
-    position: absolute;
-    right: .75rem;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    .is-invalid &, .is-valid & {
-      right: 1.75rem;
-    }
-
-    select {
-      position: absolute;
-      height: 100%;
-      right: 0;
-      opacity: 0;
-      left: 0;
-    }
+  .form-control {
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 </style>

package/src/components/text-field/TextField.vue

@@ -1,9 +1,9 @@
 <template>
 
-  <div class="itf-text-field input-group" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
+  <div class="itf-text-field input-group form-control p-0" :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }">
     <slot name="addon">
-      <div class="addon" v-if="prependIcon">
-        <itf-icon :name="prependIcon"/>
+      <div class="input-group-text" v-if="prependIcon">
+        <itf-icon :size="small ? 18 : 20" :name="prependIcon"/>
       </div>
     </slot>
 
@@ -11,7 +11,7 @@
       ref="input"
       autocomplete="off"
       :placeholder="placeholder"
-      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess(), 'form-control-sm': small }"
+      :class="{ 'form-control-sm': small }"
       class="itf-text-field__input form-control"
       :type="type"
       :value="value"
@@ -24,12 +24,13 @@
       @blur="$emit('blur', $event)"
       @focus="$emit('focus', $event)"
       @change="$emit('change', $event.target.value)"
+      :maxlength="maxlength"
       :min="min"
       :max="max"
       :step="step"
     />
 
-    <div class="addon-end" v-if="clearable && value">
+    <template v-if="clearable && value">
       <slot name="clear">
         <itf-button
           icon
@@ -39,7 +40,7 @@
           <itf-icon name="close" />
         </itf-button>
       </slot>
-    </div>
+    </template>
   </div>
 
 </template>
@@ -64,10 +65,13 @@ class itfTextField extends Vue {
   @Prop() step;
   @Prop() min;
   @Prop() max;
+  @Prop() maxlength;
   @Prop(Boolean) clearable;
   @Prop(Boolean) disabled;
   @Prop(Boolean) readonly;
   @Prop(Boolean) small;
+  @Prop(Boolean) invalid;
+  @Prop(Boolean) valid;
   @Prop({ type: String, default: 'text' }) type;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
 
@@ -78,11 +82,11 @@ class itfTextField extends Vue {
   }
 
   isInvalid() {
-    return this.itemLabel && this.itemLabel.isHasError();
+    return typeof this.invalid !== 'undefined' ? this.invalid : (this.itemLabel && this.itemLabel.isHasError());
   }
 
   isSuccess() {
-    return this.itemLabel && this.itemLabel.isHasSuccess();
+    return typeof this.valid !== 'undefined' ? this.valid : (this.itemLabel && this.itemLabel.isHasSuccess());
   }
 
   insertTextToCurrentPosition(text) {