mediacube-ui 0.1.316 → 0.1.318

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.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)
 
 ### [0.1.315](https://github.com/MediaCubeCo/mcui/compare/v0.1.314...v0.1.315) (2024-09-16)

package/package.json

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

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

@@ -18,6 +18,14 @@
                 @open="handleOpen"
                 @close="handleClose"
             >
+                <template v-if="isShowLimitToggle" slot="caret">
+                    <div :class="computedCaretClass" @click="toggleOptions" />
+                </template>
+                <template v-if="collapsed && !is_show_all_options" slot="limit">
+                    <mc-title variation="body" class="mc-field-select__limit-text">
+                        {{ limitText }}
+                    </mc-title>
+                </template>
                 <template slot="singleLabel" slot-scope="{ option }">
                     <mc-preview v-if="optionWithPreview" class="option__desc" size="l">
                         <mc-svg-icon slot="left" :name="option.icon" size="400" />
@@ -330,6 +338,13 @@ export default {
             type: Boolean,
             default: false,
         },
+        /**
+         * Ограничить ли отображение выбранных опций
+         */
+        collapsed: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -339,6 +354,8 @@ export default {
             closest_scroll_element: null,
             scroll_resize_observer: null,
             local_options: [],
+            custom_limit: 0,
+            is_show_all_options: false,
         }
     },
     computed: {
@@ -348,7 +365,7 @@ export default {
                 trackBy: 'value',
                 value: this._value,
                 loading: this.loading,
-                options: this.computedOptions,
+                options: this.collapsed ? this.visibleOptions : this.computedOptions,
                 searchable: this.searchable,
                 showLabels: this.showLabels,
                 multiple: this.multiple,
@@ -364,8 +381,26 @@ export default {
                 tabindex: +this.tabindex,
                 ...(this.groupKeys ? { groupLabel: this.groupKeys.label } : {}),
                 ...(this.groupKeys ? { groupValues: this.groupKeys.values } : {}),
+                ...(this.collapsed ? { limit: this.is_show_all_options ? this.value?.length : this.custom_limit } : {}),
+                class: this.collapsed ? 'mc-field-select__limit' : '',
+            }
+        },
+        visibleOptions() {
+            return this.is_show_all_options ? this.computedOptions : this.computedOptions.slice(0, this.custom_limit)
+        },
+        computedCaretClass() {
+            return {
+                multiselect__select: true,
+                'mc-field-select__limit-toggle': true,
+                'mc-field-select__limit-toggle--close': this.is_show_all_options,
             }
         },
+        limitText() {
+            return `+${+this.value?.length - +this.custom_limit}`
+        },
+        isShowLimitToggle() {
+            return this.collapsed && this.value?.length > this.custom_limit
+        },
         hasTitle() {
             return !!this.title
         },
@@ -396,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 ? ' *' : ''}`
         },
@@ -483,6 +521,7 @@ export default {
                 //Пушим все входящие опции в локальные опции
                 this.local_options.push(...val)
                 this.actualizeSavedOptions()
+                this.calcLimit()
             },
         },
         value: {
@@ -490,6 +529,7 @@ export default {
             immediate: true,
             handler() {
                 this.actualizeSavedOptions()
+                this.calcLimit()
             },
         },
     },
@@ -537,11 +577,10 @@ export default {
             if (!ref) return
             const ios_devices = ['iPhone', 'iPad']
             // Добавляем к позиции отступ visualViewport?.offsetTop, который добавляет iOs при открытии вирутальной клавиатуры
-            const iosViewportIndent = ios_devices?.some(device => navigator?.platform?.includes(device)) ? window.visualViewport?.offsetTop || 0 : 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[this.field_key]?.clientHeight || 0
-            const scrolledElementTop = this.closest_scroll_element?.getBoundingClientRect().top 
             if (top >= -height && bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
                 ref.$refs.list.style.width = `${width}px`
                 ref.$refs.list.style.position = 'fixed'
@@ -564,8 +603,10 @@ export default {
                         ref.$refs.list.style.top = `${top + iosViewportIndent + height}px`
                         break
                 }
-            }
-            else {
+                // Задержка для предотвращения закрытия выпадающего списка на android
+                const is_android = /Android/i.test(navigator.userAgent)
+                is_android && setTimeout(() => ref.activate(), 100) // переактивировать, если выпадающий список должен быть открыт
+            } else {
                 // прячем селект, если его не видно юзеру
                 return ref.deactivate()
             }
@@ -612,6 +653,43 @@ export default {
              */
             this.$emit('input', value)
         },
+        /**
+         * Вычисляем custom_limit, которое ограничивает кол-во дочерних элементов внутри родительского, чтобы они не превышали его ширину
+         * */
+        calcLimit() {
+            if (!this.collapsed) return
+            this.$nextTick(() => {
+                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 elem_style = window.getComputedStyle(children)
+                    child_width += children?.clientWidth + (parseInt(elem_style?.marginRight) || 0)
+                    // считаем занимаемую дочерними элементами ширину, если превышает родительскую, то выходим из цикла и ставим лимит
+                    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
+        },
     },
 }
 </script>
@@ -755,6 +833,7 @@ export default {
         }
 
         &__tags-wrap {
+            width: 100%;
             position: relative;
             padding-top: 4px;
             padding-bottom: 3px;
@@ -976,5 +1055,27 @@ export default {
     &--rtl {
         direction: rtl;
     }
+
+    &__limit {
+        &-text {
+            position: relative;
+            z-index: 1;
+            width: auto;
+        }
+        &-toggle {
+            pointer-events: auto;
+            &:before {
+                border-color: black transparent transparent !important;
+            }
+            &--close {
+                transform: rotate(180deg);
+            }
+        }
+        .multiselect__tags {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
 }
 </style>