mediacube-ui 0.1.146 → 0.1.148

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.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)
+
 ### [0.1.146](https://github.com/MediaCubeCo/mcui/compare/v0.1.145...v0.1.146) (2023-09-21)
 
 ### [0.1.145](https://github.com/MediaCubeCo/mcui/compare/v0.1.144...v0.1.145) (2023-09-19)

package/package.json

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

package/src/elements/McField/McFieldCheckbox/McFieldCheckbox.vue

@@ -51,6 +51,7 @@
 import McTitle from '../../McTitle/McTitle'
 import McSvgIcon from '../../McSvgIcon/McSvgIcon'
 import fieldErrors from '../../../mixins/fieldErrors'
+import { LANGUAGES } from '../../../helpers/consts'
 export default {
     name: 'McFieldCheckbox',
     components: { McTitle, McSvgIcon },
@@ -161,7 +162,7 @@ export default {
                 'mc-field-checkbox--disabled': this.disabled,
                 'mc-field-checkbox--empty': !this.mainText && !this.$slots.default,
                 [`mc-field-checkbox--size-${this.checkboxSize}`]: !!this.checkboxSize,
-                'mc-field-checkbox--rtl': ['ar'].includes(this.locale),
+                'mc-field-checkbox--rtl': LANGUAGES.rtl.includes(this.locale),
             }
         },
         inputProps() {

package/src/elements/McField/McFieldSelect/McFieldSelect.vue

@@ -4,8 +4,8 @@
             <!-- @slot Слот заголовка -->
             <slot name="header">
                 <mc-title v-if="hasTitle" :ellipsis="false" max-width="100%" weight="medium">{{
-                    computedTitle
-                }}</mc-title>
+                        computedTitle
+                    }}</mc-title>
             </slot>
         </div>
         <div class="mc-field-select__main">
@@ -98,6 +98,7 @@ import McSvgIcon from '../../McSvgIcon/McSvgIcon'
 import McPreview from '../../../patterns/McPreview/McPreview'
 import fieldErrors from '../../../mixins/fieldErrors'
 import equalFieldHeight from '../../../mixins/equalFieldHeight'
