mediacube-ui 0.1.317 → 0.1.318

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.318](https://github.com/MediaCubeCo/mcui/compare/v0.1.317...v0.1.318) (2024-10-09)
+
 ### [0.1.317](https://github.com/MediaCubeCo/mcui/compare/v0.1.316...v0.1.317) (2024-10-04)
 
 ### [0.1.316](https://github.com/MediaCubeCo/mcui/compare/v0.1.315...v0.1.316) (2024-09-24)

package/package.json

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

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

@@ -431,12 +431,15 @@ export default {
                 'mc-field-select--error': this.errorText,
                 'mc-field-select--disabled': this.disabled,
                 [`mc-field-select--bg-${this.backgroundColor}`]: this.backgroundColor,
-                'mc-field-select--is-empty-options-list': this.isEmptyOptionsList || this.loading,
+                'mc-field-select--is-empty-options-list': this.isEmptyOptions,
                 'mc-field-select--with-preview': this.optionWithPreview,
                 'mc-field-select--max-height': this.maxHeight,
                 'mc-field-select--rtl': this.rtl,
             }
         },
+        isEmptyOptions() {
+            return this.isEmptyOptionsList || this.loading || this.computedOptions?.length === this._value?.length
+        },
         computedTitle() {
             return `${this.title}${this.required ? ' *' : ''}`
         },
@@ -659,18 +662,31 @@ export default {
                 this.custom_limit = Infinity
                 let child_width = 0
                 const parent = this.$refs[this.key]?.$refs?.tags?.firstChild
+                if (!this.value?.length) return
+                const limit_text_width = this.getLimitTextWidth() // Получаем ширину текста лимита
+                const total_width = +parent?.clientWidth - +limit_text_width
                 for (let i = 0; i < this.value?.length; i++) {
                     const children = parent?.children?.[i]
-                    const elemStyle = window.getComputedStyle(children)
-                    child_width += +children?.clientWidth + +parseInt(elemStyle.marginRight)
+                    const elem_style = window.getComputedStyle(children)
+                    child_width += children?.clientWidth + (parseInt(elem_style?.marginRight) || 0)
                     // считаем занимаемую дочерними элементами ширину, если превышает родительскую, то выходим из цикла и ставим лимит
-                    if (child_width > +parent?.clientWidth) {
+                    if (+child_width > +total_width) {
                         this.custom_limit = i
                         break
                     }
                 }
             })
         },
+        getLimitTextWidth() {
+            const temp_limit_element = document.createElement('div')
+            temp_limit_element.style.visibility = 'hidden'
+            temp_limit_element.style.position = 'absolute'
+            temp_limit_element.innerText = `+${this.value?.length}` // Устанавливаем текст лимита
+            document.body.appendChild(temp_limit_element)
+            const limit_text_width = temp_limit_element.clientWidth
+            document.body.removeChild(temp_limit_element)
+            return limit_text_width
+        },
         toggleOptions() {
             this.is_show_all_options = !this.is_show_all_options
         },
@@ -817,6 +833,7 @@ export default {
         }
 
         &__tags-wrap {
+            width: 100%;
             position: relative;
             padding-top: 4px;
             padding-bottom: 3px;