mediacube-ui 0.1.366 → 0.1.368

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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.368](https://github.com/MediaCubeCo/mcui/compare/v0.1.367...v0.1.368) (2025-03-25)
+
+### [0.1.367](https://github.com/MediaCubeCo/mcui/compare/v0.1.366...v0.1.367) (2025-03-24)
+
 ### [0.1.366](https://github.com/MediaCubeCo/mcui/compare/v0.1.365...v0.1.366) (2025-03-18)
 
 ### [0.1.365](https://github.com/MediaCubeCo/mcui/compare/v0.1.364...v0.1.365) (2025-03-17)

package/package.json

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

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

@@ -23,10 +23,10 @@
         <component
             :is="tag"
             v-bind="attrs"
+            :empty-render="{ name: 'noData' }"
             v-on="{ ...$listeners, 'sort-change': handleSort }"
-            @scroll="handleScroll"
             @context-menu-click="contextMenuClickEvent"
-            :empty-render="{ name: 'noData' }"
+            @scroll="handleScroll"
         >
             <!-- @slot Слот дочерних mc-table-col -->
             <slot />
@@ -44,7 +44,11 @@
         </component>
         <div v-if="sortLoading || $attrs.loading" :class="footerClasses" class="mc-table-wrapper__footer">
             <div v-if="footerInfo !== 'total'" class="mc-table-wrapper__tint"></div>
-            <div v-if="($attrs.loading && scrollIsBottom) || sortLoading" class="mc-table-wrapper__loading">
+            <div
+                v-if="($attrs.loading && scrollIsBottom) || sortLoading"
+                :style="loadingWrapperStyle"
+                class="mc-table-wrapper__loading"
+            >
                 <mc-svg-icon class="mc-table-wrapper__load-icon" name="loader" />
                 <mc-title color="outline-gray">{{ placeholders.loading }}</mc-title>
             </div>
@@ -63,6 +67,7 @@ import McTitle from '../../../elements/McTitle/McTitle'
 import McSvgIcon from '../../../elements/McSvgIcon/McSvgIcon'
 import McTableCol from '../McTableCol/McTableCol'
 import McOverlay from '../../McOverlay/McOverlay.vue'
+import McInfinityLoadingIndicator from 'mediacube-ui/src/elements/McInfinityLoadingIndicator/McInfinityLoadingIndicator.vue'
 
 /**
  *  More info: https://xuliangzhan.com/vxe-table, https://xuliangzhan.github.io/vxe-table
@@ -70,6 +75,7 @@ import McOverlay from '../../McOverlay/McOverlay.vue'
 export default {
     name: 'McTable',
     components: {
+        McInfinityLoadingIndicator,
         McTitle,
         McSvgIcon,
         McTableCol,
@@ -106,6 +112,14 @@ export default {
             type: Boolean,
             default: false,
         },
+        fixedFirstColumn: {
+            type: Boolean,
+            default: false,
+        },
+        fixedLastColumn: {
+            type: Boolean,
+            default: false,
+        },
         /**
          *  Тип таблицы:
          *  `table, grid`
@@ -277,6 +291,8 @@ export default {
             firstColsWidth: 253,
             hasHorizontalScroll: false,
             scrollIsBottom: false,
+            tableBodyScrollLeft: false,
+            tableBodyScrollRight: true,
         }
     },
     computed: {
@@ -286,10 +302,12 @@ export default {
         attrs() {
             const attrs = {
                 ref: 'xTable',
+                data: this.items,
+                'merge-cells': this.mergeCells,
                 'context-menu': this.tableMenu,
                 class: this.classes,
                 'sync-resize': this.cardIsOpen,
-                'scroll-y': this.scrollY,
+                'scroll-y': { ...this.scrollY, offset: 30, mode: 'slide' },
                 'show-footer': this.canShowFooter,
                 'footer-method': this.footerMethod,
                 'sort-config': {
@@ -302,6 +320,7 @@ export default {
                     theme: 'mcui-black',
                 },
                 'row-id': 'id',
+                'key-field': 'id',
                 'highlight-hover-row': !this.skeletonLoad,
                 'highlight-current-row': true,
                 'show-header-overflow': 'tooltip',
@@ -315,6 +334,11 @@ export default {
             }
             return attrs
         },
+        loadingWrapperStyle() {
+            return {
+                width: this.cardIsOpen ? `${this.firstColsWidth}px` : '100%',
+            }
+        },
         canShowLoader() {
             return !this.scrollable && this.hasMore
         },
@@ -338,6 +362,10 @@ export default {
                 'mc-table--clickable': this.$listeners['cell-click'],
                 'mc-table--header-break-word': this.headerBreakWord,
                 'mc-table--mono-font': this.monoFont,
+                'mc-table--fixed-first-col': this.fixedFirstColumn,
+                'mc-table--fixed-last-col': this.fixedLastColumn,
+                'mc-table--scrolled-left-x-axis': !!this.tableBodyScrollLeft,
+                'mc-table--scrolled-right-x-axis': !!this.tableBodyScrollRight,
             }
         },
         wrapperStyles() {
@@ -380,37 +408,21 @@ export default {
         },
     },
     watch: {
-        canShowFooter(newValue) {
-            newValue && this.updateData()
-        },
-        totalFooter: {
-            handler: async function(newVal) {
-                newVal && (await this.loadData(true))
-            },
-            deep: true,
-        },
-        items: {
-            handler: async function(newVal, oldVal) {
-                if (_isEqual(newVal, oldVal)) return
-                if (newVal.length !== oldVal.length) {
-                    newVal && (await this.loadData(true))
-                } else {
-                    newVal && (await this.setFirstColsWidth())
-                    await this.reloadData()
-                }
-            },
-            deep: true,
-        },
         cardIsOpen(newVal) {
             this.toggleColumns(newVal)
         },
         '$attrs.loading'() {
             this.checkHorizontalScroll()
         },
+        totalFooter() {
+            if (this.footerInfo === 'total') {
+                this.$nextTick(() => {
+                    this.api.updateFooter()
+                })
+            }
+        },
     },
     mounted() {
-        this.loadData()
-        !this.scrollable && this.createObserver()
         this.setFirstColsWidth()
         window.addEventListener('resize', this.checkHorizontalScroll)
     },
@@ -419,34 +431,6 @@ export default {
         window.removeEventListener('resize', this.checkHorizontalScroll)
     },
     methods: {
-        async loadData(force = false) {
-            if ((this.items && this.items.length) || force) {
-                await this.$refs.xTable.loadData(this.items)
-                !this.scrollable && this.setObserveElement()
-                this.hasMore && this.checkOccupancy()
-                // После обновления данных в таблице обязательно мержим ячейки, если они указаны
-                if (this.mergeCells?.length) this.$refs.xTable.setMergeCells(this.mergeCells)
-            }
-        },
-        async reloadData() {
-            // Доастаем отсортированную колонку и выполняем сортировку вручную, чтобы предотвратить сброс на релоаде
-            const [sortState] = this.$refs.xTable.getSortColumns() || []
-            await this.$refs.xTable.reloadData(this.items)
-            if (sortState) {
-                this.$refs.xTable.sort(sortState.property, sortState.order)
-            }
-        },
-        async updateData() {
-            await this.$refs.xTable.updateData()
-        },
-        checkOccupancy() {
-            if (!this.$refs.xTable || !this.items?.length) return
-            const tableHeight = this.$refs.xTable.$el.getBoundingClientRect().height
-            const tableDataHeight = this.$refs.xTable.rowHeight * this.items.length
-            if (tableHeight >= tableDataHeight) {
-                this.load()
-            }
-        },
         formattedNumber(value, decimals = 2, is_rtl = false) {
             if (value == null) return null
 
@@ -473,14 +457,6 @@ export default {
                 }),
             ]
         },
-        handleScroll: _throttle(function({ scrollTop, $event, type, isY, $table }) {
-            const bottomPos = Math.ceil($event.target.scrollHeight - $event.target.clientHeight)
-            const isLoadArea = bottomPos - scrollTop <= $table._data.rowHeight * this.rowsToStartLoad
-            this.scrollIsBottom = scrollTop / bottomPos > 0.95
-            if (isLoadArea && !this.$attrs.loading && this.hasMore && type === 'body' && isY) {
-                this.load()
-            }
-        }, 200),
         load() {
             /**
              * Событие по подгрузке данных
@@ -488,22 +464,24 @@ export default {
              */
             this.$emit('load')
         },