+import { LANGUAGES } from '../../../helpers/consts'
 export default {
     name: 'McFieldSelect',
     components: { McSvgIcon, McAvatar, McTitle, McTooltip, MultiSelect, McPreview },
@@ -301,6 +302,13 @@ export default {
             type: Boolean,
             default: false,
         },
+        /**
+         * Для какого языка селект
+         */
+        locale: {
+            type: String,
+            default: null,
+        },
     },
     data() {
         return {
@@ -353,6 +361,7 @@ export default {
                 'mc-field-select--is-empty-options-list': this.isEmptyOptionsList,
                 'mc-field-select--with-preview': this.optionWithPreview,
                 'mc-field-select--max-height': this.maxHeight,
+                'mc-field-select--rtl': LANGUAGES.rtl.includes(this.locale),
             }
         },
         computedTitle() {
@@ -587,6 +596,7 @@ $text-white: scale-color($color-white, $alpha: -10%);
             border-radius: $radius-100 !important;
             padding: 0 $space-500 0 $space-100;
             overflow: hidden;
+            text-align: start;
             &:hover {
                 border-color: $color-purple;
             }
@@ -611,6 +621,7 @@ $text-white: scale-color($color-white, $alpha: -10%);
             font-family: $font-family-main;
             margin-top: $space-50;
             margin-bottom: $space-50;
+            margin-right: unset;
             background-color: $color-lighter-purple;
             color: $color-black;
             padding: $size-50 $size-50 $size-50 $size-100;
@@ -903,55 +914,67 @@ $text-white: scale-color($color-white, $alpha: -10%);
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-}
-html[dir='rtl'] {
-    .mc-field-select {
-        &__single-label {
-            @include child-indent-right(0);
-            @include child-indent-left-rtl($space-50);
-        }
-        &__label-text {
-            padding-left: 0;
-            padding-right: $space-50;
-            &--indent-left {
-                margin-left: 0;
-                margin-right: $space-300;
-            }
-        }
 
-        .multiselect {
-            &__placeholder {
-                padding-left: 0;
-                padding-right: $space-50;
-            }
+    &--rtl {
+        direction: rtl;
+    }
 
-            &__single {
-                padding-right: 0;
+    @at-root {
+        #{$block-name}--rtl,
+        html[dir='rtl'] #{$block-name} {
+            &__single-label {
+                @include child-indent-right(0);
+                @include child-indent-left-rtl($space-50);
             }
-
-            &__input {
+            &__label-text {
                 padding-left: 0;
                 padding-right: $space-50;
+                &--indent-left {
+                    margin-left: 0;
+                    margin-right: $space-300;
+                }
             }
-            &__tags-wrap {
-                @include child-indent-right(0);
-                @include child-indent-left-rtl($space-100);
-            }
-            &__tags {
-                padding: 0 $space-100 0 $space-500;
-            }
-            &__select {
-                right: unset;
-                left: 1px;
-            }
-        }
-        &--with-preview {
-            .mc-preview {
-                align-items: center;
-            }
+
             .multiselect {
+                &__placeholder {
+                    padding-left: 0;
+                    padding-right: $space-50;
+                    width: 100%;
+                }
+
+                &__single {
+                    padding-right: 0;
+                }
+
+                &__input {
+                    padding-left: 0;
+                    padding-right: $space-50;
+                }
+                &__tags-wrap {
+                    @include child-indent-right(0);
+                    @include child-indent-left-rtl($space-100);
+                }
+                &__tag-icon {
+                    margin-left: unset;
+                    margin-right: 7px;
+                }
                 &__tags {
-                    padding: $space-200 $space-150;
+                    padding: 0 $space-100 0 $space-500;
+                    text-align: right;
+                }
+                &__select {
+                    right: unset;
+                    left: 1px;
+                }
+            }
+            &--with-preview {
+                .mc-preview {
+                    align-items: center;
+                }
+                .multiselect {
+                    &__tags {
+                        padding: $space-200 $space-150;
+                    }
                 }
             }
         }

package/src/elements/McField/McFieldText/McFieldText.vue

@@ -123,6 +123,7 @@ import McSvgIcon from '../../McSvgIcon/McSvgIcon'
 import fieldErrors from '../../../mixins/fieldErrors'
 import McTooltip from '../../McTooltip/McTooltip'
 import equalFieldHeight from '../../../mixins/equalFieldHeight'
+import { LANGUAGES } from '../../../helpers/consts'
 
 export default {
     name: 'McFieldText',
@@ -376,7 +377,7 @@ export default {
                 'mc-field-text--textarea-autosize': this.isTextareaAutosize,
                 'mc-field-text--disabled': this.disabled,
                 'mc-field-text--copy': this.copy,
-                'mc-field-text--rtl': ['ar'].includes(this.locale),
+                'mc-field-text--rtl': LANGUAGES.rtl.includes(this.locale),
             }
         },
         computedTitle() {

package/src/helpers/consts.js

@@ -0,0 +1,3 @@
+export const LANGUAGES = {
+    rtl: ['ar'],
+}

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(20).fill(''))
+            return new Array(20).fill('').map(() => new Array(30).fill(''))
         },
     },
     watch: {
@@ -384,21 +384,17 @@ export default {
             newValue && this.updateData()
         },
         totalFooter: {
-            handler: async function(newVal) {
-                newVal && (await this.loadData(true))
+            handler(newVal) {
+                newVal && this.loadData(true)
             },
             deep: true,
         },
         items: {
-            handler: async function(newVal) {
-                newVal && (await this.loadData(true))
-                newVal && (await this.setFirstColsWidth())
+            handler(newVal) {
+                newVal && this.loadData(true)
             },
             deep: true,
         },
-        cardIsOpen(newVal) {
-            this.toggleColumns(newVal)
-        },
         '$attrs.loading'() {
             this.checkHorizontalScroll()
         },
@@ -493,38 +489,15 @@ export default {
             this.observer && loader.length && this.observer.observe(loader[0])
         },
         setFirstColsWidth() {
-            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 - ширина скролла
-            }
+            if (!this.api) return 0
+            const firstCol = this.api.getColumns().find(c => c.fixed === 'left')
+            this.firstColsWidth = +firstCol?.width || +firstCol?.minWidth || 0
         },
         toggleColumns(val) {
             if (val) {
-                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
+                this.api.getColumns().forEach(col => {
+                    col.fixed !== 'left' && (col.visible = false)
                 })
-                hideColumns.forEach(col => (col.visible = false))
                 this.$refs.xTable.refreshColumn()
             } else {
                 this.$refs.xTable.resetColumn()
@@ -843,5 +816,13 @@ export default {
             background-position: 468px 0;
         }
     }
+    @keyframes placeHolderShimmer {
+        0% {
+            background-position: -468px 0;
+        }
+        100% {
+            background-position: 468px 0;
+        }
+    }
 }
 </style>