mediacube-ui 0.1.57 → 0.1.59

package/package.json

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

package/src/patterns/McSideBar/McSideBarTop/McSideBarTop.vue

@@ -51,6 +51,7 @@
                     variation="black-flat"
                     :href="menuAppsItem.href"
                     :to="menuAppsItem.to"
+                    :target="menuAppsItem.target"
                     :is-active="menuAppsItem.isActive"
                     :exact="menuAppsItem.exact"
                 >

package/src/patterns/McStack/McStack.vue

@@ -1,14 +1,26 @@
+<template>
+    <div class="mc-stack" ref="stack">
+        <div class="mc-stack__body" ref="body">
+            <slot />
+        </div>
+        <div v-if="more" class="mc-stack__counter" ref="counter">
+            {{ counterText }}
+        </div>
+    </div>
+</template>
+
 <script>
 export default {
     name: 'McStack',
-    functional: true,
     /**
      *  Количество отрисованных
      *  единиц списка
+     *  или число для макс. лимита
+     *  или строка "auto" для расчета по доступной ширине
      */
     props: {
         limit: {
-            type: Number,
+            type: [Number, String],
             default: null,
         },
         collapsed: {
@@ -16,59 +28,74 @@ export default {
             default: false,
         },
     },
-    render(h, { props, slots, data }) {
-        let items = slots()['default']
-        const renderItems = items ? items.filter(i => i.tag) : []
-        items = props.limit === null ? renderItems : renderItems.slice(0, props.limit)
-        const more = renderItems.length - items.length
-
-        const classes = {
-            'mc-stack': true,
-            'mc-stack--collapsed': props.collapsed,
-            ...(data.class || {}),
-        }
-
-        if (data.staticClass) {
-            const staticClasses = data.staticClass.split(' ')
-            staticClasses.forEach(c => {
-                if (c) {
-                    classes[c] = true
+    data: () => ({
+        children: null,
+        more: 0,
+        custom_limit: 0,
+    }),
+    computed: {
+        classes() {
+            return {
+                'mc-stack': true,
+                'mc-stack--collapsed': this.collapsed,
+            }
+        },
+        isAutoLimit() {
+            return this.limit === 'auto'
+        },
+        counterText() {
+            return `+${this.more}`
+        },
+    },
+    mounted() {
+        this.init()
+    },
+    beforeDestroy() {
+        if (this.isAutoLimit) window.removeEventListener('resize', this.calcLimit)
+    },
+    methods: {
+        init() {
+            if (this.isAutoLimit) {
+                this.calcLimit()
+                window.addEventListener('resize', this.calcLimit)
+            } else {
+                this.toggleChilds(true, this.limit)
+            }
+        },
+        calcLimit() {
+            this.toggleChilds()
+            this.custom_limit = Infinity
+            let childWidth = 0
+            // ширина родителя без учета счетчика
+            const parentWidth = +this.$refs.stack?.clientWidth - (+this.$refs.counter?.clientWidth || 0)
+            for (let i = 0; i < this.children?.length; i++) {
+                const elemStyle = window.getComputedStyle(this.children[i])
+                childWidth += (+this.children[i]?.clientWidth + +parseInt(elemStyle.marginRight))
+                // считаем занимаемую дочерними элементами ширину, если превышает родительскую, то выходим из цикла и ставим лимит
+                if (childWidth > parentWidth) {
+                    this.custom_limit = i
+                    break
                 }
-            })
-        }
-        let style = {}
-        if (data.staticStyle) {
-            style = data.staticStyle
-        }
-
-        return h(
-            'div',
-            {
-                ref: data.ref,
-                class: classes,
-                style,
-            },
-            [
-                h(
-                    'div',
-                    {
-                        ref: 'body',
-                        class: 'mc-stack__body',
-                    },
-                    items,
-                ),
-                more > 0
-                    ? h(
-                          'div',
-                          {
-                              ref: 'counter',
-                              class: 'mc-stack__counter',
-                          },
-                          [`+${more}`],
-                      )
-                    : null,
-            ],
-        )
+            }
+            this.toggleChilds(true, this.custom_limit)
+        },
+        setStyles(elem, opacity = 1, visibility = 'visible', position = 'initial') {
+            elem.style.opacity = opacity
+            elem.style.visibility = visibility
+            elem.style.position = position
+        },
+        toggleChilds(hide, limit = 0) {
+            this.more = 0
+            this.children = this.$refs.body.children
+            let elementsLimit = hide ? (limit - 1) : this.children.length
+            for (let i = 0; i < this.children?.length; i++) {
+                this.setStyles(this.children[i])
+                if (i > elementsLimit) {
+                    this.setStyles(this.children[i], 0, 'hidden', 'absolute')
+                    this.more++
+                }
+            }
+        },
     },
 }
 </script>
@@ -105,14 +132,16 @@ export default {
     }
 
     &__counter {
+        width: auto;
         position: sticky;
         right: 0;
         margin-left: $space-50;
         flex: 0 0 auto;
-        color: $color-gray;
-        font-family: $font-family-main;
         font-size: $font-size-200;
         line-height: $line-height-200;
+        color: $color-gray;
+        font-weight: $font-weight-semi-bold;
+        font-family: $font-family-main;
     }
 }
 </style>