mediacube-ui 0.1.207 → 0.1.209

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.209](https://github.com/MediaCubeCo/mcui/compare/v0.1.208...v0.1.209) (2024-01-16)
+
+### [0.1.208](https://github.com/MediaCubeCo/mcui/compare/v0.1.207...v0.1.208) (2024-01-15)
+
 ### [0.1.207](https://github.com/MediaCubeCo/mcui/compare/v0.1.206...v0.1.207) (2024-01-12)
 
 ### [0.1.206](https://github.com/MediaCubeCo/mcui/compare/v0.1.205...v0.1.206) (2024-01-11)

package/package.json

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

package/src/elements/McButton/McButton.vue

@@ -398,9 +398,10 @@ export default {
                 : ''
             this.custom_background = null
         },
-        handleBlur() {
+        handleBlur(e) {
             this.$refs['mc-button'].blur()
-        }
+            this.$emit('blur', e)
+        },
     },
 }
 </script>

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

@@ -323,6 +323,7 @@ export default {
             searchValue: null,
             key: `field_select_${Date.now()}`,
             closest_scroll_element: null,
+            scroll_resize_observer: null,
         }
     },
     computed: {
@@ -461,6 +462,8 @@ export default {
         },
         handleClose() {
             this.closest_scroll_element?.removeEventListener('scroll', this.repositionDropDown)
+            this.scroll_resize_observer?.disconnect()
+            this.scroll_resize_observer = null
         },
         findClosestScrollElement(element) {
             if (!element) return document.documentElement
@@ -474,6 +477,8 @@ export default {
             // looking for closest scroll elemen to track select list position dynamically
             this.closest_scroll_element = this.findClosestScrollElement(this.$refs.field)
             this.closest_scroll_element.addEventListener('scroll', this.repositionDropDown)
+            this.scroll_resize_observer = new ResizeObserver(this.repositionDropDown)
+            this.scroll_resize_observer.observe(this.closest_scroll_element)
         },
         repositionDropDown() {
             const { top, height, width, left } = this.$el.getBoundingClientRect()
@@ -491,9 +496,14 @@ export default {
                 ref.$refs.list.style.left = `${left}px`
                 const title_height = document.querySelector('.mc-field-select__header').offsetHeight
                 const title_margin = 8
-                switch (this.openDirection) {
+                let openDirection = this.openDirection
+                if (openDirection === 'auto') openDirection = ref?.isAbove ? 'top' : 'bottom'
+                switch (openDirection) {
                     case 'top':
-                        ref.$refs.list.style.top = `${top + (this.hasTitle ? title_height + title_margin : 0) - 300}px`
+                        ref.$refs.list.style.top = `${top +
+                            (this.hasTitle ? title_height + title_margin : 0) -
+                            ref.$refs.list.getBoundingClientRect().height -
+                            8}px`
                         ref.$refs.list.style.bottom = 'auto'
                         break
                     case 'bottom':
@@ -746,6 +756,7 @@ export default {
             border: none;
             border-radius: $radius-150;
             box-shadow: $shadow-s;
+            transition: opacity $duration-s ease;
             overflow-y: auto;
             overflow-x: hidden;
             max-height: 300px;

package/src/elements/McTabs/McTabs/McTabs.vue

@@ -420,7 +420,7 @@ export default {
         .tabs-component-tabs {
             position: sticky !important;
             top: 0;
-            z-index: $z-index-sticky-tabs;
+            z-index: $z-index-sticky;
             background-color: $color-white;
         }
     }

package/src/patterns/McModal/McModal.vue

@@ -138,15 +138,15 @@ export default {
             button: {
                 regular: 600,
                 small: 500,
-            }
+            },
         },
         header: {
             title: {
                 line_height: {
                     regular: 300,
                     small: 250,
-                }
-            }
+                },
+            },
         },
     }),
     computed: {
@@ -235,22 +235,19 @@ 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'] - this.modal_params?.['--mc-modal-padding-small']) * 3
             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']
+                this.modal_params?.['--mc-modal-button-height'] - this.modal_params?.['--mc-modal-button-height-small']
             const sizeDifferences = indentDifferences + lineHeightDifferences + buttonDifferences
             if (!this.small_indents) {
-                const body =  this.$refs.mcModalBody
+                const body = this.$refs.mcModalBody
                 this.can_shorten_modal = body?.scrollHeight - body?.clientHeight > sizeDifferences
             }
         },
@@ -275,7 +272,7 @@ export default {
                     // Сепаратор появится если высота скролла будет > 2px
                     const offset = 2
                     this.scrolled_top = scrollTop > offset
-                    this.small_indents = this.scrolled_top  && this.can_shorten_modal
+                    this.small_indents = this.scrolled_top && this.can_shorten_modal
                     this.scrolled_bottom = scrollTop + clientHeight < scrollHeight - offset
                 },
                 scrolled ? 0 : 300,
@@ -467,6 +464,10 @@ export default {
             padding: $space-50 $space-400;
             overflow: visible;
         }
+        .mc-field-select {
+            position: relative;
+            z-index: 101;
+        }
     }
     &__inner {
         box-shadow: 0 6px 12px rgba(110, 110, 110, 0.61);