-        createObserver() {
-            this.observer = new IntersectionObserver(
-                entries => {
-                    const entry = entries[0]
-                    if (entry.isIntersecting) {
-                        this.load()
-                    }
-                },
-                { threshold: 0.1 },
-            )
-            this.setObserveElement()
-        },
-        setObserveElement() {
-            const loader = this.$refs.xTable.$el.getElementsByClassName('mc-table-col__loader')
-            this.observer && loader.length && this.observer.observe(loader[0])
+        handleScroll({ $event, type, isY, isX }) {
+            if (type === 'body' && isX) {
+                this.tableBodyScrollLeft = !!$event.target.scrollLeft
+                this.tableBodyScrollRight =
+                    $event.target.scrollLeft + $event.target.clientWidth < $event.target.scrollWidth
+            }
+            if (type === 'body' && isY) {
+                this.checkVerticalScroll(...arguments)
+            }
         },
+        checkVerticalScroll: _throttle(function({ scrollTop, $event, type, isY, isX, $table }) {
+            const bottomPos = Math.ceil($event.target.scrollHeight - $event.target.clientHeight)
+            const isLoadArea = bottomPos - scrollTop <= $table._data.rowHeight * this.rowsToStartLoad
+            this.scrollIsBottom = scrollTop / bottomPos > 0.95
+            if (isLoadArea && !this.$attrs.loading && this.hasMore) {
+                this.load()
+            }
+        }, 200),
         setFirstColsWidth() {
             const columns = this.$refs.xTable.getColumns()
             const leftFixedColumnsWidth = columns.reduce((sum, curr) => {
@@ -525,14 +503,17 @@ export default {
         toggleColumns(val) {
             if (val) {
                 const columns = this.$refs.xTable.getColumns()
-                const hideColumns = columns.filter(col => col.fixed !== 'left')
+                const hideColumns = this.fixedFirstColumn
+                    ? columns.filter((c, i) => !!i)
+                    : columns.filter(col => col.fixed !== 'left')
                 hideColumns.forEach(col => (col.visible = false))
+                this.tableBodyScrollLeft = false
                 this.$refs.xTable.refreshColumn()
             } else {
                 this.$refs.xTable.resetColumn()
             }
-            this.$refs.xTable.recalculate()
-            this.$refs.xTable.syncData() // Синхронит данные таблиц (фикс колонка === отдельная таблица)
+            // this.$refs.xTable.recalculate()
+            // this.$refs.xTable.syncData() // Синхронит данные таблиц (фикс колонка === отдельная таблица)
             this.checkHorizontalScroll()
         },
         getFixedHeight(val) {
@@ -592,6 +573,7 @@ export default {
 @import '../../../styles/mixins';
 @import '../../../tokens/font-families';
 @import '../../../tokens/animations';
+@import '../../../tokens/z-indexes';
 
 @import '~vxe-table/styles/variable.scss';
 
@@ -601,10 +583,12 @@ export default {
 
 .vxe-table {
     font-family: $font-family-main;
+
     &--tooltip-wrapper {
         .vxe-table--tooltip-content {
             white-space: normal;
         }
+
         &.theme--mcui-black {
             background: $color-black;
             color: $color-white;
@@ -617,26 +601,39 @@ export default {
             padding: $space-100 $space-150;
         }
     }
+
     .vxe-body--row.row--cheched {
         background-color: var(--color-main-alpha-10);
     }
+
     .fixed-left--wrapper {
         scrollbar-width: none;
     }
+
+    &--empty-block {
+        display: block !important;
+        height: 1px;
+        min-height: 1px !important;
+    }
 }
+
 .mc-table-wrapper {
     position: relative;
+
     &__footer {
         @include position(absolute, null 0 0 0);
-        z-index: 2;
+        z-index: 3;
+
         &--indent-bottom {
             bottom: 5px;
         }
     }
+
     &__tint {
         height: $size-900;
         background: linear-gradient(0deg, $color-white 0%, rgba(255, 255, 255, 0) 100%);
     }
+
     &__loading {
         display: flex;
         align-items: center;
@@ -645,13 +642,16 @@ export default {
         background-color: $color-white;
         color: $color-outline-gray;
         @include child-indent-right($space-100);
+
         .mc-title {
             width: auto;
         }
     }
+
     &__load-icon {
         animation: $animation-spinner;
     }
+
     .skeleton-load {
         &-wrapper {
             display: flex;
@@ -659,7 +659,7 @@ export default {
             max-width: 100%;
             position: absolute;
             height: 100%;
-            z-index: 19;
+            z-index: $z-index-modal;
             background-color: $color-white;
             user-select: none;
         }
@@ -674,11 +674,13 @@ export default {
                     padding: $space-50 0;
                 }
             }
+
             .vxe-body--row {
                 font-feature-settings: 'tnum';
                 font-variant-numeric: tabular-nums;
             }
         }
+
         .vxe-table--footer {
             .vxe-footer--row {
                 font-feature-settings: 'tnum';
@@ -686,16 +688,121 @@ export default {
             }
         }
     }
+
+    &--fixed-first-col {
+        .vxe-header--row,
+        .vxe-body--row,
+        .vxe-footer--row {
+            td:first-child,
+            th:first-child {
+                position: sticky;
+                left: 0;
+                background-color: white;
+                z-index: 3;
+            }
+        }
+
+        .vxe-footer--row {
+            td {
+                border-block-start: 1px solid $color-hover-gray;
+            }
+        }
+    }
+
+    &--fixed-last-col {
+        .vxe-header--row,
+        .vxe-body--row,
+        .vxe-footer--row {
+            td:last-child,
+            th:last-child {
+                position: sticky;
+                right: 0;
+                background-color: white;
+                z-index: 3;
+
+                &:empty {
+                    display: none;
+                }
+            }
+        }
+
+        .vxe-footer--row {
+            td {
+                border-block-start: 1px solid $color-hover-gray;
+            }
+        }
+    }
+
+    &--scrolled-left-x-axis {
+        &.mc-table--fixed-first-col {
+            .vxe-header--row,
+            .vxe-body--row,
+            .vxe-footer--row {
+                td:first-child,
+                th:first-child {
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 100%;
+                        width: 12px;
+                        height: 100%;
+                        background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 100%);
+                    }
+                }
+            }
+        }
+    }
+
+    &--scrolled-right-x-axis {
+        &.mc-table--fixed-last-col {
+            .vxe-header--row,
+            .vxe-body--row,
+            .vxe-footer--row {
+                td:last-child,
+                th:last-child {
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        right: 100%;
+                        width: 12px;
+                        height: 100%;
+                        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 100%);
+                    }
+                }
+            }
+        }
+    }
+
+    .vxe-body--row {
+        &.row--current {
+            td,
+            th {
+                background-color: color-mix(in srgb, var(--color-main) 10%, #fff 90%) !important;
+            }
+        }
+
+        &:hover {
+            td,
+            th {
+                background-color: $color-hover-gray;
+            }
+        }
+    }
+
     &--open-card {
         .vxe-table--body-wrapper,
         .vxe-table--footer-wrapper {
             overflow-x: hidden;
             width: fit-content;
         }
+
         .vxe-table--footer {
             display: none;
         }
     }
+
     &--clickable {
         .vxe-table--body {
             .vxe-body--row {
@@ -703,6 +810,7 @@ export default {
             }
         }
     }
+
     &--header-break-word {
         .vxe-header--column {
             .vxe-cell--title {
@@ -713,12 +821,15 @@ export default {
             }
         }
     }
+
     &__context-menu {
         width: 250px;
+
         .vxe-context-menu--link {
             width: 100%;
         }
     }
+
     .vxe-header--row {
         .col--checkbox {
             .vxe-cell {
@@ -728,13 +839,16 @@ export default {
             }
         }
     }
+
     .vxe-cell--checkbox {
         z-index: 1;
+
         &:hover {
             .vxe-checkbox--icon::before {
                 border-color: var(--color-main) !important;
             }
         }
+
         &.is--checked,
         &.is--indeterminate {
             .vxe-checkbox--icon::before {
@@ -743,6 +857,7 @@ export default {
             }
         }
     }
+
     .vxe-header--column {
         .vxe-cell {
             &--title {
@@ -750,22 +865,31 @@ export default {
                 align-items: center;
             }
         }
+
         &.is--sortable {
             cursor: pointer;
         }
     }
+
     .vxe-table--footer {
         border-bottom: 1px solid $color-hover-gray;
+
+        &-wrapper {
+            border: none;
+        }
     }
+
     .vxe-cell {
         padding-inline-start: $space-200;
         padding-inline-end: $space-200;
         word-break: break-word;
+
         &--checkbox {
             display: flex;
             align-items: center;
             max-width: 100%;
             padding-inline-start: 1.8em;
+
             .vxe-checkbox--icon {
                 margin-inline-end: $space-50;
                 top: 50%;
@@ -773,8 +897,10 @@ export default {
             }
         }
     }
+
     @include custom-scroll();
 }
+
 @mixin gradient() {
     background: $color-hover-gray;
     background-image: -webkit-gradient(
@@ -803,6 +929,7 @@ export default {
         margin: 0 auto;
         width: 100%;
         overflow: hidden;
+
         &:after {
             content: '';
             position: absolute;
@@ -811,12 +938,14 @@ export default {
         }
     }
 }
+
 .loader {
     width: 100%;
     display: flex;
     align-items: center;
     height: $space-500;
     padding: $space-100 $space-200;
+
     .avatar {
         display: block;
         float: left;
@@ -827,12 +956,14 @@ export default {
         margin-inline-end: $space-50;
         @include gradient();
     }
+
     .preview-content {
         display: flex;
         flex-direction: column;
         width: 100%;
         @include child-indent-bottom($space-50);
     }
+
     .line {
         display: block;
         position: relative;
@@ -840,6 +971,7 @@ export default {
         width: 100%;
         @include gradient();
     }
+
     &--more-height {
         .line {
             height: 12px;

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

@@ -244,6 +244,9 @@ export default {
             width: $size-300;
             background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, $color-white);
         }
+        &:empty {
+            display: none;
+        }
     }
     &__header-right {
         @extend .mc-table-col__right;