mediacube-ui 0.1.301 → 0.1.303

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.303](https://github.com/MediaCubeCo/mcui/compare/v0.1.302...v0.1.303) (2024-08-06)
+
+### [0.1.302](https://github.com/MediaCubeCo/mcui/compare/v0.1.301...v0.1.302) (2024-08-05)
+
 ### [0.1.301](https://github.com/MediaCubeCo/mcui/compare/v0.1.300...v0.1.301) (2024-08-01)
 
 ### [0.1.300](https://github.com/MediaCubeCo/mcui/compare/v0.1.299...v0.1.300) (2024-07-31)

package/package.json

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

package/src/elements/McDatePicker/McDatePicker.vue

@@ -685,6 +685,14 @@ export default {
     }
 }
 
+//Фикс Бага пакета, при клике на время сначала отрабатывает ховер с появлением скроллбара
+//Из-за этого на айфоне требуется даблклик для выбора времени
+.mx-scrollbar-track {
+    @media #{$media-mobile} {
+        opacity: 1 !important;
+    }
+}
+
 .mx-input-wrapper:hover .mx-icon-clear + .mx-icon-calendar {
     display: block;
 }

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

@@ -1,5 +1,5 @@
 <template>
-    <div ref="field" :dir="dir" :class="classes" :style="styles">
+    <div :ref="field_key" :dir="dir" :class="classes" :style="styles">
         <div :for="name" class="mc-field-select__header">
             <!-- @slot Слот заголовка -->
             <slot name="header">
@@ -335,6 +335,7 @@ export default {
         return {
             searchValue: null,
             key: `field_select_${Date.now()}`,
+            field_key: `field-${this.name}`,
             closest_scroll_element: null,
             scroll_resize_observer: null,
             local_options: [],
@@ -508,7 +509,6 @@ export default {
         },
         handleOpen() {
             if (!this.renderAbsoluteList) return
-            this.repositionDropDown()
             this.initScroll()
         },
         handleClose() {
@@ -526,24 +526,22 @@ export default {
         },
         initScroll() {
             // looking for closest scroll elemen to track select list position dynamically
-            this.closest_scroll_element = this.findClosestScrollElement(this.$refs.field)
+            this.closest_scroll_element = this.findClosestScrollElement(this.$refs[this.field_key])
             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()
+            const { top, bottom, height, width, left } = this.$el.getBoundingClientRect()
             const ref = this.$refs[this.key]
+            const ios_devices = ['iPhone', 'iPad']
             // Добавляем к позиции отступ visualViewport?.offsetTop, который добавляет iOs при открытии вирутальной клавиатуры
-            const iosViewportIndent = window.visualViewport?.offsetTop || 0
+            const iosViewportIndent = ios_devices?.some(device => navigator?.platform?.includes(device)) ? window.visualViewport?.offsetTop || 0 : 0
             // if field hides under scrolled element borders -> blur select to prevent overlap
             const scrolledHeight = this.closest_scroll_element?.scrollTop
-            const fieldHeght = this.$refs.field.clientHeight
-            const scrolledElementTop = this.closest_scroll_element?.getBoundingClientRect().top
-
-            if (scrolledHeight - fieldHeght - scrolledElementTop - top - iosViewportIndent > 0) return ref.deactivate()
-
-            if (ref) {
+            const fieldHeght = this.$refs[this.field_key]?.clientHeight || 0
+            const scrolledElementTop = this.closest_scroll_element?.getBoundingClientRect().top 
+            if (ref && top >= -height && bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
                 ref.$refs.list.style.width = `${width}px`
                 ref.$refs.list.style.position = 'fixed'
                 ref.$refs.list.style.left = `${left}px`
@@ -566,6 +564,10 @@ export default {
                         break
                 }
             }
+            else {
+                // прячем селект, если его не видно юзеру
+                return ref.deactivate()
+            }
         },
         handleChange(value) {
             /**
@@ -672,14 +674,6 @@ export default {
         }
     }
 
-    //Фикс Бага пакета, при клике на время сначала отрабатывает ховер с появлением скроллбара
-    //Из-за этого на айфоне требуется даблклик для выбора времени
-    .mx-scrollbar-track {
-        @media #{$media-mobile} {
-            opacity: 1 !important;
-        }
-    }
-
     .multiselect {
         &__placeholder {
             @include ellipsis();