mediacube-ui 0.1.148 → 0.1.149

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.149](https://github.com/MediaCubeCo/mcui/compare/v0.1.148...v0.1.149) (2023-10-02)
+
 ### [0.1.148](https://github.com/MediaCubeCo/mcui/compare/v0.1.147...v0.1.148) (2023-10-02)
 
 ### [0.1.147](https://github.com/MediaCubeCo/mcui/compare/v0.1.146...v0.1.147) (2023-09-28)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.148",
+  "version": "0.1.149",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,

package/src/patterns/McTable/McTable/McTable.vue

@@ -285,7 +285,7 @@ export default {
                 ref: 'xTable',
                 'context-menu': this.tableMenu,
                 class: this.classes,
-                // 'sync-resize': this.cardIsOpen,
+                'sync-resize': this.cardIsOpen,
                 'scroll-y': this.scrollY,
                 'show-footer': this.canShowFooter,
                 'footer-method': this.footerMethod,
@@ -376,7 +376,7 @@ export default {
             return this.$listeners['cell-click'] && this.contextMenu ? menu : false
         },
         columnsForFirstLoad() {
-            return new Array(20).fill('').map(() => new Array(30).fill(''))
+            return new Array(20).fill('').map(() => new Array(20).fill(''))
         },
     },
     watch: {
@@ -384,17 +384,21 @@ export default {
             newValue && this.updateData()
         },
         totalFooter: {
-            handler(newVal) {
-                newVal && this.loadData(true)
+            handler: async function(newVal) {
+                newVal && (await this.loadData(true))
             },
             deep: true,
         },
         items: {
-            handler(newVal) {
-                newVal && this.loadData(true)
+            handler: async function(newVal) {
+                newVal && (await this.loadData(true))
+                newVal && (await this.setFirstColsWidth())
             },
             deep: true,
         },
+        cardIsOpen(newVal) {
+            this.toggleColumns(newVal)
+        },
         '$attrs.loading'() {
             this.checkHorizontalScroll()
         },
@@ -489,15 +493,38 @@ export default {
             this.observer && loader.length && this.observer.observe(loader[0])
         },
         setFirstColsWidth() {
-            if (!this.api) return 0
-            const firstCol = this.api.getColumns().find(c => c.fixed === 'left')
-            this.firstColsWidth = +firstCol?.width || +firstCol?.minWidth || 0
+            const columns = this.$refs.xTable.getColumns()
+            const leftFixedColumnsWidth = columns.reduce((sum, curr) => {
+                if (curr.fixed === 'left') {
+                    return sum + Number(curr.width || curr.minWidth)
+                }
+                return sum
+            }, 0)
+            if (leftFixedColumnsWidth) {
+                this.firstColsWidth = leftFixedColumnsWidth + 5 // 5 - ширина скролла
+            }
         },
         toggleColumns(val) {
             if (val) {
-                this.api.getColumns().forEach(col => {
-                    col.fixed !== 'left' && (col.visible = false)
+                const columns = this.$refs.xTable.getColumns()
+                let fixedColNeigbhorIndex
+                const hideColumns = columns.filter((col, i) => {
+                    const isFixedCol = col.fixed === 'left'
+                    /**
+                     * Скрываем все столбцы кроме фиксированного и его соседа, чтобы не было рассинхрона при выходе из карточки
+                     * т.к. когда остается 1 столбец, то фикс - размаунтится, а потом при выходе из карточки перерендеривается
+                     * и скроллит в самый верх
+                     * */
+                    if (isFixedCol) fixedColNeigbhorIndex = i + 1
+                    switch (true) {
+                        case i === fixedColNeigbhorIndex:
+                            return
+                        default:
+                            return !isFixedCol
+                    }
+                    return !isFixedCol
                 })
+                hideColumns.forEach(col => (col.visible = false))
                 this.$refs.xTable.refreshColumn()
             } else {
                 this.$refs.xTable.resetColumn()
@@ -816,13 +843,5 @@ export default {
             background-position: 468px 0;
         }
     }
-    @keyframes placeHolderShimmer {
-        0% {
-            background-position: -468px 0;
-        }
-        100% {
-            background-position: 468px 0;
-        }
-    }
 }
 </style>