mediacube-ui 0.1.353 → 0.1.355

package/src/elements/McButton/McButton.vue

@@ -35,7 +35,6 @@
 <script>
 import McSvgIcon from '../McSvgIcon/McSvgIcon'
 import { VTooltip } from 'v-tooltip'
-import { checkContrastColor } from '../../utils/checkColor'
 
 VTooltip.options.defaultBoundariesElement = 'window'
 export default {
@@ -273,7 +272,6 @@ export default {
                 'mc-button--disabled': this.disabled,
                 'mc-button--rounded': this.rounded && /-compact$/.test(this.size),
                 'mc-button--semi-rounded': this.semiRounded,
-                'mc-button--contrast': this.isContrast,
                 'mc-button--full-width': this.fullWidth,
                 'mc-button--uppercase': this.uppercase,
                 'mc-button--shadow': this.shadow,
@@ -305,26 +303,13 @@ export default {
                 type: currentStyle,
             }
         },
-        /**
-         * Так как сейчас мы используем светлую тему, то проверяем контраст цвета на основе белого
-         * Проверяем только для main цветов, так как остальные должны подходить по стандарту
-         * TODO: сделать проверку контраста для темных тем + убрать проверку на process.client
-         * */
-        isContrast() {
-            if (!process.client) return
-            let [color] = this.variation.split('-') || []
-            return color.includes('main') && checkContrastColor(color, [255, 255, 255])
-        },
         styles() {
             let hoverBrightness
             let textColor
             switch (this.buttonVariation.type) {
                 case 'flat':
                 case 'outline':
-                case 'invert': {
-                    if (this.isContrast) textColor = 'black'
-                    break
-                }
+                case 'invert':
                 case 'link':
                     textColor = this.buttonVariation.color
                     break
@@ -339,7 +324,7 @@ export default {
                             break
                         }
                         default: {
-                            textColor = this.isContrast ? 'black' : 'white'
+                            textColor = 'main-contrast'
                         }
                     }
                     break
@@ -384,15 +369,15 @@ export default {
         tooltipOptions() {
             return this.tooltip
                 ? {
-                      content: this.tooltip,
-                      placement: 'top',
-                      classes: 'mc-tooltip mc-tooltip--width-m mc-tooltip--size-s',
-                      trigger: 'hover focus',
-                      show: false,
-                      container: 'body',
-                      template: `<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"><div class="tooltip-inner__content"></div></div> </div>`,
-                      innerSelector: '.tooltip-inner__content',
-                  }
+                    content: this.tooltip,
+                    placement: 'top',
+                    classes: 'mc-tooltip mc-tooltip--width-m mc-tooltip--size-s',
+                    trigger: 'hover focus',
+                    show: false,
+                    container: 'body',
+                    template: `<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"><div class="tooltip-inner__content"></div></div> </div>`,
+                    innerSelector: '.tooltip-inner__content',
+                }
                 : null
         },
     },
@@ -405,7 +390,7 @@ export default {
         animateUp() {
             if (this.animation) {
                 this.customAnimation?.text &&
-                    (this.$refs['mc-button'].querySelector('.mc-button__text').innerHTML = this.customAnimation?.text)
+                (this.$refs['mc-button'].querySelector('.mc-button__text').innerHTML = this.customAnimation?.text)
                 this.custom_background = this.customAnimation?.background
             }
         },
@@ -466,7 +451,6 @@ export default {
     -webkit-appearance: none;
     -webkit-text-fill-color: currentColor;
     z-index: 0;
-
     &__loader {
         display: none;
         @include align(true, true, absolute);
@@ -481,18 +465,6 @@ export default {
         align-items: center;
         z-index: 1;
     }
-    &--contrast {
-        color: var(--mc-button-text-color) !important;
-        #{$block-name} {
-            &--is-active,
-            &.nuxt-link-active {
-                color: var(--color-main-dark);
-                background-color: transparent;
-                border-color: transparent;
-                pointer-events: none;
-            }
-        }
-    }
     &__text {
         @include ellipsis($display: inline-block);
         @include layout-flex-fix();
@@ -509,7 +481,6 @@ export default {
                 }
             }
         }
-
         &:active {
             #{$block-name}__background {
                 @content;
@@ -519,7 +490,6 @@ export default {
     @include hoverMixin {
         filter: brightness(var(--mc-button-hover-brightness));
     }
-
     &--size {
         &-xxs {
             height: $size-300;
@@ -527,7 +497,6 @@ export default {
             letter-spacing: normal;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-300);
                 padding: $space-50;
@@ -538,7 +507,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-200);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-50;
@@ -554,7 +522,6 @@ export default {
             letter-spacing: normal;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-400);
                 padding: 6px;
@@ -565,7 +532,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-250);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-50;
@@ -581,7 +547,6 @@ export default {
             letter-spacing: normal;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-500);
                 padding: $space-150;
@@ -592,7 +557,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-250);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-50;
@@ -607,7 +571,6 @@ export default {
             padding: 0 $space-200;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-500);
                 padding: $space-100;
@@ -618,7 +581,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-300);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-50;
@@ -633,7 +595,6 @@ export default {
             padding: $space-150 $space-300;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-600);
                 padding: $space-150;
@@ -644,7 +605,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-300);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-100;
@@ -654,7 +614,6 @@ export default {
                 }
             }
         }
