mediacube-ui 0.1.354 → 0.1.355

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.355](https://github.com/MediaCubeCo/mcui/compare/v0.1.354...v0.1.355) (2025-01-16)
+
 ### [0.1.354](https://github.com/MediaCubeCo/mcui/compare/v0.1.353...v0.1.354) (2025-01-15)
 
 ### [0.1.353](https://github.com/MediaCubeCo/mcui/compare/v0.1.352...v0.1.353) (2025-01-14)

package/package.json

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

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
             }