mediacube-ui 0.1.347 → 0.1.349

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

@@ -0,0 +1,243 @@
+<template>
+    <div class="mc-side-bar-top" :class="`mc-side-bar-top--theme-${themeConfig.dropdownActivator}`">
+        <mc-preview v-if="!computedMenuApps" slot="activator">
+            <img
+                v-if="logoSrc"
+                slot="left"
+                class="mc-side-bar-top__img"
+                :src="logoSrc"
+                width="24"
+                height="24"
+                :alt="logoTitle"
+            />
+            <mc-title slot="top" weight="semi-bold" :variation="logoTitleVariation">
+                <template v-if="!compact">
+                    {{ logoTitle }}
+                    <slot slot="icon-append" name="title-append" />
+                </template>
+            </mc-title>
+        </mc-preview>
+        <mc-dropdown v-else v-model="dropIsOpen" :position="dropdownPosition">
+            <mc-preview slot="activator">
+                <img
+                    v-if="logoSrc"
+                    slot="left"
+                    class="mc-side-bar-top__img"
+                    :src="logoSrc"
+                    width="24"
+                    height="24"
+                    :alt="logoTitle"
+                />
+                <mc-svg-icon v-else-if="logoIcon" slot="left" class="rotate" :name="logoIcon" />
+                <mc-button
+                    slot="top"
+                    :variation="`${themeConfig.dropdownActivator}-link`"
+                    :size="compact ? 'l-compact' : 'l'"
+                    class="mc-side-bar-top__activator-btn"
+                >
+                    <mc-title v-if="!compact" weight="semi-bold" :variation="logoTitleVariation">
+                        {{ logoTitle }}
+                        <slot slot="icon-append" name="title-append" />
+                    </mc-title>
+                    <mc-svg-icon slot="icon-append" class="rotate" name="arrow_drop_down" color="gray" />
+                </mc-button>
+            </mc-preview>
+            <mc-dropdown-panel>
+                <mc-button
+                    v-for="menuAppsItem in computedMenuApps"
+                    :key="`menu-apps-item-${menuAppsItem.key}`"
+                    full-width
+                    text-align="left"
+                    variation="black-flat"
+                    :href="menuAppsItem.href"
+                    :to="menuAppsItem.to"
+                    :target="menuAppsItem.target"
+                    :is-active="menuAppsItem.isActive"
+                    :exact="menuAppsItem.exact"
+                >
+                    <mc-svg-icon v-if="menuAppsItem.icon" slot="icon-prepend" :name="menuAppsItem.icon" />
+                    <img
+                        v-else-if="menuAppsItem.image"
+                        slot="icon-prepend"
+                        :src="menuAppsItem.image"
+                        width="24"
+                        height="24"
+                        alt="service image"
+                    />
+                    {{ menuAppsItem.name }}
+                </mc-button>
+            </mc-dropdown-panel>
+        </mc-dropdown>
+    </div>
+</template>
+
+<script>
+import _XEUtils from 'xe-utils'
+import _isEmpty from 'lodash/isEmpty'
+import McDropdown from '../../McDropdown/McDropdown'
+import McDropdownPanel from '../../McDropdown/McDropdownPanel/McDropdownPanel'
+import McButton from '../../../elements/McButton/McButton'
+import McSvgIcon from '../../../elements/McSvgIcon/McSvgIcon'
+import McPreview from '../../McPreview/McPreview'
+import McTitle from '../../../elements/McTitle/McTitle'
+
+export default {
+    name: 'McSideBarTop',
+    components: {
+        McDropdown,
+        McDropdownPanel,
+        McButton,
+        McPreview,
+        McSvgIcon,
+        McTitle,
+    },
+    inject: ['provideData'],
+    props: {
+        /**
+         *  Меню приложений
+         *
+         */
+        menuApps: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         *  Название сервиса
+         *
+         */
+        logoTitle: {
+            type: String,
+            default: 'Dashboard',
+        },
+        /**
+         *  Размер текста названия сервиса
+         *
+         */
+        logoTitleVariation: {
+            type: String,
+            default: 'subtitle',
+        },
+        /**
+         *  Путь до изображения
+         */
+        logoSrc: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Имя иконки
+         *  заголовка
+         */
+        logoIcon: {
+            type: String,
+            default: '',
+        },
+        dropdownPosition: {
+            type: String,
+            default: 'left',
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            dropIsOpen: false,
+        }
+    },
+    computed: {
+        themeConfig() {
+            return this.provideData
+                ? this.provideData.currentThemeConfig
+                : {
+                      mode: 'black',
+                      className: 'mc-side-bar--color-theme-black',
+                      dropdownActivator: 'white',
+                      mainMenuLinks: {
+                          variable: 'gray-flat',
+                          secondaryColor: 'white',
+                      },
+                  }
+        },
+        computedMenuApps() {
+            if (_isEmpty(this.menuApps)) return null
+            const apps = []
+            this.menuApps.forEach(app => {
+                if (app.isVisible) {
+                    apps.push({
+                        key: _XEUtils.uniqueId(),
+                        ...app,
+                    })
+                }
+            })
+            return apps
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../../styles/mixins';
+@import '../../../tokens/colors';
+@import '../../../tokens/spacings';
+@import '../../../tokens/font-sizes';
+@import '../../../tokens/line-heights';
+@import '../../../tokens/sizes';
+.mc-side-bar-top {
+    $block-name: &;
+    @include reset-text-indents();
+    position: sticky;
+    top: -($space-250);
+    padding: $space-250 $space-100;
+    background: $color-white;
+    margin: -($space-250) (-($space-100)) $space-150 !important;
+    z-index: 2;
+    .mc-dropdown__toggle {
+        &:hover {
+            cursor: pointer;
+        }
+        .mc-preview__left {
+            margin-inline-end: 0;
+        }
+        .mc-button {
+            line-height: $line-height-250;
+            &__text {
+                margin-inline-start: $space-100;
+            }
+            &__append {
+                margin-inline-start: 0;
+            }
+            .rotate {
+                @include size($size-200);
+            }
+        }
+    }
+    &__img {
+        margin-inline-start: $space-100;
+    }
+    &__activator-btn {
+        font-size: $font-size-400;
+        line-height: $line-height-300;
+    }
+    &--theme-white {
+        background: $color-black;
+        .mc-preview__top {
+            .mc-title {
+                color: $color-white;
+            }
+        }
+    }
+    &--theme-black {
+        background: $color-white;
+        .mc-preview__top {
+            .mc-title {
+                color: $color-black;
+            }
+        }
+    }
+}
+</style>

package/src/patterns/McStack/McStack.vue

@@ -0,0 +1,163 @@
+<template>
+    <div ref="stack" class="mc-stack">
+        <div v-show="loaded" ref="mc-stack-body" class="mc-stack__body">
+            <slot />
+        </div>
+        <div v-if="more" ref="counter" class="mc-stack__counter">
+            {{ counterText }}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'McStack',
+    /**
+     *  Количество отрисованных
+     *  единиц списка
+     *  или число для макс. лимита
+     *  или строка "auto" для расчета по доступной ширине
+     */
+    props: {
+        limit: {
+            type: [Number, String],
+            default: null,
+        },
+        collapsed: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: () => ({
+        children: null,
+        more: 0,
+        loaded: false,
+        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) {
+                window.addEventListener('resize', this.calcLimit)
+                this.calcLimit()
+                // setTimeout из-за случаев, когда элемент рендерится с 0 шириной, а потом она устанавливается динамически
+                if (!this.$refs.stack?.clientWidth) {
+                    setTimeout(() => this.calcLimit(), 1)
+                }
+            } else {
+                this.toggleChilds(true, this.limit)
+            }
+        },
+        calcLimit(showAll, limit) {
+            if (showAll) 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
+                }
+            }
+            // Сравниваем переданный лимит с заново выставленным, если они не равны, то ререндерим потомков
+            if (this.custom_limit !== limit) this.toggleChilds(true, this.custom_limit)
+        },
+        setStyles(elem, opacity = 1, visibility = 'visible', position = 'relative') {
+            elem.style.opacity = opacity
+            elem.style.visibility = visibility
+            elem.style.position = position
+        },
+        toggleChilds(hide, limit = 0) {
+            this.loaded = true
+            this.more = 0
+            this.children = this.$refs?.['mc-stack-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++
+                }
+            }
+            // Передаем в $nextTick лимит для пересчета, т.к. рендерится counter, который занимает доп место и обрезает элементы
+            if (hide && this.isAutoLimit) this.$nextTick(() => this.calcLimit(false, limit))
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/mixins';
+@import '../../tokens/font-families';
+@import '../../tokens/font-weights';
+@import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
+@import '../../tokens/spacings';
+@import '../../tokens/colors';
+.mc-stack {
+    $block-name: &;
+
+    position: relative;
+    @include reset-text-indents();
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    &--collapsed {
+        #{$block-name}__body {
+            @include child-indent-right(-$space-200);
+            > * {
+                border: 2px solid $color-white;
+            }
+        }
+    }
+
+    &__body {
+        min-width: 0;
+        overflow: hidden;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        @include child-indent-right($space-150);
+        > * {
+            justify-content: center;
+        }
+    }
+
+    &__counter {
+        width: auto;
+        position: sticky;
+        right: 0;
+        margin-inline-start: $space-50;
+        flex: 0 0 auto;
+        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>