-
         &-s,
         &-m,
         &-l {
@@ -668,7 +627,6 @@ export default {
             }
         }
     }
-
     &__background {
         position: absolute;
         top: 0;
@@ -710,22 +668,9 @@ export default {
                     opacity: 0.1 !important;
                 }
             }
-            // TODO check contast colors
-            //&#{$block-name}--contrast {
-            //    #{$block-name} {
-            //        &__background {
-            //            opacity: 0.4 !important;
-            //        }
-            //    }
-            //}
             @include hoverMixin {
                 opacity: 0.2 !important;
             }
-            //&#{$block-name}--contrast {
-            //    @include hoverMixin {
-            //        opacity: 0.6 !important;
-            //    }
-            //}
         }
         &-flat {
             color: var(--mc-button-background-color);
@@ -745,9 +690,6 @@ export default {
             &#{$block-name}--size-l {
                 line-height: $line-height-250;
             }
-            &#{$block-name}--contrast {
-                filter:  brightness(80%);
-            }
             &#{$block-name} {
                 &--disabled {
                     opacity: $opacity-disabled;
@@ -761,7 +703,6 @@ export default {
                     filter: brightness(0.85);
                 }
             }
-
             &:active {
                 filter: brightness(0.85);
             }
@@ -787,7 +728,6 @@ export default {
             text-decoration: underline !important;
         }
     }
-
     &--secondary-color {
         @media #{$media-desktop} {
             &:hover {
@@ -798,12 +738,10 @@ export default {
             color: var(--mc-button-secondary-color);
         }
     }
-
     &--uppercase {
         text-transform: uppercase;
         letter-spacing: $letter-spacing-m;
     }
-
     &--is-active,
     &.nuxt-link-active {
         color: var(--color-main);
@@ -811,19 +749,15 @@ export default {
         border-color: transparent;
         pointer-events: none;
     }
-
     &--rounded {
         border-radius: $radius-circle;
     }
-
     &--semi-rounded {
         border-radius: 50px;
     }
-
     &--full-width {
         width: 100%;
     }
-
     &--text-align {
         &-left {
             justify-content: flex-start;
@@ -835,20 +769,17 @@ export default {
             justify-content: flex-end;
         }
     }
-
     &--loading,
     &--icon-loading,
     &--disabled {
         pointer-events: none;
     }
-
     &--loading {
         #{$block-name} {
             &__loader {
                 display: inline-block;
             }
         }
-
         > *:not(#{$block-name}__loader) {
             opacity: 0;
         }
@@ -863,7 +794,6 @@ export default {
             }
         }
     }
-
     &--disabled {
         color: $color-outline-gray;
         cursor: not-allowed;
@@ -874,7 +804,6 @@ export default {
             }
         }
     }
