@itfin/components 1.3.96 → 2.0.1

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: 14px;
+  --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,7 +45,8 @@ 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;
 
   .scrollable {
     -webkit-overflow-scrolling: touch;
@@ -50,6 +56,7 @@ body[data-theme="dark"] {
   .scrollable-x {
     overflow-x: scroll;
     padding-right: 4px;
+    padding-top: 10px; // щоб drag для колонок був видимий
   }
   &.table-absolute {
     position: absolute;
@@ -92,16 +99,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 +162,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 +184,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: 20px;
+        left: 0;
+        right: 0;
+        top: -20px;
+        z-index: 4;
+        background: var(--itf-table-bg);
+      }
     }
     .table-view-header-value {
       cursor: pointer;
@@ -132,10 +209,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 +219,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 +247,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 +271,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 +318,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,32 +340,61 @@ 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);
     }
   }
 
@@ -283,6 +405,13 @@ body[data-theme="dark"] {
       }
     }
   }
+  .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;
     align-items: stretch;
@@ -316,9 +445,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 +484,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/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) {

package/src/components/view/View.vue

@@ -0,0 +1,119 @@
+<template>
+
+  <div v-loading="loading" class="flex-grow-1 w-100 d-flex flex-column">
+    {{filter}}
+    <itf-filter-panel
+      search-placeholder="Search by text"
+      search
+      class="py-2 px-3"
+      :static-filters="filters"
+      v-model="filter"
+      @input="$emit('load')"
+    >
+      <template #after-filter-btn>
+        <itf-dropdown v-if="$refs.table" shadow :button-options="{ default: true, icon: true }" autoclose="outside">
+          <template #button>
+            <itf-icon new name="table-view" />
+          </template>
+          <div class="dropdown-header">
+            {{ $t('components.table.columns') }}
+          </div>
+          <a v-for="(property, n) of schema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
+            <div class="d-flex align-items-center gap-1">
+              <itf-icon v-if="property.icon" :size="24" new :name="property.icon" />
+              {{property.title.en_US}}
+            </div>
+
+            <itf-icon v-if="$refs.table.getColumnVisibility(property.property)" new :size="24" name="eye-open" />
+            <itf-icon v-else new name="eye-close" />
+          </a>
+          <div class="dropdown-header">
+            {{ $t('components.table.actions') }}
+          </div>
+          <a href="" @click.stop.prevent="$refs.table.resetSettings()" class="dropdown-item justify-content-between d-flex gap-3">
+            <div class="d-flex align-items-center gap-1">
+              <itf-icon new :size="24" name="download" />
+              {{ $t('components.table.resetTableSettings') }}
+            </div>
+          </a>
+        </itf-dropdown>
+      </template>
+    </itf-filter-panel>
+
+    <div class="flex-grow-1 px-3 d-flex flex-column">
+      <div class="position-relative flex-grow-1">
+        <itf-table
+          ref="table"
+          style="--shadow-area-width: 0px;"
+          absolute
+          striped
+          column-sorting
+          column-resizing
+          :rows="items"
+          :schema="schema"
+        >
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}"/>
+          </template>
+          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}"/>
+          </template>
+        </itf-table>
+      </div>
+    </div>
+
+    <itf-pagination
+      class="my-2 px-3"
+      show-size
+      :size="size"
+      :items="items"
+      :pages="countPages"
+      :value="page"
+      @input="$emit('update:page', $event)"
+    >
+      <template #center>
+        <slot name="pagination-center" />
+      </template>
+    </itf-pagination>
+  </div>
+
+</template>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import loading from '../../directives/loading';
+import itfTable from '../table/Table2.vue';
+import itfFilterPanel from '../filter/FilterPanel.vue';
+import itfPagination from '../pagination/Pagination2.vue';
+import itfTableBody from "@/components/table/TableBody.vue";
+import itfIcon from "@/components/icon/Icon.vue";
+import itfDropdown from "@/components/dropdown/Dropdown.vue";
+
+export default @Component({
+  name: 'itfView',
+  components: {
+    itfDropdown, itfIcon,
+    itfPagination,
+    itfFilterPanel,
+    itfTableBody,
+    itfTable
+  },
+  directives: {
+    loading
+  }
+})
+class itfView extends Vue {
+  @Prop({ type: Boolean }) loading;
+  @Prop({ type: Array, required: true }) items;
+  @Prop({ type: Array }) filters;
+  @Prop({ type: Object, required: true }) schema;
+  @Prop({ default: 20 }) size;
+  @Prop({ default: 100 }) total;
+  @Prop({ default: 1 }) page;
+
+  filter = {};
+
+  get countPages() {
+    return Math.ceil(this.total / this.size);
+  }
+}
+</script>