mediacube-ui 0.1.346 → 0.1.347

package/src/patterns/McOverlay/McOverlay.vue

@@ -1,78 +0,0 @@
-<template>
-    <section ref="overlay" class="mc-overlay" :style="styles">
-        <div class="mc-overlay__background" />
-        <section class="mc-overlay__spinner" />
-    </section>
-</template>
-
-<script>
-export default {
-    name: 'McOverlaySecond',
-    props: {
-        size: {
-            type: [String, Number],
-            default: 500,
-        },
-        backgroundColor: {
-            type: String,
-            default: 'white',
-        },
-    },
-    computed: {
-        styles() {
-            return {
-                '--mc-overlay-color': this.backgroundColor && `var(--color-${this.backgroundColor})`,
-                '--mc-overlay-spinner-size': this.size && `var(--size-${this.size})`,
-            }
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../tokens/z-indexes';
-.mc-overlay {
-    $block-name: &;
-    --mc-overlay-spinner-size: initial;
-    --mc-overlay-color: initial;
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: $z-index-overlay-page;
-    &__background {
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--mc-overlay-color);
-        opacity: 0.85;
-    }
-    &__spinner {
-        display: block;
-        border: 2px solid $color-purple;
-        border-inline-start-color: transparent;
-        border-radius: 50%;
-        animation: rotate 1.5s infinite linear;
-
-        width: var(--mc-overlay-spinner-size);
-        min-width: var(--mc-overlay-spinner-size);
-        height: var(--mc-overlay-spinner-size);
-        min-height: var(--mc-overlay-spinner-size);
-
-        @keyframes rotate {
-            from {
-                transform: rotate(0deg);
-            }
-            to {
-                transform: rotate(360deg);
-            }
-        }
-    }
-}
-</style>

package/src/patterns/McPreview/McPreview.vue

@@ -1,118 +0,0 @@
-<template>
-    <section :class="classes">
-        <div v-if="$slots.left" class="mc-preview__left">
-            <!-- @slot Слот слева -->
-            <slot name="left" />
-        </div>
-        <div class="mc-preview__center">
-            <div class="mc-preview__top">
-                <!-- @slot Слот сверху -->
-                <slot name="top" />
-            </div>
-            <div class="mc-preview__bottom">
-                <!-- @slot Слот внизу -->
-                <slot name="bottom" />
-            </div>
-        </div>
-        <div v-if="$slots.right" class="mc-preview__right">
-            <!-- @slot Слот справа -->
-            <slot name="right" />
-        </div>
-    </section>
-</template>
-
-<script>
-export default {
-    name: 'McPreview',
-    props: {
-        /**
-         *  Размеры:
-         *  `s, m, l`
-         */
-        size: {
-            type: String,
-            default: 'm',
-        },
-    },
-    computed: {
-        classes() {
-            return {
-                'mc-preview': true,
-                [`mc-preview--size-${this.size}`]: this.size,
-            }
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-.mc-preview {
-    $block-name: &;
-
-    @include reset-text-indents();
-    display: flex;
-    flex-wrap: nowrap;
-    max-width: 100%;
-
-    &__left {
-        flex: 0 0 auto;
-        &:empty {
-            display: none;
-        }
-    }
-
-    &__center {
-        @include layout-flex-fix();
-        flex: 1 1 auto;
-        align-self: center;
-    }
-
-    &__top {
-        &:empty {
-            display: none;
-        }
-    }
-
-    &__bottom {
-        &:empty {
-            display: none;
-        }
-    }
-
-    &__right {
-        flex: 0 0 auto;
-        &:empty {
-            display: none;
-        }
-    }
-    @mixin previewIndents($indent, $bottom: '') {
-        #{$block-name}__left {
-            margin-inline-end: $indent;
-        }
-        #{$block-name}__right {
-            margin-inline-start: $indent;
-        }
-        @if $bottom {
-            #{$block-name}__bottom {
-                margin-top: $bottom;
-            }
-        }
-    }
-
-    &--size {
-        &-s {
-            @include previewIndents($space-50);
-        }
-        &-m {
-            @include previewIndents($space-100);
-        }
-        &-l {
-            @include previewIndents($space-150, $space-50);
-        }
-        &-xl {
-            @include previewIndents($space-200, $space-50);
-        }
-    }
-}
-</style>

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

@@ -1,387 +0,0 @@
-<template>
-    <article ref="sidebar-wrapper" class="mc-side-bar-wrapper" :style="wrapperStyles">
-        <section class="mc-side-bar-wrapper__backdrop" :class="backdropClasses" @click.stop.prevent="handleToggleSize">
-            <div ref="sidebar" class="mc-side-bar" :class="sideBarClasses" :style="sideBarStyles" @click.stop>
-                <mc-side-bar-top
-                    :logo-title="logoTitle"
-                    :logo-title-variation="logoTitleVariation"
-                    :logo-src="logoSrc"
-                    :logo-icon="logoIcon"
-                    :compact="prettyCompact"
-                    :menu-apps="menuApps"
-                >
-                    <slot slot="title-append" name="title-append" />
-                </mc-side-bar-top>
-                <section class="mc-side-bar__scrollable-container">
-                    <mc-side-bar-center
-                        :title="menuMainTitle"
-                        :menu-main="menuMain"
-                        :counts="counts"
-                        :chatra-config="chatraConfig"
-                        :user="user"
-                        :compact="prettyCompact"
-                        @handlerChatraClick="$emit('chatraClick')"
-                        @open-side-bar="openSideBar"
-                    />
-                    <mc-side-bar-bottom
-                        :hide-text="hideText"
-                        :compact="prettyCompact"
-                        :hidden-mode="hiddenMode"
-                        :sidebar-width="width"
-                        @toggle-size="handleToggleSize"
-                    >
-                        <slot slot="bottom-message" name="bottom-message" />
-                    </mc-side-bar-bottom>
-                </section>
-            </div>
-        </section>
-    </article>
-</template>
-
-<script>
-import McSideBarTop from '../McSideBarTop/McSideBarTop'
-import McSideBarCenter from '../McSideBarCenter/McSideBarCenter'
-import McSideBarBottom from '../McSideBarBottom/McSideBarBottom'
-export default {
-    name: 'McSideBar',
-    components: {
-        McSideBarTop,
-        McSideBarCenter,
-        McSideBarBottom,
-    },
-    provide() {
-        const provideData = {}
-        const properties = ['currentThemeConfig']
-        properties.forEach(property => {
-            Object.defineProperty(provideData, property, {
-                enumerable: true,
-                get: () => this[property],
-            })
-        })
-        return { provideData }
-    },
-    props: {
-        /**
-         *  Название сервиса
-         *
-         */
-        logoTitle: {
-            type: String,
-            default: 'Dashboard',
-        },
-        /**
-         *  Размер текста названия сервиса
-         *
-         */
-        logoTitleVariation: {
-            type: String,
-            default: 'subtitle',
-        },
-        /**
-         *  Путь до изображения
-         *
-         */
-        logoSrc: {
-            type: String,
-            default: '',
-        },
-        /**
-         *  Имя иконки
-         *  заголовка
-         */
-        logoIcon: {
-            type: String,
-            default: '',
-        },
-        /**
-         *  Заголовок
-         *  центрального блока
-         */
-        menuMainTitle: {
-            type: String,
-            default: '',
-        },
-        /**
-         *  Центральное меню
-         *
-         */
-        menuMain: {
-            type: Array,
-            default: () => [],
-        },
-        /**
-         *  Каунты для пунктов меню
-         *  вставляются в пункты с ключем 'count_key'
-         *
-         */
-        counts: {
-            type: Object,
-            default: () => ({}),
-        },
-        /**
-         *  Меню приложений
-         *
-         */
-        menuApps: {
-            type: Array,
-            default: () => [],
-        },
-        /**
-         *  Id чатры
-         *
-         */
-        chatraConfig: {
-            type: Object,
-            default: null,
-        },
-        /**
-         *  Данные пользователя
-         *
-         */
-        user: {
-            type: Object,
-            default: null,
-        },
-        /**
-         *  Текст кнопки
-         *  сворачивания меню
-         */
-        hideText: {
-            type: String,
-            default: '',
-        },
-        /**
-         *  Компактный вид
-         */
-        compact: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Цветовая схема
-         */
-        variable: {
-            type: String,
-            default: 'black',
-        },
-        /**
-         * Ширина сайдбара
-         */
-        width: {
-            type: String,
-            default: '216px',
-        },
-        /**
-         * Ширина компактного сайдбара
-         */
-        compactWidth: {
-            type: String,
-            default: '58px',
-        },
-        /**
-         * Брейкпоинт после которого
-         * сайдбар становится абсолютным и появляется затемненный бэкдроп
-         */
-        absoluteBreakpoint: {
-            type: Number,
-            default: null,
-        },
-        /**
-         * Брейкпоинт после которого
-         * сайдбар полностью прячется
-         */
-        hiddenBreakpoint: {
-            type: Number,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            isHidden: false,
-            prettyCompact: this.compact,
-            hasCompactClass: this.compact,
-            windowWidth: null,
-        }
-    },
-    computed: {
-        sideBarClasses() {
-            return {
-                'mc-side-bar--compact': this.hasCompactClass,
-                [this.currentThemeConfig.className]: true,
-            }
-        },
-        sideBarStyles() {
-            return {
-                overflow: `${this.isHidden ? 'hidden' : 'visible'}`,
-                width: this.hasCompactClass ? this.compactWidth : this.width,
-            }
-        },
-        wrapperStyles() {
-            const position =
-                this.hiddenMode && this.hasCompactClass
-                    ? {
-                          position: 'absolute',
-                          left: `-${this.compactWidth}`,
-                      }
-                    : {}
-
-            let width = {
-                width: this.hasCompactClass ? this.compactWidth : this.width,
-            }
-            if (this.absoluteMode) {
-                width.width = this.compactWidth
-            }
-            if (this.hiddenMode) {
-                width.width = '0px'
-            }
-            return {
-                ...width,
-                ...position,
-            }
-        },
-        backdropClasses() {
-            return {
-                'mc-side-bar-wrapper__backdrop--full-width':
-                    !this.hasCompactClass && this.windowWidth < this.absoluteBreakpoint,
-            }
-        },
-        absoluteMode() {
-            return this.absoluteBreakpoint && this.windowWidth < this.absoluteBreakpoint
-        },
-        hiddenMode() {
-            return this.hiddenBreakpoint && this.windowWidth < this.hiddenBreakpoint
-        },
-        currentThemeConfig() {
-            return this.sidebarThemeConfig[this.variable] || this.sidebarThemeConfig['black']
-        },
-        sidebarThemeConfig() {
-            return {
-                black: {
-                    mode: 'black',
-                    className: 'mc-side-bar--color-theme-black',
-                    dropdownActivator: 'white',
-                    mainMenuLinks: {
-                        variable: 'gray-flat',
-                        secondaryColor: 'white',
-                    },
-                    closeButton: {
-                        variable: 'gray-link',
-                        secondaryColor: 'white',
-                    },
-                },
-                white: {
-                    mode: 'white',
-                    className: 'mc-side-bar--color-theme-white',
-                    dropdownActivator: 'black',
-                    mainMenuLinks: {
-                        variable: 'black-flat',
-                        secondaryColor: 'purple',
-                    },
-                    closeButton: {
-                        variable: 'black-link',
-                        secondaryColor: 'purple',
-                    },
-                },
-            }
-        },
-    },
-    watch: {
-        hasCompactClass(newValue) {
-            if (newValue) {
-                setTimeout(() => {
-                    this.prettyCompact = newValue
-                }, 280)
-            } else {
-                this.prettyCompact = newValue
-            }
-            this.isHidden = true
-            setTimeout(() => {
-                this.isHidden = false
-            }, 280)
-        },
-        compact(newValue) {
-            this.hasCompactClass = newValue
-        },
-        absoluteMode: {
-            immediate: true,
-            handler(val) {
-                this.$emit('absolute-mode', val)
-            },
-        },
-        hiddenMode: {
-            immediate: true,
-            handler(val) {
-                this.$emit('hidden-mode', val)
-            },
-        },
-    },
-    mounted() {
-        if (this.absoluteBreakpoint || (this.hiddenBreakpoint && window)) {
-            this.resize()
-            window.addEventListener('resize', this.resize)
-        }
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.resize)
-    },
-    methods: {
-        handleToggleSize() {
-            this.hasCompactClass = !this.hasCompactClass
-            this.$emit('compact', this.hasCompactClass)
-        },
-        openSideBar() {
-            this.hasCompactClass = false
-            this.$emit('compact', this.hasCompactClass)
-        },
-        resize() {
-            this.windowWidth = window.innerWidth
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-.mc-side-bar {
-    $block-name: &;
-
-    display: flex;
-    flex-direction: column;
-    padding: $space-250 $space-100 $space-400;
-    transition: width 300ms ease;
-    overflow-x: hidden;
-    overflow-y: auto;
-    @include child-indent-bottom($space-400);
-    &--color-theme-black {
-        background-color: $color-black;
-    }
-    &--color-theme-white {
-        background-color: $color-white;
-        border-inline-end: 1px solid $color-hover-gray;
-    }
-    &__scrollable-container {
-        @include hide-scrollbar;
-        overflow-y: auto;
-        overflow-x: hidden;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-    &-wrapper {
-        height: 100%;
-        transition: width 300ms ease;
-        &__backdrop {
-            position: absolute;
-            background-color: rgba($color-black, 0.6);
-            z-index: 25;
-            height: inherit;
-            .mc-side-bar {
-                height: inherit;
-            }
-            &--full-width {
-                width: 100%;
-            }
-        }
-    }
-}
-</style>

package/src/patterns/McSideBar/McSideBarBottom/McSideBarBottom.vue

@@ -1,125 +0,0 @@
-<template>
-    <div class="mc-side-bar-bottom" :class="classes">
-        <div
-            v-if="!compact && $slots['bottom-message']"
-            class="mc-side-bar-bottom__slot-message"
-            :style="messageStyles"
-        >
-            <slot name="bottom-message" />
-        </div>
-        <mc-side-bar-button
-            v-if="!hiddenMode"
-            class="mc-side-bar-bottom__hide-button"
-            icon="arrow_backward"
-            :title="hideText"
-            :compact="compact"
-            :variation="closeButtonProps.variable"
-            :secondary-color="closeButtonProps.secondaryColor"
-            @click="handleClick"
-        />
-    </div>
-</template>
-
-<script>
-import McSideBarButton from '../McSideBarButton/McSideBarButton'
-export default {
-    name: 'McSideBarBottom',
-    components: {
-        McSideBarButton,
-    },
-    inject: ['provideData'],
-    props: {
-        /**
-         *  Текст кнопки
-         *  сворачивания меню
-         */
-        hideText: {
-            type: String,
-            default: '',
-        },
-        /**
-         *  Компактный вид
-         */
-        compact: {
-            type: Boolean,
-            default: false,
-        },
-        hiddenMode: {
-            type: Boolean,
-            default: false,
-        },
-        sidebarWidth: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            hasCompactClass: this.compact,
-        }
-    },
-    computed: {
-        closeButtonProps() {
-            return this.provideData?.currentThemeConfig?.closeButton || {}
-        },
-        classes() {
-            return {
-                'mc-side-bar-bottom--compact': this.hasCompactClass,
-            }
-        },
-        messageStyles() {
-            return {
-                minWidth: this.sidebarWidth,
-            }
-        },
-    },
-    watch: {
-        compact(newValue) {
-            this.hasCompactClass = newValue
-        },
-    },
-    methods: {
-        handleClick() {
-            if (this.hasCompactClass !== this.compact) return
-            this.$emit('toggle-size', !this.compact)
-            this.hasCompactClass = !this.hasCompactClass
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../tokens/durations';
-.mc-side-bar-bottom {
-    $block-name: &;
-
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    justify-content: flex-end;
-    min-height: max-content;
-
-    &__hide-button {
-        .mc-side-bar-button__icon {
-            transition: transform $duration-s;
-        }
-    }
-
-    &--compact {
-        #{$block-name}__hide-button {
-            .mc-side-bar-button__icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
-    &__slot-message {
-        margin-inline-start: -$space-100;
-        margin-inline-end: -$space-100;
-        padding-inline-start: $space-100;
-        padding-inline-end: $space-100;
-        & + * {
-            margin-top: $space-500;
-        }
-    }
-}
-</style>