-
     &--inactive {
         pointer-events: none;
     }

package/src/elements/McDatePicker/McDatePicker.vue

@@ -65,6 +65,7 @@
                                     <template v-else>
                                         <mc-button
                                             v-if="placeholders.week"
+                                            :disabled="checkDisablePeriod('week')"
                                             variation="black-link"
                                             secondary-color="main"
                                             @click="selectPeriod('week')"
@@ -73,6 +74,7 @@
                                         </mc-button>
                                         <mc-button
                                             v-if="placeholders.month"
+                                            :disabled="checkDisablePeriod('month')"
                                             variation="black-link"
                                             secondary-color="main"
                                             @click="selectPeriod('month')"
@@ -81,6 +83,7 @@
                                         </mc-button>
                                         <mc-button
                                             v-if="placeholders.quarter"
+                                            :disabled="checkDisablePeriod('quarter')"
                                             variation="black-link"
                                             secondary-color="main"
                                             @click="selectPeriod('quarter')"
@@ -89,6 +92,7 @@
                                         </mc-button>
                                         <mc-button
                                             v-if="placeholders.year"
+                                            :disabled="checkDisablePeriod('year')"
                                             variation="black-link"
                                             secondary-color="main"
                                             @click="selectPeriod('year')"
@@ -503,7 +507,14 @@ export default {
                 }
             }
         },
