mediacube-ui 0.1.302 → 0.1.304

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.304](https://github.com/MediaCubeCo/mcui/compare/v0.1.303...v0.1.304) (2024-08-07)
+
+### [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)

package/package.json

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

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,25 +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 = 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`
@@ -567,6 +564,10 @@ export default {
                         break
                 }
             }
+            else {
+                // прячем селект, если его не видно юзеру
+                return ref.deactivate()
+            }
         },
         handleChange(value) {
             /**

package/src/elements/McField/McFieldText/McFieldText.vue

@@ -49,8 +49,6 @@
                             v-on="listeners"
                             @input="prepareHandleInput"
                             @keydown="prepareHandleKeyDown"
-                            @focus="handleFocus"
-                            @blur="handleBlur"
                         />
                     </template>
                 </label>
@@ -628,14 +626,20 @@ export default {
                     this.setCaretPos(e.target, cursor_position + space_length, cursor_position + space_length)
                     break
                 }
-                case 'uppercase':
+                case 'uppercase': {
+                    const cursor_position = this.getCaretPos(e.target)?.start
                     value = value?.toUpperCase()
                     e.target.value = value
+                    this.setCaretPos(e.target, cursor_position, cursor_position)
                     break
-                case 'lowercase':
+                }
+                case 'lowercase': {
+                    const cursor_position = this.getCaretPos(e.target)?.start
                     value = value?.toLowerCase()
                     e.target.value = value
+                    this.setCaretPos(e.target, cursor_position, cursor_position)
                     break
+                }
                 case 'password':
                     const cursor_position = this.getCaretPos(e.target)?.start
                     value = value?.replace(/ /gm, '')
@@ -644,23 +648,14 @@ export default {
                     break
                 case 'phone_number':
                     if (value.length === 0) value = '+'
-                    value = value.replace(/[^+\d]/g, '')
+                    if (value.charAt(0) !== '+') value = '+' + value
+                    value = value.replace(/(?!^)\D/g, '')
                     e.target.value = value
                     break
             }
 
             this.handleInput(value)
         },
-        handleFocus(e) {
-            if (this.type === 'phone_number' && e.target.value.length === 0) {
-                e.target.value = '+'
-            }
-        },
-        handleBlur(e) {
-            if (this.type === 'phone_number' && e.target.value === '+') {
-                e.target.value = ''
-            }
-        },
         prepareHandleKeyDown(e) {
             switch (this.type) {
                 case 'amount_format':