mediacube-ui 0.1.346 → 0.1.347

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

@@ -1,238 +0,0 @@
-<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';
-.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

@@ -1,158 +0,0 @@
-<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';
-.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>