-        selectPeriod(key) {
+        /**
+         * Проверяем доступность выбора периода по досупной дате, если есть ограничения
+         * */
+        checkDisablePeriod(period) {
+            const [start] = this.selectPeriod(period)
+            return this.disabledDate(start)
+        },
+        selectPeriod(key, isReturn = false) {
             let start = new Date()
             const end = this.pickDate || new Date()
             switch (key) {
@@ -536,7 +547,9 @@ export default {
                     start.setFullYear(end.getFullYear() - 1, end.getMonth(), end.getDate())
                     break
             }
-            this.$refs.input.currentValue = [dayjs ? start.toDate() : start, end]
+            const period = [dayjs ? start.toDate() : start, end]
+            if (isReturn) return period
+            this.$refs.input.currentValue = period
         },
         handlerPreselectRange(period) {
             const [start, end] = period
@@ -717,12 +730,25 @@ export default {
         left: $space-200 !important;
         right: $space-200;
         width: fit-content;
+        .mx-range-wrapper {
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+        .mx-datepicker-footer {
+            position: sticky;
+            bottom: 0;
+            background-color: $color-white;
+        }
     }
 
     .mx-calendar + .mx-calendar {
         border-left: none;
     }
 
+    .mx-range-wrapper {
+        align-items: center;
+    }
+
     .mx-calendar {
         width: 256px;
         padding: $space-200;
@@ -794,6 +820,14 @@ export default {
             > * {
                 @include child-indent-right($space-300);
             }
+            &-periods {
+                @include child-indent-right(0);
+                column-gap: $space-300;
+                row-gap: $space-100;
+                align-items: center;
+                display: flex;
+                flex-wrap: wrap;
+            }
             .mc-button {
                 @include child-indent-right($space-zero);
             }

package/src/patterns/McModal/McModal.vue

@@ -27,7 +27,7 @@
                 <slot />
             </div>
             <!-- @slot Слот футера -->
-            <div class="mc-modal__control"><slot name="footer" /><portal-target name="mcModalFooter" slim /></div>
+            <div ref="mcModalFooter" class="mc-modal__control"><slot name="footer" /><portal-target name="mcModalFooter" slim /></div>
         </div>
         <button v-if="arrowVisible" type="button" class="mc-modal__btn-back" @click.prevent="handleBack">
             <mc-svg-icon name="arrow_leftward" class="mc-modal__icon-back" />
@@ -133,6 +133,7 @@ export default {
         indent: {
             regular: 400,
             small: 150,
+            extra_small: 50,
         },
         footer: {
             button: {
@@ -168,6 +169,7 @@ export default {
             return {
                 '--mc-modal-padding': `var(--space-${this.indent.regular})`,
                 '--mc-modal-padding-small': `var(--space-${this.indent.small})`,
+                '--mc-modal-padding-extra-small': `var(--space-${this.indent.extra_small})`,
                 '--mc-modal-header-line-height': `var(--line-height-${this.header.title.line_height.regular})`,
                 '--mc-modal-header-line-height-small': `var(--line-height-${this.header.title.line_height.small})`,
                 '--mc-modal-button-height': `var(--size-${this.footer.button.regular})`,
@@ -236,19 +238,32 @@ export default {
         },
 
         calculateIndents() {
-            /* Если шапка уже маленькая, то отключаем при отключении сепаратора
-             * Иначе смотрим, чтобы отступ был > чем убираемые отступы, т.к. нет смысла сжимать шапку, если <
-             */
-            const indentDifferences =
-                (this.modal_params?.['--mc-modal-padding'] - this.modal_params?.['--mc-modal-padding-small']) * 3 +
-                this.modal_params?.['--mc-modal-padding-small']
-            const lineHeightDifferences =
-                this.modal_params?.['--mc-modal-header-line-height'] -
-                this.modal_params?.['--mc-modal-header-line-height-small']
-            const buttonDifferences =
-                this.modal_params?.['--mc-modal-button-height'] - this.modal_params?.['--mc-modal-button-height-small']
-            const sizeDifferences = indentDifferences + lineHeightDifferences + buttonDifferences
             if (!this.small_indents) {
+                /* Если шапка уже маленькая, то отключаем при отключении сепаратора
+                 * Иначе смотрим, чтобы отступ был > чем убираемые отступы, т.к. нет смысла сжимать шапку, если <
+                 * 1,2 - отступы в шапке уменьшаются с 32 до 12 сверху и снизу
+                 * 3 - отступы в футере: нижний уменьшается с 32 до 12
+                 * 4 - отступ в футере верхний уменьшается с 16 до 12
+                 * 5 - отступ в боди уменьшается с 16 до 4
+                 * итого (32 - 12) * 3 + 12 + 4 - тотал уменьшения отступов
+                 * если футер пустой, то умножаем на 2
+                 */
+                const totalBtns = this.$refs.mcModalFooter?.querySelectorAll('.mc-button')?.length
+                const smallerElementsAmount = totalBtns ? 3 : 2
+                const indentDifferences =
+                    (this.modal_params?.['--mc-modal-padding'] - this.modal_params?.['--mc-modal-padding-small']) *
+                        smallerElementsAmount +
+                    (this.modal_params?.['--mc-modal-padding-small'] +
+                        this.modal_params?.['--mc-modal-padding-extra-small'])
+                const lineHeightDifferences =
+                    this.modal_params?.['--mc-modal-header-line-height'] -
+                    this.modal_params?.['--mc-modal-header-line-height-small']
+                const buttonDifferences =
+                    this.modal_params?.['--mc-modal-button-height'] -
+                    this.modal_params?.['--mc-modal-button-height-small']
+                // Смотрим разницу размеров с учетом кол-ва кнопок в модалке + добавляем за каждую кнопку 1px погрешности для отображения бордера
+                const sizeDifferences =
+                    indentDifferences + lineHeightDifferences + buttonDifferences * totalBtns + totalBtns
                 const body = this.$refs.mcModalBody
                 this.can_shorten_modal = body?.scrollHeight - body?.clientHeight > sizeDifferences
             }

package/src/patterns/McSideBar/McSideBarButton/McSideBarButton.vue

@@ -24,6 +24,7 @@
                     v-if="info || withIndicator"
                     slot="icon-append"
                     variation="main"
+                    text-color="main-contrast"
                     class="mc-side-bar-button__chip"
                     :class="{ indicator: withIndicator }"
                 >

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

@@ -276,12 +276,12 @@ export default {
         }
         @include col-right-color($vxe-table-row-hover-background-color);
         &.row--current {
-            @include col-right-color($vxe-table-row-hover-current-background-color);
+            @include col-right-color(transparent);
         }
     }
     &.row--current {
         background-color: var(--color-main-alpha-10) !important;
-        @include col-right-color($vxe-table-row-current-background-color);
+        @include col-right-color(transparent);
     }
     // описка названия в библиотеке таблицы
     &.row--cheched {

package/src/styles/global.scss

@@ -123,12 +123,12 @@ a {
 
 ::selection {
   background: var(--color-main);
-  color: $color-white;
+  color: var(--color-main-contrast);
 }
 
 ::-moz-selection {
   background: var(--color-main);
-  color: $color-white;
+  color: var(--color-main-contrast);
 }
 
 input,
@@ -289,6 +289,7 @@ pre {
     #{'--color-'}#{$name}: #{$color};
   }
   // Default main project colors
+  --color-main-contrast: $color-white;
   --color-main: $color-purple;
   --color-main-dark: $color-hover-purple;
   @for $i from 1 through 10 {

package/src/tokens/gradients.scss

@@ -8,7 +8,7 @@ $gradient-blue: linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%); /* Нотиф
 $gradient-yellow: linear-gradient(180deg, #FEE41A 0%, #F89B35 100%); /* Столбики в графике 3 порядка */
 $gradient-green: linear-gradient(180deg, #C9DD4C 0%, #63BE7E 100%); /* Столбики в графике 2 порядка */
 $gradient-red: linear-gradient(180deg, #F26567 0%, #F79440 100%); /* Столбики в графике 1 порядка */
-$gradient-purple: linear-gradient(270deg, var(--color-main-dark) 0%, var(--color-main) 100%); /* Основной градиент для MCPay */
+$gradient-purple: linear-gradient(270deg, var(--color-main) 0%, var(--color-main-dark) 100%); /* Основной градиент для MCPay */
 $gradient-purple-pink: linear-gradient(90deg, var(--color-main) 2%, #fe6ffc 100%); /*Градиент промоакции*/
 $gradient-blue-purple: linear-gradient(90deg, #18bfe3 20%, var(--color-main) 70%); /*Градиент промоакции*/
 $gradient-dark-blue: linear-gradient(90deg, #5550EF 0%, var(--color-main) 100%); /*Градиент автоплатежей*/

package/src/utils/checkColor.js

@@ -1,38 +0,0 @@
-export function hexToRGB(hex, alpha, byArray = false) {
-    const r = parseInt(hex.slice(1, 3), 16)
-    const g = parseInt(hex.slice(3, 5), 16)
-    const b = parseInt(hex.slice(5, 7), 16)
-    if (byArray) return [r, g, b]
-    const rgb_color = `${r}, ${g}, ${b}`
-    return alpha ? `rgba(${rgb_color}, ${alpha})` : `rgb(${rgb_color})`
-}
-
-/**
- * Проверяем контрастность по формуле
- * https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-procedure
- * bgColor -
- * */
-export function checkContrastColor(colorName, bgColor) {
-    const RED = 0.2126
-    const GREEN = 0.7152
-    const BLUE = 0.0722
-    const GAMMA = 2.4
-
-    function luminance(r, g, b) {
-        const a = [r, g, b].map(v => {
-            v /= 255
-            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA)
-        })
-        return a[0] * RED + a[1] * GREEN + a[2] * BLUE
-    }
-
-    function contrast(rgb1, rgb2) {
-        const lum1 = luminance(...rgb2)
-        const lum2 = luminance(...rgb1)
-        const brightest = Math.max(lum1, lum2)
-        const darkest = Math.min(lum1, lum2)
-        return (brightest + 0.05) / (darkest + 0.05)
-    }
-    const color = getComputedStyle(document.querySelector(':root')).getPropertyValue(`--color-${colorName}`) || colorName
-    return contrast(hexToRGB(color, null, true), bgColor) < 4
-}