mediacube-ui 0.1.146 → 0.1.147

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.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.147",
   "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'],
+}