@itfin/components 1.4.35 → 1.4.40

package/src/components/table/table2.scss

@@ -7,10 +7,10 @@
   --itf-table-alt-bg: #F9FAFB;
   --itf-table-alt-selected-bg: #eff1f3;
   --itf-table-header-bg: #f5f7f8;
-  --itf-table-header-color: #7A818EA5;
+  --itf-table-header-color: #575b63;
   --itf-table-mirror-bg: #F2F4F7;
   --itf-table-border-color: transparent; //var(--itf-table-header-bg);
-  --itf-table-header-border-color: #7A818E33;
+  --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: #dfe5ef;
@@ -23,6 +23,8 @@
   --itf-table-summary-text: var(--bs-tertiary-color);
   --itf-table-table-border-radius: 1rem;
   --itf-table-header-height: 2.25rem;
+  --itf-table-divider-bg: #F7F8FA;
+  --itf-table-divider-border: rgba(238, 238, 238, 1);
 
   --group-title-height: 40px;
   --table-row-height: none;
@@ -43,6 +45,9 @@ body[data-theme="dark"] {
   --itf-table-selected-bg: #011534;
   --itf-table-active-bg: #022e72;
   --itf-table-summary-text: #82909d80;
+  --itf-table-border-base-color: var(--itf-table-header-bg);
+  --itf-table-divider-bg: #0f0f0f;
+  --itf-table-divider-border: rgb(100, 100, 100, .1);
 }
 .itf-table2 {
   font-size: var(--itf-table-content-font-size, var(--itf-table-font-size));
@@ -60,7 +65,7 @@ body[data-theme="dark"] {
     height: 100%;
   }
   .scroller {
-    margin-bottom: 12px;
+    //margin-bottom: .5rem;
   }
   .scrollable-x {
     overflow-x: scroll;
@@ -97,34 +102,18 @@ body[data-theme="dark"] {
     position: sticky;
     top: 0;
     bottom: 0;
-    right: -.5rem;
+    right: -5px;
     z-index: 8;
+    padding-right: 5px;
+    padding-left: 5px;
     display: flex;
     align-items: center;
-
-    @media (max-width: 768px) {
-      position: relative;
-      opacity: 1;
-    }
   }
   .on-hover {
     opacity: 0;
-    width: 0;
-    padding: 4px .5rem;
-    overflow: hidden;
     pointer-events: none;
-    position: absolute;
-    right: 0;
-    background: linear-gradient(90deg, transparent 0, var(--itf-table2-row-bg) 10px);
-
-    @media (max-width: 768px) {
-      width: max-content;
-      opacity: 1;
-      position: relative;
-    }
   }
   .table-row-template:hover .on-hover {
-    width: max-content;
     opacity: 1;
     pointer-events: all;
   }
@@ -451,11 +440,11 @@ body[data-theme="dark"] {
   }
 
   &__row-divider {
-    background-color: #F7F8FA;
+    background-color: var(--itf-table-divider-bg);
     height: 5px;
     padding: 0;
-    border-top: 1px solid rgba(238, 238, 238, 1);
-    border-bottom: 1px solid rgba(238, 238, 238, 1);
+    border-top: 1px solid var(--itf-table-divider-border);
+    border-bottom: 1px solid var(--itf-table-divider-border);
   }
   //&:hover, &.permanent-editable-border {
   //  .table-view-item-value.editable {
@@ -468,6 +457,7 @@ body[data-theme="dark"] {
     position: relative;
     z-index: 2;
     width: 100%;
+    display: flex;
     height: 100%;
     background: var(--itf-table2-row-bg)
   }

package/src/components/view/View.vue

@@ -10,7 +10,8 @@
       :endpoint="filtersEndpoint"
       :panel="panel"
       v-model="filter"
-      @input="onFilterSet"
+      @loaded="onFilterSet($event, true)"
+      @change="onFilterSet($event, false)"
       @set-table-schema="setTableSchema"
     >
       <template #after-filter-btn>
@@ -213,7 +214,7 @@ class itfView extends Vue {
 
   getDownloadLinks() {
     const state = this.$refs.table ? this.$refs.table.getTableState() : null;
-    const filter = this.filter;
+    const filter = { ...this.filter };
     const sorting = this.sorting;
     const filterableColumnsNames = (state?.columns ?? []).filter(column => column.visible).map(column => column.property);
 
@@ -297,7 +298,7 @@ class itfView extends Vue {
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
-      let filter = this.filter;
+      let filter = { ...this.filter };
       if (this.oldFormat) {
         filter = Object.keys(filter).reduce((acc, key) => {
           acc[`filter[${key}]`] = filter[key];
@@ -370,7 +371,9 @@ class itfView extends Vue {
       sources.forEach(source => {
         if (source && typeof source === 'object') {
           Object.entries(source).forEach(([key, value]) => {
-            if (value !== undefined) {
+            if (key === 'page' && value === null) {
+              delete target[key];
+            } else if (value !== undefined) {
               target[key] = value;
             }
           });
@@ -380,10 +383,14 @@ class itfView extends Vue {
     }
   }
 
-  onFilterSet(filter) {
-    this.page = 1;
-    this.selectedIds = [];
-    this.setPanelPayload({ ...filter, page: 1 });
+  onFilterSet(filter, keepPage = false) {
+    if (keepPage) {
+      // при завантаженні сторінки не потрібно скидувати сторінку
+      this.setPanelPayload({ ...filter });
+    } else {
+      this.page = 1;
+      this.setPanelPayload({ ...filter, page: null });
+    }
     this.loadData();
   }