mediacube-ui 0.1.412 → 0.1.413

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.413](https://github.com/MediaCubeCo/mcui/compare/v0.1.412...v0.1.413) (2025-09-17)
+
 ### [0.1.412](https://github.com/MediaCubeCo/mcui/compare/v0.1.411...v0.1.412) (2025-09-17)
 
 ### [0.1.411](https://github.com/MediaCubeCo/mcui/compare/v0.1.410...v0.1.411) (2025-09-17)

package/package.json

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

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

@@ -28,7 +28,7 @@
                 </template>
                 <template slot="singleLabel" slot-scope="{ option }">
                     <mc-preview v-if="optionWithPreview" class="option__desc" size="l">
-                        <template v-if="option.icon || option.image" #left>
+                        <template v-if="option?.icon || option?.image" #left>
                             <mc-avatar v-if="option.image" :src="option.image" size="400" />
                             <mc-svg-icon v-else :name="option.icon" :color="option.iconColor || 'main'" size="400" />
                         </template>
@@ -77,7 +77,7 @@
                         {{ option.$groupLabel }}
                     </mc-title>
                     <mc-preview v-else-if="optionWithPreview || optionWithPreviewOnly" class="option__desc" size="l">
-                        <template v-if="option.icon || option.image" #left>
+                        <template v-if="option?.icon || option?.image" #left>
                             <mc-avatar v-if="option.image" :src="option.image" size="400" />
                             <mc-svg-icon v-else :name="option.icon" :color="option.iconColor || 'main'" size="400" />
                         </template>
@@ -419,7 +419,7 @@ 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 } : {}),
+                ...(this.collapsed ? { limit: this.is_show_all_options ? this.value?.length : this.custom_limit } : {}),
                 class: this.collapsed ? 'mc-field-select__limit' : '',
             }
         },
@@ -434,10 +434,10 @@ export default {
             }
         },
         limitText() {
-            return `+${+this.value.length - +this.custom_limit}`
+            return `+${+this.value?.length - +this.custom_limit}`
         },
         isShowLimitToggle() {
-            return this.collapsed && this.value.length > this.custom_limit
+            return this.collapsed && this.value?.length > this.custom_limit
         },
         hasTitle() {
             return !!this.title
@@ -492,7 +492,7 @@ export default {
                     options.push(...option[this.groupKeys.values])
                 }
             }
-            return this.isEmptyOptionsList || this.loading || options.length === this._value.length
+            return this.isEmptyOptionsList || this.loading || options?.length === this._value?.length
         },
         computedTitle() {
             return `${this.title}${this.required ? ' *' : ''}`
@@ -534,7 +534,7 @@ export default {
                             : this.computedOptions),
                     ]
                     let option = options.find(o => {
-                        if (o.value.hasOwnProperty('id') && o.value.id == value.id) {
+                        if (o.value?.hasOwnProperty('id') && o.value.id == value.id) {
                             return true
                         }
                         return o.value == value
@@ -591,7 +591,7 @@ export default {
         actualizeSavedOptions() {
             //Фильтруем локальные опции и оставляем только те, значения которых выбраны в селекте
             this.local_options = this.local_options.filter(lo =>
-                this.value.constructor === Array
+                this.value?.constructor === Array
                     ? this.value.map(v => String(v)).includes(String(lo.value))
                     : String(lo.value) === String(this.value),
             )
@@ -612,8 +612,8 @@ export default {
             this.initScroll()
         },
         handleClose() {
-            this.closest_scroll_element.removeEventListener('scroll', this.repositionDropDown)
-            this.scroll_resize_observer.disconnect()
+            this.closest_scroll_element?.removeEventListener('scroll', this.repositionDropDown)
+            this.scroll_resize_observer?.disconnect()
             this.scroll_resize_observer = null
         },
         findClosestScrollElement(element) {
@@ -637,9 +637,9 @@ export default {
             const ref = this.$refs[this.key]
             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
+            // Добавляем к позиции отступ visualViewport?.offsetTop, который добавляет iOs при открытии вирутальной клавиатуры
+            const iosViewportIndent = ios_devices?.some(device => navigator?.platform?.includes(device))
+                ? window.visualViewport?.offsetTop || 0
                 : 0
             // Высчитываем реальную позицию селекта относительно первого скроллящегося родителя
             const actualTop = top - scrollElementRect.top
@@ -652,7 +652,7 @@ export default {
                 const title_height = document.querySelector('.mc-field-select__header').offsetHeight
                 const title_margin = 8
                 let openDirection = this.openDirection
-                if (openDirection === 'auto') openDirection = ref.isAbove ? 'top' : 'bottom'
+                if (openDirection === 'auto') openDirection = ref?.isAbove ? 'top' : 'bottom'
                 switch (openDirection) {
                     case 'top':
                         ref.$refs.list.style.top = `${top +
@@ -724,14 +724,14 @@ export default {
             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 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 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)
+                    child_width += children?.clientWidth + (parseInt(elem_style?.marginRight) || 0)
                     // считаем занимаемую дочерними элементами ширину, если превышает родительскую, то выходим из цикла и ставим лимит
                     if (+child_width > +total_width) {
                         this.custom_limit = i
@@ -744,7 +744,7 @@ export default {
             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}` // Устанавливаем текст лимита
+            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)